初めに
ECサイト立ち上げの定番ともいえる「Shopify」ですが、カスタマイズや開発をするのに本番環境は触りたくない。
そこで、Shopifyをローカルで開発していきたい方向けの「Shopify CLI」を使用した環境構築方法を進めていきたいと思います。
ざっくりとした手順のため、詳しく知りたいは公式のチュートリアル等をご参照ください。
事前確認
環境構築を始める前に、以下のすべてが済んでいるかをご確認ください。
- Node.jsのインストール
（コマンド「node -v」でバージョンが表示されればインストール済み） - Gitのインストール
（コマンド「git -v」でバージョンが表示されればインストール済み） - Shopifyのストア作成
（いずれかのプラン加入か、Shopifyパートナー登録してストア作成完了まで）
【いずれかのプラン加入】
実際に商品を販売する場合は、このアカウントが必要になります。有料のプランに加入する必要のある運営向けの「オーナーアカウント」です。【Shopifyパートナー登録】
開発向けのアカウントで、ECサイトとして商品を売ることはできません。無料で登録できるアカウントで、自作のオリジナルテーマ作成やアプリ開発などで報酬を得ることもできる「パートナーアカウント」です。
以降は、これらの導入、登録が終わっていることを前提に進めてきたいと思います。
ちなみに筆者はパートナーアカウントで登録しているのと、使用PCはWindowsです。
そのため、パートナーアカウント＋Windowsでの構築となりますことをご了承ください。
ローカル環境構築
ここから先は、コマンドプロンプトを立ち上げ、コマンドを叩いていきます。
インストール
以下のコマンドで「Shopify CLI」をインストールします。
npm install -g @shopify/cli
確認のため、以下のコマンドでのバージョン確認をお勧めします。
shopify version
バージョンの表示が確認出来たら次に進みます。
フォルダ作成とthemeの取得
以下のコマンドを入力します。（「dummy」は任意の値）
shopify theme init dummy
このコマンドで、テーマを取得しフォルダに格納します。
「dummy」が作成されるフォルダの名前になります。
添付画像では、複数のストア管理の関係、任意の階層を移動した後に「test-shop」というフォルダ名で作成しています。
サーバー起動
次に、サーバーを起動させます。が、その前に先ほど作成したフォルダに移動します。
フォルダに移動したら、以下のサーバーを起動するためのコマンドを叩きます。（「dummy」は作成したストアのURL）
shopify theme dev --store dummy.myshopify.com
すでにshopifyのアカウントにログイン済みで、エラーなどがない場合、添付画像のようにローカルサーバーのURLが吐き出されます。
初回やログアウト済みの場合は、Shopifyへのログインを求められます。次の「初回やログアウト済みの場合」をご参照ください。
Shopifyへのログインが求められず、添付画像のような表示がされた方は、このURLを開くとローカル環境構築のテーマが確認できます。
初回やログアウト済みの場合
これらの場合は、ログインとストアのパワード（設定している場合）が求められます。
ログインを求められる場合、以下の添付画像のような表示となるかと思います。
何らかのキーを押すことでブラウザが起動します。
ブラウザが起動したら、ストアオーナーアカウントなどのストアへのアクセス権を持ったアカウントでログインしてください。
そうすると、以下の添付画像のように「コードが一致しているか」を聞かれるので、コマンドプロンプト側で吐き出されたコードと同じであることを確認してください。問題なければ「確認してログイン」を押下して、次へ進みます。
正常にログインできると以下の添付画像のようにブラウザでの操作はこれ以上必要ない旨が伝えられます。
これを確認したらコマンドプロンプトに戻ります。
改めて、以下のサーバーを起動させるコマンドを叩くとストアのパスワードを入力するよう求められることがあります。
shopify theme dev --store dummy.myshopify.com
このパスワードは、ストアの管理画面にアクセスして「オンラインストア→各種設定→パスワード保護」に記載されています。
入力することで、以下の添付画像のようにローカルサーバーのURLが吐き出されます。
このURLを開くとローカル環境構築のテーマが確認できます。
確認
ローカルサーバーのURLを叩き、TOPページが見えたら環境構築成功です！お疲れさまでした。
もし途中で躓いた場合は筆者が遭遇したエラーをまとめておりますので参考になれば幸いです。
エラー
些細なミスではありますが、筆者が遭遇したエラーになります。
同じようなエラーで困っている方の参考になれば幸いです。
【１】テーマ・ディレクトリでこのコマンドを実行しているようには見えません。
階層が原因なのですが、theme関連のファイルが入ったフォルダの外でコマンドを叩いてしまったため、以下のエラーを出してしまいました。
It doesn’t seem like you’re running this command in a theme directory.
同じようなエラーが出る場合は、筆者と同じくコマンドを叩いている場所が間違っている可能性があるかもしれませんのでご確認をお勧めします。
【２】提供されたストアで開発するためにCLIを使用することは許可されていません。
コマンドミスが原因なのですが、サーバーを起動する際の最後のURL部分を「ストアのURL」ではなく「ストアの名前」で入力してしまった結果、以下のエラーを出してしまいました。
You are not authorized to use the CLI to develop in the provided store.
You can’t use Shopify CLI with development stores if you only have Partner
staff member access. If you want to use Shopify CLI to work on a
development store, then you should be the store owner or create a staff
account on the store.If you’re the store owner, then you need to log in to the store directly
using the store URL at least once before you log in using Shopify
CLI.Logging in to the Shopify admin directly connects the development
store with your Shopify login.
同じような理由で出たエラーの場合、こちらについてもご確認をお勧めします。
最後に
環境構築に必要な最低限のコマンドしか使っていないのですが、公式ドキュメントを見ると色々なコマンドがありました！英語ですが翻訳をかければふんわりと使い方がわかるかと思います…気になる方はぜひ！
次はカスタマイズ、開発に必要になってくるliquidの記述に関して書ければと思っています。
