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

2022-05-31 01:10（更新：2024-01-18 02:50）トランスコスモスShopifyエンジニアShopifyアプリ

Shopifyストアに欲しい機能が Shopifyアプリストアに無い場合は、カスタムアプリを作ることになります。カスタムアプリにも様々な種類が考えられますが、マーチャントが利用する管理画面に機能を追加する場合、Shopifyが提供する Polarisという UIコンポーネントを使ったアプリ開発が推奨されます。Shopifyの管理画面自体が Polarisで構築されているため親和性が高く、UXデザインにも時間をかけずに済むメリットがあります。

今回はそんな Polarisを使ったアプリ開発の準備編です。

目次[非表示]

1.Shopifyのアプリ開発にあたって
2.Shopifyパートナーダッシュボードからアプリ作成
3.AWS環境の準備
4.インストールURLの作成
5.アプリのインストール
6.リンク集

Shopifyのアプリ開発にあたって

アプリの開発を行うにあたり、下記の前提条件を確認しておきましょう。本記事ではアプリサーバーとしてAWSを利用します。無料のものでも構いませんが、期間切れなどにご注意ください。

アプリ開発の前提条件

・ShopifyIDを作成し、Shopifyパートナープログラムに参加済みであること。

・Amazon Web Services（AWS）のアカウントを作成しておくこと。

Shopifyパートナーダッシュボードからアプリ作成

アプリを作成する

