知り合いのサイトをShopifyで構築お手伝いすることになったのですが、どうやら開発ツールであるShopify CLIなるものが提供されているらしいのでまとめました。
Shopify CLIとは
via: https://shopify.dev/docs/api/shopify-cli
Shopify CLIは、2021年6月末にリリースされた開発ツールであり、OS2.0仕様のテーマ開発に利用されています。
Theme Kitという開発ツールも存在しますが、現在は主にOS2.0未対応テーマの開発に利用されており、これから始める方はShopify CLIを使って開発を行う方が良さそうです。
前提条件は下記が必要とのことです。
Node.js 18.16.0以上が実行可能であるRuby 2.7.2以上が実行可能であるGit 2.28.0以上が実行可能である- ストア管理者、もしくはアカウント権限がコラボレーター、スタッフである
今回はHomebrewを使って開発環境を用意してみます。
Homebrewの解説はしていないので、未導入の方は公式サイトのインストールコマンドをターミナルに入力してください。インストールの最後にパスを通す必要があるのですが、インストール後のターミナル画面に必ず書かれていますのでよく読んで進めてみてください。（需要有れば記事化します）
Rubyの用意
Rubyについて、Apple M2 Pro（14インチ、2023）では既にインストール済みだったのですが、若干古いようでした。
素のRubyをインストールするのは避けたかったので、バージョン管理出来るrbenvをインストールしました。
https://github.com/rbenv/rbenv
インストールが完了したらrbenvのバージョンを確認します。
続いてはrbenvの初期設定をします。
表示に従って、.zshrcにeval "$(rbenv init - zsh)"を追加していきます。
追加が終わったらターミナルを終了するか、次のコマンドで再読み込みしましょう。
欲しいバージョンは2.7.2以降ですが、2.7系の最新バージョンが分からなかったのでわざとrbenv install 2.7と入力すると色々と表示されました。
2.7.8があるようだったので、再度次のコマンドを入力してインストールします。
インストール後のNOTEに従って次のコマンドを入力します。
最後にバージョンの確認を行います。
無事要件を満たすRubyをインストール出来ました。
Shopify CLIの用意
Installation項のhomebrewをクリックするとインストール用のコードが出てきますので次のコマンドをターミナルで入力します。
完了したら次のコマンドを入力して確認しましょう。
Shopify CLIでストアと接続
次のコマンドでShopify CLIの認証を行います。
ストアURLはmyshopify.comで終わるアドレスです。Shopifyのドメインから確認できると思います。
次の様なログが出ると思いますので、適当なキーを押すとブラウザに飛びます。
正しいアカウントを選んでください。
私の場合、既にテーマがShopify上に存在しているので、次のコードでダウンロードしてきます。
無事ダウンロード出来たようなので、次のコマンドでプレビューしてみます。
実際にコードを変更するとホットリロードが効いて反映されていることが分かると思います。
開発テーマはテーマライブラリ上には表示されず、7日間操作されない場合に開発テーマは削除されます。
ですが、再度Shopify CLIを実行すると有効になります。
修正が完了したら次のコマンドで反映します。
その他のコマンドについては次のページから参照してください。
案外サクッとできました。
現場からは以上です。
😇 Nobuhiro Kumagai
いつか海外で余生を過ごすため頑張るフロントエンドエンジニアです。Webに関わることなら大体経験済みで守備範囲は広め、お気軽にお声がけください 😄
- 💻 Web Creator [Director, Front-end, etc]
- 📍 宮城県仙台市在住
- 📕 私についての記事
📮 Contact us
If you have a project or general questions for us, please contact us using the form below.
Note: It may take our team time to reply to your message depending upon the content.
📧 Talk to REACTER
© 2020 ULTRA9MA