知り合いのサイトをShopifyで構築お手伝いすることになったのですが、どうやら開発ツールであるShopify CLIなるものが提供されているらしいのでまとめました。
- Shopify CLIとは
- Rubyの用意
- Shopify CLIの用意
- Shopify CLIでストアと接続
- 📮 Contact us
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の解説はしていないので、未導入の方は公式サイトのインストールコマンドをターミナルに入力してください。インストールの最後にパスを通す必要があるのですが、インストール後のターミナル画面に必ず書かれていますのでよく読んで進めてみてください。（需要有れば記事化します）
Homebrew
The Missing Package Manager for macOS (or Linux).
brew.sh
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の用意
Shopify CLI
Shopify CLI is a command-line interface tool that helps you generate and work with Shopify apps, themes and custom storefronts. You can also use it to automate many common development tasks.
shopify.dev
Installation項のhomebrewをクリックするとインストール用のコードが出てきますので次のコマンドをターミナルで入力します。
完了したら次のコマンドを入力して確認しましょう。
Shopify CLIでストアと接続
次のコマンドでShopify CLIの認証を行います。
ストアURLはmyshopify.comで終わるアドレスです。Shopifyのドメインから確認できると思います。
次の様なログが出ると思いますので、適当なキーを押すとブラウザに飛びます。
正しいアカウントを選んでください。
私の場合、既にテーマがShopify上に存在しているので、次のコードでダウンロードしてきます。
無事ダウンロード出来たようなので、次のコマンドでプレビューしてみます。
実際にコードを変更するとホットリロードが効いて反映されていることが分かると思います。
開発テーマはテーマライブラリ上には表示されず、7日間操作されない場合に開発テーマは削除されます。
ですが、再度Shopify CLIを実行すると有効になります。
修正が完了したら次のコマンドで反映します。
その他のコマンドについては次のページから参照してください。
Shopify-cli theme
Shopify CLI is a command-line interface tool that helps you generate and work with Shopify apps, themes and custom storefronts. You can also use it to automate many common development tasks.
shopify.dev
案外サクッとできました。
現場からは以上です。
😇 Nobuhiro Kumagai
いつか海外で余生を過ごすため頑張るフロントエンドエンジニアです。Webに関わることなら大体経験済みで守備範囲は広め、お気軽にお声がけください 😄
- 💻 Web Creator [Director, Front-end, etc]
- 📍 宮城県仙台市在住
- 📕 私についての記事
ultra9ma (@ultra9ma) on X
Web Creator (Director, Front-end, etc.) Essentially bathroom graffiti. 🪦 R.I.P @plus9ma 🔮 AI Creative Accounts @sulplex
twitter.com
REACTER | 仙台拠点のホームページ制作
REACTERは仙台市を拠点として価値のあるWEBサイト構築のための企画・制作、グラフィック制作、UI/UX制作を行っています。
reacter.jp
📮 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
https://docs.google.com/forms/d/e/1FAIpQLScyLS5lzdvFbPwuOaU7XAqbtpiw7Uxdw-DAgCuDvxecdBRjIQ/viewform?usp=sf_link
docs.google.com
🖥 Work with REACTER
Google Forms - create and analyze surveys, for free.
Create a new survey on your own or with others at the same time. Choose from a variety of survey types and analyze results in Google Forms. Free from Google.
docs.google.com
© 2020 ULTRA9MA