spachill 
shopifyのローカル環境でに開発ができるshopify CLIですが、設定方法がめちゃくちゃ難しい、、、
そこで、これを見れば全て解決できるという設定方法についてまとめました。
この記事を見れば
- shopify CLIの設定ができてVS codeでshopifyのコーディングができる
- shopifyのローカルでかいたコードを本番環境にアップできる
このようになります。
初心者でもわかりやすいように解説していますのでぜひ参考ください。
（今回はMacを想定した記事となっています。ご了承ください。）
目次
- Homebrewのインストール
- shopify CLIをインストールする
- ストアにログインの前に下準備
- 開発テーマのファイルをダウンロード
- ローカルの編集フォルダをshopifyのストアで確認
- ローカルの編集フォルダをshopifyのストアに反映させる
- まとめ
Homebrewのインストール
shopify CLIをインストールするには「Homebrew」というものをインストールしなくてはなりません。
インストールの方法も丁寧に解説していきたいと思います。
Vs codeをインストールしていない方はこちらからインストールしてください
では、まずはVs codeのターミナルを開きましょう
そしたらターミナルのところに以下のコードを打ち込んでEnterを押してください
brew -vこちらを入力すると現在のHomebrewの以下のどちらかが表示されると思います。
zsh:command not found: brewまたは
Homebrew 3.6.16こちらの下側が出た方はすでにどこかでHomebrewをインストールしたことがあるので次は「shopify CLIをインストールする」まで読み飛ばしてください。
こちらの上側が出た方は、まだHomebrewのインストールをしたことがないのでインストールをしていきましょう。
Homebrewのインストールはこちらのサイトいったあと、コードをコピーしてターミナルに入力しないと行けません。
そしたらターミナルに戻って先ほどコピーしたコードをターミナルに入力しEnterを押します。
パスワードを求められるのでこちらには「PCのログインをするときのパスワード」を入力しEnterを押しましょう。
入力が完了したらHomebrewがインストールされますの100％に全部の表記がなれば、こちらでHomebrewのインストールは終了です。
Homebrewのインストールが完了したかどうかはもう一度下記のコード
brew-vを入力してもらって、
Homebrew 3.6.16が表記されればOKです！
もしうまくいかなければhttps://prog-8.com/docs/ruby-envの記事を参考にRubyのバージョンを最新にして再チャレンジしてください！
shopify CLIをインストールする
では、Homebrewがインストールされたら次はshopify CLIをインストールしましょう。
インストールはこちらからできます
上記のリンクから下記のところまでスクロールします。
こちらの①をターミナルに入力しEnterを押します。
brew tap shopify/shopifyその後に②の下記のコードを入力しEnterを押します。
brew install shopify-cliそうするとバァあああーーーとコードが出ますが、少し待っていればもとの状態に戻りますのでそれまで待機してもらえればと思います。
全てコードが出て読み込みが終わったら下記のコードを打ち込んでshopify CLIがインストールしているか確認ください！
shopify versionこれを打ち込んでshopify CLIのバージョンが3.◯◯と表示されていればOK
Current Shopify CLI version: 3.21.0
💡 Version 3.30.1 available!これでshopify CLIのインストールは終了です！
ここまでくればほぼゴールは見えてきました！あと少しです！
ストアにログインの前に下準備
ストアにログインする前に下準備を行いましょう！
どこでもいいので空のフォルダを準備します。
今回はデスクトップに空のフォルダを作成します。
もちろんフォルダの中身は何も入っていません。
では今度はこの空のフォルダを新しく開いたVs Codeの中に入れてしまいましょう。
Vs codeのターミナルにはフォルダ名が表示されていると思います。
こちらで準備OKです！
開発テーマのファイルをダウンロード
では、shopifyのテーマを実際にVS codeに落とし込む作業に入ります。
まずは、shopifyのストアにログインします。
管理画面から設定を押して、ストアのショップリンクをコピーします。
ストアのショップリンクをコピーできたら、VsCodeを開いて
下記のコードをターミナルに打ち込みます。
shopify theme pull -s ストアのショップリンク※ストアのショップリンクは店名の下のリンクの全部
上記のコードを入力してEnterを押すと、
ストアにログインするか確認されます。
認証が取れればshopify CLIと接続していいよ！っていう緑の画面に切り替わります。
この画面が出ればOK！
この画面は閉じてもらって大丈夫です。
そしたらターミナルにはどのテーマをダウンロードしますか？と聞かれるのでテーマを選択してダウンロード。
そうすると先ほどまで空っぽだったフォルダにどんどん作成したテーマのファイルや画像がダウンロードされます。
のようにフォルダがダウンロードされればOK
ローカルの編集フォルダをshopifyのストアで確認
先ほど、作成したフォルダを編集した時に、反映したかを確認するには現在のフォルダをshopifyの環境に反映させる必要があります。
（HTMLのファイル編集を確認するGo Live）のようなもの
反映させるのは簡単で、反映させたいフォルダをVs codeで開いて下記のコードをターミナルに打ち込めばOK
shopify theme dev -s ストアのショップリンク※ストアのショップリンクは店名の下のリンクの全部
ストアのショップリンクはこちらになります
これを打ち込めば、ローディングが始まり、
３つの候補が出てきます。
┃ Please open this URL in your browser:
┃ http://127.0.0.1:9292
┃
┃ Customize this theme in the Theme Editor, and use 'theme pull' to get the changes:
┃ https://ストア名.myshopify.com/admin/themes/140634325281/editor
┃
┃ Share this theme preview:
┃ https://ストア名.myshopify.com/?preview_theme_id=140634325281
┃ 3つのURLに飛ぶことができます。
1：Please open this URL in your browser
ローカルのサーバーでGoogleChromeでサイトの表示が確認できます。
2：Customize this theme in the Online Store Editor
オンラインストアエディター（テーマエディタ）へのリンクです。
3：Share this theme preview
他の開発者と共有することができるプレビューリンクです。
1とは異なり、このリンクにアクセスできるすべての人が確認できます。
こちらでshopify CLIでローカル環境で開発したコードを確認することができます！
（おぉ、すごいぞ。。。。）って最初感動しました。
ローカルの編集フォルダをshopifyのストアに反映させる
もうここまでくれば、最後の行程として、編集したファイルを本番環境にアップすることになります
編集し終わったら、以下のコマンドを押してEnterを押す
shopify theme pushこちらのコマンドを押せばローカルで編集したテーマ ファイルをShopifyにアップロードできます。
上書きするテーマが決められていない場合は、どのテーマを上書きしたらいいですか？？を聞かれるので該当するテーマを選択しましょう！
まとめ
いかがでしたでしょうか？？
shopify CLIの3.0の日本語記事は現段階では少ないと思いますので貴重な情報かと思います。
PCを買い替えたり、他のPCで作業したりすることがあるなら是非この工程で環境を整えてスタートしてもらえたらと思います！
以下おさらいとして大まかな工程となります！
- Homebrewをインストール
- Homebrewのバージョンを確認
- shopify CLIをインストール
- shopify CLIのバージョンを確認
- ストアからテーマファイルをダウンロード
- ローカルのテーマファイルをshopifyに反映
- ローカルの編集したテーマファイルを本番環境にアップ
この流れとなります！
もしご不明な点などあればコメントなどもいただければ助かります！
shopifyの開発環境を整えましょう！！