ドキュメント

App Clipの起動体験の構成

ユーザーがどのようにApp Clipを起動するかを確認し、呼び出しURLを特定し、App Store Connectでユーザー体験を構成します。

概要

ユーザーは「呼び出し」を行うことでApp Clipを起動します。たとえば、App Clipコードをスキャンしたり、Webサイト上でSmart App Bannerをタップしたりすると起動します。App Clipは起動時に、App Clipカードに表示する情報を決める「呼び出しURL」を受け取ります。また、呼び出しURLを使って、App Clipの起動時にUIを更新し、ユーザーのその時点の状況に最もふさわしい起動体験を提供することもできます。呼び出しURLおよびApp Clipカードに表示されるメタデータを構成するには、App Store ConnectでデフォルトのApp Clip体験を設定します。App Clipコードなどを含むすべての呼び出しに対応するには、オプションで用意されている高度なApp Clip体験を構成します。

一般的に、App Clipを含む最初のビルドをApp Store Connectにアップロードする時点で、App Clip体験を実際に構成することになります。とはいえ、実際にApp Clipの開発を始める前に、App Clip体験を提供する仕組みを理解しておくことが大切です。App Clipの機能を実装する前、または実装する際に、呼び出し方法と呼び出しURLを決定し、コードに加える変更について計画を立てておく必要があります。

ユーザーがApp Clipを呼び出す方法の確認

ユーザーがApp ClipをApp Storeで検索することはありません。必要なときに必要な場面で発見し、以下のいずれかの呼び出しを行うことでApp Clipを起動します。

  • 物理的な場所でApp Clipコード、NFCタグ、またはQRコードをスキャンする

  • 位置情報に基づいて提案されるSiriからの提案をタップする

  • 「マップ」App上のリンクをタップする

  • Safariに表示されているWebサイト上、またはSFSafariViewController(英語)を利用したApp上で、Smart App Bannerをタップする

  • 「メッセージ」Appで誰かが共有したリンクをタップする(テキストメッセージのみ)

App Clipの起動体験を図示したフローチャート。

呼び出しがあるたびに、システムが呼び出しURLのドメインと、App ClipとWebサイトの関連付けに使用されているURLが一致するかを検証します。呼び出しの検証が終わったら、システムは呼び出しURLを使って、App Clipの起動にどのApp Clip体験を利用するかを判定します。そして、App Clip体験のメタデータを使ってApp Clipカードに表示する情報を決定し、App Clipの起動時にApp Clip側に情報を渡します。

詳しくは、「App ClipのWebサイトへの関連付け(英語)」を参照してください。

デフォルトのApp Clip体験と高度なApp Clip体験の比較

App Clipでどの呼び出しをサポートするかに関わらず、App Store ConnectでデフォルトのApp Clip体験を設定する必要があります。デフォルトのApp Clip体験では、App Clipを起動するSmart App BannerをWebサイトに追加できます。WebサイトにSmart App Bannerを追加することで、「メッセージ」Appでユーザーが共有したリンクをタップした場合の呼び出しにも対応できます。

App Clipによっては、デフォルトのApp Clip体験を構成してSmart App BannerをWebサイトに追加するだけで充分かもしれません。高度なApp Clip体験の提供は任意です。ただ、ユーザーがいつ、どのようなシーンでAppを利用するかを考えて、App Clipで提供する機能に適した追加の呼び出し方法がないか検討してください。

高度なApp Clip体験は、以下の場合に構成します。

  • App Clipコード、NFCタグ、QRコードを含め、App Clipをあらゆる呼び出しに対応させたい場合。

  • サブドメインやドメインが異なるWebサイトにもSmart App Bannerを表示したい場合。

  • App Clipを物理的な場所に関連付ける必要がある場合。

  • 複数のビジネスが使用するApp Clipを開発している場合。

App Clipカードのカスタマイズ

App Clipカードは、ユーザーがApp Clipを見つけたときに最初に目にするものです。そのため、App Clipカードはデザインが特に重要になります。「App Clipの起動体験のテスト」の説明に従ってローカルでの起動環境を使い、さまざまな画像やテキストを検討したり、デバイス上でどのように表示されるかをテストしてください。

App Clipカードは、利用時のユーザーの状況に適応させる必要があります。たとえば、複数の拠点を構えているビジネスは、ユーザーが今いる場所に合わせて画像を表示する必要があります。そのため、それぞれの物理的な場所に応じて、異なる画像やテキストをApp Clipカードに表示させることになります。ただし、App Clipカードに表示される内容をプログラミングにより変更することはできません。ユーザーのそれぞれの状況に合わせて個別のApp Clipカードが必要な場合には、状況別に高度なApp Clip体験をApp Store Connectで構成しておく必要があります。テキストと画像は、高度なApp Clip体験ごとに選ぶことができます。

App Clipカードに表示されるテキストは、App Store Connectで多言語にローカライズすることもできます。ローカライズについて、詳しくは「App Store情報のローカライズ」を参照してください。

デフォルトのApp Clip体験の構成

App Clipは対応する完全版のAppを常に必要としています。そのため、App Clipのバイナリは完全版Appのバイナリと一緒にApp Store Connectに提出します。完全版AppをApp Store Connectにアップロードしたら、デフォルトのApp Clip体験を構成します。App Clipを提供するAppバージョンのページに移動し、App Clipセクションを開いたら、App Clipカード用に以下のメタデータを提供します。

  • ヘッダー画像

  • App Clipカードのサブタイトルに使用するコピー

  • ユーザーがタップするとApp Clipが起動する「アクションボタン」に表示される、アクションを促す動詞