動作確認用に仮のアプリを作成します。shopify partners (https://partners.shopify.com/)にアクセスし、メニューの「アプリ管理」をクリックし、続いて「アプリを作成する」をクリックします。

「どのようなタイプのアプリを開発していますか？」と表示されたら「カスタムアプリ」を選択します。「カスタムアプリ」以外の選択肢として「公開アプリ」がありますが、「公開アプリ」はShopifyアプリストアに公開して、マーチャントが自由にインストールできるアプリになります。また、以前は「プライベートアプリ」という選択肢もありましたが、2022年1月あたりから非推奨となり作成することができなくなりました。

「アプリ名」に任意の名前をつけます。この段階では「アプリURL」と「リダイレクトURLの許可」は未記入で問題ありません。

APIキーとAPIシークレットキーを取得

「アプリを作成する」ボタンをクリックすると下図のように表示されます。「APIキー」と「APIシークレットキー」はこの後の設定で必要ですので、メモ帳などのアプリにコピペしておきましょう。

AWS環境の準備

API Gateway

今回は動作確認のためだけのRESTアプリを作成するため、 AWSの「API Gateway」を使います。「API Gateway」の詳細はこちらをご覧ください。AWSのコンソールにログインして「API Gateway」を選択します。

REST API

「APIタイプを選択」と表示されたら「REST API」を選択して「構築」ボタンをクリックします。

「API名」と「説明」に任意の値を設定し、「エンドポイントタイプ」は「リージョン」を選択して「APIの作成」ボタンをクリックします。「エンドポイントタイプ」とはAPIへのリクエスト元の場所を既定するもので、地理的に制限しない「エッジ最適化」、同じリージョンのクライアントを対象にする「リージョン」、AWS VPC（Virtual Private Cloud）からしかアクセスできない「プライベート」があります。詳細はこちらをご覧ください。

メソッドの追加

「アクション」をクリックしてメソッドを追加します。今回は動作確認のためだけのREST APIなので「GET」のみを作成します。

「メソッドの作成」を選択して、

「GET」を選択してチェックアイコンをクリックします。

そして、下記のように設定して「保存」ボタンをクリックします。

・統合タイプ：Lambda関数

・Lambdaプロキシ統合の使用：オフ

・Lambdaリージョン：ap-northeast-1

・Lambda関数：任意の名称

・デフォルトタイムアウトの使用：オフ

・カスタムタイムアウト：空

警告が出る場合がありますが、無視して構いません。

「API Gatewayに、Lambda関数を呼び出す権限を与えようとしています」のポップアップが開いたら「OK」ボタンをクリックします。

関数の作成

メソッドの作成が完了すると下図のように表示されます。続いて先ほど設定した Lambda関数名をクリックしてAWS Lambdaの設定に移ります。

AWS Lambdaの画面に移ったら、「関数の作成」ボタンをクリックします。

「関数の作成」が開いたら「一から作成」を選択します。「一から作成」はシンプルな Hello Worldを表示するサンプルをカスタマイズしていく方法です。他にも一般的なユースケースを基にしたテンプレートが使える「設計図を使用」やあらかじめECR（Elastic Container Registry）に用意したコンテナイメージを選択する「コンテナイメージ」、サーバーレスアプリケーションのリポジトリからサンプルをデプロイする「Serverless application Repository」を利用する方法があります。

「基本的な情報」を設定して「関数の作成」ボタンをクリックします。

・関数名：任意の名称

・ランタイム：任意のランタイムライブラリ（本記事では Java11 (Corretto）を使用します）

・アーキテクチャ：x86_64

・実行ロール：基本的な Lambda アクセス権限で新しいロールを作成

本記事では「詳細設定」は使いません。

関数が作成されるとAWS Lambdaに関数名が表示されるので、関数名をクリックします。

関数の概要が表示されます。

動作確認

同じ画面で「テスト」のタブをクリックしてテストイベントを作成します。

「イベント名」に任意の値を設定して「テスト」ボタンをクリックします。

テストに成功すると「実行結果：成功」と表示されます。

ログの確認

ログを見てみましょう。CouldWatchの画面が開きログストリームが表示されます。ログストリームとはログの出力元ごとのログイベントのことであり、実際のログはその中に記録されています。エラーが発生したときは、まずこのCloudWatchでログを確認します。ログストリームの一覧で該当するものを選択するとその内容を確認することができます。

ログを開き「Error」などが出力されていないことを確認します。

APIのデプロイ

API Gatewayに戻って作成したAPIを選択し、リソースの表示に戻ったら「アクション」から「APIのデプロイ」を選択します。

「APIのデプロイ」が表示されたら、「デプロイされるステージ」を「新しいステージ」にして、「ステージ名」に任意の名称を付けます。「ステージの説明」や「デベロップメントの説明」も適当な説明を記入しておきます。「デプロイ」ボタンをクリックします。

デプロイが正常に完了すると下図のように表示されます。「URLの呼び出し」に続いて表示されるURIが APIを呼び出すための URIです。メモ帳などにコピペしておきましょう。

アプリ作成の続き

Shopify partnersの「アプリ管理」に戻り、「アプリ設定」に進みます。

そして、先ほどデプロイしたAPIのURIを「アプリURL」と「リダイレクトURLの許可」にペーストして「Save」ボタンをクリックします。

開発ストアでテスト

「開発ストアでテストします」に進みます。まだ開発ストアを作っていない場合は「新しいストアを作る」ボタンで開発ストアを作成してください。

ストアの作成方法については割愛します。

開発ストアを作成したら「アプリをインストールする」をクリックします。

インストールに成功すると直ちにアプリが実行されるため、アプリの実行結果が表示されます。

{"body":"Hello from Lambda!","statusCode":200}

もし、{"message":"Internal Server Error"} などのエラーが表示された場合は前述の設定を見直し、また AWSのドキュメントなどをご確認ください。

（参考）HTTP API Lambda 統合に関する問題のトラブルシューティング

（参考）ステージ変数を使用して API Gateway で Lambda 統合を定義しました。API メソッドを呼び出すと、「内部サーバーエラー」と 500 ステータスコードが表示される理由は何ですか?

これで動作確認は完了です。

インストールURLの作成

リンクを作成する

Shopify Partnerのダッシュボードで「アプリ管理」から対象のアプリを選択して、「リンクを生成する」ボタンをクリックし、アプリをインストールするためのリンクを作成します。

インストール先ストアのドメインを入力して「リンクを生成する」ボタンをクリックします。

ストアのドメインを確認するポップアップが開いたらURLを確認して、間違いがなければ「リンクを作成する」ボタンをクリックします。

インストールリンクのコピー

リンクの作成に成功すると「インストールリンクの準備ができました」と表示されます。「インストールリンクをコピーする」をクリックするとアプリのURLをクリップボードにコピーすることができます。

アプリのインストール

インストール用URL

インストール用URLをテキストエディタなどで確認すると、下記のようになっています。

https://{shop}.myshopify.com/admin/oauth/authorize?client_id={api_key}&scope={scopes}&redirect_uri={redirect_uri}&state={nonce}&grant_options[]={access_mode}

アプリが Shopify APIを利用してストアのデータを取得するには、アプリと Shopifyの間で OAuth 2.0という業界標準のプロトコルで認証される必要があり、URLにはそのためのオプションも一部含まれます。Shopifyの OAuthについてはこちらをご覧ください。

URL中の波括弧はそれぞれ下記の変数を表しています。

shop

インストール先ストアのドメイン（サブドメイン）。

api_key

最初に作成したアプリのAPIキー

scopes

必要に応じてアプリに与えたい権限を指定することができます。複数の権限を指定する場合はカンマ（,）区切りで指定します。また、書き込み権限は読み込み権限を含みますので、アプリがデータを読み込んで、書き込むという場合は、書き込み権限だけを指定すれば問題ありません。以下に、一部を紹介します。

アプリで価格ルールを読み書きするとき	read_price_rules, write_price_rules
アプリで顧客情報の読み書きするとき	read_customers, write_customers
アプリで下書き注文の読み書きするとき	read_draft_orders, write_draft_orders
アプリで注文の読み書きするとき	read_orders, write_orders
アプリでロケーションを読み込むとき	read_locations
アプリでギフト情報を読み書きするとき※	read_gift_cards, write_gift_cards
アプリでユーザーやスタッフを読み込むとき※	read_users

※Shopify Plusのみで利用可能

詳細はこちら（英語）をご覧ください。

redirect_url

AWSのAPI GatewayのURLを指定します。

nonce

ナンス（ノンス）は任意です。ナンスとは認証の過程で使われる使い捨ての乱数です。セキュアな情報を出力するアプリの場合は、アプリが適切なストアでしか利用されないように、あらかじめ提供される乱数的な値をここに設定する必要があります。アプリは認証時にこの値をチェックして、不正なストアからのリクエストを防止することになります。

access_mode

アクセスモードは任意です。アクセスモードには「per-user」と「value」の二種類があり、デフォルトは「value」になります。「per-user」はオンラインアクセスモードのトークンを生成するモードであり、ストアを訪れるユーザーごとに認証トークンが生成されて、ユーザーのウェブセッションの寿命の間、有効になります。つまり、ユーザー画面でユーザーごとに情報表示あるいは情報入力させるようなアプリの場合は「pre-user」をセットすることになります。「value」はオフラインアクセスモードのトークンを生成するモードであり、ユーザーとのインタラクションを伴わない長期的なアクセスに適しています。たとえば Webhookに応答するバックグラウンド処理などは「value」を設定します。

ストアへのアプリインストール

ストアにログインした後、インストール用URLをブラウザのアドレスに直接指定すると、下図のような画面が開きます。

「アプリをインストール」ボタンをクリックします。

インストール結果

インストールが完了するとアプリの実行結果が表示されます。

https://ofy98atu1h.execute-api.ap-northeast-1.amazonaws.com/test_app_001?code=faa440d78a204335df4f70e97365fce9&hmac=cabf81324134b7f445a5fbfd7d4c76db7e96fcdc9f4f78b8f02d2fb25bc98db6&host=dGVzdGFwcHN0b3JlczAwMS5teXNob3BpZnkuY29tL2FkbWlu&shop=testappstores001.myshopify.com&state=&timestamp=1649998858

※このときのURLをメモ帳などにコピペして保存しておいてください。（次回の記事にて利用します）

ストアのアプリ管理画面

インストールに成功するとストアのダッシュボードの「アプリ管理」メニューにアプリが追加されていることが確認できます。

そして、アプリ名をクリックするとインストール直後と同様、実行結果が下図のように表示されます。

これでストアへのアプリのインストールは完了です。

リンク集

本記事で参考にしたサイトをご紹介します。

今回は Shopifyでカスタムアプリを開発するための開発環境を整えるところまでのご紹介となります。次回は Shopifyのアプリ開発で用いられる UIフレームワークの Polarisを用いて、簡単な Shopifyアプリの開発を行います。ご期待ください。

トランスコスモスShopifyエンジニア

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