Shopify ブログ

Shopifyアプリの開発方法

※この記事は随時更新しています。

Shopifyに様々な独自機能を組み込めるShopifyアプリ。この記事はそんなShopifyアプリの開発に必要な基本情報と役に立つTIPSを日本の開発者向けにまとめたものです。初心者の方からすでに開発に着手されている方にまで必要な情報を簡単に幅広く網羅してあります。全ての情報は以下の公式サイト（英語）に記載されています。

開発の流れ

アプリ開発の基本的な流れは以下になります。

[パートナーアカウントの登録] > 

[開発ストアの追加] > 

[アプリの作成と資格情報の取得] > 

[開発ストアへのインストール] > 

[APIを使った処理の作成] > 

[Polarisを使ったUIの作成] >（埋め込みアプリにしたい場合）

[Webhookを使った処理の作成] >（通知をトリガーにした処理をする場合）

[テーマを使ったストアフロントの編集] >（ストアフロントに機能を追加する場合）

[テーマを使わない外部ストアフロントの構築] >（ストアフロントを外部サイトやモバイルアプリで構築したい場合）

[アプリストアへの申請]（アプリストアに公開したい場合）

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

 こちらから行います。

開発ストアの追加

 アカウント登録後ログインするパートナーダッシュボードに表示されるストアの追加ボタンから行います。

アプリの作成と資格情報の取得

パートナーダッシュボードのアプリメニューからアプリを作成し、APIを利用するために必要な資格情報（credentails）を取得します。
  • 詳細情報
  • Shopify App CLI （後述のパーミション取得やPolaris利用のコードを自動生成してくれるコマンドラインツール）

開発ストアへのインストール

資格情報を使ってAPIを呼び出すためのパーミションを取得するURLを生成し、開発ストアへインストールします

APIを使った処理の作成

取得したパーミションからOAuth2.0の仕様に従いアクセストークンを生成して、APIを呼び出します

APIには以下の３種類がありますが、アクセストークンの取得方法は同じです。

GraphQL Admin APIについては以下のアプリで動作確認が可能です。

APIはGraphQLが推奨となっています。

Polarisを使ったUIの作成

（埋め込みアプリにしたい場合）

マーチャント管理画面やPOSアプリに埋め込むUIを作成するには、PolarisというUIライブラリを使います。これによりShopifyと同様のデザインを持ちかつ、モバイルアプリにも対応したUIを作成できます。そしてShopifyの画面と作成したUIを連携するにはApp BridgeというSDKを使います。また、管理画面に独自のメニューを挿入するには、App extensionsにアプリのURLを設定します。App BridgeとApp extensionsを利用することでアプリのメイン画面以外にも、注文管理画面やPOSアプリのメニュー、チャットBotといった拡張ポイントにアプリの機能を追加することができます。

Webhookを使った処理の作成

（通知をトリガーにした処理をする場合）

Webhookを使うことで通知に基づく処理を実装することができます（例：注文が来たら連携している在庫システムのAPIを呼び出すなど）。Webhookはマーチャントの設定画面から手動で登録も可能ですし、APIで自動登録することも可能です（APIで登録したWebhookは設定画面には表示されません。削除はAPI、または登録したアプリのアンインストールで行われます）。

Webhookは、決められた時間以内にShopify側でレスポンスが受信されないと再送されます。ですので重複して送信される可能性を想定し、かつ最初にレスポンスを返してからあとで非同期で処置を行うような設計が必要となります。詳細は上記のリンク先をご覧ください。

テーマを使ったストアフロントの編集

（ストアフロントに機能を追加する場合）

ストアフロント、すなわちオンラインストアのサイト側（購入者が利用する側）に機能を追加する場合（例：カートに独自項目を増やす、会員向けポイント機能を作るなど）は、テーマをカスタマイズする必要があります。またストアフロントからAPIによりデータを操作する場合は、前述のStorefront APIを利用します。テーマをショップのデータに基づいて動的に変更するにはLiquidというテンプレート言語を挿入する必要があります。

アプリのインストール時に自動的にテーマのカスタマイズを行うには、Online store APIsを使う必要がありますが、変更箇所が軽微な場合はヘルプに挿入手順を書くことで対応も可能です。

Shopifyのオンラインストアの特定のURLをアプリの描画に置き換えたい場合（例：チェックアウトの途中にアプリが提供する外部の画面を差し込みたい場合など）、サーバーサイドのAPIをテーマから呼び出したい場合などは、App proxiesという機能を使ってShopifyのオンラインストアのURLとアプリのサーバーのURLをマッピングすることができます。

