Shopifyテーマのローカル開発環境 -Shopify CLI-

先日、Shopifyのテーマを編集する機会がありました。

Shopifyでは、ストア管理画面のコードエディタから直接テーマのコードを編集できます。しかし、本番環境のコードを直接編集するのに抵抗があったのと、Gitでのバージョン管理やローカルでのプレビューなどをしたかったので、Shopify CLIを使用してローカルに開発環境を構築しました。

そこで今回は、Shopify CLIを使用したテーマファイルの同期やローカルでのプレビューの方法などについてご紹介します。

※Shopify CLIを使用して開発を進めるには、対象のストアにログインできるアカウントを持っている必要があります。
※ローカルでのテーマプレビューにはGoogle Chromeを使用する必要があります。

Shopify CLIをインストール

Shopify CLIはShopifyが提供している開発ツールです。
私の環境はmacOSなのでHomebrewを使用してShopify CLIをインストールしました。インストールガイドではWindowsやLinuxへのインストール方法も説明されています。

# shopify-cliをHomebrewに追加して、brew installできるようにする
brew tap shopify/shopify

brew install shopify-cli

# バージョンが表示されればインストールOK
shopify version
2.8.0

Shopify CLIがインストールできたら、CLIを使用してストアにログインします。

※ログインしなければテーマの同期やローカルプレビューなどのコマンドを実行できません。

# ストアを指定してログイン
shopify login --store STORE_URL

STORE_URLに指定する値はデフォルトドメインやカスタムドメインなどの複数の方法から選択できます。shopify login

上記のshopify loginを実行するとターミナルにURLが出力されるので、アクセス後にユーザーを選択して認証します。

認証が終わると以下のような表示に切り替わります。これ以降ログインしている間はShopify CLIからストアやテーマに対するコマンドを実行できるようになります。

本番環境からテーマをプル

まずはローカルにテーマファイル一式をダウンロードします。
ターミナルでプロジェクトフォルダに移動した後に以下のコマンドを実行します。

shopify theme pull

コマンドを実行するとプルするテーマを聞かれるのでテーマを選択します。

プルするテーマを選択するとカレントディレクトリにテーマファイルが展開されます。

※Shopify CLIのテーマ関連コマンドはShopifyが定めたテーマのディレクトリ構造と一致していないと実行できないものがあるので、プルしたテーマのディレクトリ構造は変更しないようにします。

ローカル開発サーバーを起動

テーマファイルをローカルに用意できたので、ローカルサーバーを起動して開発テーマを表示します。コマンドはテーマファイルが展開されているディレクトリで実行します。

※開発テーマとはストアに接続されている非表示のテーマのことで、この場合先ほどプルしたテーマのことを指します。

shopify theme serve

上記のコマンドを実行するとURLが3つ表示されます。

1つ目のURLからは開発テーマサイトにアクセスできます。
こちらのサイトはホットリロードに対応していて、テーマコードを編集して保存すると自動でページが再読み込みされます。

2つ目のURLからは開発テーマのテーマエディタにアクセスできます。
作成したセクションのさまざまな設定パターンなどをテストできます。こちらで設定した内容は開発テーマだけのものなので、「保存」しても本番環境に影響を与えません。開発テーマのエディタで作業しているときはヘッダーにDevelopmentと表示されます。

ただし「公開する」を選択してしまうと開発テーマがそのまま公開されてしまうので注意が必要です。

3つ目のURLからはサイトのプレビューにアクセスできます。
1つ目のURLはループバックアドレスなので他の開発者からはアクセスできません。なので、こちらのURLは他の開発者にプレビューリンクを共有したい時に使用します。

本番環境にテーマをプッシュ

テーマファイルの編集が終わったら本番環境にプッシュします。

※テーマエディタの設定値はJSONファイルとしてテーマに含まれています。テーマをプルした後に本番環境の設定を変更した場合、開発テーマと本番テーマに差ができてしまいます。複数人で作業している場合は古いデータで上書きしてしまわないように注意が必要です。

shopify theme push

プルした時と同様、プッシュするテーマを聞かれるので対象のテーマを選択してプッシュします。

その他の便利な機能

以上がShopify CLIの基本的な使い方ですが、他にも便利なコマンドがいくつかあるので合わせてご紹介します。

サンプルデータをストアに追加

shopify populate [ products | customers | draftorders ] [ --count <NUMBER> ]

商品・顧客・下書き注文をストアに追加できます。これからストアを作成するときなど、仮のデータを素早く作成できるのでとても便利です。shopify populate

テーマコードをチェック

shopify theme check [ options ] [ /path/to/your/theme ]

Liquidのエラーやベストプラクティスに従っていない箇所を教えてくれます。オプションを指定することによってチェックする内容を細かく指定できます。shopify theme check

終わりに

今回はShopify CLIの基本的な使い方をご紹介しました。
実は以前に古い開発ツールの「Theme Kit」を少しだけ使用したことがあったのですが、個人的にはShopify CLIの方が高機能で使いやすい印象を受けました。Shopifyの新しい規格であるOnline Store2.0に対応しているテーマの開発にはShopify CLIが必須なため、しっかり慣れておきたいです。