#はじめに
今回の記事では、VScodeでShopifyのコーディングができるようになる方法についてまとめていきます。
具体的には、パソコンのローカルとShopifyを接続し、Theme kit
というツールでローカルの変更をその都度Shopifyに反映していくことになります。
つまり、今回の記事ではTheme Kitを用いてローカルとShopifyを繋げ、ローカルの変更をShopifyに反映する方法を解説していきます。
そのため、別にVScode以外の好きなエディタでShopifyのテーマ開発を行うことができます。
それでは、頑張っていきましょう。
#Theme Kitのインストール
それでは、まずはTheme Kitをインストールしていきましょう。
Theme Kitにより、ローカルとShopifyを繋げることができます。
自分のパソコンはWindowsであるため、Windowsの環境構築をメインに解説していきます。
##WindowsにTheme Kitを導入
今回自分はわざわざコマンドからTheme Kitを導入したため、Chocolateyというツールをインストールしました。
Nodeのnpmみたいなものです。
以下に、英語ではありますが、インストール方法が書いています。
ここでは、簡単に解説します。
まず、PowerShellのセキュリティを確認しましょう。
Windows PowerShellを開いて、以下のコードを打ち込んで下さい。
また、この際に管理者権限を用いて実行しましょう。
以下のコードで、セキュリティを確認することができます。
Get-ExecutionPolicy
もし、上記のコードを実行してRestricted
が返ってきた場合には、以下のコードを打ち込んで、セキュリティのレベルを変更して下さい。
Set-ExecutionPolicy AllSigned
セキュリティを変更したら、以下のコードでChocolateyをダウンロードできます。
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
上記のコードで、Chocolateyをダウンロードできたら、Chocolateyを用いてTheme Kitをダウンロードしましょう。
choco install themekit
これで、Theme Kitのインストールが完了しました。
次のコードで、インストールされているかどうかを確認できます。
theme help
An update for Themekit is available. To update please run
theme update
Theme Kit is a tool kit for manipulating shopify themes
Theme Kit is a fast and cross platform tool that enables you to build shopify themes with ease.
Complete documentation is available at https://shopify.github.io/themekit/
ここまでで、WindowsへのTheme Kitの導入は完了です。
##MacにTheme Kitを導入
それでは、次にMacにTheme Kitを導入してみましょう。
MacにTheme Kitを導入するのは結構簡単で、Homebrewが入っていれば、次のコードで導入できます。
brew tap shopify/shopify
brew install themekit
Homebrewのインストール方法はこちらを御覧ください。
これで、Theme Kitの導入は終わりです。
#Shopifyストア APIアクセスの取得
ローカルとShopifyを繋げるために、ShopifyのAPIアクセスを取得しましょう。
ここから少し謎の行動をしますが、ShopifyのAPIアクセスを取得するための行動です。
それでは頑張って行きましょう。
##プライベートアプリを作成
管理画面の左のアプリ管理
を選択して、プライベートアプリを管理する
を選択しましょう。
その次に、チェックを付けてプライベートアプリの開発を有効化しましょう。
その次に、プライベートアプリを作成するを選択しましょう。
##プライベートアプリの作成画面
以下がプライベートアプリの作成画面です。
アプリの詳細には、適当に名前とメールアドレスを設定しましょう。
次に、APIの権限を設定します。
以下から、非アクティブなAdmin APIを表示する
をクリックしましょう。
ドロップダウンでいろいろなものが開くので、その中からテーマ
を選び、読み取りおよび書き込み
に変更しましょう。
選択し終わったら、右上のから保存する
を押しましょう。
これで、APIキーとパスワードを入することができました。
これにより、Shopifyのストアとローカルを繋げることができます。
#テーマIDの取得
Shopifyをローカルと接続するために必要なのは、APIキーのパスワード
とShopのURL
とテーマID
です。
APIキーのパスワードは先程取得できました。
ShopのURLはシンプルにストアのURLで、~.myshopify.com
となっているものです。
そして、もう1つ必要なのはテーマIDです。これは、テーマ毎に固有の値で、以下のコードの編集
から確認することができます。
この画面におけるURLの最後の数字が、テーマIDになります。
#Shopifyのテーマをローカルにダウンロード
ここまで分かれば、Shopifyのテーマをローカルにダウンロードすることができます。
以下のコードです。
theme get -p=[your-password] -s=[you-store.myshopify.com] -t=[your-theme-id]
[your-password]等の[]は外して実行してください。
コマンドを省略しなかった場合は、以下のコードです。
theme get --password=[your-password] --store=[you-store.myshopify.com] --themeid=[your-theme-id]
your-password
は、APIキーを取得する際のパスワードでした。また、you-store.myshopify.com
はテーマのURLです。https~から記述しましょう。
your-theme-id
はコードを編集を選択した際のURLの末尾の数字です。
このコードを実行すると、指定したテーマIDのテーマをローカルにダウンロードすることができます。
#ローカルの変更をShopifyに反映
Theme Kitを用いると、アップデートをShopifyにプッシュすることができます。
以下のコードです。
theme watch
このコードを実行すると、常にローカルの変更を監視して、変更点があれば即時Shopifyに反映するようになります。
しかし、上記のコードは公開中のテーマに対して用いることができません。
なぜなら、公開中のテーマは基本的に弄るものでは無いからです。
しかし、どうしても公開中のテーマを弄りたいあなたに、とっておきのコードを紹介します。
theme watch --allow-live
これで、公開中のテーマに随時プッシュを送ることができました。
#補足
gitの管理はした方が良いです。
後日、記事にまとめます。
#終わりに
ここまで読んで頂き、ありがとうございました。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。