自分用メモ。
インストールはbrewでコマンドでインストール可能。
詳細は以下を参考にした
(公式) https://shopify.github.io/themekit/
https://qiita.com/t-kurasawa/items/21f887fea399c0d07529
https://www.non-standardworld.co.jp/22987/
使ってみた所感
このツールを使ってよかった思ったことは単純に、Gitによる管理ができること。
liquidファイル群をお気に入りのEditorで編集し、watchコマンドでリアルタイムに編集できるのも良い。
テーマファイルを頻繁に更新する場合は、必須のツールだと思う。
失敗したこと
1) getコマンドとdownloadコマンドの違いを、ちゃんと把握していなかったこと
getコマンドもdownloadコマンドもテーマファイルをダウンロードするのに使えるコマンドだが以下の違いがある。
[getコマンド]
・全てのファイルをダウンロードすることしかできない。個別にファイルをダウンロードすることができない。
・configファイル(config.yml）が上書きされる。
[downloadコマンド]
・全てのファイルをダウンロードすることもできるし、個別にファイルをダウンロードすることもできる。
・configファイル(config.yml)は上書きされない
自分の場合、getコマンドを使い続けていたため、使う度にconfig.ymlが上書きされ、かなり煩わしかった。
公式ドキュメントを見ても、getとdownloadの使い分けの詳細は書かれていないが実際に想定されている使い方としては以下だと思う。
(1) listコマンドでテーマファイルのID一覧を調べる。
(2) getコマンドでテーマファイル一式を全てダウンロードする。
(3) config.ymlもダウンロードされるので、以下のページを参考にし設定
shopify.dev
(4) これ以降ファイルをダウンロードしてくる場合は、getコマンドではなく、downloadコマンドを使用する
2) deployコマンドを使用されると無慈悲になんのログもなく上書きされる。
自分のやらかした経験なのだが、Shopifyのテーマ管理画面から「Customize」を行うと、その設定内容は「config/settings_data.json」に保存される。そしてdeployコマンドに特定ファイルを指定せずにそのままコマンドを打つと、全てのファイルがなんの警告も、何のファイルをアップロードしたかのログも出ずに全てアップロードされる。
ログがでないため、その日は何も気づかずに翌日、テーマのCustomizeで設定したデータが全て消えていて、愕然とした...という経験がある。なのでdeployコマンドを使用する前は、必ず以下のステップを踏むことにしている
(1) downloadコマンドで全てのファイルをダウンロードし、更新されたファイルがないかチェックする。
(2) deployコマンドを使用するときは、できるだけ特定ファイルを指定して、deployコマンドを使用する。
理想的な使い方
今後は、Shopifyテーマファイルを購入後、このツールを使うときは以下の使い方を行う。
[初期設定]
(1) テーマファイルを購入(テーマファイル名は仮名"Theme")とする
(2) "Theme"を複製し、以下の用途で使用する
① "Theme (production)" (本番環境用)
② "Theme (development)" (開発環境用)
③ "Theme (DON'T TOUCH ME)" (バックアップ用)
(3) listコマンドでテーマファイルのID一覧を調べる。
(4) getコマンドで①のテーマファイル一式を全てダウンロードする。
これ以降ファイルをダウンロードしてくる場合は、getコマンドではなく、downloadコマンドを使用する。
(5) config.ymlを設定(productionとdevelopmentの設定。設定名はそれぞれproductionとdevelopmentにする)
(6) (4)で取得したファイルをGit管理する。(config.ymlはgitignoreに追加)
[開発時]
(1) downloadコマンドで"Theme (production)"から最新のファイルを全取得。
(2) (1)で変更があればGitでコミットまたはプッシュしておく。
(3) (1)のファイルを"Theme (development)"にdeployする
(4) theme open --env="development"で開発用のテーマが画面をブラウザで開く
(5) theme watch --env="development"でリアルタイムで編集したコードが開発環境用テーマにアップロードされるようにする。
(6) 開発が終了し、ブラウザで確認して問題なければ、theme deploy --env="production"コマンドに、デプロイするファイル名を指定して、本番環境にデプロイする。
(7) 本番環境でも問題なければ、Gitコミットまたはプッシュする
