Shopify CLI(2.x系)でテーマ制作用ローカル開発環境を構築する方法【Windows版】
Shopifyの「コードを編集」画面は、本格的にコードを書こうとすると使いにくいですよね。Shopifyテーマを作り込む場合は、ローカル環境での開発を可能にするShopify CLIを導入したいところ。CLI（コマンドラインインターフェース）なのでインストールや初期設定のハードルが高く感じますが、意外と簡単にローカル環境の構築ができますよ。
【注意】
この記事ではShopify CLI 2.x系でのローカル環境構築方法を解説しています。
Shopify CLI 3.x系を使用する方法はこちらの記事をご確認ください。
Shopify CLIとは
“Shopify CLI”はShopifyが用意してくれている、Shopifテーマ開発用のツールです。
ローカル環境でのShopifyテーマ作成・プレビューが可能になります。
つまり、自分が使い慣れているエディタでコードを書いたり、変更した部分を即座にブラウザで確認したりすることができます。管理画面からコードを編集するよりも、作業効率がものすごくアップすることが出来るツールというわけです。
コードもしっかり触っていく予定の方は、Shopify CLIを導入して作業しましょう。
なお、Shopify CLIでテーマ開発を行うには、Shopifyのアカウントとストア（開発ストアでも可）が必要です。まだストアを開設していない方は、先に開発ストアを用意してください。
Skillhubブログ
Shopify CLIインストールの準備
Shopify CLIをインストールには、前提条件として下記２つが作業環境にインストールされている必要があります。
- 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講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
11月24日まで