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」を使用する必要があります。
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-cliShopify CLIが正しくインストールされていることを確認するには、次のコマンドを実行します。
shopify versionこのコマンドはバージョン番号を返します。
Mac版インストール
gemでインストールするか、Homebrewを使ってインストールします。
gemでインストールする場合新しいターミナルウィンドウで、ホームディレクトリに移動し、次のコマンドを実行します。
gem install shopify-cliHomebrewを使ってインストールする場合、Shopify CLIをインストールする前にShopifyのサードパーティリポジトリをHomebrewに追加します。
（注）MacにHomebrewを入れていない場合、Homebrewのインストールから始めてください。
brew tap shopify/shopifybrew install shopify-cliShopify CLIが正しくインストールされていることを確認するには、次のコマンドを実行します。
shopify versionこのコマンドはバージョン番号を返します。
2.ストアとShopify CLIを接続させる
ストアと接続するためには、コラボレーターアカウント、もしくはスタッフアカウントの権限を持っている必要があります。
ターミナルで、下記のコマンドを入力します。
shopify login --store [ストアのURL]
（例）shopify login --store xxxxxxxx.myshopify.com自動でブラウザウィンドウが立ち上がるので、開発に使用するストアに関連付けられているアカウントにログインします。
以下のようなメッセージが表示されれば成功しています。
ターミナル上で使用するアカウントを選択します。
下のように表示されれば接続完了です。
Logged into store [ストアURL] in partner organization [アカウント名]3.新しいテーマを作成する
ローカルで管理するファイルのディレクトリに移動します。
cd [移動先]移動したフォルダの中に新しいテーマを作成します。
shopify theme init [テーマに付けたい名前] [ クローンを作成するGitリポジトリのURL ]テーマに付けたい名前を入力しなかった場合はテーマのタイトルを入力するように求められるので、任意のタイトルを入力します。
GitリポジトリのURLが指定されていない場合は、https://github.com/Shopify/dawn.gitが使用されます。
Shopifyのサンプルテーマである「Dawn」のコピーが、指定された名前で作成されます。
4.既存のテーマを使用する
既存のテーマをダウンロードする場合は、ダウンロードするディレクトリに移動し、下記のコマンドを実行します。
cd [移動先]shopify theme pull [-i プルしたいテーマのID]テーマのIDを指定しなかった場合、どのテーマをpullするか選択できます。
テーマのIDは、該当テーマの「カスタマイズ」から確認できます。
URLの数字の部分がテーマIDになります。
5.ストアとローカル環境のShopify CLIを接続させる
テーマをプレビューするには下記のコマンドを実行します。
shopify theme serve実行すると３つの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=123456789012Please open this URL in your browser:に表示されているURLは開発テーマへのリンクです。
リアルタイムで変更をプレビューできます。このプレビューはGoogleChromeでのみ利用できます。Customize this theme in the Online Store Editor:に表示されているURLはテーマのオンラインストアエディターへのリンクです。Share this theme preview:に表示されているURLは他の開発者と共有することができるプレビューリンクです。
このままshopify logoutすると開発テーマは削除されます。
ローカル環境でカスタマイズを行った内容を反映させたい場合
下記コマンドを実行してカスタマイズを行った場合、ローカル環境のテーマJSONファイルに変更内容が反映されます。
shopify theme serve --theme-editor-sync6.ローカルテーマファイルをShopifyにアップロードする
テーマをアップロードするには下記のコマンドを実行します。
shopify theme pushShopify 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-cligem版
gem update shopify-cliまとめ
以上がShopify CLIの基本的な内容です。
さまざまなオプションのパラメーターが用意されていますので、
コマンドについてのもっと詳しい内容は是非Shopifyの開発サイトからご確認ください。
