Shopify CLI(3.x系)でテーマ制作用にローカル開発環境構を作る方法【Windows版】

Shopifyテーマを作り込む場合は、Shopify CLIを導入し、ローカル環境の開発するのがおすすめです。CLI(コマンドラインインターフェース)なのでインストールや初期設定のハードルが高く感じますが、意外と簡単にローカル環境の構築ができますよ。

Shopify CLI 3.xのインストール方法、Shopify CLI 2.xからのアップグレード方法を紹介します。

Shopify CLIとは

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

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

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

Shopify CLI 3.xインストールの準備

インストールのための要件確認

Shopify CLI 3.xをインストールして実行するための要件として、下記3つが作業環境にインストールされている必要があります。

  • Ruby+Devkit(バージョン2.7以上)
  • Node.js (バージョン14.17.0以上)
  • Git

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

確認

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

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

ruby -v
node -v
git --version

コマンドプロンプトなどを起動して、確認してみましょう。

例)Rubyの場合は以下のような流れになります。

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

Rubyのインストール

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

https://rubyinstaller.org/downloads/


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

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

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

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

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

  ↓

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

バージョン確認コマンドで、インストール出来ているか確認します。

ruby -v

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

Node.jsのインストール

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

https://nodejs.org/ja/


どれが良いかわからない時は「推奨版」の方を選択してください。

ダウンロードしたインストーラーを実行。
インストールウィザードが起動します。
基本的には、デフォルド状態のまま「next」で進めいけば大丈夫です。


ウィザードのボタンが「Finish」まで進めば完了。

ウィザードだけで完結せず、Rubyのインストール時と同様にコマンド画面が表示されることもあります。「press ENTER」や「 ( Yn )」などの入力を求められた時は、エンターキーもしくはYキーを押して、インストールを進めてください。

バージョン確認コマンドで、インストール出来ているか確認します。

node -v

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

gitのインストール

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

https://gitforwindows.org/


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

バージョン確認コマンドで、インストール出来ているか確認します。

git --version

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

旧バージョンのShopify CLIがある方

Shopify CLI(2.x)をインストール済みで、Shopify CLI 3.x系にアップグレードしたい。というWindowsユーザーの場合は、旧バージョンのShopify CLIをアンインストールするのがおすすです。

同じマシンで Shopify CLI 2.x と 3.xを使う方法も、Shopify公式サイトで紹介されていますが、競合対策がちょっと大変です。下記ページを見てもピンとこない方は、以下のコマンドでアンインストールをしましょう。
Migrate to Shopify CLI 3.x - shopify.dev

アンインストールのコマンド

gem uninstall shopify-cli

Shopify CLIインストールと初期設定

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

1.Shopify CLIのインストール

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

npm install -g @shopify/cli @shopify/theme

Enterキーでコマンドを実行すると、インストールが始まります。
しばらく待ちましょう。

コマンドが打ち込める状態になったら、Shopify CLIのインストールは完了。
バージョン確認のコマンドを実行して、インストール出来ているか確認します。

shopify version

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

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

2.Shopify CLIからデフォルトテーマをDL

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

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

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

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

【例】


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

ローカル環境にShopifyテーマをクローンする

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

shopify theme init

実行すると、theme nameを何にするか聞かれます。
任意のテーマ名を入力し、Enterキーで実行してください。
以下では「DawnBFCM」をテーマ名にしてみました。

実行すると「Cloning https://github.com/Shopify/dawn.git into…」と表示され、Githubからのクローンが始まります。完了するまで少し待ちましょう。

Cloning ~」と表示されたら終了です。

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

Shopify CLIでローカル開発サーバーを起動

Shopify CLI 3.xでローカルサーバーを立ち上げます。

1.ローカル開発に使うShopifyストアへ接続

Shopify CLI 3.xでローカル開発サーバーを起動するには、まず制作したいShopifyストアに接続する必要があります。

先程作成した、使用したいShopifyのテーマフォルダへ移動します。

cd DawnBFCM

そして、Shopify CLIでローカル開発サーバーの開始コマンドを実行します。

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

[ストアドメイン]部分は、ストアURLが入ります。
Shopifyの管理画面から確認してください。
解説の開発ストアの場合は、以下の赤線で囲った部分です。


