Shopify Unite 2021で発表されたOnline Store 2.0は、これまでのShopifyストアテーマを触ってきた人たちにとって、劇的な変化を感じられるものだったと思います。特に、ファイルやコードを追加してカスタマイズしてストア構築を行っていた人たちにとっては、テーマエディターからファイルの追加・設定・編集ができるということの便利さに驚いたことと思います。
今回は、アプリ開発者の視点から、ストア2.0に合わせたアプリのコードをテーマに追加する方法について解説させていただきます。
Templates/SectionsからApp blocksへ
これまで、アプリのコードをテーマ上で表示したい場合、page templatesを追加したりsectionの中でsnippetsファイルを呼び出すようなコードを追加していたアプリが多くありました。これはテーマのコード編集やAPIを使った方法でのみファイル追加が可能であったため、マーチャントがテーマエディターから確認できず、結果的にコード編集画面ではいくつも使用されていないファイルが存在していたり、アプリ追加によって生成されたファイル同士が干渉していてもテーマエディターから管理することはできませんでした。
そこで、今回ストア2.0では、ストアにインストールされたアプリのコードをApp blocksというカテゴリで管理する機能が登場し、アプリがアンインストールされたタイミングで該当のアプリによって生成されたファイル等が削除されるようになりました。
App blocksは、Theme app extensionsというShopifyのコマンドラインツールを使って簡単に作ることができます。また、作成したextensionは shopify extension register を使ってアプリの拡張機能として登録することができ、 shopify extension push を使ってパートナーダッシュボードでバージョン管理ができるようになります。
Theme app extensionsのディレクトリ構造
shopify extension create --type=THEME_APP_EXTENSIONを使うと、theme-app-extensionというディレクトリが作成され、以下のようなディレクトリ構造になっています。
└── theme-app-extension
├── assets
├── blocks
├── snippetsApp blocksはliquidファイルで構成されるため、従来のTemplatesやSectionsで書いていたliquidコードと同じように開発を進めることができ、{& schema &}内ではassetsディレクトリに置いたcssファイルやjsファイルの指定ができます。
{% schema %}
{
"name": "My Extension",
"target": "section",
"stylesheet": "app.css",
"javascript": "app.js",
"settings": [
{ "label": "Color", "id": "color", "type": "color", "default": "#000000" }
]
}
{% endschema %}また、snippetsファイルを別途作成し、{% render "app_snippet" %}のような形でblocks内のファイルから呼び出すことも可能です。詳細はこちら
Theme app extensionsによって実現できること
これらの拡張機能が生まれた背景には、最初にご説明したアプリによるファイルの生成、相互干渉による不具合等、テーマファイルの管理が複雑であったことが挙げられるかと思います。
つまり、Shopifyのテーマはコード編集が可能な人間でなくても、テーマエディターから簡単にマネージできることが最も理想的な姿であり、カスタマイズによるファイルの大量生成や1つのファイル内に複数のアプリに関わるコードは含まれている状況は避けるべきであると考えられます。
今回ご紹介したTheme app extensionsは、この拡張機能が登録されたアプリがストアからアンインストールされた場合、自動的にテーマから除かれるようになっており、現在のストア運営に関係ないコードやテーマファイルが残り続けるのを防ぐことができます。
実際、ストア2.0になっても従来のやり方でTemplatesやSectionsにliquidファイルを追加していくことはできるため、これまで使用していたアプリを継続して使っていくこともできますが、online store 2.0で構築したストアであれば、アプリを追加する際、Theme app extensionsに対応しているかどうかも重要な判断基準になるのではないでしょうか。
ストアのメンテナンスや成長を持続可能なものにするためには、Shopifyが提供するテーマの形に沿って構築していく必要があるでしょう。
Shopify×グロース支援のお問い合わせ
StoreHeroでは、Shopify×グロースの専門チームが打ち手を爆増し売上を伸ばすShopify×グロース支援サービスを提供しています。
StoreHeroとShopify×グロースに取り組むことにご興味のある方はお問い合わせください。
