28
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2020-11-10

#はじめに
今回の記事では、VScodeでShopifyのコーディングができるようになる方法についてまとめていきます。

具体的には、パソコンのローカルとShopifyを接続し、Theme kitというツールでローカルの変更をその都度Shopifyに反映していくことになります。

image.png

image.png

つまり、今回の記事では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アクセスを取得するための行動です。

それでは頑張って行きましょう。

##プライベートアプリを作成
管理画面の左のアプリ管理を選択して、プライベートアプリを管理するを選択しましょう。

image.png

プライベートアプリの開発を有効にするを押しましょう。
image.png

その次に、チェックを付けてプライベートアプリの開発を有効化しましょう。
image.png

その次に、プライベートアプリを作成するを選択しましょう。

image.png

##プライベートアプリの作成画面
以下がプライベートアプリの作成画面です。

アプリの詳細には、適当に名前とメールアドレスを設定しましょう。

image.png

次に、APIの権限を設定します。

以下から、非アクティブなAdmin APIを表示するをクリックしましょう。
image.png

image.png

ドロップダウンでいろいろなものが開くので、その中からテーマを選び、読み取りおよび書き込みに変更しましょう。

image.png

選択し終わったら、右上のから保存するを押しましょう。

image.png

これで、APIキーとパスワードを入することができました。

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

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

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

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

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

そして、もう1つ必要なのはテーマIDです。これは、テーマ毎に固有の値で、以下のコードの編集から確認することができます。

image.png

この画面におけるURLの最後の数字が、テーマIDになります。

image.png

#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のテーマをローカルにダウンロードすることができます。

image.png

#ローカルの変更をShopifyに反映
Theme Kitを用いると、アップデートをShopifyにプッシュすることができます。

以下のコードです。

theme watch

このコードを実行すると、常にローカルの変更を監視して、変更点があれば即時Shopifyに反映するようになります。

しかし、上記のコードは公開中のテーマに対して用いることができません。

なぜなら、公開中のテーマは基本的に弄るものでは無いからです。

しかし、どうしても公開中のテーマを弄りたいあなたに、とっておきのコードを紹介します。

theme watch --allow-live

これで、公開中のテーマに随時プッシュを送ることができました。

#補足
gitの管理はした方が良いです。

後日、記事にまとめます。

#終わりに
ここまで読んで頂き、ありがとうございました。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

28
29
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?