Shopify ブログ

Shopifyアプリの開発方法

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

開発の流れ

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

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

[開発ストアの追加] > 

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

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

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

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

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

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

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

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

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

 こちらから行います。

開発ストアの追加

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

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

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

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

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

APIを使った処理の作成

取得したパーミションからOAuth2.0の仕様に従いアクセストークンを生成して、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によりデータを操作する場合は、前述のStorefront APIを利用します。テーマをショップのデータに基づいて動的に変更するにはLiquidというテンプレート言語を挿入する必要があります。

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

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

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

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

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

    アプリストアへの申請

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

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

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

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

    アプリ開発の注意点

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

    アプリ開発のTIPS

      • テスト環境について
        • 前述のようにパートナーアカウントから開発ストアを作成すれば無期限でテスト環境を入手できます
      • Shopifyデータの拡張
        • Metafields というShopifyの様々なデータ（例：Customer、Product、Orderなど）に任意の項目をAPIで更新、参照できる機能があります。アプリ固有のデータをShopifyのデータと関連づけて保存する際に便利です
      • アプリストアのアプリから技術を学ぶ
        • アプリのインストール画面（前述の[アプリの作成と資格情報の取得]に該当）には必要となるAPIや機能のパーミションが求められます。逆に言えば、この画面を詳しく見ることでどういった技術が使われているか確認できます
        • ストアフロント向けのアプリの場合、アプリがインストールされた後のテーマやページの変更や、ストアフロントの内部をブラウザの開発コンソールで確認することで、アプリがどういった処理をしているか推測することができます
      • 配送料計算や倉庫連携のアプリを作成する場合

      その他の参考資料

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

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