Zenn
✨

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

2020/11/11に公開
Homebrew
#
EC
Shopify
#
command
tech

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

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

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

■必要なもの

Shopifyとは？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

④ Theme IDをメモする

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

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

Shopify Theme kitをインストール

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

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

環境によっては途中で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（開発環境）」が対象になります。

コマンド一覧

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

テーマをプレビューする

theme open

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

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

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

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 ライブテーマ（現在適用中のテーマ）のファイルをウォッチしたい場合に必要

テーマをデプロイする

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

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

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

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

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

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

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

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

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

削除する

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

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

新規にテーマを作成する

オリジナルテーマを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

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

ヘルプをみる

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

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

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

まとめ

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

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

Discussion