注文完了ページに独自のスクリプトを挿入したい場合（コンバージョン計測のJavaScriptを実行したい、Liquidのデータを表示したいなど）は、追加スクリプトの設定を行うか、上記のScriptTag APIを呼び出すことで可能です。

テーマには動画や3Dモデルを差し込むこともできます。詳細は以下をご参照ください。

    テーマを使わない外部ストアフロントの構築

    （ストアフロントを外部サイトやモバイルアプリで構築したい場合）

    いわゆるヘッドレスコマースに代表されるような、オンラインストアを外部のウェブサイトやモバイルアプリとして作成し、コマース機能だけShopifyから提供するアプリを作るには、前述のStorefront APIと外部向けのBuy SDKを利用します。

    アプリストアへの申請

    （アプリストアに公開したい場合）

    アプリには１つのマーチャントのみにインストール可能な非公開のCustom appsと、アプリストアに公開して任意のマーチャントに利用してもらうPublic appsがあります（検索対象から外して実質非公開のように運用する設定もできます）。多くのマーチャントのニーズに合う汎用的なアプリが開発できた場合は、アプリストアに申請を出してたくさんのマーチャントに使ってもらいましょう。アプリは無料でも有料でも公開できます。

    チュートリアルによる学習

    上記の開発の流れを体験できるチュートリアルアプリがあります。細かい部分はわからなくても書かれた通りに実装していけば実際に動作するアプリを作ることができます。

    アプリ開発の注意点

    アプリ開発にはいくつか注意点がありますので以下もご参照ください。

    アプリ開発のTIPS

      • テスト環境について
        • 前述のようにパートナーアカウントから開発ストアを作成すれば無期限でテスト環境を入手できます
      • Shopifyデータの拡張
        • Metafields というShopifyの様々なデータ（例：Customer、Product、Orderなど）に任意の項目をAPIで更新、参照できる機能があります。登録したデータはテーマからLiquidとして参照することもできるので、ストアフロントの機能開発にも役立ちます
      • アプリストアのアプリから技術を学ぶ
        • アプリのインストール画面（前述の[アプリの作成と資格情報の取得]に該当）には必要となるAPIや機能のパーミションが求められます。逆に言えば、この画面を詳しく見ることでどういった技術が使われているか確認できます
        • ストアフロント向けのアプリの場合、アプリがインストールされた後のテーマやページの変更や、ストアフロントの内部をブラウザの開発コンソールで確認することで、アプリがどういった処理をしているか推測することができます
      • 仕様を要望に合うように読み替える
        • 要望を直接満たす仕様がShopifyになかったとしても、既存の仕様をうまく読み替える（応用する）ことで解決することもあります。例えば、こちらの配送日時指定の追加方法は、エレメントのタイプやUIを変えることで他のカート拡張に応用できますし、こちらのクーポンコードのURL埋め込みは会員向けポイント機能の構築などに応用できます
      • 配送料計算や倉庫連携のアプリを作成する場合
      • ストアの統計情報を取得したい場合
        • ShopifyQLというAPIを使えばSQLを使ってストアの統計情報（売り上げなど）を取得できます（プランの制限あり）
      • ストアフロントのデザイン方法
        • Shopifyはテーマを一から作る上で、デザイン思考の５つのステップを取り入れることを推奨しています
        • テーマをデザインする際は、こちらに書かれているアクセシビリティへの対応をしてみましょう。テーマの理解を深めるためにも役立ちます。Shopifyのアクセシビリティへのポリシーはこちらを参照ください
        • モバイルファーストのデザインとテーマのパフォーマンスは重要なポイントです。こちらに書かれているShopifyのパフォーマンス改善の事例を参考にしてみてください
      • テーマを単独でテーマストアに公開する（※現在受付停止）
        • 自分で独自に作ったテーマは、アプリストアとは別にテーマストアに申請して公開することができます。詳しくはこちらを参照してください

      その他の参考資料

      Shopifyパートナープログラムでビジネスを成長させる
      マーケティング、カスタマイズ、またはWebデザインや開発など提供するサービスに関係なく、Shopifyパートナープログラムはあなたを成功へと導きます。プログラムの参加は無料で、収益分配の機会が得られ、ビジネスを成長させる豊富なツールにアクセスできます。情熱的なコマースコミュニティに今すぐ参加しましょう！

      今すぐ登録
      トピック:
      Shopify パートナー 開発