デフォルトのApp Clip体験の場合、起動時にApp Clipに渡される呼び出しURLは、App Clipと関連付けられた、Smart App Bannerを表示するWebサイトのURLです。その後、App Clipのコードの中で、App Clipを起動したWebページのURLにアクセスできるようになります。

たとえば、店舗が1か所しかないコーヒーショップの場合は、デフォルトのApp Clip体験を構成し、App Clipをhttps://example.comにあるWebサイトに関連付けます。このWebサイト内のさまざまな場所で、App Clipを起動するSmart App Bannerを表示します。以下がその例です。

  • https://example.com/menu

  • https://example.com/contact

  • https://example.com/menu/breakfast

  • https://example.com/menu/lunch

App Clipは起動時にWebサイトのURLを呼び出しURLとして受け取り、それに対応する機能(コーヒーショップのメニューなど)をApp Clipに表示します。

高度なApp Clip体験の構成

追加の呼び出し(App ClipコードやNFCタグのスキャンなど)に対応するには、App Store Connectで高度なApp Clip体験を設定します。

App Store ConnectでAppを選択し、高度なApp Clip体験を追加したいiOS Appのバージョンを選択します。その後、「高度な体験を編集」をクリックして、高度なApp Clip体験を設定します。詳しくは、「App Store Connectヘルプ」の「App Clip体験の設定(英語)」を参照してください。

XcodeプロジェクトのApp Clipと完全版Appの両方で、コードを追加または修正し、新たに登録したURLに応答するようにします。詳しくは、「呼び出しへの応答」を参照してください。

先ほどのコーヒーショップのApp Clipの事例を検討してみましょう。このApp Clipでは、App Clipに関連付けられたドメインであるhttps://example.comをデフォルトのApp Clip体験で使用します。さらに、https://example.comを呼び出しURLとする高度なApp Clip体験を使用し、この高度な体験用のApp Clipコードを生成します。プログラムコードでは、App ClipはApp Clipコードからの呼び出しをSmart App Bannerや「メッセージ」Appからの呼び出しと同様に処理します。

URLプレフィックスの一致の活用

通常は、登録するURLはできるだけ少なくし、汎用のURLを登録してURLプレフィックスの一致を活用してください。呼び出しがあると、システムは高度なApp Clip体験の一部として登録されたURLと呼び出しURLを照合します。その後、システムは最も細部まで一致するURLのApp Clip体験を選択します。つまり、1つのURLを登録しておくだけで、数多くのケースに対応できることになります。

コーヒーショップの例を考えてみましょう。https://example.comを呼び出しURLとして高度なApp Clip体験を登録することで、複数の呼び出しURLに対応できるようになります。たとえば、以下のようなURLに対応できます。

  • https://example.com/menu

  • https://example.com/contact

  • https://example.com/menu/breakfast

App Clipは、起動時にURLを受け取った後、パスの構成要素とクエリパラメータを抽出し、これらを使ってUIを更新することで、UIがURLに一致し、ユーザーの状況に対応させることができます。

コーヒーショップが複数の店舗を展開している場合は、各店舗にそれぞれ別の高度なApp Clip体験を用意して、個別のヘッダー画像、メタデータ、呼び出しURL(https://example.com/location1https://example.com/location2など)を設定できます。そうすることで、App Clipは先ほどの例と同じく、パスの構成要素とクエリパラメータを抽出し、それぞれのApp Clip体験に合わせてUIを更新できます。

詳しくは、「WWDC 2020:App Clipの構成とリンクの関連付け(日本語字幕)」をご覧ください。

App ClipコードにエンコードするURLの選択

App Clipコードはユーザーの目に止まりやすく、利用できるApp Clipがあることが一目でわかります。App Clipコードを使うと、セキュアで迅速なApp Clipの起動体験をユーザーに提供できます。App ClipコードはApp Clipを起動する方法として優れていますが、App Clipコード(ビジュアルコードやNFCタグ)には限られた情報しか入れることができません。App Clipコードによる呼び出しへの対応を予定している場合は、「App Clipコードの作成(英語)」および「App ClipコードにURLをエンコードする(英語)」を確認してください。

短縮URLとリダイレクトの利用

すでに短縮URLを使ってAppにディープリンクを設置している場合など、一部のケースでは、長いURLに加えて短縮URLをApp Clipの起動に利用したい場合があります。あるいは、短縮URLから長いパスのURL、または数多くのクエリパラメータを付けたURLにリダイレクトさせたい場合があるかもしれません。

App Clipの起動には、短縮URLと長いURLのどちらも使用することができます。また、URLのリダイレクトによる起動も可能です。ただし、App Clipの呼び出しには、短縮URLと長いURLのどちらも設定しておく必要があります。たとえば、https://some.subdomain.example.com/path/to/thing?query=1234をApp Clipの呼び出しURLとして使用し、この長いURLにリダイレクトするhttps://appclip.example.com?id=1のような短縮URLも同時に使用したいとします。URLの転送を機能させるには、https://some.subdomain.example.comhttps://appclip.example.comの両方を関連ドメインのリストに追加します。この際、各サブドメインに対応する.well-knownディレクトリにAASAファイルを必ず配置しておきます。その後、両方のURLにApp Clip体験を設定します。

詳しくは、「App ClipのWebサイトへの関連付け(英語)」および「関連ドメインのサポート(英語)」を参照してください。

関連項目

開発