Shopifyテーマカスタマイズの始め方。ローカル構築〜複数環境への反映まで【2019秋版】

こんにちは、エンジニアの川島です。技術記事ではお久しぶりですね:)

私たちの会社では、現在、Shopifyを活用したECサイトのコンサルティング&開発案件を多く進めています。
「Shopify」って? という方は、弊社代表の高崎と、デザイナー佐藤による、Shopify解説記事もぜひ合わせてご覧くださいませ。
マーケター&エンジニア視点から見たShopify導入のメリット
デザイナー視点でみる「Shopify」:デザインのカスタマイズでできることと留意点

Shopifyは世界175カ国80万店舗以上に利用されているECプラットフォーム(※2019年2月時点)ですが、日本法人立ち上げから2年経っていないこともあり、開発者向けの日本語情報はまだまだ少ないです。
本記事では、Shopify開発を行うエンジニア向けに、Shopify Theme Kitを利用した環境構築&テーマ開発をご紹介したいと思います。

※本記事では下記を前提とします。

  • 環境:MacOS Mojave(※Windowsの場合、Theme Kitのインストール手順が異なります)
  • 導入方法:Homebrew(※未インストールの場合、先に追加してください)
  • 既にShopifyストアが開設されている
  • Shopifyストアの管理画面にアクセスできる
  • ターミナルの基本操作がわかる

Shopify Theme Kit について

Shopify Theme Kitは、Shopifyテーマ開発を支援するコマンドラインツールです。
Shopifyテーマの内部コードは管理画面上のコードエディタからも編集可能ですが、本格的なカスタマイズを行う場合は、Theme Kitを利用してローカルに開発環境を構築する方が便利です。
Theme Kitを利用することで、ローカル環境で編集したテーマファイルをShopifyストアに反映したり、Shopifyストア管理画面上で行われた変更をローカル環境に反映させたり、といった工程がスムーズに行えるようになります:)

注:Slateについて
同じくShopifyテーマ開発用のコマンドラインツールとしてSlateが存在します。
ただ、Slateは2019年3月から低メンテナンス期間に入っており、2019年10月現在はTheme Kitの利用が推奨されているようです。

開発環境構築

Theme Kitのインストール

ターミナルを立ち上げ、下記コマンドでTheme kitのインストールを行います。

brew tap shopify/shopify
brew install themekit

※途中でXcodeのComand Lineインストールを求められた場合は下記

xcode-select --install

ストア接続のAPI設定

Shopify管理画面にアクセスし、アプリ管理画面からプライベートアプリを作成、テーマへのアクセス許可を設定します。設定完了後、表示されるパスワードを手元に控えます。
Theme Kit公式ドキュメントに手順動画が掲載されているので、参考にしてください:)
https://shopify.github.io/themekit/#get-api-access

開発用にテーマを複製する

開発ストアを利用しない場合、本番運用されているテーマを複製して、開発用テーマとします。
「オンラインストア>テーマ>ライブテーマ>アクション>複製する」工程で、複製が可能です。

テーマIDを取得する

ターミナル上でShopify開発用ディレクトリに移動し、以下コマンドを打ち込みます。
[your-password]は先ほど控えたAPI接続パスワードに、[you-store.myshopify.com]はshopifyストアのURLに置き換えてください。

theme get --list -p=[your-password] -s=[you-store.myshopify.com]

本コマンドを打ち込むと、以下のように、Shopifyストア上で利用可能なテーマおよびID(10桁の数列)の一覧が取得できます。

theme get --list -p=xxxxxxxxxxxxxxxx -s=hogehoge.myshopify.com
Available theme versions:
  [361xxxxxxxx] Debut
  [36xxxxxxxxx][live] Pop
  [410xxxxxxxx] Pop nsw カスタマイズ

[live]と付いているのが、現在、Shopifyストアでアクティブになっている本番テーマです。
ここでは、開発用に複製したテーマのID[410xxxxxxxx]を手元に控えます。

テーマファイルの取得

