Polarisによる Shopifyアプリ開発（準備編②）

前回記事のおさらいとなりますが、PolarisとはShopifyのアプリ開発で用いられるUIフレームワークです。まだ開発環境が整っていないので、今回はサーバーの立ち上げなど引き続き環境の作成について解説します。前回の記事をまだご覧になっていない方は、こちらを先にご覧ください。

Polarisによる Shopifyアプリ開発（準備編①）

Polaris導入方法続き

①Shopifyストアの準備

※設定済の場合は本手順はスキップしてください。

前回の続きから始めます。始める前にShopifyストアの設定を一通りしておくことをおすすめします。詳細な設定手順は今回は省略しますが、下記に一例を掲載しますのでご参考までにご覧ください。

・Shopifyパートナー経由でストアを作成します。

Shopifyパートナー経由でストアを作成すると3日間の制約に縛られることなく、無期限でストアを維持できます。

・ストアに商品を追加します。

・配送料を設定します。

・決済の設定をします。
※決済周りの設定は今回の場合、テストモード注文でOKです。

②アクセストークン取得と注文情報取得

APIを利用するのに必要なアクセストークンを取得する手順について解説します。アプリを作成するにあたり、APIの利用は欠かせないものとなっています。後日掲載するAPIを用いて注文情報を取得するアプリ作成の記事にも関わってきます。重要なポイントとなりますので慎重に進めてください。

OAuth認証についての知識があれば、アクセストークン取得がより理解しやすくなると思います。今回の記事では詳しく解説いたしませんがOAuth認証とは、ユーザーがアプリを承認して、別のアプリ内に保存されているリソースにアクセス出来るようにする認可のプロセスのことを言います。

それではアクセストークンを取得していきます。下記URLを任意のテキストエディタに張り付け編集してください。

https://{shop}.myshopify.com/admin/oauth/access_token?client_id={api_key}&client_secret={api_secret}&code={authorization_code}

URLに入れる値については下記を参照してください。

shop：作成した開発ストアのドメインを記入します。
　　　例：testappstores001

api_key：作成したアプリのクライアントIDを入力します。
api_secret：作成したアプリのクライアントシークレットを入力します。
クライアントの資格情報はShopifyパートナーのアプリ管理⇒すべてのアプリ⇒(作成したアプリ)⇒概要から確認してください。
※「表示する」ボタンで値を表示可能です。

code：authorization_codeの部分は前回の記事の実行結果から取得したcodeの値を記入します。
　　　例：cf58684cde505b6c552f6c2d63e89bab

作成したURLをお好きなツールでPOSTリクエストを送信してください。
今回はPostmanを使用しています。

※Postmanのアカウント作成は今回は不要です。

取得したアクセストークンをメモに残しておいてください。
※注意点としてアクセストークンの有効期間はユーザーのWeb セッションの有効期間となっているため取得後はなるべく早めに次の作業を行ってください。取得に失敗した場合、手順の見直しや設定した値の見直しをしてください。

見直すポイント
・shopにいれる開発ストアのドメインの入力値に誤りがないか？
・クライアントID、クライアントシークレットの入力値に誤りがないか？
・codeの入力値に誤りがないか？
・入力値に半角スペース、全角スペース、全角文字が入っていないか？

無事にアクセストークンを取得できたので試しに注文情報を取得してみます。
事前にShopifyの注文情報を作成しておいてください。注文が完了すると下記のように表示されますので、表示が確認できたら今回はOKです。

無事注文が完了したら下記のURLを用いて、注文情報を取得します。

https://{shop}.myshopify.com/admin/api/{version}/orders.json

shop：作成した開発ストアのドメインを記入します。
　　　 例：testappstores001

version：APIのバージョンを入力します。
　　　　 ある程度古いバージョンでも取得可能ですがなるべく最新バージョンでの取得をオススメ 　　　　 します。注文情報のバージョンは2023年1月時点では下記のとおりです。

APIのバージョンの書き方
例：/admin /api /2022-10/orders.json

作成したURLをお好きなツールでGETリクエストを送信してください。パラメータには下記を指定してください。

KEY：access_token
VALUE：先ほど取得したアクセストークンを入力します。

取得に成功すると下記のように表示されます。

取得に失敗した場合、手順の見直しや設定した値の見直しをしてください。下記画像は一例として提示します。

見直すポイント

・shopにいれる開発ストアのドメインの入力値に誤りがないか？
・APIバージョンはサポートされているバージョンを指定しているか？
　※公式ヘルプで最新のバージョンを確認してください。
　 （参考）https://shopify.dev/api/release-notes
・入力値に半角スペース、全角スペース、全角文字が入っていないか？
・codeの入力値に誤りがないか？
・アクセストークンの有効期限は切れていないか？
​​​​​​​　※アクセストークンの有効期間はユーザーのWeb セッションの有効期間となっているため、有効
　　期限内のものを使用してください。
・入力パラメータに誤りがないか？
・注文情報取得に必要なアプリの権限が正しく設定されているか？
　※アプリの権限が設定されていない場合、アプリのインストールからやり直してください。

取得内容
今回取得した注文情報から、顧客情報や配送先情報などが取得できます。
一例を記載しますのでご参考までに確認ください。
※注文に関する個人情報はダミー情報に差し替えています。

billing_address：請求先住所に関するプロパティ

shipping_lines：配送先情報に関するプロパティ

customer：顧客情報に関するプロパティ

Shopifyは定期的にアップデートを行っているため、注意が必要です。データ取得の方法が変更があったりするので定期的な情報収集は欠かせません。他にも在庫確認などのAPIがあります。今回は解説しませんがまた機会があれば解説したいと思っています。

最後に

今回の記事も開発環境を整えるところまでとなります。第3弾も開発環境を整える記事となりますが、第4弾となる記事からPolarisを用いた簡単なアプリを表示させてからPolarisについて解説しますので、それまでしばらくお待ちください。