yuji0602’s blog

日々思っていることなど。

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>

Slateにする利点

Slateにすることにより、開発する時のメリットが多いと思います。 * テンプレートをgitで管理可能 * 表示確認が可能 * デプロイが容易

まとめ

liquidというテンプレートファイルをどうやって表示するのか今日一日探した結果、ツールを見つけることが出来たので収穫でした。 他の業務で使えるかと行ったら難しいところですが、Shopifyを使うとECサイト構築が容易だったりとか売上情報とかデータをShopify側が管理してくれたりとかで便利なんじゃないかと思いました。