先日の記事（Shopifyでのテーマ開発に便利なローカル環境を構築する＃1：Shopify Theme Kit）ではShopifyのTheme Kitをつかったローカル環境構築についてまとめていましたが、今回は「Shopify CLI」を使った環境構築についてみていきます。Shopify CLIはShopify Theme Kitの後継という位置付けで、現在では公式にもこちらを推奨しているようです。Theme Kitよりすこし複雑な印象ですがその分できることも増えていたり、フロントエンド側の開発との親和性やGitの対応など、よりワークフローが整っていますので是非利用したいですね。なお、今回はmacOSでの環境構築を前提としております。    

Ruby環境の準備

Shopify CLIを使うにはRubyの環境が必要になります。またバージョンの指定もあり現在では2.7系以上が必須とのことです。Rubyのバージョンを確認した上で、インストールが必要な場合には進めていきます。ここでは「rbenv」をつかってRubyの2.7系以上をインストールしていきます。rbenvについては過去記事「rbenvをインストールしてRubyのバージョン管理をできるようにする」にてまとめていますのでご参考に。

// rbenvのインストール
$ brew install rbenv ruby-build

// rbenvのアップデート
$ brew upgrade rbenv

// 環境変数のパス設定
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile

  rbenvの準備が整ったら実際にバージョンを指定してインストールしていきます。今回の対象である2.7系がインストールできることを確認しておきます。インストールしたらそのRubyを使えるようにセットします。

$ rbenv install --list
2.7.8
3.0.6
3.1.4
3.2.2
....

$ rbenv install [VERSION]
$ rbenv global [VERSION]

  ちなみにrbenvのinstallコマンドでビルドが失敗してしまうこともあります。今回はM1チップのMac買い替え時にIntelチップのMacからそのまま移行アシスタントを使って復元したため、HomebrewがM1チップに対応していないバージョンが原因でした、そのためマイグレーション作業を行う必要がありました。詳しくはこちらに記載されており、この通りに進めていくことで解消することができました。   Ruby環境の準備ができれば実際にバージョンが2.7系以上になっているかチェックしておきます。これでShopify CLIのインストールができるようになります。

$ which ruby
/Users/USER_NAME/.rbenv/shims/ruby

$ ruby -v
ruby 3.2.2

   

Shopify CLIのインストール

それでは本題であるShopify CLIのインストールを進めていきます。Homebrewをつかってインストールしていきます。「shopify/shopify」についてはTheme Kitをインストールする際に合わせてインストールしているため既にインストールが済んでいる場合には不要です。

$ brew tap shopify/shopify
$ brew install shopify-cli

  インストールができれば念の為問題ないかもチェックしておきます。これでShopify CLIが使えるようになりました。

$ shopify version
Current Shopify CLI version: 3.45.1

   

Shopifyのストア環境へのアクセスとテーマ取得

では実際にコマンドを使っていきます。まずは「shopify theme pull」コマンドでストア環境のテーマをローカルにダウンロードしてみます。コマンドは少し変わるものの、Theme Kitと同じような感じですね。初回にはShopify Partnersのログインが求められます。コマンド実行後に下記のメッセージが表示され、ブラウザでログイン画面が表示されます。

$ shopify theme pull --store=[STORE_NAME.myshopify.com]

To run this command, log in to Shopify Partners.
Press any key to open the login page on your browser

  表示されたログイン画面でそのままログイン作業を行います。   ログインが成功すると下記の画面に切り替わります。これでブラウザ側の作業は終了です。   コマンドラインに戻ると、ログインが完了していることが確認でき、ストア環境のテーマリストが表示され、ここからダウンロードするテーマを選び、プルしていきます。

✔ Logged in.
? Select a theme to pull from [STORE_NAME.myshopify.com]
1. Sample_Theme [live]
2. Debutのコピー [unpublished]
3. Debut [unpublished]

  その他、「shopify theme list」コマンドではテーマの一覧が確認できます。

$ shopify theme list

name        role          id
─────────── ───────────── ─────────────
Blank_Theme  [live]         [THEME_ID]
Debut        [unpublished]  [THEME_ID]
Debutのコピー  [unpublished]  [THEME_ID]

  実際にテーマを開発していくとなれば「shopify theme dev」コマンドを使っていきます。このコマンドを実行するとストア環境とローカル環境でテーマの同期が行われ、ローカル側の開発サーバーでプレビューすることができます。初回にはストアのパスワードが必要になります。

$ shopify theme dev --store [STORE_NAME.myshopify.com]
  Preview your theme
  • http://127.0.0.1:9292 

* Syncing theme [THEME_ID] on [STORE_NAME.myshopify.com]
......
Synced » update templates/index.liquid

  実際にブラウザでテーマが表示されるのが確認できました。その後、テーマ内のファイルを編集するとホットリロードされブラウザ上で編集後のテーマを確認することができます。   Theme Kitではテーマの新規作成ではブランクテーマが作成されましたが、Shopifty CLIでは「Dawn」のテーマがそのままインストールされるようです。下記のコマンドでDawnのテーマがすぐに使えるようになります。コマンドの後にはテーマ名を続けて入力します。

$ shopify theme init [THEME_NAME]

  Dawnのテーマはそのまま使うこともできますし、カスタマイズ用に構築されたテーマでもあるので、オリジナルデザインを作成するときもこのテーマを出発点として開発を進めていくのが良さそうですね。その他、Shopify CLIではいろんなコマンドも用意されていますので詳しくは公式のドキュメントをご参考ください。  

---

  今回はShopify CLIをつかってローカルでShopifyのテーマを開発する環境構築についてまとめてみました。Shopify CLIではオンラインストア2.0に対応したテーマも取り扱えますし、従来型のテーマも対応できるので、Theme Kitの上位互換とも言えますね。Theme Kitからの乗り換えも検討してみてはいかがでしょうか。