#01 ローカル環境でShopifyのテーマを編集する方法 Shopifyテーマキットインストール／Windows10 【Chocolatey使用】
2021/9/28 現在 オンラインストア2.0のテーマ作成ではShopify CLIを使うようにアナウンスされています
ローカル環境でテーマ編集するメリット
今回はShopifyテーマキットでテーマを作る方法を試してみました。
ローカル環境からShopifyのサーバーと同期できるので、テキストエディタからの修正が即座にShopifyに反映できるところがメリットです。
本番アップしている環境では怖くてできませんが、テーマのデザインを開発中に利用できる方法です。
Shopifyのテーマを編集するには2つの方法があります。
①Shopifyの管理画面でコード編集をする
②Shopifyテーマキットでローカルから編集する
公式Shopifyテーマキットについて解説されています。
Chocolateyをインストールする
Windows10の場合、ChocolateyというコマンドラインツールをダウンロードしてShopifyテーマキットをダウンロードします。
下記からChocolateyをインストールできます。
VSCodeを開きます。VSCodeがインストールされていない場合は、Liquid編集におすすめのテキストエディターのページからインストールできます。
VSCodeで操作する内容
①メニューバーの「ターミナル」から「新しいターミナル」をクリック
私は下記のコマンドを入力しました。
こちらのコマンドは人によって権限などが異なるところなので、実行後の動作については自己責任お願いします。
Get-ExecutionPolicy返ってきたのが規定値である制限付きを意味する
Restricted でした。
詳しい解説はこちらから確認できます。
制限付きの内容を変更して「すべての権限」を設定しようとコマンドを入力しました。
Set-ExecutionPolicy AllSignedするとエラーメッセージが表示されました。
どうやら、powerShellを[管理者として実行]する必要があるそうです。
なので、VSCodeを管理者として実行してみました。
Windows10では左下の検索窓に「visual」と入力するとアプリの候補にVSCodeが表示されると思います。右クリック「管理者として実行」を選択してVSCodeを実行します。下記のコマンドを入力しました。
Set-ExecutionPolicy AllSignedエラーもなく、権限のところはうまくいけそうな感じです。
②Chocolateyからコードをコピーする（下記赤枠）
コピー内容をpowerShellにペーストするとChocolateyがインストールされました。
③Chocolateyのバージョンを確認する
以下のコマンドを入力します。
choco -v0.11.2 と表示されました。Chocolateyのインストール完了
さらに以下のコマンドを入力しShopifyテーマキットをインストールします。
choco install themekitthemekit v1.1.1 が返ってくる
Do you want to run the script?([Y]es/[N]o/[P]rint):
と承認を求められました。はじめ何を入力していいかわからなくて戸惑いましたが、@kangetsu121さんの記事を参考に「Ｙ」と入力しました。
Shopifyのテーマキットがダウンロード完了しました！
さらに以下のコマンドを入力します。
theme versionThemeKit 1.1.1 windows/amd64 が返ってきました。
ChocolateyでShopifyテーマキットのインストールが完了しました。
Shopifyアカウントを作成＆開発ストア作成
Shopifyで開発するにはオンラインストアのオーナーとしてShopifyと契約するかShopifyパートナーに登録して、開発者用としてShopifyを利用する方法があります。私はShopifyパートナーなので、開発者用としてShopifyを利用しています。テスト環境でオンラインストアを複数開発することが可能です。
Shopifyパートナーについて
Shopify パートナープログラムは参加が無料で、無制限のテストストアを通してShopifyプラットフォームで試すことができます。あなたが紹介するクライアント、デザインするテーマ、または構築するアプリ各々に対して、Shopifyから継続的な毎月の収入を受け取ることになります。
開発ストア作成手順
①Shopifyパートナーアカウントを作成・ログインする
②左メニュー「ストア管理」から「ストアを追加する」ボタンをクリック
③ストアタイプ「開発ストア」を選択する
④ストア名（ストア名とストアURLは連動しているのでできれば英語）入力
ドメインと一緒で先に誰かが取得したストア名は使用不可
日本語を入力すると自動で変換される
⑤パスワードを決定する
APIの設定（プライベートアプリの追加）
プライベートアプリの追加方法
①左メニュー「アプリ管理」をクリック
②「プライベートアプリを管理する」のテキストリンクをクリック
③「プライベートアプリ開発を有効にする」ボタンをクリック
④ 3つのチェックボックスをすべてチェックする
⑤「プライベートアプリを作成する」ボタンをクリック
⑥アプリの詳細で「プライベートアプリ名」と「緊急連絡用開発者メール」
を登録する
⑦Admin APIで「非アクティブなAdmin API権限を表示する」をクリック
⑧たくさん表示されるが「テーマ」で「アクセスなし」から
「読み取りおよび書き込み」に変更する
⑨「保存」ボタンと「アプリを作成する」ボタンをクリック
⑩APIキー、パスワード、共有秘密が生成される
余談 （複数ショップを立ち上げの際の気づき）
ローカル環境で編集した内容を自動的に反映させるには、オンラインショップ毎にプライベートアプリを作成する必要があります。
APIキーやパスワードなどは使いまわしができないようになっています。
テーマ開発
いよいよ、Shopifyのテーマを作成する準備が整いました。
テーマファイルを保存する場所を決めます。
私はデスクトップに「Shopify-thme-kit」フォルダを作成したので、そこにテーマファイルを保存したいと思います。
そしてテーマ名となる「new-theme」フォルダを「Shopify-thme-kit」フォルダの中に作成しました。
VSCode（コードエディター）でpowerShellを開きます。「new-theme」フォルダまではDOS画面で移動します。
チェンジディレクトリのコマンドを入力することでフォルダ間の移動ができます。まずはデスクトップに移動してから「Shopify-thme-kit」フォルダに移動して「new-theme」フォルダに移動しました。
cd desktopcd Shopify-thme-kitcd new-theme「new-theme」フォルダまで到達したので、Shopifyのテーマファイルを展開したいと思います。
code .上記のコマンドを打ち込むと以下の画面が表示される場合があります。
「はい、作成者を信頼します」をクリックします。
新しいウィンドウでVSCodeが自動的に開きますので、新しいターミナルを開きます。公式サイトのステップ5：新しいテーマを作成するのコードをコピーし、メモ帳などのテキストエディターにペーストします。
自分のShopifyテーマの情報に編集していきます。
theme new --password=[your-password] --store="[your-store.myshopify.com]" --name=[theme name]編集前：
theme new --password=[your-password] --store="[your-store.myshopify.com]" --name=[theme name]
編集後：
theme new --password=mypassword --store=my-theme-kit.myshopify.com --name=new-theme
手順
①[theme name] テーマ名から編集する
②[your-store.myshopify.com] ドメインをコピーして貼り付ける
③[your-password] プライベートアプリのパスワードを入力する
※Shopifyの管理画面にログインするためのパスワードではありません
[ ] ← プレースホルダ はいるのか？
（例）password=[your-password]
◎password=mypassword
×password=[mypassword]
[ ] は不要
メモ帳などのテキストエディターでの編集が完了したら、ターミナルにコピー＆ペーストすると、Shopifyのテーマが自動的にインストールされます。
以上でShopifyテーマをローカル環境で編集ができるようになります。
同じ手順をやっている参考になる記事がありますので、ご紹介して終わります。
【Shopify①】ローカルで開発環境を構築する方法と使い方
Theme Kitを導入してShopifyのローカルな開発環境を構築する
既にShopifyに設定しているテーマで編集する場合
新規でShopifyテーマキットを使用して開発するのではなく、既存のテーマをローカル環境にインストールして編集したい場合は以下の手順で対応できます。
大まかな流れ
①テーマを保存するフォルダを作成する
②VSCodeのターミナルでチェンジディレクトリのコマンドで
テーマを保存したいフォルダまで移動する
③アプリ設定ができてない場合は新規作成する
すでにアプリ設定ができる場合は④へ
④Shopifyからテーマをダウンロードするコマンドをターミナルに入力する
⑤ローカル環境にShopifyのテーマがダウンロードされる
①～③については上記の内容で対応が可能なはずです。今回は④Shopifyからテーマをダウンロードするコマンドをターミナルに入力するからです。
（ShopifyのURLやAPIのパスワードはメモ帳などで編集してからVSCodeのターミナルにコピペします）
④Shopifyからテーマをダウンロードするコマンドをターミナルに入力する
編集前：
theme get --password=[your-password] --store="[you-store.myshopify.com]" --themeid=[your-theme-id]
編集後：
theme get --password=mypassword --store=my-theme-kit.myshopify.com --themeid=000000000000
手順
①[your-theme-id] テーマID入力する（テーマIDの調べ方は下記参照）
②[your-store.myshopify.com] ドメインをコピーして貼り付ける
③[your-password] プライベートアプリのパスワードを入力する
※Shopifyの管理画面にログインするためのパスワードではありません
テーマIDの調べ方
管理画面より テーマ ＞ カスタマイズ
URLに注目してください。▲数字の部分がテーマIDです。
私は数字12ケタでした。
https://〇〇.myshopify.com/admin/themes/▲/editor
Shopifyのテーマをダウンロードするコマンドを入力すると
Shopifyのテーマキットのアップデートが始まり、その後ローカル環境にテーマファイルがダウンロードされていました。
Shopifyのテーマキットのアップデート中のメッセージ
An update for Themekit is available. To update please run `theme update`
[development] 64|144 [==================================>-------------------------------------------] 44 %HPcodeさんの記事が参考になります！
ローカル環境での編集内容をShopifyに自動的に反映させる
テーマファイルをインストールすれば、勝手に自動的にローカル環境での変更も反映されるものだと思っていましたが、下記のコマンドを入力する必要があります。
theme watch --allow-liveコマンドを入力後、ローカル環境のテーマファイルを編集し保存すると、ターミナル上でメッセージが表示されます。
15:04:02 [development] XXXXX: Watching for file changes to theme 000000000000
15:05:33 [development] processing sections/collection-template.liquid
15:05:34 [development] Updated sections/collection-template.liquidXXXXX はテーマの名前、000000000000 はテーマID
ブラウザを「F5」キーで更新すると編集内容が表示されます。
FTPでファイルをアップロードせずとも、Shopifyのコード編集をせずとも、使いやすく見やすいVSCodeで編集できるので、開発効率がかなり上がりそうです。
@f-umebaraさんの記事が参考になります！
Shopify開発の公式のドキュメントです。
「theme watch --allow-live」テーマウォッチを解除する方法が見つかりませんでした。どなたか知っている方がいれば教えてほしいです。
ローカル環境での編集内容をShopifyに反映させる
「theme deploy」コマンドを入力することで、ローカル環境で編集した内容をShopifyテーマに反映させることができます。
theme deploy --allow-liveこの記事が気に入ったらサポートをしてみませんか？