【入門】Shopifyアプリ開発の種類や開発環境・おすすめツール・APIを解説
この記事の所要時間：7分
Shopifyにおけるアプリ開発の全体像を理解するのは決して簡単なことではありません。
Shopifyの公式ドキュメントにはアプリ開発に必要な全ての情報が書かれていますが、日本語サポートはほとんどありませんし、Shopify独自の単語も多いです。そのため、読みこなすには多少時間がかかります。
この記事では、Shopifyのアプリ開発で必要な最低限の知識をできるだけ噛み砕いてまとめました。
アプリとは
Shopifyにおけるアプリとは、Shopifyのストアに機能を追加するソフトウェアのことです。
アプリは、ストアのデータを読み書きしたり、管理画面の機能を拡張したり、ストアのUIを拡張したりすることができます。主にAdmin APIとStorefront APIを利用して開発します。
開発者はアプリを開発し、自分で契約したサーバにデプロイします。HerokuやAWSやAzureなど、あらゆるインフラ上のサーバにホスティングすることができます。
アプリの種類
アプリには3つの種類があります。公開アプリ(Public apps)と、カスタムアプリ(Custom apps)と、プライベートアプリ(Private apps)です。
公開アプリ
公開アプリは、Shopifyアプリストアに公開され、世界中のマーチャントに利用される可能性があります。有料のアプリと無料のアプリがあります。
カスタムアプリ
カスタムアプリは、単一のマーチャント向けに開発されるアプリです。Shopifyアプリストアには公開されません。カスタムアプリはShopifyパートナーのダッシュボードで管理されます。
プライベートアプリ
プライベートアプリは少数のマーチャント向けに開発されるアプリです。
プライベートアプリはマーチャントによって管理されます。カスタムアプリでは満たせない要件をプライベートアプリを開発することで補います。
現在新しくアプリを開発する場合は、プライベートアプリではなく、カスタムアプリを開発することが推奨されています。
3種類のアプリの比較
| 公開アプリ | カスタムアプリ | プライベートアプリ | |
| 必要要件 | 公開前にShopifyに申請し承認プロセスを経る必要がある。 | なし | なし |
| ターゲット | ・世界中のマーチャント。 ・Shopifyアプリストアで公開される。 | ・単一のマーチャント。 ・単一のストアにしかインストールできない。 | ・少数のマーチャント |
| 認証 | OAuth2.0 | OAuth2.0 | basic HTTP authentication |
| ストア画面への埋め込みは可能か？ | ◯ | ◯ | × |
| 管理者 | Shopifyパートナー | Shopifyパートナー | マーチャント |
| インストール方法 | マーチャントはShopifyアプリストアから好みのアプリを選択し「アプリを追加する」ボタンを押す。OAuthの認証フローを経て、ストアにアプリがインストールされる。 | パートナーがインストールリンクを発行し、マーチャントに送信する。マーチャントがそのリンクをクリックしてインストールの手順をたどる。 | 最初からマーチャントによって管理されている。マーチャントがストアのAPIキーとAPIシークレットキーをプライベートアプリに設定することで、アプリはストアにアクセスすることができる。 |
アプリ開発の始め方
今回は公開アプリを開発するまでの流れを紹介します。
まずは、パートナーアカウントに登録する必要があります。パートナーアカウントの登録方法についてはコチラをご覧ください。
次にパートナーの管理画面からアプリのテスト環境として使用するための開発ストアを作成します。「ストア管理 > ストアを追加する」をクリックしてください。
ここでは必ず「開発ストア」を選択してください。後に追加の情報を入力していきます。
ストアURLはストア名のハッシュ値になっているようです。
ストア名によってはストアURLが(既に使われているので)利用できませんと表示されるので、ストア名を色々と変えて入力し、利用可能な文字列を探してみてください。
「開発者プレビューを使用する」というオプションをオンにすればこれからリリースされる機能をテストできます。今回はどちらでも構いません。
住所とストアの目的を記入して保存を押します。入力情報が正しければストアが生成されます。筆者の環境では1分ほどで作成されました。
ストアの生成が完了するとストアの管理画面に遷移します。これから本題であるアプリの作成に取り掛かるので、再度パートナーの管理画面にアクセスしてください。
左メニューから「アプリ管理 > アプリを作成する」をクリックします。
今回は公開アプリを選択します。
アプリ名とアプリURL、リダイレクトURLを設定します。
どれもアプリ作成後に変更できるのでこの時点で決まっていなくても仮の値を入力できます。完了したら「アプリを作成する」をクリックします。
アプリ作成が完了したら、アプリ管理の画面に作成されたアプリが表示されているので、アプリ名をクリックしてください。
アプリの基本設定をしていきますので、「アプリ設定」をクリックしてください。
注文やサブスクリプションへのアクセスを有効にすると、アプリがアクセスできるデータのスコープを拡張することができます。開発するアプリの性質によっては有効にする必要があります。
また、Shopifyチャネルの開発を行う際は、アプリを販売チャネルにする必要があります。
アプリURLやリダイレクトURLの変更、アプリのアイコン設定などもこのページで行えます。
ここまででアプリ開発の準備は整いました。
しかし、先ほど作成したテスト環境をまだ使えていません。開発ストアをテスト環境として使用するためには、開発ストアにアプリをインストールする必要があります。そのためには、アプリに認証処理を実装する必要があります。
アプリインストール時の認証処理について
アプリ開発にスムーズに取りかかるために、アプリの認証処理について簡単にまとめます。
マーチャントがShopifyアプリストアなどでアプリのインストールリンクをクリックすると、そのアプリに設定されたアプリURLにGETリクエストされます。開発ストアに開発中のアプリをインストールする際も同じです。
アプリはそのGETリクエストに対して、下のような承認画面を表示する必要があります。
この画面をユーザに表示するためには、GETリクエストに対して以下のURLへのリダイレクトを返します。
https://{shop}.myshopify.com/admin/oauth/authorize?client_id={api_key}&scope={scopes}&redirect_uri={redirect_uri}&state={nonce}&grant_options[]={access_mode}
ここからOAuth認証のフローが始まります。
最終的にはアプリがマーチャントのアクセストークンを取得することで、マーチャントのストアデータに設定したスコープの範囲でアクセスできるようになります。
アプリの開発環境について
ローカル開発環境
開発ストアにアプリをインストールしてテストするためには、アプリURLに(インターネットを介して)外部からアクセスできる必要があります。
http://localhost:8000といったURLでローカルサーバを立てても(インターネットを介して)外部からアクセスできないのでテストを行えません。
この問題を解決するためにngrokというツールがよく使われます。
ngrockを使うとローカルサーバがListenしているURLのエイリアスとして、https://[ランダムな文字列].ngrock.comという一時的なURLを生成してくれます。このURLは(インターネットを介して)外部からアクセスできます。
このようにngrockを使うことで、ローカルの開発環境を構築することができます。
本番環境
アプリをリリースするときは、アプリ開発者が本番環境用のインフラやサーバを準備する必要があります。
開発言語
基本的にアプリを開発するプログラミング言語に制限はありません。しかし、Shopfiy APIにアクセスし適切な処理が行える言語機構を有している必要があります。
Shopify開発に使用するプログラミング言語について詳しく知りたい方は、以下の記事を参考にしてください。
アプリ開発で利用できるツール・API
Shopifyはアプリ開発用に様々なツールを提供しています。代表的なものを以下にまとめます。
Polaris
Polarisはマーチャントの管理画面にアプリ専用のUIを埋め込むのに利用されるUIコンポーネントです。Reactコンポーネントとしても提供されています。
Webhook
Webhookを設定することで、特定のイベントをトリガーにして別の処理を呼び出すことができます。以下の記事で詳しく解説しています。
ShopifyにおけるWebhookの全てを15分で把握する
App Bridge
App Bridgeはマーチャント向けの標準機能をアプリから利用できるようにしたものです。JavaScriptのライブラリとして提供されます。
App extentions
App extentionsはShopifyのストア管理画面にアプリの画面を埋め込めるようにする拡張機能です。ストア管理画面の(注文管理、商品管理などが並ぶ)メニューにアプリにアクセスするボタンが設置されます。
Buy SDKs
テーマを使わず外部のウェブサイトやモバイルアプリとしてフロントエンドを実装しShopifyのストア管理機能を利用する場合は、Storefront APIだけでなく、SDKを使用できます。Javascript Buy SDK、Android Buy SDK、iOS Buy SDKなどが提供されています。
【最後に】アプリを開発してみよう！
この記事を最後まで読んでくれたあなたはアプリ開発の全体像と、始め方を把握できたはずです。
さらにアプリ開発について知るためには、実戦あるのみです。
是非アプリ開発を進めてみてください。
