Shopify テーマ開発環境 の作り方（Slate での準備）
Shopify テーマ開発時、Slate と呼ばれるCLIツール(コマンドラインツール)を利用します。バージョンが v0, v1とあり昨年(2018年)のバージョンアップで仕様が大きく異なりました。
現状、新規でプロジェクトを作成する場合はv1が推奨されていますが、既存テンプレートのカスタマイズなどを行う場合はv0が使いやすいです。
Slateでの開発に当たり、OSはMacOSが推奨されています。また、Nodeの実行環境とパッケージマネージャーの利用準備までは済ませていることを前提とします。(yarn もしくはnpm をお好みでお使いください)
事前に必要な情報（取得方法は後述の解説を参照してください）
・ShopifyストアのURL
・プライベートアプリのAPIパスワード
・テーマID
Slate V1の利用方法
１. プロジェクト作成
開発を行うディレクトリーまで移動し、以下コマンドで新規プロジェクトの作成を行います。（テーマ名: my-new-theme ）yarn create slate-theme my-new-theme
ornpx create-slate-theme my-new-theme
２. Shopifyストアとの接続設定
作成された.envファイルを開き*入力例⑴に倣って記述します。最低限記述が必要な箇所はストアURL, APIパス, テーマIDです。これらの情報はShopify管理画面で確認可能です。
*入力例⑴ .env ファイル
# ShopifyストアのURL
SLATE_STORE={ストア名}.myshopify.com# プライベートアプリのAPIパスワード
SLATE_PASSWORD={APIパス}# テーマID
SLATE_THEME_ID={テーマID}# デプロイ時に無視するファイル（任意） SLATE_IGNORE_FILES=config/settings_data.json# タイムアウト設定（任意）
SLATE_TIMEOUT=2m
ShopifyストアのURL
（例）https://sample.myshopify.com
ここではsampleがShopifyストア登録時に設定したストア名なので*入力例⑴ の{ストア名}を設定した名前にして差し替えてください。
SLATE_STORE=sample.myshopify.comプライベートアプリのAPIパスワード
Shopify管理画面のアプリ管理から「プライベートアプリを管理」を選択します。（*図１参照）
新規でプライベートアプリを作成しアプリ名、緊急連絡用開発者メールを入力します。Admin APIの項目でパスワードを確認し、コピーして*入力例⑴の{APIパス}に貼り付けてください。（*図２ 参照）
次にAdmin API権限の “Theme templates and theme assets” を Read and writeに設定してください。（*図３ 参照）
Shopify テーマID
テーマのIDはShopify管理画面のテーマ選択画面のカスタマイズを選択した際に確認することができます。
カスタマイズ画面のサイトURLにIDが割り振られています。ここでは 012345678912 がテーマIDとなりますね。（*図４参照）
（例）https://sample.myshopify.com/admin/themes/012345678912/editor
連携したいテーマのIDをコピーして*入力例⑴の{テーマID}に貼り付けてください。
SLATE_THEME_ID=012345678912３. 開発スタート‼︎
以下のコマンドで起動させれば開発環境は整います。
yarn start＊npmを利用していれば npm start で実行
利用可能なコマンド例
・build — ファイルをコンパイルしてdistファイルへ格納slate-tools build
・deploy — distファイルをShopifyストアへアップロードslate-tools deploy [--env=my-custom-env-name][--skipPrompts][--replace]
・format — .eslintrcファイル と.stylelintrcファイルで宣言された規約に従ってコードのフォーマットを整形slate-tools format [--scripts][--style][--json]
・lint — ソースファイルの整合性チェックslate-tools lint[--scripts][--styles][--locales]
・start — ローカルファイルをdistファイルへコンパイルし、Shopifyストアへ該当ファイルをアップロードslate-tools start[--env=my-custom-env-name][--skipPrompts][--skipFirstDeploy]
・zip— distディレクトリーの内容をコンパイルし、ZIPファイルを作成slate-tools zip
Slate V0の利用方法
１. プロジェクト作成
まず以下コマンドでグローバルにslateをインストールします。npm install -g @shopify/slate
次に開発を行うディレクトリーまで移動し、以下コマンドで新規テーマの作成を行います。theme-name は新たに作成するテーマ名を入力します。slate theme theme-name
既存テーマをカスタマイズする場合などテーマがローカルにある場合は以下のコマンドを実行します。slate migrate
２. Shopifyストアとの接続設定
config.ymlファイルを開き、developmentにストアURL, APIパス, テーマIDを記述します。APIパスなど必要な情報取得はSlate v1の解説を参照してください。
*入力例⑵ config.yml ファイル
development:
password:{APIパス}
theme_id:{テーマID}
store:{ストア名}.myshopify.com
ignore_files:
#- settings_data.json # Uncomment this line to avoid resetting theme settings
production:
password:
theme_id: "live"
store: your-shop.myshopify.com
ignore_files:
#- settings_data.json # Uncomment this line to avoid resetting theme settings３. 開発スタート‼︎
以下のコマンドで起動させれば開発環境は整います。
slate deploy
新規でテーマ開発する場合は以下コマンドでZIPファイルを作成し、新規テーマをアップロードしてください。（*図４参照）
その後テーマIDを*入力例⑵の{テーマID}に貼り付けて slate deployで実行が確認できれば完了です。
slate deploy -m
利用可能なコマンド例
・theme— 空テーマを新規作成slate theme [name]
・migrate — 既存テーマをslate開発環境へ変換slate migrate
・build —JS, SCSSファイルの統合、SVG アイコンの最適化などを行いファイルのコピーをdistへ格納slate build
・deploy — buildを行い、distファイルをShopifyストアへアップロードslate deploy
・watch— ローカルファイルの変更を監視し、変更差分をShopifyストアへアップロードslate watch
・start — build, deploy を行い、watchの状態に入るslate-tools lint[--scripts][--styles][--locales]
・zip — buildを実行し、圧縮後distファイルへZIPファイルを作成slate zip
まとめ
Slate v1の利用メリットはやはりプレビューが高速化され、localhostサーバーでの表示がよりシームレスに行うことができるようになったことだと思います。また利用できるコマンドの幅も広がり、よりフレキシブルな開発環境を利用できるようになってきたように感じます。
ただ、課題としてSlate v1では migrate に相当するコマンドが用意されていない為、既存テーマのカスタマイズを行うのが困難というところがネックとなっています。（2019/03/7時点）今後の改善に期待しましょう。
【参照】
・1.0.0-beta.14 ドキュメント
・0.14.0 ドキュメント
Shopify Theme Kit でのテーマ開発に関しては以下記事を参照ください。
