🌐

【Shopify.dev和訳】Apps/Online store/App integration

2021/09/11に公開

Shopify

apps

tech

この記事について

この記事は、Apps/Online store/App integrationの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

オンラインストアとのアプリ統合

アプリをオンラインストアと統合することで、何百万人ものマーチャントの顧客にアプリの機能を公開することができます。

Shopify のプラットフォームは、インラインコンテンツのような小さなものから、購買体験全体に関わる拡張機能まで、アプリのニーズに合わせて対応できます。Shopify のプラットフォームは、Liquid テンプレート、Shopify CDN上のホストされたアセット、目的に応じたデプロイとバージョン管理のリリースパイプラインを使用して、アプリの機能をオンラインストアにシームレスに組み込むことができます。

このガイドでは、アプリをオンラインストアに統合するために使用できる方法を説明します。

テーマアプリの拡張機能

テーマアプリの拡張機能は、オンラインストアのテーマを拡張する 2 つの統合タイプをアプリに提供します：アプリブロックとアプリ埋め込みブロックです。これらの統合タイプは、オンラインストア 2.0 の機能を最大限に活用するために装備されています。Shopify App Store に提出されるすべての新しいアプリは、テーマアプリエクステンションを使用して、アプリをオンラインストアのテーマと統合する必要があります。

テーマアプリエクステンションは、テーマコードを編集しないため、以下のようなメリットがあります。

アプリがテーマに破壊的な変更を加えるリスクの低減
アプリのサポート負債を最小限に抑える
アプリの統合やカスタマイズにおいて、マーチャントにすっきりとしたエクスペリエンスを提供することで、アプリの採用率が高まる。

優雅ですぐに使える統合体験により、ユーザーの定着率が向上する。

以下のアプリの使用例と、使用すべきアプリブロックを確認してください。

アプリがページ上のインラインコンテンツを注入する場合は、アプリブロックを使用します。
アプリが UI コンポーネントを持たない場合や、テーマにフローティング要素やオーバーレイ要素を追加する場合は、アプリの埋め込みブロックを使用します。

テーマに関するその他の方法

Shopify は、アプリをオンラインストアに統合するためのテーマアプリエクステンション以外の技術リソースを提供しています。これらのリソースをテーマアプリエクステンションと一緒に使用して、ビンテージテーマの特定のタイプのサポートを提供することができます。

テーマと統合する新しいアプリを作成し、そのアプリを Shopify App Store に提出する場合は、テーマアプリエクステンションを使用する必要があります。ただし、アプリの機能をアプリブロックとして提供する場合は、ビンテージテーマとの互換性はありませんので、テーマアプリの拡張機能に加えて、アセットまたは ScriptTag リソースを使用する必要があるかもしれません。すでに Shopify App Store で公開されているアプリは、この要件が免除されます。

以下のアプリの使用例と、使用すべきテクニカルリソースを確認してください。

アプリがビンテージテーマと互換性のないアプリブロックを追加する場合は、アプリブロックによって導入される機能の代替インストールパスとしてScriptTagREST Admin API または GraphQL Admin API リソースを使用できます。Shopify App Store に新しいアプリを提出している場合は、Online Store 2.0 テーマ用のアプリブロックを提供する必要があります。アプリブロックのサポートを確認する方法をご覧ください。
アプリがビンテージテーマのコードを変更する必要がある場合は、Asset REST Admin API リソースを使用して、アプリのスニペットをテーマの Liquid ファイルに注入する必要があります。また、マーチャント向けにコードの追加と削除の方法を詳しく説明する必要があります。

ガイドライン

アプリがストアのテーマと連動する場合は、アプリがテーマエディタ環境でも動作することを確認する必要があります。必要に応じて、テーマエディタを検出するようにアプリを設定し、その環境で動作するようにアプリを調整することができます。

アプリがオンラインストアに表示可能な要素を追加する場合、マーチャントが要素を有効にする前にプレビューまたは編集できるように、要素をデフォルトで無効にする必要があります。マーチャントには、可視要素またはアプリをアクティブにする方法を説明する必要があります。

アプリをアンインストールしてもテーマにコードが残る場合は、コードを完全に削除する方法をマーチャントに提供して、テーマのアップグレードパスを維持できるようにする必要があります。マーチャントがコードを削除する際、余分な改行やスペースを残すと、テーマのアップグレードパスから外れてしまいます。

アプリでテーマのコードを編集し、マーチャントが公開しているテーマを変更した場合は、新しいテーマで動作するようにアプリを更新する必要があります。

オンラインストアのその他の方法

オンラインストアのオリジンのルートにかけられたリクエストを外部オリジンに転送してストアページにデータを表示したい場合は、アプリプロキシを使用します。

JavaScript ベストプラクティス

Shopify はホスト型ソリューションなので、Shopify ストアで JavaScript を使用するためのベストプラクティスに従っていることを確認してください。

アプリの統合方法の決定

ストアで公開されているテーマがアプリブロックをサポートしているかどうかを確認することで、アプリをテーマに統合するために必要な方法を決定します。すべてのテーマがアプリの埋め込みブロックをサポートしています。

Shopify アプリのご紹介

Discussion

ログインするとコメントできます