Shopifyアプリの開発入門！開発手順や開発言語、事例を紹介

Shopifyは標準機能だけでも、ECサイト運営に必要な機能が備わっていますが、アプリを活用するとさらに効率よく、使いやすい仕様にカスタマイズできます。Shopifyの公式アプリストアには8,000種類ものアプリが揃っており、必要に応じてアプリを選び、インストール可能です。

そうはいっても「こんなアプリがほしい」と思っても、あなたの理想を満たすアプリがアプリストアにはないときもあります。「こんなアプリがあったらいいのに」という気持ちを実現できるのが、Shopifyのアプリ開発です。

この記事ではShopifyアプリ開発の手順や準備、開発ツール、注意点などをまとめました。Shopifyアプリの開発事例も紹介しているので、アプリの開発をご検討中の方はぜひ参考にしてください。

Shopifyアプリは3種類

Shopifyアプリは、Shopifyの標準機能にはない機能を追加して、自社サイトの効率化とユーザーへのサービスを向上させる拡張機能です。Shopifyのアプリは、以下の3種類に分類されています。

• 公開アプリ
• カスタムアプリ
• 下書きアプリ

それぞれ特徴が異なるため、自社のニーズに合わせて最適なアプリを選び、開発を進めましょう。

公開アプリ

公開アプリとは、Shopifyアプリストア上に公開されるアプリです。Shopifyを利用する事業者なら誰でも利用可能で、幅広いユーザーに提供できるのが特徴です。

公開アプリは、Shopifyアプリストアからインストールできる「登録アプリ」と、開発者のウェブサイトからインストールできる「未登録アプリ」の2種類があります。どちらもShopifyのアプリ審査に合格する必要があります。

また、アプリの料金は無料・有料の2通りです。有料アプリの場合は、登録後一定期間のみの無料期間を設けると、導入のハードルが下がって使ってもらいやすくなります。自社でアプリ開発を行い、有料でアプリストアに公開すれば報酬を得ることも可能です。

カスタムアプリ

カスタムアプリとは、Shopifyアプリストアに公開せずに特定のストア向けにShopifyパートナーが開発するアプリです。独自のニーズに合った機能やAPI連携を設定できるため、自社ストアだけのオリジナル機能を搭載したい場合におすすめです。

アプリのインストールには、アクセスするためのURLが必要です。URLは一般公開されていないため、限定したストアのみ使用できます。ShopifyパートナーがURLを発行し、マーチャントに送信すると使えるようになります。

また、アプリ開発を外注する場合は、ストアの管理画面にログインせずアプリ開発ができるためセキュリティ面でも安心です。

下書きアプリ

下書きアプリは、新しい機能や設定を開発者が試すための環境として使用されます。公開アプリとカスタムアプリが実際のユーザー向けに提供されるのに対して、下書きアプリは開発者や内部チームがアプリの機能や動作を確認し、最終的な公開前のテストを行うためのものです。

機能追加やバグ修正の段階で利用し、本番環境に影響を与えずに安全に開発を進められます。Shopifyの審査後、あるいはカスタムアプリに変換された後に、アプリストアにインストールできるようになります。

Shopifyアプリの開発手順

Shopifyアプリの開発手順は、スムーズなアプリ作成のための重要なステップです。以下の手順で進めていきましょう。

1. Shopifyパートナーアカウントの登録
2. 開発ストアの作成
3. アプリを作成
4. APIの資格とシークレットキー取得
5. アプリのテスト

アプリを開発する方だけでなく、アプリ開発の外注をご検討中の方も手順を理解しておくと、スムーズに依頼できます。

Shopifyパートナーアカウントの登録

まずは、Shopifyパートナーアカウントを作成しましょう。Shopifyストア登録の際に使用したメールアドレスで作成します。アカウントを持っている場合も、パートナーアカウントを設定すれば、パートナー向けのアプリの追加や専用の管理画面にアクセス可能です。

Shopifyパートナーアカウントに登録後、専用の管理画面で「アプリを作成」を選択します。なお、Shopifyパートナーには自社サイトのドメインに「Shopify」の文字を使用したり、Shopifyに関するキーワードで広告を打ったりすることを禁じる利用規約があります。Shopifyパートナーに登録する前に、必ず利用規約を確認しましょう。

