ローカルにShopifyのテーマ開発環境を作る

今度、Shopifyのテーマをカスタマイズをすることになりました。
Shopifyを触るのは、初めてなので調べてみたところShopifyのコードエディターでも編集できることがわかりました。

ですが、やはり使い慣れたエディターを使って作業した方が効率がいいと感じたので、開発環境をローカルに構築することにしました。

今回は備忘録の意味も込めてローカルへの環境構築の方法とShopifyのコマンドを紹介します。

私の環境はMacなのでWindowsでの動作チェックは行っていません。
HomebrewとXcodeをが必要になりますので両方とも先にインストールしておくとスムーズです。

■必要なもの

• Shopifyアカウント
• Homebrew： https://brew.sh/index_ja
• Xcode： https://apps.apple.com/jp/app/xcode/id497799835?mt=12

Shopifyとは？

簡単にECサイトを作ることができるサービスです。

「SNS連携、SEO対策、グローバル販売などをすべて簡単管理。あなたのショップをさらに使いやすくします。」

とディスクリプションにある通り本当に簡単にできます。
デザインのカスタマイズやTOPページなどの作成も管理画面から簡単に設定できます。

事前にShopifyのアカウントとストアを作成する必要があります。
（14日間の無料体験あります）

Shopifyの管理画面で事前設定と必要な情報をメモする

先に下記2つの情報を取得するため、Shopifyの管理画面から設定を行います。

• APIパスワード
• テーマ ID

① プライベートアプリを作成する

「アプリ管理 → プライベートアプリを管理する」 をクリックします。

最初はプライベートアプリは何もありませんので、「プライベートアプリを作成する」 をクリックして新規に作成します。

「プライベートアプリ名」と「緊急連絡用開発者メール」を入力。
そして 「非アクティブなAdmin API権限を表示する」 をクリックして展開します。

展開されたリスト内にある 「テーマ テーマテンプレートとアセットを表示または管理する」 の項目を 「読み取りおよび書き込み」 に変更します。
※この作業を行わないとテーマのダウンロード・アップロードができませんでした。

ここまでできましたら、 「保存する」クリック → 「プライベートアプリを作成する」をクリック して完了です。

② APIパスワードをメモする

プライベートアプリの作成が完了すると自動的に画面が移動して「APIキー」や「パスワード」などパウリの情報が色々表示されます。この中から 「パスワード」 控えてください。

パスワードは他者に漏れないようにご注意ください。

これでAPIパスワードは取得できましたので次に進みます。

③ デフォルトテーマ「Debut」を複製

初期状態だとデフォルトテーマ「Debut」がアクティブなっていますが、このテーマを複製し、複製したテーマをもとに開発作業を進めます。

開店前の状態ならいいですが、開店中だと想定すると現在使用中のテーマをそのまま編集するのは危険です。（エラーでサイトが動かなくなってしまったとか考えると怖すぎる）
それらを回避するため、既存のテーマを複製してから開発作業を進めたいと思います。

左サイドバーの「オンラインストア → テーマ」を選択して「現在のテーマ → Debut → アクション」からを「複製」を選択。
すると「テーマライブラリー」の中に「Debutのコピー」とゆう名前のテーマが作られます。

テーマ名を変更したい場合は「アクション → 名前の変更」から変更できます。
今回はDebut-copyとゆう名前にしました。

テーマの複製ができましたら 「カスタマイズ」 ボタンをクリックしてページを移動します。

④ Theme IDをメモする

ページが移動しましたらブラウザ上部に表示されているURLにご注目ください。
https://xxx.myshopify.com/admin/themes/115540426945/editor などになっていると思いますので、このURLの 「/themes/」から「/editor」の間にある数字をメモしておきます。
こちらがテーマIDになります（上記の例だと115540426945がテーマID）

Shopifyの管理画面の設定は以上です。
APIパスワードやテーマIDなど必要な情報は取得できましたので続いてはターミナル上で操作を行います。

Shopify Theme kitをインストール

ターミナルを起動し下記コマンドを入力します。
HomebrewでのShopify Theme kitのインストールが始まります。

brew tap shopify/shopify
brew install themekit // 再インストールの場合は brew reinstall themekit

