Shopify でテーマとアプリを開発する – ThemeKit / Shopify App CLI –
前回の「Shopify で出来ること – 基本機能のご紹介 –」では Shopify が提供する EC の基本機能について解説しました。本記事ではショップのカスタマイズ方法をご紹介します。
テーマとアプリでカスタマイズする
Shopify のショップのカスタマイズ方法は大きくテーマとアプリがあります。テーマとアプリはそれぞれマーケットプレイスがあり、既製品を購入することが出来ます。既製品では対応できない場合にはテーマとアプリを開発します。以下の分類表を開発方針の指標にして頂ければと思います。それではテーマとアプリの開発を行うための公式のツールをご紹介します。
テーマとは
Shopify のショップ画面のデザインのことです。Liquid 言語を用いて開発します。「Shopify の技術的特徴とマイクロサービスアーキテクチャ解説」でデータ構造について解説しましたが画面のデザインを修正する際にはテーマの Liquid ファイルを修正します。
テーマの構造
Debut テーマを例に、フォルダの構造ではなくて呼び出される順番です。
layout / theme.liquid ：テーマレイアウトの大枠
└ templates / collection.liquid ：各ページのレイアウト雛形
└ sections / collection-template.liquid ：テーマエディタから編集可能な共通パーツの定義
└ snipets / bgset.liquid ：ページに読み込むパーツの定義（アイコン等）
├ locales ：翻訳の定義と内容
├ config ：テーマエディタの設定
└ assets ：CSS・Javascript・画像・フォントなど
テンプレートファイルとページの対応
- 404.liquid：404ページ
- article.liquid：ブログ記事個別ページ
- blog.liquid：ブログ記事一覧ページ
- cart.liquid：カート内アイテム一覧ページ
- collection.liquid：コレクション（＝商品一覧）ページ
- gift_card.liquid：shopify ギフトカードのレンダリングページ
- index.liquid：ホームページ（ShopifyストアのTOPページ）
- list_collections.liquid：コレクション一覧（＝商品カテゴリ一覧）ページ
- page.liquid：固定ページ
- product.liquid：商品詳細ページ
- search.liquid：検索結果ページ
- customers/account.liquid：アカウントの詳細ページ
- customers/activate.liquid：アカウントの有効化ページ
- customers/addresses.liquid：アカウントの住所ページ
- customers/login.liquid：アカウントのログインページ
- customers/order.liquid：アカウントの注文詳細ページ
- customers/register.liquid：アカウントの作成ページ
- reset_password.liquid：アカウントのパスワード再発行ページ
Themekit を使った開発環境構築
Shopify Dev Template を公開しているのでご活用ください。Themekit はテーマの編集用のコマンドラインツールです。既存のテーマからカスタマイズする場合に利用します。
テーマ開発の初期設定
公式の手順を参考に進めます。
1. Themekit のためのプライベートアプリを作成します。
「Admin API」内の「Theme templates and theme assets」を「Read and Write」に設定して保存。
Shopify Theme Kit Getting started より引用
2. テーマダウンロード
開発に利用するテーマをダウンロードします。
3. テーマファイルは Git で管理
ThemeKit を利用する場合 Shopify 画面での変更とローカルPCの差分が生まれるため、Git での管理をおすすめします。
4. ThemeKit をインストール
Windows の場合は、こちらからインストールしてください。
WSL を利用している際には、theme.exe に alias 設定すると便利です。
$ alias theme=”/mnt/c/dev/theme.exe”
5. ThemeKit 用の設定ファイル（config.yml）を作成
設定ファイルを用いてショップやテーマの向き先を管理します。
$ theme configure -p=パスワード -s=ストア名.myshopify.com -t=テーマID
■開発を進める
1. ローカル環境の変更を Shopify 開発中のショップへ反映
$ theme watch
2. 編集内容の確認
$ theme open
3. 修正内容の保存
Git にプッシュしてください
■注意点
以下２フォルダのファイルは、Shopify 管理画面上の設定内容が記載されています。
そのため、config/.json , locales/.json のファイルは Git を正とするより Shopify 上の設定を正とする方が良いでしょう。
Tips: theme get -t=テーマID で最新のソースコードがダウンロードされます。
参考記事
https://shopify.dev/tutorials/develop-theme-templates
https://shopify.dev/tutorials/develop-theme-layouts-theme-liquid
https://shopify.github.io/themekit/
アプリとは
Shopify はアプリで機能を拡張することが出来ます。アプリには公開アプリとカスタムアプリがあります。アプリは自社で保有する Web サーバー上で稼働させます。アプリと Shopify 間は API でデータのやり取りを行います。
Shopify App CLI による開発環境構築
Shopify Dev Templateを公開しているのでご活用ください。
Shopify App CLIのインストール手順に従い環境構築をします。今回はWindows/WSL/Ubuntuで構築します。
create
$ shopify create project apps
アプリを作成。Shopify Partners ダッシュボードに apps が追加されます。
serve
$ shopify serve
Node で立ち上げた場合はlocalhost:8081でWebサーバー上で動くアプリがビルドされて起動します。
※ここで localhost:8081 を見ても動きませんが、後述の手順が必要になるので焦らないでください。
tunnel start
$ shopify tunnel start
ngrok を利用し、インターネットから localhost:8081 へトンネリングします。
ngrok の URL から確認するとアプリが動いていることが確認できます。
https://url.ngrok.io -> http://localhost:8081
アプリをストアへインストール
ここまでの手順では shopify-app-cli を利用し、アプリを作成→起動→インターネットからのアクセスを可能にしました。
では、次にアプリをストアへインストールします。
Step.1
shopify partners アカウントで「アプリ管理」から作成したアプリ（今回は Apps ）を選択します。
Step.2
その他の操作→開発ストアでテストを選んでください
※今回はアプリを公開していないので、開発ストアでテストします。
Step.3
インストール先のストアを選択するとアプリのインストールが始まります。
※まぁまぁ時間がかかるので気長に待ってください。
Step.4
インストールしたストア上の「アプリ」で動いていることが確認できます。
tunnel stop
$ shopify tunnel stop
トンネリングを止めます。
注意点
shopify tunnel stop を行うと ngrok の URL が変わるため、改めてアプリのビルドとインストールをし直す必要があります。
再びshopify tunnel startしshopify serveするごとに「アプリURL（ngrok）」と「ホワイトリストに登録されたリダイレクトURL（ngrok）」が変更されるからです。
Expected a valid shop query parameterと出たら Github のissueが参考になります。
さて、ここからは Shopify App CLI の他の機能をご紹介します。
populate
$ shopify populate products | customers | draftorders
データ生成コマンド、商品（products）| カスタマー（customers） | 下書き注文（draftorders） を生成します。
deploy
$ shopify deploy
heroku へデプロイします。Shopify App CLI で生成されるアプリは koa / Node.js をベースとした Web サーバー上で稼働します。Shopify App CLI は 2020年5月時点では heroku へのデプロイのみ提供しています。AWS / GCP / Azure などのクラウドで稼働させる場合は別途 CICD パイプラインを構築してください。AWS へのデプロイについては後日解説します。
generate page
$ shopify generate page information
今回、information というページを作成しました。生成したページ名の React / Next ファイルが生成されています。
annotation を選択し、pages/information.js が生成されます。
アプリの挙動を確認するには、インストールしたアプリの URL に /information を追加するとアプリ内に information 画面が表示されています。
generate billing
$ shopify generate billing
アプリの販売方法を設定します。１回での買い切り購入か、月額のサブスクリプションモデルを作成出来ます。
generate webhook
$ shopify generate webhook WEBHOOK_NAME
webhook を作成します。
Webhook は Shopify のイベントをきっかけに通知されます。
商品の登録や受注、Create / Update / Delete をきっかけにして POST します。
Webhook とは
Webhookサブスクリプションを使用して、ショップ内の特定のイベントに関する通知を受け取ることができます。Webhookをサブスクライブすると、API呼び出しを定期的に行ってステータスを確認する代わりに、アプリがインストールされているショップで特定のイベントが発生した直後にアプリにコードを実行させることができます。たとえば、顧客がカートを作成したとき、または販売者がShopify管理者で新しい製品を作成したときに、Webhookを使用してアプリでアクションをトリガーできます。Webhookサブスクリプションを使用することで、全体的に少ないAPI呼び出しを行うことができます。これにより、アプリがより効率的になり、迅速に更新されます。
https://shopify.dev/docs/admin-api/rest/reference/events/webhook
https://shopify.dev/concepts/shopify-introduction
Webhook の設定
- Shopify 管理画面→設定→通知
- Webhook を作成
- イベントを選択してください。フォーマットは JSON のままで良いでしょう。URLはイベントを受け取りたい Web サーバーの URL を指定してください。Webhook API バージョンはソースコードと一致させてください。
Webhook の疎通確認
「テスト通知を送信する」ボタンを押して疎通確認を行います。
参考記事
https://www.shopify.jp/blog/partner-cli-tool
https://github.com/Shopify/shopify-app-cli