開発ストアの作成

開発専用のストアを作成して、アプリの開発・テスト環境を整えましょう。本番環境とは別にストアを用意することで、アプリのテストや変更で実際の店舗に影響を与えないようにします。

Shopifyパートナーの管理画面の手順は以下の通りです。

1. ストア管理画面で「ストアを追加」をクリックする
2. ストアタイプは「開発ストアを作成」を選択する
3. ストア名やストアURLなど必要な情報を入力する
4. 「開発ストアを作成」をクリックする

ここまで進めると開発ストアの設定画面に遷移します。設定ガイドの順番通りに必要な情報を入力していきましょう。

アプリを作成

Shopifyアプリを作成するときは、Shopifyパートナーズにログインして、ダッシュボードのアプリ管理画面から「アプリを作成」をクリックしましょう。

アプリ名を入力して「作成」をクリックすると、作成したアプリの管理画面に遷移します。

APIの資格とシークレットキー取得

Shopifyストアとアプリを連携するには、APIキーとシークレットキーを取得しなければいけません。APIキーとシークレットキーは、アプリ名を入力してアプリを作成すると「クライアント資格情報」の欄に自動的に生成されます。なお、不正アクセスの恐れがあるため、外部に流出しないように慎重に扱わないといけません。

アプリを開発する

ここまで準備ができたらShopifyパートナーのダッシュボードで、アプリ開発を行いましょう。Shopifyでは下記のようなShopify APIが提供されているので、APIを組み合わせてアプリを開発していきます。

アプリのテスト

開発が完了したら、開発ストアにインストールしてテストし、必要に応じて修正します。Shopifyパートナーの管理画面にある「開発ストアでテストします」をクリックして、エラーが表示されなければ動作確認完了です。公開アプリを開発する場合は、公開アプリの要件を満たしているかどうかも確認しなければいけません。

Shopifyアプリの開発環境準備のポイント

Shopifyアプリの開発を進めるには、適切な開発環境の準備が欠かせません。Shopifyのアプリ開発に必要な要素を見ていきましょう。

プログラミング言語

Shopifyアプリを開発するには、プログラミング言語の知識が必須です。使用できるプログラミング言語の種類に制限はありませんが、Shopifyのアプリ開発でよく使われるプログラミング言語を紹介します。

Ruby

Shopifyが提供するコマンドラインインターフェース「Shopify CLI」では、Ruby on Railsを使用することで、Shopifyアプリを素早く作成できます。

また、ShopifyにはRuby用のライブラリが公開されています。柔軟でシンプルな作りなので、Webアプリの開発におすすめです。

Liquid

Liquidは、Rubyで開発したShopify独自のテンプレート言語です。ストアのデザインや表示をカスタマイズする際に活用できます。テンプレート内で｛％…％｝や｛｛…｝｝といったタグを使用し、商品情報やカート内のアイテムなどを動的に表示できます。

Python

Pythonは、データ処理や自動化タスクに適している言語です。アプリ開発の一環としてデータ解析や特定のタスクの自動化を行う際に有用です。また、外部ツールとの連携にも適しています。

ローカル開発環境の構築

アプリの開発を行うのは、ローカル開発環境です。ローカル開発環境とは、実際のサーバーにアップロードする前にコードの編集や動作確認を、手持ちのパソコン内で行うことです。これにより、本番環境への影響を最小限に抑えながら開発を進められます。

Shopifyアプリは、「http://localhost:〜〜」のようなインターネットを介したURLでローカルサーバーを立てても、外部からアクセスできません。解決法としてよく使われているのが、ngrokというツールです。ngrokを使うことでランダムな文字列で一時的にトンネリングしたURLが生成され、外部からアクセスできるようになります。

本番環境の用意

アプリ開発が完了したら、本番環境を用意してアプリをリリースします。そのためには、本番環境用のインフラやサーバが必要です。

ユーザーが実際に利用する環境にアプリを展開し、正確な動作確認をします。本番環境でのテストは慎重に行いましょう。

Shopifyアプリの開発ツール・API

