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で提供）
REST APIとGraphQLについては以下のツール、アプリで動作確認が可能です。
Polarisを使ったUIの作成
（埋め込みアプリにしたい場合）
マーチャント管理画面やPOSアプリに埋め込むUIを作成するには、PolarisというUIライブラリを使います。これによりShopifyと同様のデザインを持ちかつ、モバイルアプリにも対応したUIを作成できます。そしてShopifyの画面と作成したUIを連携するにはApp BridgeというSDKを使います。App Bridgeを利用することでアプリのメイン画面以外にも、注文画面や配送設定、POSアプリのメニューといった拡張ポイントにアプリの機能を追加することができます。
Webhookを使った処理の作成
（通知をトリガーにした処理をする場合）
Webhookを使うことで通知に基づく処理を実装することができます（例：注文が来たら連携している在庫システムのAPIを呼び出すなど）。Webhookはマーチャントの設定画面から手動で登録も可能ですし、APIで自動登録することも可能です。
テーマを使ったストアフロントの編集
（ストアフロントに機能を追加する場合）
ストアフロント、すなわちオンラインストアのサイト側（購入者が利用する側）に機能を追加する場合（例：カートに独自項目を増やす、会員向けポイント機能を作るなど）は、テーマをカスタマイズする必要があります。またストアフロントからAPIによりデータを操作する場合は、前述のStorefront APIを利用します。テーマをショップのデータに基づいて動的に変更するにはLiquidというテンプレート言語を挿入する必要があります。
- カスタマイズの詳細情報
- テーマ開発の参考資料
- 商品ページやカートへの独自項目の追加
- オンラインストアの多言語化
- Shopify Theme Kit （テーマの雛型作成や自動反映をしてくれるコマンドラインツール）
- Multipass（外部アカウントでオンラインストアのアカウント登録とログインを可能にする機能。Shopify Plusでのみ利用可）
アプリのインストール時に自動的にテーマのカスタマイズを行うには、Online store APIsを使う必要がありますが、変更箇所が軽微な場合はヘルプに挿入手順を書くことで対応も可能です。
Shopifyのオンラインストアの特定のURLをアプリの特定のURLに置き換えたい場合（例：テーマの特定画面をアプリの描画で置き換えたい場合など）は、App proxiesという機能を使ってShopifyのオンラインストアのURLとアプリのサーバーのURLをマッピングすることができます。
テーマを使わない外部ストアフロントの構築
（ストアフロントを外部サイトやモバイルアプリで構築したい場合）
いわゆるヘッドレスコマースに代表されるような、オンラインストアを外部のウェブサイトやモバイルアプリとして作成し、コマース機能だけShopifyから提供するアプリを作るには、前述のStorefront APIと外部向けのBuy SDKを利用します。
アプリストアへの申請
（アプリストアに公開したい場合）
アプリには特定のマーチャントに利用してもらう非公開のPrivate appsと、アプリストアに公開して任意のマーチャントに利用してもらうPublic appsがあります。多くのマーチャントのニーズに合う汎用的なアプリが開発できた場合は、アプリストアに申請を出してたくさんのマーチャントに使ってもらいましょう。アプリは無料でも有料でも公開できます。
- Shopifyアプリの公開方法
- 申請時に満たすべき基準
- 有料アプリ（アプリ内課金）に利用するBilling APIについて
- アプリのアンインストール時の挙動について
- GDPR準拠のための必須Webhook（日本のアプリでも実装が必要です）
- アプリの多言語化対応について（アプリのグローバル展開をお考えの方は参考にしてください）
- アプリストアで成功するには （アプリのマーケティング方法や禁止事項について書かれています）
チュートリアルによる学習
上記の開発の流れを体験できるチュートリアルアプリがあります。細かい部分はわからなくても書かれた通りに実装していけば実際に動作するアプリを作ることができます。
アプリ開発の注意点
アプリ開発にはいくつか注意点がありますので以下もご参照ください。
アプリ開発のTIPS
- テスト環境について
- 前述のようにパートナーアカウントから開発ストアを作成すれば無期限でテスト環境を入手できます
- Shopifyデータの拡張
- Metafields というShopifyの様々なデータ（例：Customer、Product、Orderなど）に任意の項目をAPIで更新、参照できる機能があります。アプリ固有のデータをShopifyのデータと関連づけて保存する際に便利です
- アプリストアのアプリから技術を学ぶ
- アプリのインストール画面（前述の[アプリの作成と資格情報の取得]に該当）には必要となるAPIや機能のパーミションが求められます。逆に言えば、この画面を詳しく見ることでどういった技術が使われているか確認できます
- ストアフロント向けのアプリの場合、アプリがインストールされた後のテーマやページの変更や、ストアフロントの内部をブラウザの開発コンソールで確認することで、アプリがどういった処理をしているか推測することができます
その他の参考資料
- API guides（アプリ開発に必要な情報が一覧としてリンクされています。本格的に開発される方はご一読ください）
- Shopify コミュニティ 技術的なQ&A（技術的な質問や記事がまとめてあります）
- Shopify コミュニティ イベント情報（ワークショップなどのイベントの開催情報やそこで使われた資料がリンクされています）
Shopifyパートナープログラムでビジネスを成長させる
マーケティング、カスタマイズ、またはWebデザインや開発など提供するサービスに関係なく、Shopifyパートナープログラムはあなたを成功へと導きます。プログラムの参加は無料で、収益分配の機会が得られ、ビジネスを成長させる豊富なツールにアクセスできます。情熱的なコマースコミュニティに今すぐ参加しましょう！
