Shopify Theme Kit を使ったテーマ開発

Shopify Theme Kit は Shopify テーマを開発する為のコマンドラインツールです。Shopify テーマを開発するツールには Slate と呼ばれるコマンドラインツールもありますが初めて Shopifyテーマ開発に関わる方には Shopify Theme Kit の利用がおすすめです。特に既存テーマをカスタマイズする上では Shopify Theme Kit で十分かと思います。

今後 Shopify テーマ開発環境を細かく設定したり、デザインテーマを一から開発したくなったら Slate も検討してみてください。Slate の記事も書いていますので気になる方は以下記事も参照ください。

Shopify テーマ開発環境 の作り方（Slate での準備）

Shopify Theme Kit で出来ること

• 複数環境へのテーマアップロードができる
• 高速でテーマのアップロードとダウンロードができる
• ローカルファイルをウォッチして変更した差分をShopify環境へ自動アップロードできる
• Windows、Linux、macOS で動かすことができる

Shopify Theme Kit の環境構築

Shopify Theme Kit の環境構築は数行のコマンドを打つことで簡単にセットアップができてしまいます。以下環境に応じてセットアップしてください。

【Mac OSの場合】

Mac OSでの Shopify Theme Kit インストールには Homebrew を利用します。まだインストールされていない場合はインストールを済ませておいてください。

Homebrewをまだ入れていない場合はターミナルを開いて以下コマンドを実行してください。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Homebrew

次のコマンドを順番に実行して Shopify Theme Kit のインストールを行います。

brew tap shopify/shopify
brew install themekit

【Windows の場合】

Windows での Shopify Theme Kit インストールには Chocolatey の事前インストールが必要です。

Chocolatey - The package manager for Windows

choco install themekit

インストール確認とヘルプコマンド

Shopify Theme Kit インストール が完了したら以下コマンドで正常にインストールされているか確認してみましょう。

theme help

正常インストールされていれば以下のように Shopify Theme Kit のコマンド一覧が表示されます。今後コマンド操作に困った時にも利用できるので覚えておいたほうがいいです。

特定コマンドの説明や flags(コマンドのオプション) を確認したい場合には次のコマンドを実行するとその場で確認できるのでおすすめです。

theme [command] --help

Shopifyストア APIアクセスの取得

Shopify管理画面のアプリ管理から「プライベートアプリを管理」を選択します。新規でプライベートアプリを作成してアプリ名、緊急連絡用開発者メールを入力します。

次に Admin API権限の Theme templates and theme assets を Read and write に設定してください。

完了したら保存します。新規作成すると Admin APIの項目に APIキーやパスワードが表示されます。パスワードをコピーしてどこかに保存しておきましょう。

ここまでできたら管理画面の操作は一旦終了して、再びローカルでテーマ初期構築の準備を行います

テーマの初期構築セットアップ

新規テーマを作成する場合と既存テーマをカスタマイズする場合でコマンドが変わりますので使い分けてください。

【新規テーマ作成】

新規テーマ作成をする場合、作成したいディレクトリーでターミナルを開き以下コマンドを入力してください。

password には先ほど Admin API で確認したパスワードを入力します。
store にはストアURLを入力します。
name にはテーマ名を任意につけてください。

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

上記コマンドを叩くとShopify テーマ開発に必要な最低限のファイルがローカルに作成されます。また、Shopify 管理画面のテーマライブラリー に name で入力したテーマが作成されます。

新規テーマ作成で必要な作業は以上になります。

【既存テーマカスタマイズ】

既存テーマをローカル環境にダウンロードしてカスタマイズするには対象テーマのIDが必要になります。

テーマIDを確認する方法には２通りあります。１つはShopify管理画面で確認する方法です。

まず対象テーマのカスタマイズ画面を開きます。カスタマイズ画面のサイトURLにテーマIDが割り振られています。

以下の例だと「012345678912」 がテーマIDとなります。

（例）https://sample.myshopify.com/admin/themes/012345678912/editor

２つめの確認方法はコマンドでの確認です。もし現段階で API パスワードとストアURLが把握できているのであればこちらの方法 がオススメです。

ターミナルを開いて以下コマンドを実行してください。your-password を先ほど Admin API で確認したパスワードに変更します。you-store.myshopify.com にはストアURLを入力します。

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

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

Available theme versions:
  [012345678912] Sample

いづれかの方法で対象のテーマIDが確認できれば以下コマンドで対象テーマのファイルをダウンロードします。

theme get --password=[your-password] --store=[you-store.myshopify.com] --themeid=[your-theme-id]

以上で既存テーマカスタマイズ時の初期設定は完了です。

コマンド紹介

「インストール確認とヘルプコマンド」で紹介したヘルプコマンドを利用すれば一通りのコマンドを確認することができますが、よく利用するコマンドだけ最後に紹介しておきたいと思います。

【Open コマンド】

以下コマンドで開発中のShopifyテーマのURLがブラウザで開きます。開発中の画面をその場ですぐに確認したいときなどに使えます。

theme open

オプション Flags に edit というものが用意されていてこのコマンドを叩くとテーマのカスタマイズ画面を立ち上げることができます。

theme open -E

【Watch コマンド】

以下コマンドではローカルで開発中ファイルの監視を行います。監視中に発生した変更内容は連携しているShopifyテーマ環境にその場でアップロードされます。

theme watch

【Deploy コマンド】

開発が完了した後、Shopifyサーバーへファイルを全てアップロードする際に利用します。

theme deploy

config.yml ファイルで次のように環境を複数設定していれば他環境へも一度にデプロイすることができます。

development:
  password: APIパスワード
  theme_id: “テーマID"
  store: sample.myshopify.com
  ignore_files:
    - config/settings_data.json
production:
  password: APIパスワード
  theme_id: "テーマID"
  store: sample.myshopify.com
  ignore_files:
    - config/settings_data.json

以下コマンドで config.yml で設定したテーマ環境全てにデプロイします。

theme deploy -a

まとめ

以上が Shopify Theme Kit を使った Shopify テーマ開発のセットアップ作業になります。

ここで紹介していないコマンドなどもいくつかありますので、慣れてきたらぜひ公式の解説もチェックしてみてください。

Shopify Theme Kit