Shopifyでは、さまざまなアプリ開発用のツールが提供されています。ここではShopifyアプリ開発ツールを5つピックアップして紹介します。

• Polaris
• Webhook
• App Bridge
• App extensions
• Checkout extensions

5つのツールの特徴を詳しく見ていきましょう。

Polaris

Polarisは、マーチャントの管理画面にアプリのUIを埋め込むためのUIコンポーネント、およびドキュメント群の総称です。ShopifyがPolarisを使って管理画面を構築しているので、管理画面向け埋め込みアプリもShopify標準の画面と同じように提供できます。そのため、普段からShopifyの管理画面を触っている方であれば、抵抗なく利用できます。

また、あまり時間をかけなくても、美しくて使いやすいUXをデザインできるのも特徴です。

App Bridge

App Bridgeは、アプリとShopifyストアをシームレスに統合するためのライブラリです。Polarisがマーチャント向けのUI部品の集まりだとすると、App Bridgeはマーチャント向けの機能（動作）の集まりです。

Polarisと互換性が高いため、同じアプリ内で使用可能です。ただし、両方を同時に使う場合、Polarisを使用する場合「App Provider」を設定し、App Bridgeを使用する場合は「Provider」を設定する必要があります。すると、一から全てを開発する手間を省きながら高品質なアプリを構築できます。

Webhook

Webhookは、何らかのイベント発生をきっかけにデータを取得して格納するためのツールです。Webhookは下記のような目的で使用されます。

• 注文する
• 商品価格を変更する
• オフライン時にIMクライアントやページャーに通知する
• データウェアハウジングのデータを集める
• 会計ソフトウェアを統合する　など

Webhookはマーチャントの設定画面から登録するか、APIを使って自動登録も可能です。

App extensions

App extensionsは、既存のアプリにカスタム機能を組み込む際に使える拡張機能です。ストアの管理画面のメニューにアプリにアクセスするボタンが設置されます。主に、管理に関する拡張機能を追加するための開発ツールです。

Checkout Extensibility

Checkout Extensibilityは、Shopify Plusの決済周りのカスタマイズ性を向上させる機能の総称です。これまでチェックアウト画面周りをカスタマイズしようとするとcheckout.liquidというファイルを直接操作しなければならず、ほとんどカスタマイズできませんでした。

しかし、Checkout Extensibilityの登場により、開発者は決済周りを簡単にカスタマイズできるようになりました。

Shopifyアプリ開発の注意点

開発したアプリが問題なく使えるようにするには、以下の3つの点に注意しましょう。

• アクセストークンの更新でセキュリティ強化する
• APIの呼び出しはプラン別で制限がある
• コード上書き防止対策をする

アプリ開発を始める前に、注意点を確認しておきましょう。

アクセストークンの更新でセキュリティ強化する

アプリのセキュリティを強化するために、アクセストークンを定期的に更新しましょう。定期的に更新することで、情報漏洩のリスクを軽減し、データへのアクセスを確実に制御します。

アクセストークンの更新・削除は、Shopifyパートナーダッシュボードのアプリ管理画面で対応可能です。

APIの呼び出しはプラン別で制限がある

ShopifyのAPIの利用には、プランごとに制限が設けられています。通常のAPI連携で制限がかかることはあまりないですが、顧客データや売上データなど短時間に膨大なデータを扱うときは制限の対象になる恐れがあります。API使用の計画を立て、制限を超えないよう注意しましょう。

コード上書き防止対策をする

コードの上書きや混乱を防ぐために、バージョン管理ツールであるGitを利用しましょう。

複数の環境で編集して片方のコードが上書きされると、それまでのデータが消える恐れがあります。

そこで、Gitを使うと上書きされて削除されるのを防ぎ、古いバージョンに戻すことも可能です。アプリ開発中のトラブルを回避するためにも、Gitでの管理をおすすめします。

Shopifyアプリの開発事例

弊社フルバランスで開発したアプリの実例を紹介します。自社に合ったアプリ開発をすることでユーザーニーズを満たし、顧客満足と売上向上、作業効率化に繋がります。

FBL DIMENSIONAL SHIPPING RATES

