【Shopify CLI】ローカル環境でShopifyのテーマ開発を始めよう！開発環境の作り方（Mac編）
- CLI
- HTML
- Shopify
- サイト構築
- フロントエンド開発
- 導入
目次
1. はじめに
1.1 記事について
この記事ではShopify CLIと呼ばれるShopifyが提供するコマンドライン開発ツールを使用した、ローカル環境でのテーマ開発の環境構築の方法をご紹介したいと思います。
この記事ではテックディレクションがサイト構築で意識していることを簡単にご紹介したいと思います。
1.2 対象読者
以下のような方々の参考になれば幸いです。
・Shopifyのテーマ開発を行うフロントエンドエンジニア
1.3 記事を読み終えるまでの時間
約10分程度
2. Shopifyのテーマ開発方法について
本来、Shopfiyのテーマ開発を行う場合には管理画面にログインし、テーマのコード編集あるいはカスタマイズにて編集を行う必要があります。
小規模なストアであれば従来の方法でも十分かと思いますが、規模が大きく複数人でのテーマ管理が必要であったり、ストアのテスト環境が用意されていないなど、状況によってはローカル環境で構築をしたいといったケースが出てくるかと思います。
幾つかローカル環境でのテーマ開発する方法はありますが、本記事では「Shopify CLI」を利用したローカル環境でのテーマ開発の方法を環境構築（Mac）からご紹介したいと思います。
3. 開発環境の構築方法
Shopify CLIを利用するにあたり、以下のインストールを行います。
・Homebrewのインストール
・Shopify CLIのインストール
3.1 Homebrewのインストール
まずShopify CLIをインストールする事前準備としてHomebrewのインストールを行います。※
Homebrewは実行ファイルや設定ファイル、ライブラリなどを一つのファイルとしてまとめたmacOS（Linux）用のパッケージマネージャーです。
以下のサイトにアクセスし、サイト上部に記載されている以下のコマンドをターミナル上で実行します。
※端末の状態によってはインストール不要です
/bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"コマンド実行中、端末のパスワード入力をし、インストール完了です。
3.2 Shopify CLIのインストール
Homebrewを利用しShopify CLIのインストールを行います。 同じくターミナル上にて以下のコマンドを実行します。
brew tap shopify/shopifybrew install shopify-cli何事もなければ、最後に以下のShopifyのバージョン出力コマンドを実行し、バージョン番号が表示されれば、無事Shopify CLIのインストール完了となります。
shopify version💡エラー（zsh： command not found: brew）となる場合
3.2項の「brew XXXX」コマンドを入力して、上記のエラーが表示される場合は、ユーザーファイルのアクセス権が不足している可能性があります。 Usersフォルダの権限を「everyone：読み書き」に変更の上、3.1項のコマンドにてHomebrewを再インストールし、再度3.2項をお試しください。
4. Shopify CLIの使い方
Shopify CLI自体はローカル環境とShopify環境を連携するためのシステムのため、引き続きターミナルのコマンド操作を行います。 ざっくり以下の操作がShopify CLIを通して可能です。※
※接続するためにはストアオーナー、スタッフ、またはコラボレーターの権限が必要です。
・テーマの作成
・テーマダウンロード
・テーマアップロード
・ローカル環境でのテーマプレビュー
・ローカル環境でのカスタマイズ編集
4.1 デフォルトテーマのダウンロード
Shopify CLIを利用したローカル環境開発では、開発したいストアをShopify CLIと通じてShopifyストア接続する必要がありますが、事前準備として以下のコマンドにてShopifyのデフォルトテーマ「Dawn」をダウンロードします。
shopify theme init💡テーマデータの保存先に移動しておく
上記のコマンドをそのまま実行するとユーザーフォルダにテーマがダウンロードされますので、任意の場所でデータを管理したい場合はターミナル上で「cd」コマンドにて任意のフォルダまで移動してください。
例：hogehogeフォルダのtest-shopifyフォルダまで移動
cd Desktop/hogehoge/test-shopify自分がどのフォルダに居るかは「ls」コマンドで確認できます。
上記コマンドを実行すると、テーマ名を聞かれますので任意のテーマ名を入力します。 今回は「DevDawn」とします。
実行したフォルダ内に「DevDawn」のデータができていたら完了です。
4.2 Shopifyストアとの連携
先ほど作成した「DevDawn」テーマを既存のShopifyストアと連携します。 まず以下のコマンドでDevDawnテーマのフォルダに移動します。
cd DevDawn続いて以下のコマンドを実行します。
shopify theme dev --store=◯◯◯◯.myshopify.com「—store=」の後には接続したいストアドメインを記述します。 ドメインはShopifyの管理画面などで確認してください。
コマンドを実行するとブラウザでShopifyにログインする様にメッセージが表示されます。 またストアにパスワード保護が設定されている場合は、パスワードを入力を促されるので入力します。
ブラウザ上で「You’ve successfuly logged into the Shopify CLI!」という画面が表示されたら、無事ストアとの連携が完了です。
4.3 テーマのプレビュー（ローカルサーバーの起動）
4.2項のコマンド実行が完了しますと、以下の様な表示になります。
こちらにはプレビューURLが記載されており、主に利用するものは赤線箇所の２点です。
②https://ストアドメイン.myshopify.com/admin/themes/XXXXXX/editor?hr=XXXX
①がテーマのプレビューURLで、②がカスタマイズ画面のURLです。 ②の画面で変更したものや、ローカルデータ（DevDawn）のコードを更新すると①の画面にリアルタイムで変更が反映されます。
4.4 テーマのアップロード
ローカルで開発したテーマはShopify CLIで、Shopifyストアへテーマをアップロードも可能です。 ターミナルが4.3項の画面の（ローカルサーバーを起動した）状態のままだとアップロードコマンドが実行できないので、「Ctrl + C」でローカルサーバーを停止させます。
その後のコマンドを実行します。
shopify theme push --unpublished上記コマンドを実行すると、テーマ名を設定できますので入力し実行を完了します。（今回はDevDawnにしています。※ローカルのテーマ名と同じでなくでも大丈夫です）
無事アップロードが完了すると、以下の管理画面のテーマライブラリーに追加したテーマが確認できます。
4.5 テーマのダウンロード
ストア上にあるテーマをローカルにダウンロードしたい場合は、以下のコマンドを実行します。
shopify theme pullコマンドを実行すると、テーマライブラリー上のテーマの一覧が表示しますので、カーソルキーでテーマを指定しEnterで実行完了します。
※ローカル上のフォルダ（今回ではDevDawnフォルダ）のデータは選択したテーマのデータ（今回はRise）に上書きされますので元の作業データをキープしたい場合はバックアップを取るなどしてください。（もしくはストアにアップロードしている場合はダウンロードし直すなど）
まとめ
以上がShopify CLIを利用したローカル環境でのテーマ開発の方法でしたが、いかがでしょうか。
ターミナルのコマンドに慣れない方には少しハードルが高い印象がありますが、Shopifyのローカル開発に興味がある方はぜひ試してみてください。
参考記事：
著者：TO
弊社では、ECサイトのリプレース案件から、Shopifyカスタムアプリ開発、保守案件に至るまで、EC中心にプロジェクトの質にこだわり、お客様に笑顔になってもらえるよう日々邁進しております。
皆様からのお問い合わせ・ご相談をお待ちしております。