Shopifyアプリの開発フローと準備

概要

今回、社内でShopifyのアプリを作る機会がありました。Shopifyの公式にあるハンズオンを元にCLIでnodeアプリを作成しましたが、英語が苦手なこともあり、ところどころ詰まってしまいました。そこで、これからShopifyアプリを作ろうと思う方のためにまとめていこうと思います。

環境としては、

• Online Store 2.0
• Shopify CLI 2.1

で説明を進めていきます。

Shopifyの基本用語

Shopifyアプリとは

言ってしまえば、プラグインです。見た目のカスタマイズは主にテーマが担っています。アプリは管理画面の機能拡張やテーマへのパーツ追加などを行います。

https://shopify.dev/apps/getting-started

公開アプリとカスタムアプリ

アプリには公開アプリとカスタムアプリの2種類が存在します。公開アプリは不特定多数のマーチャントが、Shopify アプリストア(url)からインストールすることが可能です。カスタムアプリは特定のマーチャントに対して公開する専用のアプリです。

アプリ開発時にどちらかを選択し、その後は変更することが出来ません。今回はカスタムアプリで説明をしていきます。

https://shopify.dev/apps/getting-started/app-types

開発言語

node.jsまたはrailsを選択できます。今回はnode.jsで説明を進めていきます。

アプリの動作

アプリはどのようにして動くのか、アプリはshopifyとは別に、アプリ制作者が用意したサーバーで動かします。Shopify側のサーバーからデータなどを取得し、自前のサーバーで処理や保持などを行い、Shopify側にデータを送る形になります。Shopifyの管理画面にアプリ独自のUIを追加する場合は、iframeで描画してます。

認証

認証はOAuth2.0です。Store側でアプリのインストールをする際に、スコープ(各データへの必要なアクセス権)などを提示します。Store管理者が承認をすることで、アクセストークンが発行されアプリは要求したアクセス権を元に、データの取得や書き込みが出来るようになります。

APIキーやスコープなどはアプリの.envファイルに保持されます。

SHOPIFY_API_KEY=xxxxxx // APIキー
SHOPIFY_API_SECRET=yyyyyy // APIシークレット
SHOP=techqlab.myshopify.com // ストア
SCOPES=write_products,write_customers,write_draft_orders //スコープ

https://www.shopify.jp/blog/partner-shopify-access-token-generate

開発フロー

ではShopify アプリを実際に作ろうとしたらどのような手順になるのか。簡単な手順は以下のようになります。Shopify patnersの管理画面からも設定を作成することもできますが、エンジニアの方はCLIで完結できた方がやりやすいと思うので、その手順で説明します。

1. パートナーアカウントの作成
2. 開発ストアの設定
3. Shopify CLIのインストール
4. CLIで開発ストアへのログイン
5. CLIでShopifyアプリの作成
6. ngrokでローカル開発環境をストアに繋ぐ
7. 開発
8. 本番環境へのアップ

パートナーアカウントの作成

まずは開発を始めるためにshopify partnerのアカウントを作成します。shopify partnersのページ https://www.shopify.jp/partnersから新規登録を行います。

1つのパートナーアカウントで複数の開発ストアを立てられるので、1組織につき1parterアカウントでの作成になります。

開発ストアの設定

パートナーアカウントにログインしダッシュボードが表示されたら、まずストアを作成します。ストア管理からストアの追加を選択してください。

まずはストアタイプは開発ストアを選択してください。ストアURLはxxx.myshopify.comという形式になりますが、一度設定したものは永久欠番になります。具体的には

• アーカイブは出来ますが削除ができません。
• アーカイブにあるサブドメインは重複して使用することができません。
• 一度作ったストアを初期状態にリセットする方法がありません。

というものになります。

なので、ドメインに組織名や開発環境であるような記述を含めると良いです。

開発者プレビューは、Shopifyの新機能をいち早く試せる機能です。互換性はあるので、アプリ開発をするのであればオンにしておいて損はないでしょう。

Shopify CLIのインストール

Shopify CLIはアプリ・テーマ開発を行うための便利な機能をCLI上から実行できるようにしてくれるツールです。

macでは以下のコマンドでインストールができます。

// ruby gemを利用する場合
gem install Shopify-cli

// homebrewを利用する場合
brew tap shopify/shopify
brew install shopify-cli

インストールが成功したら、shopify helpで各コマンドの説明が見れます。

https://shopify.dev/apps/getting-started/create#step-1-install-shopify-cli

まとめ

今回はShopifyアプリがどのようなものか説明しました。また、アプリ開発の準備としてパートナーアカウントの作成、開発ストアの作成、Shopify CLIのインストールを行いました。

次回は実際にCLIを用いて、実際にアプリを動かしてみます。