[Shopify] Visual Studio で Shopify Themeを管理開発

普段からVisual Studio (VS)使っている私からすると、
ShopifyのTheme(テーマ)もVSで管理・構築したい！

ということで今日はVisual StudioでShopify Theme (Liquid Files) を管理する方法をまとめました。

Visual Studio Pro Versionを使用していますが、Visual Studio CodeでもVisual Studio For Macでも同じフローになります。

# Liquid?
`Liquid`はShopifyのTheme開発で使われるテンプレート言語になります。

詳しいことはこちらを参照
:point_right_tone2: https://help.shopify.com/en/themes/liquid

例えばこんな表記で

```
{{ product.title }}
```

商品のタイトルを表示することができます。

そしてこんな表記もできます。

```
{% if product.available %}
<h2>Price: $99.99</h2>
{% else %}
<h2 class="sold-out">Sorry, this product is sold out.</h2>
{% endif %}
```

商品の在庫があったら、値段を表示、なければ、売り切れましたと表示する。
なんていう表現も簡単にできます。

# 開発手法と環境

Shopifyが提供資料によると
Themeの開発環境と手法は下記があります。

1. Slate 
2. Shopify Theme Kit
3. Online Editor

## Slate
`Slate`ツールを使うと、ローカルで開発をすすめ、自身の開発ストアーにプッシュできるとのこと。
詳細はこちらをご参照
:point_right_tone2: https://shopify.github.io/slate/docs/about

## Shopify Theme Kit
`Shopify Theme Kit`は、Themeのダウンロード、アップロードなどを自動で行うことができる便利なツールです。
詳細ドキュメントはこちら
:point_right_tone2: https://shopify.github.io/themekit/

## Online Editor
`Online Editor`はちょいとした変更や、ほぼテンプレートのまま行くということであれば
便利です。が、チームで開発であったり、リッチなIDE体験となると適切ではないかもしれません。

## Visual Studio + Azure Dev Op.

今日はさらなる開発環境・構築手法として Visual Studio + Azure Dev Op.を試してみます。

:point_right_tone3: https://help.shopify.com/en/api/reference/online-store/theme#index-2019-10
上記資料にある `/admin/api/2019-10/themes/#{theme_id}.json` を使いGit で管理したファイルをZip化してShopify上にあげます（更新します）。


# 既存のテンプレートファイルのダウンロード
まずは既存のテンプレートをローカルにダウンロード。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/de5c7597-8096-4c1d-942b-2b6f2c1728d9.png)

`Download theme file`をクリック。メールでファイルが送られてくるとこのとで（正確にはダウンロードのリンクが送られてくる）、メールを確認し、ダウンロード。

# Azure Dev Op. にて新しいRepository作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/a1cd7910-3e9d-4865-a543-464b50cce2eb.png)

左のナビゲーションメニューより`Repos` `New Repository`で新しいRepositoryを作成します。

# ローカル環境の準備
Visual Studioから新しいRepositoryにアクセス、ローカル環境を用意します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/34d15195-22af-c612-302d-2f7e33c14770.png)

## 解凍したテンプレートファイルを移動
ローカル環境に解凍したテンプレートファイルを移動し、変更内容を確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/3d0a4e50-fe75-0871-4257-97917e437f9f.png)

## 変更のコミット（追加のコミット）
変更をコミットします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/efec0a29-76a4-984c-4fc2-bfb0d7270f11.png)

## プッシュする
マスターですが・・そのままプッシュします。
Azure Dev Op側にファイルがプッシュされているか確認をします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/c5bd74f3-6066-c3f6-36ee-48419074f8d1.png)

これでGit環境はいったん整いました。ブランチ切ってここからグループ開発を始めていきます。
次はマージされた`master`ブランチをShopifyにプッシュしています。

# Shopify Admin APIを使えるようにする

次の流れは更新したファイルをZip化、テーマをShopifyサーバーにアップロードします。そのためにはまずPrivate App構築からAPIのKeyを取得する必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/0b6aa7b9-d9b2-0217-f83d-500e81af3a0a.png)

`Theme template and assets` を `Read and write`に設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/41186d1e-7b83-02ff-3520-7298857a220a.png)

セーブをするとAPI Keyとパスワードを取得することができます、またExample URLも表示されますので、このURLを後ほどそのまま使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/25451c89-51a9-90f6-50d0-8399b5aff67c.png)


# CI環境を用意する

## Zipファイルを作成

次は`master`にマージされたテーマファイルをShopify環境に反映させます。 左メニューのPipelinesから`New Release pipeline`を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/f7a18be5-baa4-68bc-e15b-aa0f4af3296a.png)

Zipファイルを作成するタスクを作ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/ffa196a2-a39f-5b8a-3db9-db60b698d435.png)

次に`master`が更新されるたびに自動でzipファイルが作成されるよう、ワークフローを作ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/18aaba7a-baa0-c65f-281c-5fbe996b1893.png)

`Enable continuous integration`をチェックして保存します。これで`master`が更新されるたびに自動的にzipファイルが生成されます。

### 生成したZipファイルを公開する

生成したZipファイルは公開されている必要がありますので、Blobにあげておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/f636b792-7ef1-69b8-b6a3-71aabcfec638.png)



## サービスコネクションを作成

次はリリース時に使うAPIのコネクションを用意します。Settings > Pipelines > Service Connectionで新しいサービスコネクション＝APIのエンドポイントを設定します。さきほどPrivate Appを作成したときにでてきたUrlをそのまま使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/0708686e-64a5-a333-c113-0921277eb910.png)

URLはこちら（このフォーマットでServer URL部分に記入）
:point_down_tone2:

```
https://{username}:{password}@{shop}.myshopify.com/admin/api/2019-10/themes.json
```

## リリースパイプラインを作成

最後に`Pipelines` > `Release`　から`New release pipeline`をクリックし、先ほど生成してZipを更新します。
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/0fe0f89e-29b3-9814-c203-571e20680b2c.png)

リリースのパイプラインはソースとリリース作業に分かれていますので、下記イメージ左部分にあるソースをまず指定します。　今回はリリースを手動としています。自動にする場合は`Artifacts`のところにある⚡マークをクリック。`Continuous deployment trigger`をEnableすると自動的にリリース作業も行うことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/ea00df16-b952-d062-c5b8-c16da9d205f1.png)

連動するビルドを指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/6d257158-1d2d-7bc1-b211-29955eb30e40.png)

最後に`Agentless job`を`Task`に追加、そこで`Invoke REST API`を選択。今回はThemeの更新となるので`PUT`で下の図右側にあるように`Headers`と `Body`を指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/88955820-95a1-0e7b-86af-f551dd51d252.png)

## リリース

あとはこの右上のリリースボタンを押すだけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/5d47bfb2-efc7-270e-7cbc-6b1579a5bdf2.png)

リリース内容を確認、正常に更新ができました。


#次

これでテーマを開発していく環境が整いました。次はLiquid FileをVisual Studioで開発していく上で超便利なプラグインの紹介をします。

Shopifyの開発に関しての記事は下記を予定しています