コマンドを実行すると、ブラウザでShopifyへログインをせよと表示されます。
エンターキーなど、キーを押すとブラウザが開きます。
画面に従ってログインしてください。


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

ターミナル(コマンド入力画面)に戻りましょう。
「Logged in」と表示され、ローカルサーバーの起動が始まります。

少し時間がかかるので、100%の表示が出るまで待ちましょう。
エラーメッセージが出た、いつまでも動きがない、という方は下記のエラー対策1・2をご確認ください。

以下のように表示されたら、ローカルサーバーの起動完了です。
問題なく起動できた方は2.ローカル開発環境を確認に進んでください。

エラー対策1)theme devでエラーが出る

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

を実行すると、以下のようなエラー表示になる場合があります。

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

提案された方法を試してみましょう。
Shopifyパートナーの管理画面を開きます。
右上、自分の名前が出ているところをクリックして「ログアウト」を選択。

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

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

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


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

その状態で、先程のコマンドをもう一度試してみてください。

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

エラー対策2)Logged inから先に進まない

Logged in」の表示から動かない時は、Windowsのアカウント権限が関係している事が多いです。

Ctrlキー + Cキーで一旦処理を中断。
コマンド入力画面を終了してください。

そして、コマンドプロンプトなどのCLIを開き直します。
この時に、右クリックで“管理者として実行”を選びます。

管理者として実行で開いたCLIで、先程のコマンドをもう一度試してみてください。

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

2.ローカル開発環境を確認

Shopify CLIでローカル開発サーバーを起動すると、3つのURLが表示されます。
それぞれの意味は、以下のとおりです。

【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のローカルアドレスで、プレビューを見てみましょう。
表示されているURLをコピーして、ブラウザで開きます。
パスワードで保護されています。

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

パスワードを入力して、トップページを開いてみましょう。
トップページだけではなく、コレクションや商品ページも確認できます。

3.テーマエディタとpull

次に、開発用テーマエディターを使ってみましょう

URLを開くと、Shopifyストアの管理画面から「テーマをカスタマイズ」を選んだ時と、ほぼ同じ画面が開きます。
左上に表示されるテーマ名部分が“Development(...)”になっていることが違いです。

ちょっとだけ、カスタマイズ画面を触ってみましょう。
マルチカラム、というセクションを非表示にしてみます。

保存ボタンをクリックすると保存されます。
が、この場合、保存されるのはローカル環境ではなくShopifyのサーバー(https:///xxx.myshopify.com )側。保存も一時保存のようなもので、ログアウトしたりすると消えてしまいます。

このため、コマンド入力画面では「テーマエディターで変更したら、theme pull コマンドを使え」というメッセージが表示されています。

試してみましょう。
まず、Ctrl + Cキーを押してローカルサーバーを停止します。
バッチ ジョブを終了しますか、と確認されるのでYキーを押してEnter。

コマンドが入力できるようになりますので、theme pull を実行します。

shopify theme pull


上図のように、どのテーマをpull(取得)したいか聞かれます。
複数ある選択肢はKキーで上、Jキーで下に移動できます。
Developmentと[yours]と書かれているテーマを選択してください。

Enterキーで実行します。

Theme pulled successfully.」と表示されたら成功です。
ローカル環境のテーマディレクトリに、カスタマイズ画面からの変更が保存されました。

4.変更をShopifyにpush(アップロード)する

ローカル環境+開発用テーマエディターで行った変更を、Shopifyサイトに同期します。

テーマのpush(アップロード)は以下のコマンドで実行できます。

shopify theme push --unpublished

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


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

◆2回目以降のtheme devとtheme push

ローカル開発サーバーの起動は、一度ストアを指定しておけば、2回目以降はストアURLを省略することが出来ます。

shopify theme dev

また、既存のテーマを上書きしたい時は--unpublishedは無しでpushします。

shopify theme push

実行すると、どのテーマをアップロードするのか選択肢が表示されます。
Kキー(上移動)、Jキー(下移動)で上書きしたいテーマに移動。
Enterキーで確定すればOKです。

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

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

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

これで、Shopifyテーマ制作のための、ローカル環境構築は完了です。

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

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

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

こちらもオススメ

×