Shopifyテーマ開発環境構築メモ(Shopify CLI)

こっちが主流っぽい?みたい。

どういうアレか

shopify自体の説明は割愛して、独自テーマ(デザイン)をやりたい場合、開発環境の用意が必要で非常に面倒くさい。用意しなくても作れる上、zipでアップもできるんだけど、ツールを使わずに作ると更に訳が分からないことになる。

要するにはgitやらnode的なアレがテーマのフォーマットになってるんでそれを使ってどうのこうのすることになる。流れ的には必要なものをインストールしてストアと連携させましょうという感じになる。

で、Theme Kitというものがあるのだけど、今はShopify CLIに移行してるっぽい。ざっくり言って環境が2つある。Theme Kitは前の記事で書いたのでShopifyCLIの話。

現在のバージョンはShopify CLI3。

アカウントの準備

とりあえず開発するなら無料でやれたほうが良いんで、パートナーアカウントを作ってストアを用意する。アカウント作成~ストア開設までは前の記事の初めの方で書いた。

といっても大したことは書いてなかったんで以下のページの右上からアカウントを作って案内に沿って進めていく感じ。

開発ストアを構築する
構築した開発ストアはテーマやアプリをテストするために使用したり、クライアント用のShopifyアカウントを設定するために使用したりすることができます。

インストール

Shopify CLIはTheme Kitと違って、まず以下のものをインストールする必要がある。

  • Ruby + Devkit
  • Note.js
  • Git

インストールファイルの案内、インストールの確認方法等は以下のページが参考になる。というか、諸々はこれで完了した。

Shopify CLI(3.x系)でテーマ制作用にローカル開発環境構を作る方法【Windows版】
Shopify開発用のツール“Shopify CLI”を使うと、ローカル環境でのShopifyテーマ作成・プレビューが可能になります。Shopify CLI 3.xのインストール方法、Shopify CLI 2.xからのアップグレード方法を...

作業自体に付け加えることはない。

一応、普段こういう作業をしない人はPowerShellの権限をいじってない場合があって、設定してなければセキュリティの云々でコマンドを弾かれる。

使い方

このあたりも前項の記事でカバーされてるんだけど。

とりあえずTheme Kitと違ってパスワードを入れ込んだログインは必要ない。ストアドメインを入れ込んだコマンドを叩いたときにWEBブラウザでログインしろって内容が出て、アクセスしたら連携される。一回やっとけば済むのだけど、ログアウト状態だと都度連携のためにログインを求められる。

ローカル環境

Shopify CLIにはローカルでサーバーを立ててやっていく機能がある。

テーマフォルダを開いた状態で以下の内容を叩く。フォルダを間違えるとめんどいことになる。

shopify theme dev --store 【ドメイン】.myshopify.com

叩くとサーバーが立ち上がる。ちょっと待つことになるので慌てない。終了したい場合は「Ctrl + C」。「serve」でもいけるんだけどよくわかんない。

確認用のURLはIP(http://127.0.0.1:9292)で案内される。編集するたびに自動更新が掛かってすぐに反映してくれる。嬉しいけど処理が重くなるようなら切ったほうが良いかも。

新規でアップ(push)する場合はこう。

shopify theme push --unpublished

すでにアップしてあるものを更新(上書き)する場合はこう。

shopify theme push

設定項目多すぎてざっくりで済ませるほうが火傷しないで良さそうなのでここらへんで。

参考

Shopify CLI(3.x系)でテーマ制作用にローカル開発環境構を作る方法【Windows版】
Shopify開発用のツール“Shopify CLI”を使うと、ローカル環境でのShopifyテーマ作成・プレビューが可能になります。Shopify CLI 3.xのインストール方法、Shopify CLI 2.xからのアップグレード方法を...
Shopify CLI 3がテーマ(theme)に対応!アップデート方法や変更点について解説!
2022 年 10 月に、テーマのサポートが Shopify CLI 3.x に追加されました。Shopify CLI 3.x は、合理化された認証とストア管理を提供します。アップデート方法(shopify-cliがインストール済みの場合)
Theme Kit から Shopify CLI へ - Qiita
本記事の対象者「久しぶりの Shopify。これまで Shopifyのテーマをいじるのに ThemeKit を使っていたが、どうやらその後継として Shopify CLI とやらがリリースされてい…
Shopify CLIの Shopify theme コマンド について
【2022】Shopify CLIとは?使い方&Theme Kitとの違い | Shopify Guide
「ローカル環境でShopify(ショッピファイ)をカスタマイズできたらな……」そう思ったことはないでしょうか?Shopify CLIを使うことで、ローカル環境でテーマをカスタマイズすることができます。Online Sto …

コメント

タイトルとURLをコピーしました