Shopify CLIとGitHubを使ってテーマ開発を行う方法

この記事は5分で読めます

概要

Online Store2.0(以下OS2.0)になりThemeの開発をShopify CLIで行うことが可能になりました。またGitHub連携が可能となり、開発者フレンドリーな環境が提供されました。特にマーチャントもしくは別の開発者が管理画面から変更を行なった場合も、そのログをGitHub連携することで自動的にgit管理出来るようになった点は大きなメリットです。本記事では開発サイクルを一通り確認することで、Shopify CLIとGitHubを使ってテーマ開発を行う方法を確認していきます。

この記事の対象者

テーマの改造を行う開発者の方
マーチャントさんの操作をログで残したい支援会社の方

前提条件

git, GitHubの基本的な使い方がわかる
Webのチーム開発をしたことがある

本題

Theme Kitでの難点

Shopy CLIがThemeの開発をサポートするまで、ローカルサーバーを立ててテーマの開発を行うことは出来ませんでした。そのためTheme Kitを用い任意のテーマライブラリーの環境にローカル環境を接続してデバックするという手順が発生していました。接続は以下のようにconfig.ymlで定義していました。

config.yml

development:
  password:
  theme_id:
  store:
  ignore_files:
  - config/settings_data.json

接続先のテーマを変更したい場合は、毎回config.ymlの値を変更する必要がありました。Shopify CLIでテーマ開発をすることで、ローカルサーバーを立てて通常のWeb開発のようにデバック出来るため、非常に開発者フレンドリーになりました。

ShopifyとGitHubを接続する

ShopifyとGitHubの接続は公式ドキュメントShopify GitHub integrationを確認しましょう。

ここからは開発テーマがGitHubのmainブランチと接続され、開発はdevelopというブランチで行っていき、最終的にGitHubのmainブランチにdevelopブランチをmergeして本番に反映していく手順をまとめます。まずはローカルサーバーを起動します。

shopify theme serve

shopify cli admin preview 1

shopify cli editor 1

例えばナビゲーションの色を変更してみましょう。ローカルサーバーは以下のURLがデフォルトとなっています。

http://127.0.0.1:9292/

shopify-cli editor 2

shopify cli admin preview 2

ローカルで変更したコードはホットリロードされ、変更はブラウザをリロードしなくても即座に反映されます。ローカルでの変更はmainブランチにmergeされるまで反映されません。念のため確認しておきましょう。

shopify cli admin code 1

それでは、ローカルのdevelopブランチの開発をGitHubにpushしてmainブランチにmergeしていきましょう。

shopify cli github commit 1

shopify cli github pr 1

Merge pull requestからmainにdevelopブランチの変更を反映します。そして改めてShopifyの管理画面からコードを確認してみましょう。

shopify cli admin code 2

ローカルの変更が本番に反映されていることが確認できました。

マーチャント、他の開発者がカスタマイズから変更した内容をGitHubに反映させる

Shopify CLI以前にテーマを開発をしていて辛いことの1つが、本番とローカルに差分が出てしまうことでした。これは、マーチャントや他の開発者が直接、本番環境を編集した場合に発生していました。しかしGitHubの連携が実装され、本番環境を直接編集したログが自動的にGitHubにcommitされることになりました。その内容を確認してみます。

shopify cli admin editor 2

shopify cli admin code 3

ホームページからvideoのセクションを削除してみます。 orderの中からvideoが削除されていることが確認できます。

shopify cli admin code 4

それではこのタイミングでGitHubのログを確認してみましょう。

shopify cli github commit 2

Update from shopify for theme xxx とあるように、カスタマイズでの変更が自動的にGitHubに反映されています。commitはカスタマイズから保存を押したタイミングで毎回トリガーされます。例えば、複数回カスタマイズから変更を加えて保存します。

shopify cli github commit log 1

複数回変更を保存したタイミングでGitHubのmainブランチにcommitされていることが確認出来ます。カスタマイズから変更した内容をローカル環境に取り込むには以下の手順となります。

GitHubでdevelopブランチに対してmainからPRを出す
mainのcommit(カスタマイズからの変更)をdevelopに取り込む
ローカルのdevelopブランチで git pull origin develop を実行する。

3を行う前のローカル環境

shopify cli editor 3

3を行なった後のローカル環境

shopify cli editor 4

本番でのカスタマイズの変更が取り込まれていることが確認出来ました。

カスタマイズを本番環境で行いたくない場合はどうすればよい？

公開されている環境で直接カスタマイズを行うのは、動いているサイトに影響するので嫌がられるマーチャントさん、開発者さんも多いと思います。その場合は、以下の手順で対応が可能です。

GitHubに繋がっている本番環境をコピーする
コピーした環境を公開する
テーマライブラリーでカスタマイズを行い確認する
確認が取れたら公開を行う

上記手順を行うことで、カスタマイズで変更した内容も本番環境に影響なく安全に確認することが可能です。

Theme Kitを使う条件は

公式ドキュメントのShopify CLI for themesには以下のようにShopify CLIとTheme Kitの使用について説明があります。

Shopify CLI replaces Theme Kit for most Shopify theme development tasks. You should use Shopify CLI if you’re working on Online Store 2.0 themes. You should use Theme Kit instead of Shopify CLI only if you’re working on older themes or you have Theme Kit integrated into your existing theme development workflows.

現在はOS2.0とそれ以前のVersionが混在しているので、Shopify CLIとTheme Kitの使用が混在することが多くあります。ただTheme Kitが発表される前にあったSlateは現在サポートされておらず、Theme Kitも同様の道を辿ると思われます。OS2.0へのアップデートはいずれにせよ準備が必要です。

ただ開発環境を、別ドメインのShopify環境に接続して確認が行いたい場合Theme Kitを用いると便利です。

例えば、キャンペーンやプロモーションなどで、商品の下書きは可能でも、あるタイミングまで商品をアクティブに出来ないなどは頻繁に発生するケースだと思います。正確にデバックするためには、商品をアクティブにする必要があります。

そのような場合、別ドメインのShopify環境を準備し、その環境では商品をアクティブにしTheme Kitでローカル環境を接続してデバックすることは有効な手段となります。

AlquimistaではShopifyの開発に関わるTipsを定期的に更新していきます。