Shopify Theme Kitは、Shopifyのテーマ開発を支援するコマンドラインツールです。

環境によっては途中でXcodeのインストールを求められます。
下記のコマンドでインストールできるのですが、私の場合は過去にインストールしていたXcodeが古かったようでエラーがおきました。

xcode-select --install

そのため、一度Xcodeを完全にアンインストールし、再度App Storeから最新版のXcode（12.1）を再インストールすることで解決しました。

複製したテーマを取得する

Shopify Theme Kitのインストールが完了したら、先ほど複製したテーマ「Debutのコピー」内のテンプレートファイルを丸ごと取得します。

テーマの取得方法は2通りあります。

① theme getで取得する

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

上記コマンドの [your-password]を先ほど取得したAPIパスワードに、[you-store.myshopify.com]を自分のストアのアドレスに変更。
[your-theme-id]を先ほど控えたテーマIDに置き換えてコマンドを実行してみてください。
※[]は不要です。

/*
　設定例：
　API パスワード： shppa_xxxyyyzzz
　ストアURL： hoge.myshopify.com
　テーマID： 115540426945
*/
theme get -p=shppa_xxxyyyzzz -s=hoge.myshopify.com -t=11554042694

これで、ShopifyにあるテーマID「11554042694」のファイルがローカルにダウンロードされ、
同時にShopifyとローカルの接続も確立されます。

② config.ymlを作成してtheme downloadで取得する

theme getでテーマを取得するとテーマの取得と同時にconfig.ymlが自動で生成（詳細は後述）されますが、config.ymlを手動で作りテーマをダウンロードすることも可能です。

テーマをダウンロードしたいディレクトリ内に、config.ymlを生成し下記を記述します。

config.yml

development:
  password: shppa_xxxyyyzzz
  theme_id: "115540426945" # Debut-copy
  store: hoge.myshopify.com

次に、ターミナルでconfig.ymlを設置したディレクトリに移動して下記のコマンドを入力します。

theme download

これだけでテーマ（ID: 115540426945）がダウンロードされます。
すでにconfig.ymlにAPIパスワードやテーマIDは定義されているので、theme get〜のように、
-p=shppa_xxxyyyzzzや-s=hoge.myshopify.comを入力する必要はありません。

このように2つのやり方があるので自分にあった方法を使いましょう。

Config.ymlについて

コマンドを紹介する前にConfig.ymlについて少し説明します。
先ほどの 「複製したテーマを取得する」 までを完了するとローカル内にconfig.ymlが下記の状態で自動的に生成されます。

config.yml

development:
  password: shppa_xxxyyyzzz
  theme_id: "115540426945" # Debut-copy
  store: hoge.myshopify.com

初期はdevelopment（開発環境）がコマンドの対象ですが、Shopify Theme Kitでは、開発環境だけではなく本番環境にも同時に修正内容を反映させることができます。

環境と書いてますが「開発環境 = 開発用テーマ」「本番環境 = 本番用テーマ」の認識で問題ないかと思います。

その他にも対象外のファイル（ignore）なども指定することもできます。

config.ymlを下記のように変更しておきます。

config.yml

development: #開発環境
　password: shppa_xxxyyyzzz
　theme_id: "115540426945" # Debut-copy01
　store: hoge.myshopify.com
　ignore_files: # 対象外にするファイルを指定
　　- "*.gif"
　　- "*.jpg"
　　- config/settings_data.json

production: #本番環境
　password: shppa_xxxyyyzzz
　theme_id: "115587654678" # Debut-copy02
　store: hoge.myshopify.com

下記で紹介するコマンドの中にはオプションによって「development」以外を指定できるコマンドもありますので先にconfig.ymlの説明しました。
動作確認をする場合は上記のように先にconfig.ymlを設定しておくとスムーズかと思います。

※オプションを指定しない場合はデフォルトで「development（開発環境）」が対象になります。

config.ymlは上記以外にも様々な設定が可能です。詳しくは公式ページをご参考ください。
https://shopify.github.io/themekit/configuration/

コマンド一覧

ローカル環境にテーマがコピーできましたので、この記事の本題であるコマンド一覧を紹介したいと思います。

テーマをプレビューする

theme open

