shopifyでのローカル環境開発の備忘録です。
開発方法は「Shopify Slate」と「Shopify Theme Kit」の2種類ありますが、今回はShopify Theme Kitでの開発方法を記載します。
ローカル開発環境の構築方法
Theme Kitのインスール
Shopify Theme Kitはローカル環境を行うためのミドルウェアです。
まず、コマンドプロンプトで以下コマンドを実行しTheme Kitをインストールします。
※MacとWindowsでインスト方法が違います。
Macの場合
curl -s https://raw.githubusercontent.com/Shopify/themekit/master/scripts/install | sudo python
Windowsの場合
(New-Object System.Net.WebClient).DownloadString("https://raw.githubusercontent.com/Shopify/themekit/master/scripts/install.ps1") | powershell -command
Private APPの作成
APIトークンを取得のため、shopify管理画面からPrivate APPを作成します。
アプリ管理 ＞ ページ下部の「プライベートアプリを管理する」クリック ＞ 新しいプライベートアプリを作成する
入力項目を変更後、保存
・プライベートアプリ名：適当な名前をつける（「テーマ_ローカル開発用」など）
・緊急連絡用開発者メール：適当なメールアドレス入力
・Admin APIの「▼ 無効になっているAdmin API権限を確認する」をクリック、
Theme templates and theme assetsを「Read and Write（読み取り及び書き込み）」に変更
Private APPが作成されますので、「パスワード」をメモしておきます。
テーマIDを取得
ローカル環境構築したいテーマのIDを調べます。
テーマ ＞ カスタマイズ
★数字の部分がテーマIDなのでメモしておきます。
https://〇〇.myshopify.com/admin/themes/★/editor
shopifyからローカルにテーマをダウンロード
shopifyのテーマをローカル環境にDLしていきます。
コマンドプロンプトを管理者権限で開く（管理者権限でないと、コマンド打ってもアクセス拒否になるので注意）
テーマをDLする作業ディレクトリをTheme Kit直下に作成し、そのディレクトリに移動します。
cd C:\Program Files\Theme Kit\[任意のフォルダ]
・Private APPのパスワード
・shopのURL
・テーマID
をそれぞれ下記コマンドに入力して実行します。
theme configure --password=[ApiのPassword] --store=[your-store.myshopify.com] --themeid=[Theme ID]
■補足
「Error: Invalid configuration: invalid theme_id,invalid store domain must end in ‘.myshopify.com’」
こんなエラーが出た場合、書き方間違っている可能性あり。下記項目見直してみてください。
・各オプション名のハイフンは必ず2つつけること「–」。1つだとエラー
・[]つけたまま実行してない？
すると、config.ymlというファイルが生成されます。
development: password: ApiのPassword theme_id: "テーマのID" store: ストアURL
上記のように、先ほど実行した内容がかかれています。
これで、Shopifyプライベートアプリと紐づき、データのやり取りができるようになりました。
※config.ymlが生成されれば、コマンドプロンプトを閉じても大丈夫です。
以下のコマンドでテーマをダウンロードしましょう。
theme download
テーマを更新しアップロードする
あとは、下記のようなコマンドで開発をすすめていきます。
アップロード
theme upload
プレビュー
theme open
リアルタイム反映
theme watch
※Ctrl+Cで監視解除
他に使えるコマンドは、「theme –help」で確認できます。
エラー時の対処方法
上記のように簡単にローカル環境開発はできますが、最後にエラーが起こった際の対処方法をまとめておきます。
・「内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません」
⇒環境変数設定できてないので変更する
・「Invalid configuration: invalid theme_id,invalid store domain must end in ‘.myshopify.com’」
⇒theme configure･･･の箇所で[]とか入ってないか確認 ※[]は不要
・config.yml生成の際に、「open C:\Program Files\Theme Kit\〇\config.yml: Access is denied.」で生成されない。
⇒コマンドプロンプトを普通に開いてないか確認。必ず管理者権限で開くこと
・「Unable to save file: Permission denied」
⇒ファイルの編集権限がない（読み取り専用になっている）
まとめ
テーマライブラリーのテーマでも問題なくローカル構築できるので、リニューアル案件でも対応可能です。
