Shopify CLIでテーマ制作のための、ローカル開発環境を構築する方法(windows)

Shopifyの「コードを編集」画面は、本格的にコードを書こうとすると使いにくいですよね。
Shopifyテーマを作り込む場合は、ローカル環境での開発を可能にするShopify CLIを導入したいところ。CLI(コマンドラインインターフェース)なのでインストールや初期設定のハードルが高く感じますが、意外と簡単にローカル環境の構築ができますよ。

Shopify CLIとは

“Shopify CLI”はShopifyが用意してくれている、Shopifテーマ開発用のツールです。
ローカル環境でのShopifyテーマ作成・プレビューが可能になります。

つまり、自分が使い慣れているエディタでコードを書いたり、変更した部分を即座にブラウザで確認したりすることができます。管理画面からコードを編集するよりも、作業効率がものすごくアップすることが出来るツールというわけです。
コードもしっかり触っていく予定の方は、Shopify CLIを導入して作業しましょう。

なお、Shopify CLIでテーマ開発を行うには、Shopifyのアカウントとストア(開発ストアでも可)が必要です。まだストアを開設していない方は、先に開発ストアを用意してください。

Shopify CLIインストールの準備

Shopify CLIをインストールには、前提条件として下記2つが作業環境にインストールされている必要があります。

  • Ruby+Devkit(バージョン2.7以上)
  • Git

インストール済の方は、次の「Shopify CLIのインストール」へ進んでください。
インストールされていない、しているかわからない方は、以下の確認から行ってください。

確認

Rubyとgitがインストールされているかを確認してみましょう。
コマンドプロンプトやWindows ターミナルなどの、コマンド・ライン・インターフェース(CLI)を開いてください。

以下のコマンドを、それぞれ入力してみてください。

ruby -v
git --version

コマンドプロンプトなどを起動して、確認してみましょう。
Rubyの場合は以下のような流れになります。

バージョンが返ってこない、Shopify CLIに必要なバージョンよりも古い場合は、下記の方法でインストール(アップデート)を行います。

Rubyのインストール

以下のサイトからRuby(DevKit付き)をダウンロードし、インストールします。

https://rubyinstaller.org/downloads/

左側の“WITH DEVKIT”で、上の方に太字で表示されているものが推奨バージョンです。
特に問題なければ、太字で表示されている箇所をクリックしてインストーラーをダウンロードしてください。

ダウンロードしたインストーラーを実行すると、インストールウィザードが起動します。
最初の画面はライセンス条項の確認です。
I accept the license(同意します)にチェックを入れて、Nextをクリック。

インストールディレクトリや、コンポーネントの選択を画面が続きます。
基本的に変更は必要ありません、そのままNextをクリックして進めていきましょう。

インストールが完了すると、下記のような画面が開きます。

Enterキーを押してください。
インストールが実行されるので、しばらく待ちましょう。

  ↓

インストールが完了すると、最初と同じ質問がもう一度表示されます。
Enterキーを押してください。
コマンドのウィンドウが消えたら、インストール完了です。

コマンドプロンプトを起動して、もう一度rubyのバージョン確認を行ってください。

ruby -v

バージョンが表示されたら成功です。

gitのインストール

以下のサイトからgitのインストーラーをダウンロードしてください。

https://gitforwindows.org/

ダウンロードしたインストーラーを実行すると、インストールウィザードが起動します。
「Install」ボタンをクリックしてInstallを実行してください。

インストールが終了したら、もう一度gitのバージョン確認を行ってください。

git --version

バージョンが表示されたら、Shopify CLIのインストールに進みましょう!

Shopify CLIインストールと環境構築

では、Shopify CLIをインストールして動かしていきましょう。

1.Shopify CLIのインストール

Shopify CLIのインストールも、コマンドで行います。
下記のコマンドを入力してください。

gem install shopify-cli

Enterキーでコマンドを実行すると、インストールが始まります。


「1 gem installed」と表示され、コマンドが打ち込める状態になったら、Shopify CLIのインストールは完了です。

バージョン確認のコマンドを実行して、バージョンの数字が表示されるか確認してください。

shopify version

shopify versionを実行すると、下図のように「 Automatically send anonymized usage and~」という文章が表示されることがあります。

これは“匿名で使用状況とエラーレポートを、自動的にShopifyへ送信して良いか?”という問いです。
Yesのまま、Enterキーを押して問題ありません。

2.ShopifyストアとShopify CLIを接続

では、Shopify CLIと、制作するShopifyストアを接続しましょう。
以下のコマンドを入力します。

shopify login --store [ストアドメイン]

使用するストアドメイン(ストアURL)はShopifyの管理画面から確認してください。
解説の開発ストアの場合は、以下のようになります。

コマンドを実行すると、ブラウザが立ち上がり、Shopifyへのログインを求められます。
ログインしてください。


You've successfuly logged into the Shopify CLI!(Shopify CLIへのログインに成功しました!)という画面に切り替わります。

指示通り、ブラウザタブを閉じでターミナル(コマンド入力画面)に戻りましょう。
「Logged into store ストアドメイン」と表示されていればShopifyストアとの接続完了です。

3.Shopify CLIから新しいテーマを作成する

これからローカルで開発を進めるために、開発用のテーマを作成します。

テーマディレクトリを置きたい場所まで移動(※任意)

ここからShopifyのテーマを一式、ローカル環境に追加して開発を行います。

今の状態でコマンドを実行すると、ユーザー(C:\Users\ユーザー名)の直下にテーマディレクトリが作成されます。
Shopifyテーマを別の場所に置きたい方は、cdコマンドを使って移動してください。

よくわからない、という方は、移動をせず、そのまま下記の操作を進めてみてください。