FBL DIMENSIONAL SHIPPING RATESは、商品のサイズに基づいて送料を自動計算するできるアプリです。正確な送料を算出することで、ユーザーの信頼を獲得し、顧客満足度を向上できます。

特に海外のお客様に販売しているストアやDHLの配送サービスを利用しているストアにおすすめです。なお、アプリを利用するには、DHLアカウントが必要です。

フリープランは料金無料で、月15回まで計算できます。ベーシックプランにすると月300回まで計算できるようになり、料金は月額19米ドルです。

FBL DELIVERY DATE

FBL DELIVERY DATEは、配送日時に特化したアプリです。カート画面から配送希望日時を指定したり、配送業者ごとの配送時間指定、商品ごとの置き配指定もできたりして、顧客の要望に柔軟に応えられるようになります。

配送日時の指定により、「いつ届くかわからない」「受け取れなかったらどうしよう」などの購入前の不安を軽減でき、商品購入率アップに効果的です。

アプリ開発をすると、ECサイトを運営しているときに感じる「こんな機能があれば便利なのに」という悩みを解消できるようになります。

Shopifyアプリ開発を発注する流れ

自社でアプリ開発できる方がいないときは、外部の開発会社に依頼することになります。そこで、Shopifyアプリ開発を外部に発注する場合の流れを紹介します。事前に流れを確認し、アプリ開発をスムーズに進めていきましょう。

提案依頼書の作成

まず、アプリの要件や目的を明確にした提案依頼書を作成します。依頼する開発者に理解しやすい形で、プロジェクトの基本を伝えましょう。

要件定義

提案書をもとに、具体的な機能やデザインなどの要件を定義します。開発者とのコミュニケーションを通じて、どんなアプリにしたいかイメージを共有しましょう。

設計・開発・テスト・デプロイ

開発者は、要件に基づいてアプリの設計、開発、テストを進めます。開発の途中で確認を行い、納品前に動作確認を徹底します。

メンテナンスとアップデート

アプリのリリース後も、定期的なメンテナンスとアップデートが必要です。開発者との連携を保ちつつ、アプリの品質を維持しましょう。

上記の手順に従って、外部開発者によるShopifyアプリの開発を進められます。

とはいえ、「どのように提案依頼書を作成したらいいかわからない」「初めてなので難しい」という方もいるでしょう。フルバランスでは丁寧にヒアリングし、お客様のご要望に沿ったアプリ開発を行うので、専門的な知識をお持ちでなくても問題ございません。まずはお気軽にご相談ください。

Shopifyのアプリ開発に関してよくある質問

Shopifyアプリ開発に関する疑問にお答えします。

プラグインの開発はできるの？

はい、Shopifyアプリとして機能するプラグインも開発できます。APIやフレームワークを活用して、カスタマイズされた機能を実装しましょう。

PHPでもShopifyアプリを作成できる？

もちろんPHPでもShopifyアプリを開発できます。ShopifyアプリはPHPやRuby、Nodeなどの使いやすい言語でアプリ開発できる自由度の高さが魅力です。アプリを開発するには、Shopifyパートナーとして登録する必要があります。

まとめ

Shopifyアプリを開発するとECストア運用を効率化でき、顧客満足向上に効果的です。Shopifyアプリ公式ストアにはすでに約8,000ものアプリが公開されていますが、理想のアプリが存在しないときはアプリ開発を検討しましょう。開発したアプリは自社で活用するだけでなく、販売もできます。

Shopifyアプリの種類の特徴や、アプリ開発の流れ、注意点、外部開発のプロセスを理解することで、自社のビジネス成長に繋げましょう。必要なスキルや知識が不足している場合は、専門家の協力を得て効果的なアプリ開発を進めることもひとつの選択肢です。

Shopifyのアプリ開発はフルバランスにご相談ください

Shopifyのアプリ開発は、Shopify独自の言語や機能を理解する必要があります。その上、開発環境が整っていなければ新たに習得が必要な事柄も多く、膨大な時間がかかってしまいます。

フルバランスには、高い専門知識と豊富な経験を持つECスペシャリストが所属しています。アプリ開発の実例もあるフルバランスへ、ぜひご相談ください。