Shopify CLIで開発環境を作ろう

Shopify CLIでテーマをローカル管理する方法と使い方(Themekitは古い?)

Shopify CLIとは?

Shopify CLIはアプリやテーマを開発する開発者のための、コマンドラインツール(黒い画面のやつ)です。
Shopify CLIを使うことでよりよい環境で開発できるようになります。

Shopify CLIを使ってローカル開発環境を構築しよう!

Shopify Unite 2021でOnline Store 2.0が発表されました。
これまでテーマの開発で使用してきたのは「Theme Kit」ですが、今後は「Shopify CLI」が推奨されるようになりました。

「Theme Kit」については過去の記事をご覧ください。

今回は、Shopify CLIを使ってShopifyテーマを編集する方法について紹介します。

Shopify CLI と Theme Kitどちらを選択するか

Online Store 2.0のテーマで作業している場合は、Online Store 2.0のサポートがあるShopifyCLIを使用する必要がありますが、古いテーマで作業している場合は「Theme Kit」を使用する必要があります。

(参照:Shopify CLI for themes

Online Store 2.0では、セクションがページに自由に差し込めるようになる「Sections Everywhere」という機能が追加されましたが、対応するためにはJSONテンプレートによってセクションが定義される必要があります。

古いテーマであってもTemplatesフォルダ内のLiquid形式のテンプレートをJSON形式のテンプレートに変換することでOnline Store 2.0に対応させることが可能です。

Shopify CLIでの 環境構築の流れ

1.Shopify CLIをインストールする

(注)Ruby2.7以上がコンピュータにインストールされている必要があります。(もしくはWSLかVMを利用)

Windows版インストール

新しいターミナルウィンドウで、ホームディレクトリに移動し、次のコマンドを実行します。

gem install shopify-cli

Shopify CLIが正しくインストールされていることを確認するには、次のコマンドを実行します。

shopify version

このコマンドはバージョン番号を返します。

Mac版インストール

gemでインストールするか、Homebrewを使ってインストールします。

gemでインストールする場合新しいターミナルウィンドウで、ホームディレクトリに移動し、次のコマンドを実行します。

gem install shopify-cli

Homebrewを使ってインストールする場合、Shopify CLIをインストールする前にShopifyのサードパーティリポジトリをHomebrewに追加します。

(注)MacにHomebrewを入れていない場合、Homebrewのインストールから始めてください。

brew tap shopify/shopify
brew install shopify-cli

Shopify CLIが正しくインストールされていることを確認するには、次のコマンドを実行します。

shopify version

このコマンドはバージョン番号を返します。

2.ストアとShopify CLIを接続させる

ストアと接続するためには、コラボレーターアカウント、もしくはスタッフアカウントの権限を持っている必要があります。

ターミナルで、下記のコマンドを入力します。

shopify login --store [ストアのURL]
(例)shopify login --store xxxxxxxx.myshopify.com

自動でブラウザウィンドウが立ち上がるので、開発に使用するストアに関連付けられているアカウントにログインします。

以下のようなメッセージが表示されれば成功しています。

Authenticated successfully. You may now close this page.

ターミナル上で使用するアカウントを選択します。

アカウント選択

下のように表示されれば接続完了です。

Logged into store [ストアURL] in partner organization [アカウント名]

3.新しいテーマを作成する

ローカルで管理するファイルのディレクトリに移動します。

cd [移動先]

移動したフォルダの中に新しいテーマを作成します。

shopify theme init [テーマに付けたい名前] [ クローンを作成するGitリポジトリのURL ]

テーマに付けたい名前を入力しなかった場合はテーマのタイトルを入力するように求められるので、任意のタイトルを入力します。

theme name

GitリポジトリのURLが指定されていない場合は、https://github.com/Shopify/dawn.gitが使用されます。

Shopifyのサンプルテーマである「Dawn」のコピーが、指定された名前で作成されます。

4.既存のテーマを使用する

既存のテーマをダウンロードする場合は、ダウンロードするディレクトリに移動し、下記のコマンドを実行します。

cd [移動先]
shopify theme pull [-i プルしたいテーマのID]

テーマのIDを指定しなかった場合、どのテーマをpullするか選択できます。

テーマのIDは、該当テーマの「カスタマイズ」から確認できます。

URLの数字の部分がテーマIDになります。

テーマID

5.ストアとローカル環境のShopify CLIを接続させる

テーマをプレビューするには下記のコマンドを実行します。

shopify theme serve

実行すると3つのURLが表示されます。

Please open this URL in your browser:
http://127.0.0.1:9292

Customize this theme in the Online Store Editor:
https://xxx.myshopify.com/admin/themes/123456789012/editor

Share this theme preview:
https://xxx.myshopify.com/?preview_theme_id=123456789012
  1. Please open this URL in your browser:に表示されているURLは開発テーマへのリンクです。
    リアルタイムで変更をプレビューできます。このプレビューはGoogleChromeでのみ利用できます。
  2. Customize this theme in the Online Store Editor:に表示されているURLはテーマのオンラインストアエディターへのリンクです。
  3. Share this theme preview:に表示されているURLは他の開発者と共有することができるプレビューリンクです。

このままshopify logoutすると開発テーマは削除されます。

6.ローカルテーマファイルをShopifyにアップロードする

テーマをアップロードするには下記のコマンドを実行します。

shopify theme push

ローカル環境でカスタマイズを行った内容を反映させたい場合

ローカル環境でテーマのカスタマイズを行った内容を反映させるには、下記を実行しローカル環境で行った内容をpullします。

shopify theme pull -n

pullするテーマを選択するように求められるので、ローカル環境で開発しているテーマを選択します。
-nをつけることで、ローカルファイルを削除せずにpullコマンドを実行します。

次にpullした内容を反映させたいテーマへpushします。

shopify theme push -n

Shopifyからリモートファイルを削除せずにローカルファイルをプッシュします。

Shopify CLIのバージョンを確認する

Shopify CLIが正しくインストールされているか、下記コマンドで確認します。

shopify version

このコマンドはバージョン番号を返します。

⭑ A new version of Shopify CLI is available! You have version 2.2.2 and the latest version is 2.6.6.

  To upgrade, follow the instructions for the package manager you’re using:
  https://shopify.dev/tools/cli/troubleshooting#upgrade-shopify-cli

2.2.2

バージョンが古い場合は警告が表示されるので、表示されているリンク先を参考にアップデートします。(参考:公式ドキュメント

Homebrew版

brew update
brew upgrade shopify-cli

gem版

gem update shopify-cli

まとめ

以上がShopify CLIの基本的な内容です。

さまざまなオプションのパラメーターが用意されていますので、
コマンドについてのもっと詳しい内容は是非Shopifyの開発サイトからご確認ください。