本記事は私達の会社で作ったShopifyテーマ開発入門書『Hello Shopify Themes Shopifyテーマ開発ガイド』からの抜粋です。

---

ストアのカスタマイズに役立つのはテーマだけではありません。
Shopifyでは、ストア機能を拡張するための多種多様な「アプリ」が提供されています。
テーマとアプリを組み合わせることで、テーマで実現できる機能はさらに広がります。
　
本章では、アプリを活用する際に考慮しておきたい点と、テーマ開発におすすめのアプリ一覧を紹介します。

---

テーマ開発とアプリの関係

納品書の発行機能、商品の配送日時指定、ウィッシュリスト——等々、Shopifyではさまざまなアプリが公開されており、活用すればストアの機能を大いに拡張できます。テーマ単体では実現できない機能でも、アプリと組み合わせれば可能になるケースは多いです。
　
とは言え、無闇にアプリを追加しすぎるのも良くありません。
大半のアプリは有償（月額課金制、もしくは買い切り）ですし、一部のアプリはテーマにJavaScriptを追加するため、増やし過ぎればテーマの表示速度やパフォーマンスに影響を及ぼしてゆきます。
シンプルな機能ならテーマのみでも充分に対応できるので、テーマに何か新しい機能を加えたいときは、アプリとテーマ実装の両側面から、より効果的なアプローチを検討すると良いでしょう。
　
本節では、アプリをより良く活用するために、把握しておきたい点を紹介します。

Shopify App Store

アプリは「Shopify App Store」からストアに追加します。
アプリによってその機能や価格はさまざまで、複数の料金プランやフリートライアル期間を備えたものもあります。

ストア管理画面経由でShopify App Storeへ遷移すると、自動的にShopify App Storeにログインした状態となり、目的のストアにアプリを素早く追加できます。

なお、一部のアプリは開発ストアでは利用できません。マーチャントへストアを譲渡した後、改めて追加するようにしてください。

テーマとアプリの統合の仕組み

アプリにもさまざまな種類がありますが、本節では主に「ストアの外観へ影響を与えるアプリ」について言及します。カートページに配送日時指定フォームを追加したり、商品ページにユーザーレビューを追加したりする類のアプリを想像してください。
　
ストア外観、もといテーマに影響を与えるアプリは、インストール時、次の3つの方法でテーマと統合できます。

1. アプリブロック
2. 埋め込みアプリ
3. その他のケース

アプリブロックと埋め込みアプリは、OS2.0に伴って追加された新たな仕組みです。
3番目は「その他のケース」としてざっくり括ってしまいましたが、アプリブロックと埋め込みアプリが追加されるまで、アプリとテーマの統合の仕様はアプリによって本当にさまざまでした。アプリごとにテーマへのインストールフローは異なり、ときには手動による調整が必要になることもありました。その複雑な状況を解決するために導入されたのが、アプリブロックと埋め込みアプリです。

アプリブロック

アプリブロックを用いると、テーマエディタの操作によってテーマ内の任意箇所にアプリ機能を追加することができます。
ただし、アプリブロックが利用できるのはOS2.0対応のテーマだけです。厳密には、JSONテンプレートと@appタイプのブロックをサポートしている必要があります。オリジナルテーマ制作の際には注意してください。
　
アプリブロック対応のアプリをストアにインストールした後、テーマエディタの「セクションを追加」または「ブロックを追加」からアプリブロックを呼び出せます。
通常のセクションやブロックと同じように、Liquidを編集することなく自由に追加・削除・並び替えが可能です。

Shopifyの「Product Reviews」アプリを、アプリブロックとしてテーマに追加した。サイドバーの「Star rating」と「Reviews」が該当のアプリブロック

埋め込みアプリ

埋め込みアプリも、テーマエディタの操作によってアプリ機能を追加するという点は、アプリブロックと同じです。アプリをストアにインストールした後、テーマエディタの「テーマ設定」から、テーマ内で有効化するアプリを選択できます。

「Judge.me Product Reviews」の埋め込みアプリ設定。アプリ機能の表示位置などを調整できる

