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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/2f6252af-76c0-628e-5d8f-788f1643dde1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/e27eaa01-dc41-2f7e-39c0-c3c4b5be7207.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](https://chocolatey.org/)

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

まず、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のインストール方法は[こちら](https://brew.sh/)を御覧ください。

これで、Theme Kitの導入は終わりです。

#Shopifyストア APIアクセスの取得
ローカルとShopifyを繋げるために、ShopifyのAPIアクセスを取得しましょう。

ここから少し謎の行動をしますが、ShopifyのAPIアクセスを取得するための行動です。

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/0f39e7b7-980c-940c-05f7-39d128cbd935.png)

プライベートアプリの開発を有効にするを押しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/5a4c8942-c695-394d-d25f-a15de23dc250.png)

その次に、チェックを付けてプライベートアプリの開発を有効化しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/c8ea1a3c-3e1a-c332-50c2-8e2d04f5b24c.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/6b61b4b6-924f-4e20-aace-7cb3e9c9cded.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/7d6fab1f-1e93-5083-76c7-c6a75d80ca1c.png)

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

以下から、`非アクティブなAdmin APIを表示する`をクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/bb6887a1-2b4f-243f-44bd-229455248a08.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/a7542495-eb59-8f39-46dd-61d205bf5cf1.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/d7abfb0c-bbf5-8de8-1595-ee2bfa988a49.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/a943afb2-2d3f-7b38-a1a3-e2a64b4e1755.png)

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

Theme Kit作成時には以下のパスワード使用します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/d82673b7-0cff-d93c-3dd5-b495af2fa963.png)

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

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/4fe64078-eec2-7fd5-2222-9cca46cc0fcf.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/4588bc8b-3f88-ee37-79e5-6b425deefb7d.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/a04193d1-8ae7-d4d2-afc4-c1503a631515.png)

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

以下のコードです。

```
theme watch
```

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

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

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

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

```
theme watch --allow-live
```

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


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

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

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

# Shopify アプリのご紹介

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

https://coming-soon.reterior.jp/

https://apps.shopify.com/shopify-application-314?locale=ja&surface_detail=%E3%83%AA%E3%83%86%E3%83%AA%E3%82%A2&surface_inter_position=1&surface_intra_position=1&surface_type=search