知り合いのサイトを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