以下コマンドを、控えておいたAPIパスワードと開発用テーマIDに置き換えた上で打ち込みます。

theme get -p=[your-password] -s=[you-store.myshopify.com] -t=[your-theme-id]

これで、Shopifyストア上にあるテーマファイルがローカルに取得され、Shopifyストアとローカルの接続も確立されます。

補足:テーマファイルの新規作成

既存テーマのカスタマイズではなく、オリジナルテーマを0から作る場合は、下記コマンドで新規テーマが作成できます。テーマIDは不要です。
本コマンドで、shopifyテーマに必要なファイルがローカルに構築され、shopifyストアとの接続も確立されるため、新規テーマ作成時はまずこのコマンドから始めるのが良さそうです。

theme new -p=[your-password] --store=[your-store.myshopify.com] --name=[theme name]

config.ymlの編集

取得されたテーマファイルの中には、config.ymlという設定ファイルが含まれています。
開発テーマ・本番テーマ双方に編集を反映したい……という場合には、config.ymlに複数テーマ分の環境設定を記述しましょう。後述する、テーマ自動反映の対象外ファイルもconfig.ymlで設定できます。
config.ymlの記述サンプルは、公式ドキュメントを参照してください。
https://shopify.github.io/themekit/configuration/#config-file

環境構築は以上で終了です:)

Theme Kitでテーマ開発

環境も整ったところで、Theme Kitを利用したテーマ開発についてご紹介してゆきます。
なお、WordPressなどの開発とは異なり、Shopifyはローカルサーバーで動かすことができません。
Shopifyサーバー上の開発用ストアや開発テーマに、Theme Kitで編集内容を反映しながら、開発を進めてゆくのが基本的な流れとなります。

テーマプレビュー

下記コマンドで、テーマのプレビューを開きます。

theme open

config.ymlで複数の環境を設定している場合は、末尾に–env=[環境の名前] を追加することで、それぞれの環境のプレビューにアクセスできます。

なお、ライブリロード機能はTheme Kitには存在しません><
コンパイルツールPreprosを用いたライブリロード方法が開発ブログにて言及されていますが、軽く試した限りでは、ちょっと不安定な印象でした……。
https://www.shopify.com/partners/blog/live-reload-shopify-sass

編集ファイルの自動反映

下記コマンドを打ち込むと、control+cで終了するまでの間、編集・保存されたファイルを自動でShopifyサーバーにアップロードしてくれます。

theme watch

例によって、複数環境が設定されている場合は、末尾に–env=[環境の名前]を付ければ反映先を変更できます。
たとえば、本番テーマを「production」としてconfig.yml上に設定している場合は、下記コマンドで本番テーマに反映されます。

theme watch --env=production

本番環境との同期

既にクライアントが運用しているShopifyストアの開発に関わる場合、管理画面上で行われた変更を、ローカル環境の変更で上書きしてしまう可能性があります。
下記コマンドで、Shopifyサーバー上のテーマファイルを一括ダウンロードできるので、作業開始前に本番環境との同期を取っておくと安全です。

theme download --env=production

デプロイ

ローカル環境のファイルをShopifyサーバーにまとめて反映するには、下記コマンドを利用します。

theme deploy

何もオプションをつけなかった場合は、ローカル環境の全ファイルでShopifyサーバー上のテーマファイルが置き換わります。※ローカルに存在しないShopifyサーバー上のファイルは削除されます
特定のファイルだけをデプロイしたい場合は、下記コマンドで。

theme deploy assets/custom.css

おわりに

テーマやプラグイン(アプリ)など、Shopify開発はWordPress開発との共通点が多いですが、ローカルサーバーが立てられなかったり、子テーマの概念が無かったりと、独自の点も多く存在します。
最初は取っつきづらいかもしれませんが、Theme Kitを導入すれば開発がぐっと楽になるので、ぜひ試してみてください:)
Shopifyテーマの基本構成や、Liquidファイル、カスタムCSS&JSの導入方法なども、また別の記事でご紹介できればと思います。

追記:Shopifyテーマの構造に関する解説記事を公開しました。