Shopify CLIで開発テーマを編集する方法と、よく使うコマンドの種類について
本記事は私達の会社で作ったShopifyテーマ開発入門書『Hello Shopify Themes Shopifyテーマ開発ガイド』からの抜粋です。
開発環境が整ったところで、実際にShopify CLIを立ち上げ、Dawnに簡単な編集を加えてみましょう。
開発テーマの作業内容をストアのテーマライブラリーに反映させる方法も本節で解説します。
次の手順が完了していることを確認してください。
- 開発ストアを構築済み
- 手元に開発用のDawnテーマを準備済み
shopify theme devコマンドが動作することを確認済み
まだの方は、前回の記事をご覧ください。
Shopify テーマ開発を始める準備 〜開発ストアの作成〜
Shopify テーマ開発を始める準備 〜開発ツール Shopify CLI の導入〜
開発テーマを立ち上げる
まずは、 shopify theme dev コマンドを用いて、開発テーマを立ち上げます。
テーマの同期が完了次第、コマンドライン上に次のようなメッセージが表示されます。xxxxxxxxxx部分はテーマIDの数列です。
┏━━ Viewing theme… ━━━━━━━━━━━━━━━━━━━━
┃ * Syncing theme #xxxxxxxxxx on nsw-sample-store.myshopify.com
┃
┃ Serving .
┃
┃ Please open this URL in your browser:
┃ http://127.0.0.1:9292
┃
┃ Customize this theme in the Online Store Editor:
┃ https://nsw-sample-store.myshopify.com/admin/themes/xxxxxxxxxx/editor
┃
┃ Share this theme preview:
┃ https://nsw-sample-store.myshopify.com/?preview_theme_id=xxxxxxxxxx
┃
┃ (Use Ctrl-C to stop)
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━「2-3. 開発ツールの導入」で前述したとおり、開発テーマはテーマライブラリーには表示されません。
ブラウザでの表示確認、テーマエディタの編集、プレビューURLの共有には、このメッセージ上で案内されたURLを利用してください。
さて、 shopify theme dev コマンドを実行している状態で、 http://127.0.0.1:9292 にアクセスします。ブラウザはGoogle Chromeを用いてください。
開発テーマの表示
開発テーマが作成され、ブラウザで表示できるようになりました。
テーマファイルを編集する
続けて、テーマファイルを編集してみましょう。
layout/theme.liquid ファイルを手元のコードエディタで開き、<body>要素の記述箇所を見つけます。
layout/theme.liquid
<body class="gradient">
<a class="skip-to-content-link button visually-hidden" href="#MainContent">
{{ "accessibility.skip_to_text" | t }}
</a>
{% section 'announcement-bar' %}
{% section 'header' %}
<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
{{ content_for_layout }}
</main>
{% section 'footer' %}
（後略）{% section 'announcement-bar' %} と {% section 'header' %} の間に、 <p>Hello World!</p> を追記します。
layout/theme.liquid
＊ コードを記入する際は、 //EDIT_START 〜 //EDIT_END の文面は除外して打ち込んでください。
{% section 'announcement-bar' %}
//EDIT_START
<p>Hello World!</p>
//EDIT_END
{% section 'header' %}ファイルを保存し、 http://127.0.0.1:9292 を見てみましょう。画面を更新しなくても、自動的に表示が変わっているはずです。
編集後の開発テーマの表示
良い感じですね！
テーマの編集内容をストアに反映する
ファイル編集が完了したら、一度、 ctrl+c で実行中の shopify theme dev コマンドを終了させましょう。 現時点では、編集内容はローカルの開発テーマにしか存在しません。
テーマの編集内容をストアに反映させるには、 shopify theme push コマンドを使います。
テーマを複製し、バックアップを取る
その前に、念のため、開発ストアのライブテーマを複製しておきましょう。
ストア管理画面のテーマライブラリページを開き、改修対象のテーマを「アクション」から「複製」します。
今後のカスタマイズで、もしテーマの表示がおかしくなってしまっても、このバックアップがあればテーマ内容を復元できます。
「アクション」からテーマの複製を実行
反映先のテーマを選択する
改めて shopify theme push コマンドを実行すると、次のように、ストアのテーマライブラリーに存在するテーマが選択肢として表示されます。
? Select theme to push to (Choose with ↑ ↓ ⏎, filter with 'f')
> 1. Dawn [live]
2. Dawn BackUp [unpublished][live] と記述されているのが、現在のストアに適用されているテーマ、すなわちライブテーマです。
テーマライブラリーに存在するものの、下書き状態のテーマは [unpublished] と表示されます。
今回は 1. Dawn [live] を選択しましょう。
ライブテーマへの反映には確認メッセージが表示されるので、yesを選択します。
? Are you sure you want to push to your live theme? (Choose with ↑ ↓ ⏎)
> 1. yes
2. no今回はチュートリアルとしてライブテーマを選択していますが、複数人で開発を進めるような実案件では特に、開発ストアであってもライブテーマへのpushは慎重に行いましょう。
✓ Your theme was pushed successfully のメッセージが表示されれば、作業内容の反映は完了です！
その他のShopify CLIコマンド
Shopify CLIではさまざまなコマンドが利用できます。
ここまで解説したものも含め、代表的なコマンドをまとめました。
各コマンドのより詳しい解説、利用できるオプションやフラグについては、Shopify公式ドキュメントも併せて参照してみてください。
https://shopify.dev/docs/themes/tools/cli/commands
| コマンド | 実行内容 |
|---|---|
shopify help |
コマンド一覧を表示します。 |
shopify theme init |
テーマの初期化。フラグ未設定時はDawnのコピーをローカルに作成します。 |
shopify theme pull |
ストア上のテーマを取得します。 |
shopify theme dev |
開発テーマを作成し、ローカル環境を立ち上げます。 |
shopify theme push |
ローカル上のテーマファイルを、指定したテーマにアップロードします。 |
shopify theme publish |
テーマライブラリ内の指定テーマを公開し、ライブテーマに置き換えます。 |
shopify theme check |
テーマコードを分析し、エラーや改善点を指摘します。 |
開発環境構築、お疲れさまでした！ なかなか大変でしたね。
Shopify CLIの導入にはRubyが関わってくるため、利用するパソコンの環境（OSが古いなど）次第で、上手くいかない場合もあるかもしれません。
その場合は、Shyopify CLIについてだけでなく、RubyのバージョンやHomeBrew、rbenvについて調べてみると、解決のヒントに繋がりやすいかと思います。
環境構築が整ったところで、第3章からは実際にテーマファイルを編集してゆきます。
完売後の増刷予定は現時点ではございません。印刷書籍をご希望の方は、ぜひお早めにお迎えください。
- 著者：川島さやか
- 出版：non-standard world, Inc.
- 判型・ページ数：B5判・248ページ
- 価格：3,850円（税込）※PDF版同梱、送料無料