Shopifyでテンプレートの開発環境を構築する
これはなに?
最近Shopifyでサイトを最近オープンしました。(が、まだ手直しもあるのでURLは公開しません・・)
テンプレートを操作するのは本番環境のエディタしか無いため、ちょっとカスタマイズしたいという場合はtypoなどの失敗をするとHTML崩れやJSエラーが発生するので胃に穴が空きそうなので開発環境の作り方を調べてみました。
開発環境を構築するための調査
shopify staging
で検索するとそれっぽいものが出てきました。
どうやらやり方としては、現在利用しているテンプレートをコピー(メニュー上はDuplicate)すると良いとのことでした。 実際にコピーするとテンプレート一覧のようなところに表示されるので、そこからEdit Codeするとテンプレート開発を行えて、本番サイトに影響しないようです。
ツールを使って開発する
SlateというShopifyが出しているツールなのですかね、開発環境からデプロイ出来たりテンプレート表示確認出来るようなので使ってみます。
環境構築については以下のサイトの通りに実行してみました。
簡単に手順をまとめると、以下のようになります。
- npmでslateをインストール
- テーマ作成
- configファイルの設定
- slate watchで表示確認
- slate deployでデプロイ
config.ymlについて
config.ymlを何も考えずに本番と同じテーマIDを使ってしまったら、実際に本番に反映されてしまったので以下の点に注意して設定すると良さそうでした。
development: password: <API_PASSWORD> theme_id: <DEVELOP_THEME_ID> store: <YOUR_SUB_DOMAIN>.myshopify.com ignore_files: #- settings_data.json # Uncomment this line to avoid resetting theme settings production: password: <API_PASSWORD> theme_id: <PRODUCTION_THEME_ID> store: <YOUR_SUB_DOMAIN>.myshopify.com ignore_files: #- settings_data.json # Uncomment this line to avoid resetting theme settings
- <API_PASSWORD>
- private appsで発行したパスワード
- Theme templates and theme assetsがRead and writeになっている必要があります
- <DEVELOP_THEME_ID>
- 本番のテンプレートIDからテンプレートをコピーした時のID
- <PRODUCTION_THEME_ID>
- 本番のテンプレートID
- <YOUR_SUB_DOMAIN>
- Shopifyの管理画面のドメイン
Slateにする利点
Slateにすることにより、開発する時のメリットが多いと思います。 * テンプレートをgitで管理可能 * 表示確認が可能 * デプロイが容易
まとめ
liquidというテンプレートファイルをどうやって表示するのか今日一日探した結果、ツールを見つけることが出来たので収穫でした。 他の業務で使えるかと行ったら難しいところですが、Shopifyを使うとECサイト構築が容易だったりとか売上情報とかデータをShopify側が管理してくれたりとかで便利なんじゃないかと思いました。