catch-img

Polarisによる Shopifyアプリ開発(準備編②)

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

Polarisによる Shopifyアプリ開発(準備編①)

shopifyに関するお問い合わせをするボタン

shopify資料のダウンロードをするボタン


目次[非表示]

  1. 1.Polaris導入方法続き
  2. 2.最後に



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について解説しますので、それまでしばらくお待ちください。

shopifyに関するお問い合わせをするボタン

shopify資料のダウンロードをするボタン

shopify構築サービスバナー

トランスコスモスShopifyエンジニア
トランスコスモスShopifyエンジニア
トランスコスモスは日本で7社しかない最上位の「Shopifyプラスパートナー」です。最上位認定を堅持しShopifyでのECサイト制作・Shopifyアプリ開発を担うのが、トランスコスモスShopifyエンジニアチームです。Shopifyアプリの解説・紹介、Shopifyの基本的な使い方など制作や開発の過程で得られた知見をご紹介します。

Shopify導入についてのサービス問い合わせ

Shopifyアプリ解説・紹介記事


【無料】セミナー動画視聴


EC関連サービス


トランスコスモスのEC全領域を網羅するサービス


従業員(メンバー)インタビュー


トランスコスモスの定量的な強み

お気軽に
お問い合わせください

Shopify(ショッピファイ)
ECストア構築・運用代行

トランスコスモスは日本最上位の「Shopifyプラスパートナー」企業です
ロジスティクスサービス

 記事カテゴリー

【週間ランキング】ECブログ人気記事

ロジスティクス関連 新着記事

【初心者必見!】Shopifyマニュアル

 Tag(タグ)一覧

正社員募集(求人)

 【無料】資料ダウンロード

Shopify認定パートナー企業

shopify plus partner
トランスコスモスは最上位の「Shopify Plus partner(ショッピファイプラスパートナー)」です。
Shopifyでのサイト制作ならお任せください!
ECソリューションをお届けするサービスサイト

トランスコスモス株式会社
CX事業統括
ECX本部

〒150-0011
東京都渋谷区東1-2-20
渋谷ファーストタワー
050-1751-7700(代表)

経済産業省が定める「DX認定事業者」
トランスコスモスは経済産業省が定める「DX認定事業者」
トランスプラス
トランスコスモスの全社的な情報を発信するオウンドメディア
cotra
コンタクト/コールセンターに携わる方への情報サイト
トランスコスモス株式会社
企業サイト(コーポレートHP)
Global Digital Transformation Partner.
お客様企業のデジタル・トランスフォーメーション・パートナー。
shopify構築・制作・運用