Shopifyに様々な独自機能を組み込めるShopifyアプリ。この記事はそんなShopifyアプリの開発に必要な基本情報と役に立つTIPSを日本の開発者向けにまとめたものです。初心者の方からすでに開発に着手されている方にまで必要な情報を簡単に幅広く網羅してあります。全ての情報は以下の公式サイト（英語）に記載されています。
開発の流れ
アプリ開発の基本的な流れは以下になります。
[パートナーアカウントの登録] >
[開発ストアの追加] >
[アプリの作成と資格情報の取得] >
[開発ストアへのインストール] >
[APIを使った処理の作成] >
[Polarisを使ったUIの作成] >（埋め込みアプリにしたい場合）
[Webhookを使った処理の作成] >（通知をトリガーにした処理をする場合）
[テーマを使ったストアフロントの編集] >（ストアフロントに機能を追加する場合）
[テーマを使わない外部ストアフロントの構築] >（ストアフロントを外部サイトやモバイルアプリで構築したい場合）
[アプリストアへの申請]（アプリストアに公開したい場合）
パートナーアカウントの登録
こちらから行います。開発ストアの追加
アカウント登録後ログインするパートナーダッシュボードに表示されるストアの追加ボタンから行います。アプリの作成と資格情報の取得
パートナーダッシュボードのアプリメニューからアプリを作成し、APIを利用するために必要な資格情報（credentails）を取得します。- 詳細情報
- Shopify App CLI （後述のパーミション取得やPolaris利用のコードを自動生成してくれるコマンドラインツール）
開発ストアへのインストール
資格情報を使ってAPIを呼び出すためのパーミションを取得するURLを生成し、開発ストアへインストールしますAPIを使った処理の作成
取得したパーミションからOAuth2.0の仕様に従いアクセストークンを生成して、APIを呼び出しますAPIには以下の３種類がありますが、アクセストークンの取得方法は同じです。
- REST Admin API （マーチャント向け管理機能）
- GraphQL Admin API（マーチャント向け管理機能をGraphQLで提供）
- Storefront API（ストアフロント向け機能をGraphQLで提供）
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といった拡張ポイントにアプリの機能を追加することができます。
- Polarisのセットアップ
- App Bridgeのセットアップ
- App BridgeとPolarisをReactで使う
- PolarisでのUIの組み立て方（後述のチュートリアルアプリから）
- App Bridgeのアクション
- App extensionsの拡張ポイント
- POSアプリへの適用
- Kit（Shopify標準チャットBot）へのSkill追加
こちらの記事も参考にしてください：
Shopify埋め込みアプリの三種の神器：Polaris、App Bridge、App extensionsを使いこなそう！
Webhookを使った処理の作成
（通知をトリガーにした処理をする場合）
Webhookを使うことで通知に基づく処理を実装することができます（例：注文が来たら連携している在庫システムのAPIを呼び出すなど）。Webhookはマーチャントの設定画面から手動で登録も可能ですし、APIで自動登録することも可能です（APIで登録したWebhookは設定画面には表示されません。削除はAPI、または登録したアプリのアンインストールで行われます）。
Webhookは、決められた時間以内にShopify側でレスポンスが受信されないと再送されます。ですので重複して送信される可能性を想定し、かつ最初にレスポンスを返してからあとで非同期で処置を行うような設計が必要となります。詳細は上記のリンク先をご覧ください。
Amazon EventBridgeを使ったWebhookの実装も可能になりました。詳しくはこちらをご覧ください。
こちらの記事も参考にしてください：
ShopifyアプリMechanicの開発者はEventBridgeでどのようにスケーリングしたのか
テーマを使ったストアフロントの編集
（ストアフロントに機能を追加する場合）
ストアフロント、すなわちオンラインストアのサイト側（購入者が利用する側）に機能を追加する場合（例：カートに独自項目を増やす、会員向けポイント機能を作るなど）は、テーマをカスタマイズする必要があります。またストアフロントからAPIによりデータを操作する場合は、前述のStorefront APIを利用します。テーマをショップのデータに基づいて動的に変更するにはLiquidというテンプレート言語を挿入する必要があります。
- テーマの概要
- テーマのファイル構成
- テーマの設定
- テーマの詳細
- セクション（テーマエディタで設定できる部品）の詳細
- Liquidのサンプルコード
- 商品ページやカートへの独自項目の追加（Cart attribute、Line Item Property）
- 顧客（会員）情報への独自項目の追加
- Liquidのオブジェクトの種類と参照範囲
- オンラインストアの多言語化
- テーマの多言語化
- テーマの多通貨対応
- Shopify Theme Kit （テーマの雛型作成や自動反映をしてくれるコマンドラインツール）
- Ajax API（カート、商品、検索などをテーマ内で制御するためのJavaScript用のAPI）
- ScriptTag API（テーマを編集することなく外部のJavaScriptをストアフロントに挿入できるAPI）
- Multipass（外部アカウントでオンラインストアのアカウント登録とログインを可能にする機能。Shopify Plusでのみ利用可）
アプリのインストール時に自動的にテーマのカスタマイズを行うには、Online store APIsを使う必要がありますが、変更箇所が軽微な場合はヘルプに挿入手順を書くことで対応も可能です。
Shopifyのオンラインストアの特定のURLをアプリの描画に置き換えたい場合（例：チェックアウトの途中にアプリが提供する外部の画面を差し込みたい場合など）、サーバーサイドのAPIをテーマから呼び出したい場合などは、App proxiesという機能を使ってShopifyのオンラインストアのURLとアプリのサーバーのURLをマッピングすることができます。
注文完了ページに独自のスクリプトを挿入したい場合（コンバージョン計測のJavaScriptを実行したい、Liquidのデータを表示したいなど）は、追加スクリプトの設定を行うか、上記のScriptTag APIを呼び出すことで可能です。
テーマには動画や3Dモデルを差し込むこともできます。詳細は以下をご参照ください。
こちらの記事も参考にしてください：
Shopifyテーマカスタマイズの三種の神器：Cart attributes、Line Item Property、Customer noteを使いこなそう！
テーマを使わない外部ストアフロントの構築
（ストアフロントを外部サイトやモバイルアプリで構築したい場合）
いわゆるヘッドレスコマースに代表されるような、オンラインストアを外部のウェブサイトやモバイルアプリとして作成し、コマース機能だけShopifyから提供するアプリを作るには、前述のStorefront APIと外部向けのBuy SDKを利用します。
アプリストアへの申請
（アプリストアに公開したい場合）
アプリには１つのマーチャントのみにインストール可能な非公開のCustom appsと、アプリストアに公開して任意のマーチャントに利用してもらうPublic appsがあります（検索対象から外して実質非公開のように運用する設定もできます）。多くのマーチャントのニーズに合う汎用的なアプリが開発できた場合は、アプリストアに申請を出してたくさんのマーチャントに使ってもらいましょう。アプリは無料でも有料でも公開できます（申請した後は審査が入ります）。
- アプリの種類について
- Shopifyアプリの公開方法
- 申請時に満たすべき基準
- 審査のプロセス
- 有料アプリ（アプリ内課金）に利用するBilling APIについて
- アプリのアンインストール時の挙動について
- GDPR準拠のための必須Webhook（日本のアプリでも実装が必要です）
- アプリの多言語化対応について（アプリのグローバル展開をお考えの方は参考にしてください）
- アプリストアで成功するには （アプリのマーケティング方法や禁止事項について書かれています）
こちらの記事も参考にしてください：
Shopifyアプリ公開パーフェクトガイド：アプリエコシステムに上手に参加する方法
チュートリアルと開発ツールの活用
上記の開発の流れを体験できるチュートリアルがあります。細かい部分はわからなくても書かれた通りに実装していけば実際に動作するアプリを作ることができます。また、開発ツールのページには様々なサンプルコードやツールが紹介されていますのでぜひ目を通してください。
アプリ開発の注意点
アプリ開発にはいくつか注意点がありますので以下もご参照ください。
- APIの呼び出し制限
- APIのバージョンについて
- APIのアップグレードの方法
- アクセストークンのオンライン・オフラインモード
- Storefront API用のアクセストークン
- Storefront APIの利用条件（Private appsか販売チャネルアプリ）
- アクセストークンのセキュリティ対策（リフレッシュ方法）
- アプリインストールの初期表示の条件
- SameSite Cookie属性の対応
アプリ開発のTIPS
- テスト環境について
- 前述のようにパートナーアカウントから開発ストアを作成すれば無期限でテスト環境を入手できます
- Shopifyデータの拡張
- Metafields というShopifyの様々なデータ（例：Customer、Product、Orderなど）に任意の項目をAPIで更新、参照できる機能があります。登録したデータはテーマからLiquidとして参照することもできるので、ストアフロントの機能開発にも役立ちます
- アプリストアのアプリから技術を学ぶ
- アプリのインストール画面（前述の[アプリの作成と資格情報の取得]に該当）には必要となるAPIや機能のパーミションが求められます。逆に言えば、この画面を詳しく見ることでどういった技術が使われているか確認できます
- ストアフロント向けのアプリの場合、アプリがインストールされた後のテーマやページの変更や、ストアフロントの内部をブラウザの開発コンソールで確認することで、アプリがどういった処理をしているか推測することができます
- 仕様を要望に合うように読み替える
- 要望を直接満たす仕様がShopifyになかったとしても、既存の仕様をうまく読み替える（応用する）ことで解決することもあります。例えば、こちらの配送日時指定の追加方法は、エレメントのタイプやUIを変えることで他のカート拡張に応用できますし、こちらのクーポンコードのURL埋め込みは会員向けポイント機能の構築などに応用できます
- 配送料計算や倉庫連携のアプリを作成する場合
- 配送サービスのAPI登録やフルフィルメントサービスのAPI登録を使って独自の配送料計算や出荷指示機能を実現できます（配送料計算はプランの制限あり）
- ストアの統計情報を取得したい場合
- ShopifyQLというAPIを使えばSQLを使ってストアの統計情報（売り上げなど）を取得できます（プランの制限あり）
- ストアフロントのデザイン方法
- Shopifyはテーマを一から作る上で、デザイン思考の５つのステップを取り入れることを推奨しています
- テーマをデザインする際は、こちらに書かれているアクセシビリティへの対応をしてみましょう。テーマの理解を深めるためにも役立ちます。Shopifyのアクセシビリティへのポリシーはこちらを参照ください
- モバイルファーストのデザインとテーマのパフォーマンスは重要なポイントです。こちらに書かれているShopifyのパフォーマンス改善の事例を参考にしてみてください
- テーマを単独でテーマストアに公開する（※現在受付停止）
その他の参考資料
- Shopify開発者向けYoutube動画（このブログを詳細解説したハンズオン動画です）
- Shopifyコミュニティ 技術的なQ&A（技術的な質問や記事がまとめてあります）
- Shopifyコミュニティ サンプルコード集（公式、非公式含めた用途別、開発環境別のコードがまとめてあります）
- QiitaのShopifyタグ（外部の技術者向けブログサイトのShopifyに関する投稿です。フォローすると外部の開発者が投稿した情報を受け取れます）
Shopifyパートナープログラムでビジネスを成長させる
マーケティング、カスタマイズ、またはWebデザインや開発など提供するサービスに関係なく、Shopifyパートナープログラムはあなたを成功へと導きます。プログラムの参加は無料で、収益分配の機会が得られ、ビジネスを成長させる豊富なツールにアクセスできます。情熱的なコマースコミュニティに今すぐ参加しましょう！
