BLOG

情報発信

blog サムネイル画像

Shopify CLIのインストール方法と使い方まとめ

2021.07.31

Web制作

こんにちは、AWA Biz代表の小川です!

2021年6月末に発表されたShopifyのOnline Store2.0で、Shopify CLIの使用が推奨されるようになりました。

https://shopify.dev/themes/tools/cli

今日はShopify CLIのインストール方法と使い方をまとめていきます。

Shopify CLIとは何か

Shopify CLIとはShopifyの開発を行うためのコマンドラインツールです。これを導入することにより、ローカルのエディタ(VSCodeなど)で編集したソースコードがストアに反映されるようになります。

これまでもTheme Kitというツールがあったのですが、より簡単に環境構築ができるようになり、できる幅も広がりました。

Shopify CLIのインストール方法

Shopify CLIを使用するためには、前提条件として

  • Ruby2.7以上がインストールされていること
  • Homebrewがインストールされていること(Mac OSの場合)

が必要になります。

上記二つのインストール方法、またはアップデート方法は検索すると記事がたくさん出てきますのでここでは省略します。

インストールのために打つコマンドは以下の3つです。

ターミナルを開いてコマンドを実行します。

gemでインストール

$ gem install shopify-cli

homebrewでインストール(MacOSの場合)

$ brew tap shopify/shopify
$ brew install shopify-cli

インストールに成功していたら、以下のコマンドを打てばバージョン番号が表示されます。

$ shopify version
2.1.0

Shopfy CLIでストアと接続する

ローカル環境とShopifyストアを接続します。

接続するためにはストアのスタッフ権限かコラボレーター権限が必要です(もちろんオーナーでも接続できます)。

接続するコマンドは以下になります。

$ shopify login --store [ストアURL]

[ストアURL]の箇所はそれぞれのストアURLで置き換えてください。

awa-biz.myshopify.com

などのドメインです。

コマンドを打つと自動的にブラウザが立ち上がりShopifyパートナーのログイン画面になります。
アカウントを選択してログインします。接続が成功するとブラウザで↓のようなメッセージが表示されます。

このメッセージが表されたブラウザのタブは閉じて大丈夫です。

少し待つとターミナル上でもShopifyパートナーアカウントを選択する画面が表示されるので、アカウントを選択します。

下記がアクセスが成功したら表示されるメッセージです。
アカウント名:AWA Biz
ストアURL:[ストアURL].myshopify.com
の場合です。

Logged into store [ストアURL].myshopify.com in partner organization AWA Biz

Theme Kitでは管理画面からプライベートアプリの有効化など複雑な設定が必要だったのですが、Shopify CLIでは不要になりました!環境構築が容易になり、よりローカルで開発しやすくなりました👍

テーマを新規作成する

下記コマンドでテーマを新規作成できます。

[-u リポジトリのURL]はどのテーマを元に作成するか、GitリポジトリURLを入力します。入力がなければDawnをベースに作成されます。

$ shopoify theme init [テーマの名前] [-u リポジトリのURL]

2021年7月末現在新仕様に対応したテーマはDawnのみですが、今後色々なテーマが対応していくことになると思います。テーマごとのGithubが作られることになると思いますので、そのURLを指定していくことになると思います。

既存のテーマをダウンロードする

既存のテーマをダウンロードするにはこちらのコマンドを実行します。

$ shopify theme pull [-i テーマのID]

現在のディレクトリにテーマフォルダが展開されるので、あらかじめ特定のディレクトリに移動してからpullするようにしましょう。

共同開発する場合は、こちらのコマンドを使用せずに、Githubのソースコードをcloneして開発を進めることができるため、別の方が開発していたコードを修正する場合などに使用することになると思います。

開発を進める

テーマがローカル環境に準備できたところで、いよいよ開発を進めていきます。

Shopify CLIを使ってみて、個人的にここが一番感動したところです!

ローカルで開発したコードをブラウザで確認する時は以下のコマンドを実行します

$ shopify theme serve

コマンドの実行が成功すると、下記メッセージが表示されます。[ストアURL]と125503307934は各ストアごとに異なりますので、お使いのストアに置き換えてください。

┃ Please open this URL in your browser:
┃ http://127.0.0.1:9292
┃ 
┃ Customize this theme in the Online Store Editor:
┃ https://[ストアURL].myshopify.com/admin/themes/125503307934/editor
┃ 
┃ Share this theme preview:
┃ https://[ストアURL].myshopify.com/?preview_theme_id=125503307934

3つURLが表示されましたが、どのURLにアクセスしても現在開発中のテーマが見れるようになっています。

しかし、このURLはストアにアップロードされているテーマを見ているわけではありません。development themeと言って開発用にプレビューされている仮テーマ状態になります。

ストアにアップロードされているテーマを直接編集するわけではないので、共同開発の時に編集の競合が発生するなどの心配がなくなり、かなり開発がスムーズに行えるようになりました!

さらに、「http://127.0.0.1:9292」はローカルでテーマをプレビューしているので、liquidやcssファイルを編集したらホットリロードされて、すぐに確認できるようになりました!
VSCodeから編集→画面リロード→表示に時間がかかる。。。という繰り返しでしたが、かなり開発しやすくなった印象です。

↓のGifのようにcssを変更すると、一瞬で反映されます!

テーマをアップロードする

development themeはShopifyからログアウトしたり一定期間経過すると削除されてしまうので、ある程度開発が完了したらストアにテーマをアップロードしましょう。

その時に実行するのが、下記のコマンドです。

$ shopify theme push

こちらもたくさんオプションがあるので、ぜひ公式サイトを確認してみてください。

一旦非公開テーマとしてアップしたり、開発テーマとしてアップロードしたり、既存のライブテーマを更新したり、と色々なオプション設定が可能です。

https://shopify.dev/themes/tools/cli/theme-commands#push

pull,pushコマンドでエラーになってしまった場合

コマンドを打っていると

「403::(ShopifyCli::API::APIRequestForbiddenError)」

が発生する場合がありました。こちらの解決策も掲載しておきます(※一時的な解決策ですがご了承ください)。

shopify cliのgithubでもissuesとして報告されていて、結構困っているコメントが見られました。。

https://github.com/Shopify/shopify-cli/issues/1361

解決策は以下の通りです。

  • 開発ストアからログアウトする
  • 開発ストアのURLを直で入力してログインする
    https://[store-name].myshopify.com/admin
    このときパートナーアカウントのログインが求められるので、入力してログイン
  • ターミナルで一度Shopifyログアウト→ログインする
    $ shopify theme logout
    $ shopify theme login --store [ストアURL]
  • 再度pullやpushコマンドを実行

エラーが発生しなければ無事解決です!

まとめ

今回はShopifyのOnline Store2.0で推奨されるようになったShopify CLIコマンドについてまとめてきました。ここでは書ききれなかったコマンドももちろんありますので、ぜひ色々試してみてください。

AWA Bizでは効果が出るサイトを作成することをモットーにECサイト案件からWebサイト案件まで幅広くご対応しております。

案件のお見積もりやご相談はお問い合わせフォームよりご連絡ください。

お問い合わせはこちら

CONTACT

お問い合わせ

Contact