アプリブロックとの違いとして、埋め込みアプリはOS2.0未対応のテーマであっても利用可能であるという点が挙げられます。その代わり、ブロックのように自由に表示位置を変更したり、メタフィールドなどの動的ソースと組み合わせたりすることはできません。
画面内に常に表示されるチャットbot系アプリのような、ページコンテンツとは独立した機能を持つアプリが主に埋め込みアプリとして提供されています。
　
アプリによっては、アプリブロックと埋め込みアプリ双方の統合手段を備えているものもあります。

その他のケース：テーマコードへの直接追加

最後に、アプリブロック・埋め込みアプリに対応していない、従来型のアプリについて。
前述したとおり、これらのアプリのテーマ統合フローはアプリごとに異なるため、なかなか一概には言えないのですが、比較的よく見られる類型は、アプリの動作に必要なLiquidやJavaScriptの記述をテーマ内に自動で加えてくるというものです。
　
2023年12月現在、アプリブロック＆埋め込みアプリ未対応のアプリは少なくなりましたが、古いテーマやアプリのメンテナンスにあたって留意すべき点を紹介します。

テーマコードに影響するアプリ追加時の留意点

どんなアプリをストアに追加するにせよ、Shopify App Store上の機能説明とレビューはよく確認するようにしましょう。サポート体制が整っていなかったり、頻繁にダウンするようなアプリはなるべく避けたいところです。
　
さらに、OS2.0未対応の従来型アプリをインストールする際は、次の点に注意を払ってください。

開発ストアでの動作チェック工程を挟む

運用中の本番ストアに、開発ストアでの検証抜きにアプリをいきなりインストールするのは避けましょう。ライブテーマに変更を加えてくるアプリの場合、追加されたコードによってレイアウト崩れや動作不具合が引き起こされる可能性があるためです。
　
問題なく動作するか、機能が要望に叶っているか、テーマへのインストール・アンインストールの手順はどうなっているか……等を、開発ストアで予め検証・修正できれば、本番ストアへの導入をスムーズに進められます。

テーマに加えられる変更を把握する

アプリ導入後、何らかのトラブルが発生した際のデバッグを容易にするためにも、アプリによってテーマのコードがどのように変更されたのか把握するようにしましょう。
Shopify CLIやTheme Kitでテーマファイルをダウンロードしgit管理に加えるのも一つの方法ですが、ライブテーマをGitHubと連携させれば、変更履歴を自動で追跡できます。
テーマのgit管理については6章で紹介します。

定期的なアプリの整理・アンインストール

使わなくなったアプリは定期的に整理しましょう。不要なアプリの関連ファイルやJavaScriptが、テーマの表示速度やメンテナンス性に悪影響を及ぼしかねません。
　
ただ、アプリの削除にも注意が必要です。
アプリによってテーマに加えられた変更は、アプリを削除してもテーマ内に残存することがあります。そのままにしていると、テーマ内に用途不明な古いコードやファイルが溜まってゆくこととなり、バグの温床になりがちです。
一般的なアプリであれば、アプリ関連ファイル（および、アプリによって変更されたコード）のアンインストール手段が管理画面に用意されています。予めアンインストールを実行してからアプリを削除するようにしてください。
　
とは言え、マーチャントがストアに直接アプリを追加・削除している場合、アンインストールの工程はどうしても見落とされがちです。そのようなケースでも、日頃からテーマの変更履歴をgitで追跡しておくと、デバッグ・メンテナンスの際に役立ちます。

テーマ切り替えに伴う挙動

テーマに影響するアプリの多くは、インストール時、指定したテーマひとつ（もしくはライブテーマ）にアプリ関連ファイルを追加します。
そのため、テーマAには追加されているアプリ関連ファイルが、テーマライブラリー内のテーマBには存在していない、というケースが発生します。
日頃から複数のテーマをライブに切り替えて運用している場合は、アプリ関連ファイルが存在しないテーマをライブテーマとして公開しないよう、注意してください。
　
なお、アプリによっては、ライブテーマの切り替えを検知すると、新たなライブテーマへ自動的にアプリ関連ファイルをインストールするものもあります。

アプリはテーマの可能性を拡張する

ここまでアプリの留意点ばかり長々と述べてしまいましたが、それでも、テーマ開発においてアプリはとても有用です。
テーマ単体では実装困難でも、アプリと組み合わせれば実現できる機能は多々あります。
アプリの特性を理解した上で、積極的に活用していきましょう。
　
次節では、ストア運用・テーマ開発にあたって特に役立つアプリを紹介します。

---