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のアカウントとストア（開発ストアでも可）が必要です。まだストアを開設していない方は、先に開発ストアを用意してください。
Skillhubブログ
Shopify CLI 3.xインストールの準備
インストールのための要件確認
Shopify CLI 3.xをインストールして実行するための要件として、下記３つが作業環境にインストールされている必要があります。
- 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のインストーラーをダウンロードしてください。
どれが良いかわからない時は「推奨版」の方を選択してください。
ダウンロードしたインストーラーを実行。
インストールウィザードが起動します。
基本的には、デフォルド状態のまま「next」で進めいけば大丈夫です。
ウィザードのボタンが「Finish」まで進めば完了。
ウィザードだけで完結せず、Rubyのインストール時と同様にコマンド画面が表示されることもあります。「press ENTER」や「 ( Yn )」などの入力を求められた時は、エンターキーもしくはYキーを押して、インストールを進めてください。
バージョン確認コマンドで、インストール出来ているか確認します。
node -v
バージョンが表示されたら成功です。
gitのインストール
以下のサイトからgitのインストーラーをダウンロードしてください。
ダウンロードしたインストーラーを実行すると、インストールウィザードが起動します。
「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でローカル開発サーバーを起動すると、３つの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
ローカル開発サーバーの起動は、一度ストアを指定しておけば、２回目以降はストア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講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
4月21日まで