上記コマンドを入力するとブラウザが起動してプレビュー画面が開きます。
ライブリロードには対応してないのでファイルを変更したらブラウザをリロードして確認します。
オプションは下記の表をご参考ください。

オプションフラグ	説　明
--env	config.ymlで定義した環境を指定して実行する （--env=production）
-b	URLを開くブラウザを名前で指定する
-E	テーマのカスタマイズ画面を表示する

公式の解説だとコマンドオプションが「--env」ではなく「-a」になってますが下記のメッセージが表示され「development環境だけ」がプレビューされました。
more than one environment specified for a single environment command
（訳：一つの環境コマンドに複数の環境が指定されています）

ファイルを監視（ウォッチ）する

theme watch

上記コマンドを入力するとファイルの監視がはじまり、編集されたファイルを自動的にサーバーへアップロードし続けます。ターミナルには下記のようにログが表示されます。
ウォッチを止めたい時は「Control + C」を押します。

/*　Watch開始　（テーマ名： Debut-copy、 テーマID： 11554042694） */
15:41:59 [development] debut-copy watching for file changes to theme 11554042694

// assets/theme.cssを更新した例
15:43:00 [development] processing assets/theme.css
15:43:02 [development] Updated assets/theme.css
15:43:26 [development] processing assets/theme.css
15:43:28 [development] Updated assets/theme.css

/*　全ての環境に対してWatch開始した場合 */
theme watch -a

15:41:59 [development] Debut-copy watching for file changes to theme 11554042694

// assets/theme.cssを更新した例
15:43:00 [development] processing assets/theme.css
15:43:00 [production] processing assets/theme.css
15:43:02 [development] Updated assets/theme.css
15:43:02 [production] Updated assets/theme.css
15:43:26 [development] processing assets/theme.css
15:43:26 [production] processing assets/theme.css
15:43:28 [development] Updated assets/theme.css
15:43:28 [production] Updated assets/theme.css

オプションは下記の表をご参考ください。

オプションフラグ	説　明
-a	config.ymlで定義した環境全てに対してウォッチを実行する
-n	ファイルパスまたはURL。ライブリロードなどのツールと組み合わせる時に必要
--allow-live	ライブテーマ（現在適用中のテーマ）のファイルをウォッチしたい場合に必要

テーマをデプロイする

ファイルを指定せずデプロイするとShopifyサーバーのテーマファイルが全てローカルのファイルに置き換えられます。そのため、Shopifyのコードエディターで編集した内容は削除されますので注意してください。

// テーマファイル全てをデプロイ
theme deploy

// 特定のファイルだけデプロイ
theme deploy assets/theme.css

オプションは下記の表をご参考ください。

オプションフラグ	説　明
-a	config.ymlで定義した環境全てに対してデプロイを実行する
-n	管理画面から追加されたファイルは削除せずにデプロイを実行する
--allow-live	ライブテーマ（現在適用中のテーマ）をデプロイする場合に必要

テーマをダウンロードする

複数人で開発している場合、人によってはローカルではなくShopifyの管理画面（コードエディター）で行う方もいるかと思います。
そんな時にこちらがローカルで行った作業をそのままデプロイをしてしまいますとファイルが上書きされてしまい、管理画面で変更した内容がローカル環境の状態に置き換わってしまいます。

このような事態を予防するためにもローカルで作業を行う前にはリモートのテーマファイルを一度ダウンロードして差分を吸収してから作業を進める方が安全かと思います。（Gitみたいな感じ）

開発環境の構築が完了していればテーマの再ダウンロードは簡単です。
下記のコマンドでテーマファイルを全てダウンロートすることができます。

// テーマファイル全てをダウンロード
theme download

// 特定のファイルだけダウンロード
theme download assets/theme.css templates/article.liquid

削除する

このコマンドを使用するとローカルとリモートの両方でファイルが削除されます。
誤ってテーマ全体を削除しないように、このコマンドではファイル名の指定が必須になっています。

// assets/theme.cssを削除する
theme remove assets/theme.css

オプションフラグ	説　明
-a	config.ymlで定義した環境全てに対して削除を実行する
--allow-live	対象のファイルがライブテーマ（現在適用中のテーマ）の場合に必要