ローカル環境にShopifyテーマに作成する

Shopify(OS2.0)のデフォルトテーマであるDawnのコピーを、ローカル環境に作成します。
以下のコマンドを実行してください。

shopify theme init

実行すると、新しく作成するtheme nameを何にするか聞かれます。

任意のテーマ名を入力し、Enterキーで実行してください。
以下では、shopify.devのチュートリアルと同じ「DawnBFCM」をテーマ名にしてみます。

Cloning https://github.com/Shopify/dawn.git into テーマ名…と表示され、Githubからクローンが始まります。

Cloned into テーマ名と表示されたら完了です。

指定した場所に、Shopifyテーマが出来ているか確認してみましょう。

4.開発ストアとローカル環境(Shopify CLI)を接続する

ローカル環境に開発用のテーマ(Dawnのコピー)が出来たら、ローカルで開発したコードを、ブラウザで確認できるように設定していきましょう。

まず、作成したテーマディレクトリに移動しましょう。

cd DawnBFCM

以下のコマンドで、ローカル開発サーバーを起動します。
初めて実行する場合は、下図のようなエラーが出る方が多いと思います。

shopify theme serve


赤字部分は「開発ストアで Shopify CLIを使う権限がない」というようなメッセージです。
その下の白い文字で「ストアURL を使用して (例えば、test-skillhub.myshopify.com/admin を使用して) 1 回はストアに直接ログインする必要がある。開発ストアの所有者になるかスタッフアカウントを作る」と解決方法が提案されています。

エラーになった方は、以下の方法を試してみて下さい。
エラーなくローカル開発サーバーが立ち上がっている(Serving表示になっている)方は、スキップしてください。

エラーメッセージ対策

Shopifyパートナーの管理画面を開きます。
右上、自分の名前が出ているところをクリックして「ログアウト」を選択。

ストアの管理画面(ストアドメイン/admin)を開いて、ログインし直します。
URLはターミナルのメッセージの for example 部分からコピーすると楽です。

ブラウザでストアドメイン/admin を開くと、ログイン画面にリダイレクトされます。

Shopify accountを既存のアカウントに追加してください。
途中、メール認証を求められることもあります。画面の指示に従って進めてください。


ストア管理画面が開けたら、その画面はそのまま。
別のタブで、パートナーダッシュボードの方にもログインし直してください。

コマンド入力画面から、先程のコマンドをもう一度入力してみましょう。

shopify theme serve

ブラウザでShopify CLIのログインが開くので、アカウントを選択。

すると、下図のように表示が変わります。

100%になるまで、ちょっと時間がかかるので待ちましょう。

下図のように、Serving.と3つのURLが表示されたら完了です。

テーマのプレビュー確認

shopify theme serveを実行すると、以下のように表示されます。

【1.Please open this URL in your browser】
表示URL(http://127.0.0.1:9292/)を開くと、ローカル環境でテーマをプレビューすることが可能です。コードが変更されると、自動でブラウザの画面が更新される機能(ホットリロード)もあり、リアルタイムでテーマの変更をプレビューすることができます。

【2.Customize this theme in the Theme Editor】
ストア管理画面からのテーマエディターを開くURLが載っています。
テーマエディター側で操作したい箇所については、こちらのURLを開いて行います。

【3.Share this theme preview】
ここに表示されているURLは、他の開発者と共有することができるプレビューリンクです。

【4.Use Ctrl-C to stop)】
Ctrl + Cキーで、立ち上げているローカル開発サーバーを停止します、という案内です。

1~3のURLのうち、これからテーマ開発で使っていくことが多いのが、1のローカルアドレス。
表示されているURLをコピーして、ブラウザで開いてみましょう。

パスワード保護が入っています。

なお、パスワードはShopifyストア管理画面から確認できます。
オンラインストア > テーマ上部のリンク、もしくは各種設定から確認・変更してください。

パスワードを入力して、トップページを開いてみましょう。

5.変更をShopifyにpush(アップロード)

ローカル環境で行ったテーマの変更を、Shopifyサイトの方に同期します。

テーマをアップロードするために、まずCtrl + Cキーを押してローカルサーバーを停止します。バッチ ジョブを終了しますか、と確認されるのでYキーを押してEnter。

テーマをアップロードするコマンドを入力します。

shopify theme push --unpublished

保存するテーマの名前を聞かれるので、わかりやすいテーマ名を入力してください。
ここでは分かりやすく「DawnBFCM」とします。

完了したら、ストア管理画面のテーマを確認してみてください。
テーマライブラリーに、先ほど命名した、新しいテーマが加わっています。

◆2回目以降のtheme push

一度アップロードした後に、またテーマを編集することもありますよね。
既存のテーマを上書きしたい時には「shopify theme push」とだけ入力します。

shopify theme push

実行すると、どのテーマをアップロードするのか選択肢が表示されます。

Kキー(上移動)、Jキー(下移動)で上書きしたいテーマに移動。
Enterキーで確定すればOKです。

いちいち選ぶのが面倒、という方は、以下のコマンドでも既存のテーマの上書きが可能。

shopify theme push --theme [テーマID]

公式ドキュメント(Shopify.dev)のTheme commandsページでは、Shopify CLIで使用するコマンドやオプションが紹介されています。

これで、Shopifyテーマ制作のための、ローカル環境構築は完了です。
Shopify CLIはGitHubとも連携できるので、そちらを取り入れるとより便利になります。

まずは無料で14講座から始めましょう!

ハイクオリティな14講座/98レッスンが受け放題。
募集人数には制限があります。サインアップはお早めに。
無料申し込み期限
12月4日まで

募集 人数
100名 (残りわずか)

こちらもオススメ

×