Shopifyに様々な独自機能やデザインを組み込めるShopifyアプリとShopifyテーマ。この記事はそんなShopifyアプリとテーマの開発に必要な基本情報と役に立つTIPSを日本の開発者向けにまとめたものです。初心者の方からすでに開発に着手されている方にまで必要な情報を簡単に幅広く網羅してあります。全ての情報は公式サイト（英語）に記載されています。
アプリ開発の流れ
アプリ開発の基本的な流れは以下になります。
[パートナーアカウントの登録] >
[開発ストアの追加] >
[アプリの作成と資格情報の取得] >
[開発ストアへのインストール] >
[APIを使った処理の作成] >
[Polarisを使ったUIの作成] >（埋め込みアプリにしたい場合）
[Webhookを使った処理の作成] >（通知をトリガーにした処理をする場合）
[テーマを使ったストアフロントの作成] >（ストアフロントに機能を追加する場合）
[テーマを使わない外部ストアフロントの作成] >（ストアフロントを外部サイトやモバイルアプリで構築したい場合）
[チェックアウトの拡張] >（配送先指定から決済までの処理に機能を追加する場合）
[アプリストアへの申請] >（アプリストアにアプリを公開したい場合）
テーマ開発の流れ
テーマ開発の基本的な流れは以下になります。
[パートナーアカウントの登録] >
[開発ストアの追加] >
[テーマを使ったストアフロントの作成] >
[テーマストアへの申請] （テーマストアにテーマを公開したい場合）
パートナーアカウントの登録
こちらから行います。開発ストアの追加
アカウント登録後ログインするパートナーダッシュボードに表示されるストアの追加ボタンから行います。アプリの作成と資格情報の取得
パートナーダッシュボードのアプリメニューからアプリを作成し、APIを利用するために必要な資格情報（credentails）を取得します。- 詳細情報
- Shopify CLI for apps （後述のパーミション取得やPolaris利用のコードを自動生成してくれるコマンドラインツール）
開発ストアへのインストール
資格情報を使ってAPIを呼び出すためのパーミションを取得するURLを生成し、開発ストアへインストールします（※実際にアプリストアに掲載された場合や、アプリ設定のテスト機能を使う場合は、アプリ設定のURLが呼ばれますので、その中で新規か再インストールかを判別して、このパーミション取得用のURLにリダイレクトさせる必要があります。再インストールかどうかの判定は、現在保存されているアクセストークンでストア属性を参照するAPIを呼び出して、トークンが有効化どうか確認するなどがあります）。APIを使った処理の作成
取得したパーミションからOAuthの仕様に従いアクセストークンを生成して、APIを呼び出しますAPIには以下の3種類がありますが、アクセストークンの取得方法は同じです。
- GraphQL Admin API（マーチャント向け管理機能をGraphQLで提供）
- Storefront API（購入者向け機能をGraphQLで提供）
- REST Admin API （マーチャント向け管理機能を提供する古いAPI）
GraphQLについては以下のアプリで動作確認が可能です。
APIはGraphQLが推奨となっています。GraphQLが初めてという方は、GraphQLの基本的な説明をご覧ください。
GraphQLのデータ検索の方法は、QueryRootを参照してください。細かい検索仕様も記載されています。
セッション管理はクッキーではなく、セッショントークンを使います。詳しくはチュートリアルをご覧ください。
GraphQLを使った一括処理は、Bulk operation APIsを使います。詳しくはチュートリアルをご覧ください。
配送関連のAPIを使うことで、配送の自動化や倉庫連携、アプリによる送料計算（注：マーチャントの条件あり）を実現できます。
こちらの記事も参考にしてください：
Shopify Fulfillment Orders API：フルフィルメント体験の向上
Polarisを使ったUIの作成
（埋め込みアプリにしたい場合）
マーチャント管理画面やPOSアプリに埋め込むUIを作成するには、PolarisというUIライブラリを使います。これによりShopifyと同様のデザインを持ちかつ、モバイルアプリにも対応したUIを作成できます。そしてShopifyの画面と作成したUIを連携するにはApp BridgeというSDKを使います。また、管理画面に独自のメニューを挿入するには、App extensionsにアプリのURLを設定します。App BridgeとApp extensionsを利用することでアプリのメイン画面以外にも、注文管理画面やPOSアプリのメニューといった拡張ポイントにアプリの機能を追加することができます。
- Polarisのセットアップ
- App Bridgeのセットアップ
- App BridgeとPolarisをReactで使う
- PolarisでのUIの組み立て方
- App Bridgeのアクション
- App extensionsの拡張ポイント
- POSアプリへの適用
サブスクリプション（定期購入）を実現するアプリの開発も可能です。詳しくはこちらをご覧ください。
こちらの記事も参考にしてください：
Shopify埋め込みアプリの三種の神器：Polaris、App Bridge、App extensionsを使いこなそう！
ShopifyサブスクリプションAPIについて：Shopifyチェックアウトと統合できるアプリの構築
Webhookを使った処理の作成
（通知をトリガーにした処理をする場合）
Webhookを使うことで通知に基づく処理を実装することができます（例：注文が来たら連携している在庫システムのAPIを呼び出すなど）。Webhookはマーチャントの設定画面から手動で登録も可能ですし、APIで自動登録することも可能です（APIで登録したWebhookは設定画面には表示されません。削除はAPI、または登録したアプリのアンインストールで行われます）。
Webhookは、決められた時間以内にShopify側でレスポンスが受信されないと再送されます。ですので重複して送信される可能性を想定し、かつ最初にレスポンスを返してからあとで非同期で処置を行うような設計が必要となります。詳細は上記のリンク先をご覧ください。
テーマを使ったストアフロントの作成
（ストアフロントに機能を追加する場合）
ストアフロント、すなわちオンラインストアのサイト側（購入者が利用する側）に機能を追加する場合（例：カートに独自項目を増やす、会員向けポイント機能を作るなど）は、テーマの開発をする必要があります。その際に、テーマの中身をストアのデータに基づいて動的に変更するにはLiquidというテンプレート言語を使います。そのようにして作られたテーマは管理画面からテーマエディタを使ってドラッグ&ドロップなどで視覚的にカスタマイズできます。
- テーマの概要
- テーマのファイル構成
- テーマの仕組み
- セクション（テーマエディタで利用できる部品）
- セクションのスキーマ（セクションの構造の定義）
- テーマの設定（テーマエディタと連動する設定）
- テーマの入力設定（フォント、テキスト、色などの設定）
- テーマの標準フォント
- Liquidのオブジェクトの種類と参照範囲
- 商品ページやカートへの独自項目の追加
- 顧客登録への独自項目の追加
- おすすめ商品の表示
- 商品メディア（動画やARなど）の表示
- ディスカウントの表示
- テーマ内のサイトナビゲーションと検索
- テーマのSEO対策
- テーマの国際化（多通貨、多言語）
- Shopify CLI for themes （テーマの雛型作成やストアへの自動反映、ローカルPCでのプレビューなどをしてくれるコマンドラインツール）
- Ajax API（カート、商品、検索、おすすめなどをテーマ内で制御するためのJavaScript用のAPI）
- Section Rendering API（セクションのHTMLを動的に取得するJavaScript用のAPI）
- Multipass（外部アカウントでオンラインストアのアカウント登録とログインを可能にする機能。Shopify Plusでのみ利用可）
アプリからテーマに機能を追加したい場合（例：チャット提供やポイント付与など）は、Theme app extensionsを使います。詳しい仕様はこちら、実装方法はこちら（Shopify CLIが必要です）をご覧ください。
Shopifyのオンラインストアの特定のURLをアプリの描画に置き換えたい場合（例：テーマの画面遷移の中にアプリが提供する外部の画面を差し込むなど）、アプリのサーバーにテーマからアクセスしたい場合（例：サーバーを介してAdmin APIをテーマのJavaScriptから呼び出して結果を得たいなど）は、App proxiesという機能を使ってShopifyのオンラインストアのURLとアプリのサーバーのURLをマッピングすることができます。
注文完了ページに独自のスクリプトを挿入したい場合（例：コンバージョン計測のJavaScriptを実行したい、Liquidのデータを表示したいなど）は、追加スクリプトの設定を行うか、ScriptTag APIを呼び出すことで可能です。
Shopifyの様々なデータ（例：Product、Collection、Customer、Orderなど）に独自の項目を追加したい場合（例：顧客の誕生日や注文の配送日時など）は、Metafieldsを使ってAPIとShopify管理画面で実現することができます。MetafieldsはテーマからLiquidとして参照することができ、テーマエディタとも連動するので、テーマに高い柔軟性、拡張性を持たせることができます。
こちらの記事も参考にしてください：
Shopifyテーマカスタマイズの三種の神器：Cart attributes、Line Item Property、Customer noteを使いこなそう！
Shopify Theme Sectionを初めて作成するときのポイント
Online Store 2.0でApp Blockをレスポンシブにする方法
テーマを使わない外部ストアフロントの作成
（ストアフロントを外部サイトやモバイルアプリで構築したい場合）
以前はヘッドレスコマースと呼ばれていた、オンラインストアをShopify外部のウェブサイトやモバイルアプリとして作成し、コマース機能だけShopifyから提供する開発方法はカスタムストアフロントと呼ばれ、Storefront APIやSDK、コーディングの不要なチェックアウトリンクを利用して実現します。また、HydrogenというReactベースのフレームワークを使うことで、高い柔軟性を持った高機能なカスタムストフロントをホスティング環境付きで開発することができます。
- Storefront APIの使い方
- JS Buy SDK
- BuyButton.js
- Android Buy SDK
- iOS Buy SDK
- Unity Buy SDK
- Web Components
- Hydrogenの仕組み
こちらの記事も参考にしてください：
Shopify Storefront API：カスタムストアフロントを強化するアップデート
Hydrogenによる構築：開発者プレビューが利用可能になりました
Hydrogenを使用したストアフロントはなぜパフォーマンスが高いのか
チェックアウトの拡張
（配送先指定から決済までの処理に機能を追加する場合）
商品ページからカート画面まではテーマがUXを提供しますが、それ以降の配送先指定、配送方法（送料）選択、決済（購入完了）の画面はチェックアウトと呼ばれ、Shopifyが提供します（デザインの一部はテーマから変更可能）。このチェックアウトにアプリから機能を提供するにはCheckout app extensionsを使います。Checkout extensionsは、UI extensionsとShopify Scriptで構成され、以下の拡張ポイントを持ちます。
こちらの記事も参考にしてください：
アプリストアへの申請
（アプリストアにアプリを公開したい場合）
アプリには１つのマーチャントのみにインストール可能な非公開のカスタムアプリと、アプリストアに公開して任意のマーチャントに利用してもらう公開アプリがあります（検索対象から外して実質非公開のように運用する設定もできます）。多くのマーチャントのニーズに合う汎用的なアプリが開発できた場合は、アプリストアに公開申請を出してたくさんのマーチャントに使ってもらいましょう。アプリは無料でも有料でも公開できます（申請した後は審査が入ります）。
- アプリの種類について
- Shopifyアプリの公開方法
- 申請時に満たすべき基準
- 審査のプロセス
- 有料アプリ（アプリ内課金）に利用するBilling APIについて
- アプリのアンインストール時の挙動について
- GDPR準拠のための必須Webhook（日本のアプリでも実装が必要です）
- アプリストアで成功するには （アプリのマーケティング方法や禁止事項について書かれています）
こちらの記事も参考にしてください：
Shopifyアプリ公開パーフェクトガイド：アプリエコシステムに上手に参加する方法
テーマストアへの申請
（テーマストアにテーマを公開したい場合）
自分で独自に作ったテーマは、アプリストアとは別にテーマストアに公開申請して販売することができます。多くのマーチャントに価値を提供できるテーマが開発できた場合は、テーマストアに公開申請を出してたくさんのマーチャントに使ってもらいましょう（申請した後は審査が入ります）。
- 申請時に満たすべき基準
- 審査のプロセス
- テーマストアへの掲載方法（提出手順や価格設定、説明の書き方など）
- テーマストアで成功するには （テーマのマーケティング方法や禁止事項について書かれています）
こちらの記事も参考にしてください：
サンプルコードや開発ツールの活用
開発の流れを体験できるサンプルコードやチュートリアルがあります。細かい部分はわからなくても書かれた通りに実装していけば実際に動作するアプリやテーマを作ることができます。また、アプリ開発ツールのページや、テーマ開発ツールのページには、サンプルコードの他に便利なツールが紹介されていますのでぜひ試してみてください。
- CLIを使った埋め込みアプリのチュートリアル
- CLIを使ったテーマ作成のチュートリアル
- CLIを使ったテーマカスタマイズのチュートリアル
- ユースケースごとのAPIのサンプル
- Liquidのサンプルコード
- Storefront APIの学習キット
- Storefront APIのサンプルコード
- テーマチェッカー
- テーマ分析用Chromeエクステンション
アプリとテーマの開発の注意点
アプリとテーマの開発にはいくつか注意点がありますので以下もご参照ください。
- APIの呼び出し制限
- APIのバージョンについて
- アクセストークンのオンライン・オフラインモード
- Storefront API用のアクセストークン
- Storefront APIの利用条件
- アクセストークンのセキュリティ対策（リフレッシュ方法）
- 公開アプリを申請する際のインストールフローの必須要件
- テーマのファイル形式の最新化
- テーマの信頼とセキュリティ
- 古いテーマからの移行方法
- テーマとTheme app extensionsの互換性の確認
- テーマ開発のトラブルシューティング
こちらの記事も参考にしてください：
アプリとテーマの開発のTIPS
- ベストプラクティスを読み込む
- パフォーマンス（表示や処理の速度）、アクセシビリティ、デザインなどはアプリやテーマを提供する上でとても重要です。公式サイトにはアプリのベストプラクティスとテーマのベストプラクティスが書かれていますので、しっかり確認しましょう
- テスト環境について
- 前述のようにパートナーアカウントから開発ストアを作成すれば無期限でテスト環境を入手できます
- 仕様を要望に合うように読み替える
- 要望を直接満たす仕様がShopifyになかったとしても、既存の仕様をうまく読み替える（応用する）ことで解決することもあります。例えば、こちらの配送日時指定の追加方法は、エレメントのタイプやUIを変えることで他のカート拡張に応用できますし、こちらのクーポンコードのURL埋め込みは会員向けポイント機能の構築などに応用できます
その他の参考資料
- Shopify開発者チャンネル（開発者向けのトピックをハンズオン形式でTwitchで配信しています）
- Shopifyコミュニティ 技術的なQ&A（技術的な質問や記事がまとめてあります）
- Shopifyコミュニティ サンプルコード集（公式、非公式含めた用途別、開発環境別のコードがまとめてあります）
- QiitaのShopifyタグ（外部の開発者向けブログサイトのShopifyに関する投稿です）
- ZennのShopifyトピック（同上）
Shopifyパートナープログラムでビジネスを成長させる
マーケティング、カスタマイズ、またはWebデザインや開発など提供するサービスに関係なく、Shopifyパートナープログラムはあなたを成功へと導きます。プログラムの参加は無料で、収益分配の機会が得られ、ビジネスを成長させる豊富なツールにアクセスできます。情熱的なコマースコミュニティに今すぐ参加しましょう！
