アカウント作成
ShopifyPartnerのページから「Join Now」を選択してアカウントの作成を進める。
ストアの作成
開発ストアを作成しよう。
ストア名は任意の内容で問題ない。
作成が完了すれば、{ストア名}.myshopify.comで自分のストアにアクセスできるようになる。
アプリの開発
Shopifyのパートナーページからログインしよう。
すると、アプリの作成画面に辿り着ける。
目的に応じてカスタムアプリか公開アプリのいずれかを選択しよう。
アプリURLとリダイレクトURLにはとりあえず「https://localhost/」と入力しておけば問題ない。
これでアプリ完成である。
アプリをインストールしよう
envファイルの編集
ngrokを公式サイトからダウンロードし、設定をしておこう。
また、ngrokのサイトでサインアップをついでに済ませておくと良い。
ngrokを立ち上げ、ローカルでアプリの.envファイルを編集する。
SHOPIFY_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxx SHOPIFY_API_SECRET=shpss_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx SHOP=frepra.myshopify.com SCOPES=write_products,write_customers,write_draft_orders HOST=https://xxxxxxxxxxxxxxxxxxxxxxx.ngrok.io
入力する項目は以下の通り。
SHOPIFY_API_KEY
SHOPIFY_API_SECRET
カスタムアプリのAPIキー、APIシークレットキーを記載する。
SHOP
{ストア名}.myshopify.comを記載する。
SCOPES
記載しなくてもOK。
サブスクリプションアプリを開発する場合は、上記のように記載しておこう。
HOST
ngrokで表示されたものを記載する。
ngrokの使い方はこちら。
ストアにインストールする
URLを設定する
アプリの設定>URL
アプリURL、リダイレクトURLの許可の部分にngrokのURLを入力し、保存する。
次に、以下のURLにアクセスする。
https://[ngrokで発行したURL]/login?shop=[shopifyの開発ストアの名称] 例:https://xxxxxxxxxxxxxxx.ngrok.io/login?shop=frepra.myshopify.com
これでアプリのインストール画面に遷移するので、インストールを完了すれば終了。