普段から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開発で使われるテンプレート言語になります。

詳しいことはこちらを参照
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の開発環境と手法は下記があります。

Slate
Shopify Theme Kit
Online Editor

Slate

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

Shopify Theme Kit

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

Online Editor

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

Visual Studio + Azure Dev Op.

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

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

既存のテンプレートファイルのダウンロード

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

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

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

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

ローカル環境の準備

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

解凍したテンプレートファイルを移動

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

変更のコミット（追加のコミット）

変更をコミットします。

プッシュする

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

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

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

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

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

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

CI環境を用意する

Zipファイルを作成

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

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

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

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

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

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

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

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

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

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

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

最後にPipelines > Release　からNew release pipelineをクリックし、先ほど生成してZipを更新します。

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

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

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

リリース

あとはこの右上のリリースボタンを押すだけです。

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

次

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

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

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