shopifyのテンプレートをVSCodeで編集する

## 前提条件
- shopifyのアカウントを取得済み
- 商品登録済み
- [Getting started with Theme Kit](https://shopify.dev/tools/theme-kit/getting-started)を参考にして導入

## やりたいこと
- shopifyのテンプレートをローカルのVSCodeでいじりたい
- ローカルのテンプレートを編集したら自動的にアップロードしたい
- macOSで編集したい

## shopifyのテーマキットをインストール
Homebrewを使ってテーマキットをインストールします。

```
$ brew tap shopify/shopify
$ brew install themekit
```

Homebrewでエラーが出たときはこちらを参照してください。
[Homebrewでエラー homebrew-core is a shallow clone.](https://omkz.net/archives/1)

以下のコマンドでテーマキットの動作確認ができます。
新しいバージョンがある場合はテーマキットをアップデートします。

```
$ theme version
An update for Themekit is available. To update please run `theme update`
ThemeKit 1.1.5 darwin/amd64
$ theme update
$ theme version
ThemeKit 1.1.6 darwin/amd64
```

## shopifyからAPIを取得
左メニューの[アプリ管理]をクリック後、最下部にある[プライベートアプリを管理する]をクリック
![スクリーンショット 2021-02-05 16.29.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339458/b4a14dfc-3c79-2652-b4d2-a019ae9d3257.png)

初めてプライベートアプリを作る場合は以下の画面が出てくるので、[プライベートアプリの開発を有効にする]をクリック
![スクリーンショット 2021-02-05 16.31.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339458/e66f1861-144b-258e-f676-0539bc4c50e0.png)

各項目に目を通し、全てにチェックを入れて[プライベートアプリの開発を有効にする]をクリック
![スクリーンショット 2021-02-05 16.33.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339458/8711aaad-6c75-5159-7dad-6124a3e49706.png)

[プライベートアプリ作成する]をクリック
![スクリーンショット 2021-02-05 16.34.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339458/2f5d9569-1ce7-ad0b-04b5-c216ead04bb6.png)

[プライベートアプリ名]と[緊急連絡用開発者メール]を入力してください。
![スクリーンショット 2021-02-05 16.48.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339458/a816c352-c903-5a70-aa43-0b237c5c68c8.png)

[非アクティブなAdmin API権限を表示する]をクリックして必要な権限をAPIに付与しまします。

- ストアコンテンツ　読み取りアクセス
- スクリプトタグ 読み取りおよび書き込み

- テーマ 読み取りおよび書き込み
- 商品リスト　読み取りアクセス
- 商品管理　読み取りアクセス

- 在庫　読み取りアクセス
- ディスカウント　　読み取りアクセス

ここの項目は後から変更することができます。
![スクリーンショット 2021-02-05 16.50.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339458/8ea3fd47-bc9d-7b8b-30b9-019c2310b28e.png)
[このアプリがストアフロントAPIを使用してストアフロントデータにアクセスできるようにする]にチェックを入れる
![スクリーンショット 2021-02-05 17.01.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339458/129c2a8a-6ed3-ac84-af63-28d2c4b9c8db.png)

下の画像の様にアコーディオンが開くので全てにチェックが入っていることを確認して[保存する]をクリック
![スクリーンショット 2021-02-05 16.59.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339458/893739b9-ebbd-d829-7223-5c2125a8367a.png)

[アプリを作成する]をクリック
![スクリーンショット 2021-02-05 17.00.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339458/8e8cb356-cf51-1b49-724a-49f3f686c781.png)

これでAPIが作成されます。
今回使うのはAdmin APIのパスワードのみです。

## テーマをダウンロード
shopifyにあるテーマに接続するにはテーマIDが必要です。
テーマIDは以下のコマンドで取得できます。

```
$ theme get --list -p=[your-password] -s=[your-store.myshopify.com]
Available theme versions:
  [テーマID] Debut
  [テーマID][live] Simple
  [テーマID] Supply
  [テーマID] Boundless
  [テーマID] Boundlessのコピー
  [テーマID] Warehouse
```

[your-password]は先程取得したAPIのパスワード
[your-store.myshopify.com]はshopifyにログイン時のドメイン


次にテーマを指定してダウンロードします。
ローカルにテーマ用のディレクトリを作成してその中でshopifyのテーマをダウンロードしてください。

```
$ mkdir project_theme
$ cd project_theme
$ theme get -p=[your-password] -s=[your-store.myshopify.com] -t=[your-theme-id]
```

[your-password]は先程取得したAPIのパスワード
[your-store.myshopify.com]はshopifyにログイン時のドメイン
[your-theme-id]は先程取得したテーマID

`theme get`コマンドを実行するとカレントディレクトリに`config.yml`が生成されます。

```yml:config.yml
development:
  password: [your-api-password]
  theme_id: "[your-theme-id]"
  store: [your-store].myshopify.com
```

## 変更したテーマをアップロード
テーマを変更したらテーマディレクトリで以下のコマンドを実行することでshopifyにアップロードすることができます。

```
$ theme watch
```
テーマキットはテーマの編集を検知して、自動的にshopifyにアップロードします。

```
$ theme watch
18:09:13 [development] ショップ名: Watching for file changes to theme テーマID
18:09:24 [development] processing assets/theme.css
18:09:26 [development] Updated assets/theme.css
```
止めるときは`ctrl + c`で停止できます。

[Theme Kit command reference](https://shopify.dev/tools/theme-kit/command-reference#watch)

## VSCodeで見やすくする
shopifyのテーマを変更するときはliquidファイルを編集します。
![スクリーンショット 2021-02-05 18.14.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339458/ec8cc12e-7526-81e9-715b-9efb1f1ee1f8.png)

liquidはコードがハイライトされないので拡張機能を入れると開発しやすいです。

- [Shopify Liquid Template Snippets](https://marketplace.visualstudio.com/items?itemName=killalau.vscode-liquid-snippets)
- [Liquid Languages Support](https://marketplace.visualstudio.com/items?itemName=neilding.language-liquid)

この2つの拡張機能を入れるとこのようにハイライトされて開発しやすいです。
![スクリーンショット 2021-02-05 18.30.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/339458/6ea82bc4-70ec-8db2-ab74-2c200e20361a.png)