テーマに必須のファイルを削除しようとすると下記のようなメッセージが表示されます。
「 this file is critical and removing it would cause your theme to become non-functional 」
（ 訳：このファイルは重要であり、削除するとテーマが機能しなくなります ）
テーマが壊れる可能性があることを通知してくれてるのですが、通知のみで削除は実行されますので、削除する際は十分に気をつけましょう。

新規にテーマを作成する

オリジナルテーマを0から作る時は下記コマンドを使用します。

/*
　設定例：
　API パスワード： shppa_xxxyyyzzz
　ストアURL： hoge.myshopify.com
　テーマ名： myTheme
*/
theme new -p=shppa_xxxyyyzzz --store=hoge.myshopify.com --name=myTheme

上記コマンドが実行されると下記のようにファイルがローカルに生成されて、同時にShoifyのサーバーにもアップロードされます。

[hoge.myshopify.com] theme created
[hoge.myshopify.com] config created
Created assets.
　Created assets/application.js.
　Created assets/application.scss.liquid.
Created config.
　Created config/settings_data.json.
　Created config/settings_schema.json.
Created layout.
　Created layout/theme.liquid.
Created locales.
　Created locales/en.default.json.
Created templates.
　Created templates/page.contact.liquid.
　Created templates/search.liquid.
　Created templates/article.liquid.
　Created templates/blog.liquid.
　・
　・
[hoge.myshopify.com] uploading new files to shopify

※新規にテーマを作成する時の注意点

何もテーマをダウンロードしてない状態で上記の 「新規にテーマを作成する」 のコマンドを実行した場合は、新しくファイルが作られるだけなので、特に気にすることはありません。

ですが既にテーマをダウンロードしてる状態で 「theme new 〜」 を実行するとダウンロードされているテーマを複製します（同時にアップロードも）

下記のようにターミナルに出てくるログも違います。
コマンド実行後、config.ymlのtheme_idだけ変わっていて他の.liquidファイルなどは変わってない と、ちょっと訳わからない状態になったので、理解するまで時間がかかりました。

// テーマ 「 Debut 」 が既にローカルにダウンロードされている状態でコマンド「theme new 〜」を実行した場合

[hoge.myshopify.com] theme created
[hoge.myshopify.com] config created
Exists templates/customers.
　Exists templates/customers/register.liquid.
　Exists templates/customers/reset_password.liquid.
　Exists templates/customers/account.liquid.
　Exists templates/customers/activate_account.liquid.
　Exists templates/customers/addresses.liquid.
　Exists templates/customers/login.liquid.
　Exists templates/customers/order.liquid.
Exists assets.
　Exists assets/application.js.
　Exists assets/application.scss.liquid.
　・
　・

使用できる全てのテーマの情報を取得する

先ほどブラウザに表示されているURLからテーマのIDを調べる方法をご紹介しましたが、コマンドでも調べることもできます。
下記のコマンドを打つと自分のストアで使用できるテーマ（本番用テーマとテーマライブラリー内のテーマ一覧）の情報が取得できます。

theme get --list -p=shppa_xxxyyyzzz -s=hoge.myshopify.com

上記コマンドを叩くと次のように利用可能なテーマとそれに紐づくテーマIDが表示されます。

Available theme versions:
  [115518406849][live] Debut
  [115540426945] Debut-copy01
  [115587654678] Debut-copy02

[live]と表示されてるのが現在適用されているテーマです。

ブラウザを開かずにテーマのIDを確認したい時などに便利ですね。

ヘルプをみる

Shopify Theme Kitで使用するコマンドのヘルプを見ることができます。
下記コマンドでヘルプを表示できます。

// すべてのコマンドとフラグのリストを取得
theme help

// コマンドのすべてのフラグのリストを取得
// theme open --help や theme deploy --help　など
theme [command] --help

まとめ

以上になります。
さて、実際に動かしながらShopify Theme Kitのコマンドを説明してきましたが、個人的にはとてもGitに似ていると思います。
（とゆうかGitのシステム入れてるのな？）

ShopifyはWordPressと違ってローカル環境を作ることが（まだ）できないので、WordPressに慣れている自分は戸惑いました。
ですが、コマンドがとても充実しているので開発作業はとてもやりやすい気がします。