VScodeでShopifyをコーディング？Theme Kitの使い方を解説！

はじめに

今回の記事では、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みたいなものです。

以下に、英語ではありますが、インストール方法が書いています。

Chocolatey

ここでは、簡単に解説します。

まず、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キーとパスワードを入することができました。

Theme Kit作成時には以下のパスワード使用します

これにより、Shopifyのストアとローカルを繋げることができます。

テーマIDの取得

Shopifyをローカルと接続するために必要なのは、APIキーのパスワードとShopのURLとテーマIDです。

APIキーのパスワードは先程取得できました。

ShopのURLはシンプルにストアのURLで、～.myshopify.comとなっているものです。

そして、もう１つ必要なのはテーマ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 機能を実現することができます。