App Clipを設定し、リンクする

App Clipを設定し、リンクする

App ClipはApp内の小さなパーツで、効率的で直接的な体験を提供し、適時必要なものを入手するサポートをします。App Clipコード、NFC、QRコードといった実世界での体験を通じてApp Clipを起動したり、MapsやSafariといったAppからデジタルで出現させる方法を学べます。App Clip内でのリンクの取り扱い、関連ドメインの設定方法もお見せします。App Store Connect内でApp Clip体験を設定する方法、あなたのウエブサイトにApp Clipバナーを追加する方法、TestFlightを使ってApp Clipの完全なテストを行う方法についても触れていきます。このセッションを有効に活用するには、Universal Linksと関連ドメインを使った経験があることが望ましいです。事前準備として、WWDC19の「ユニバーサルリンクの新機能」をご覧ください。

リソース
関連ビデオ

WWDC23
- App Clipの新機能
WWDC21
- 軽量かつ高速なApp Clipの構築
- App Clipの新機能
WWDC20
WWDC19
- ユニバーサルリンクの新機能
ダウンロード

こんにちは WWDCへようこそ “App Clipsを設定し、リンクする” App Clipのエンジニアエイダです App Clipへのリンクについて全てをお見せするため同僚のルーミンも途中から参加します
App Clipは― 最小限のフリクションでAppを体験するためのエントリーポイントを提供しますユーザがタスクの実行で Appの機能を必要とする場合 App Clipがディープリンクナビゲーションでシームレスにユーザに提示されますこのセッションでは App Clipへのリンクを処理しその構成に必要な作業について説明します最初に App Clipを使用してタスクを実行する方法の例を見てみましょう
スムージースタンドをたまたま見つけたとします冷たいスムージーが飲みたいと思いますね
「ご注文はここをタップしてください」という NFCタグを見つけます
タップするとスムージーを注文するApp Clipの説明が記載されたカードが画面下部にポップアップ表示されます
「Open」ボタンをタップすると App Clipが起動しスムージーの注文ページに直接移動します
Apple Payで購入を完了するとスムージーを手にすることができます
リンクの魔法はこれらのステップで実現します NFCのタグはApp Clipエクスペリエンスに登録されている URLをエンコードしたものですこれについては後半でご説明します「Open」をタップすると NSUserActivityを介して渡される URLでApp Clipが起動し App Clipによって注文ページに直接移動します
NFCの他にも App Clipのリンクは他の場所にも表示されますこれらは物理タグやビジュアルコードにエンコードされたり地図上の実際の場所に関連付けられたURLですこれらのリンク方法をそれぞれ見ていきましょう
先ほどの例で述べたように NFCのタグにApp ClipのURLをエンコードしてユーザがスマートフォンをタップし App Clipを開けるようにします
App ClipのURLはQRコードにエンコードすることもできます人々はそれをスキャンして App Clipを開くことができます
App Clipのリンクは登録済みのお店のMaps place cardに表示され Siriの周辺検索にも表示されます
SafariからApp Clipを開くこともできます WebページにApp Clip用の Smart App Bannerが設定されている場合ユーザはそのバナーの「Open」をタップして App Clipを開くことができます
そしてそのWebページのURLを含む iMessageを送信すると特別なApp Clipのリンクの吹き出しとして表示されユーザはApp Clip またはSafariでリンクを開くことができます
さらに優れた体験を提供するために今年後半にAppleは新しいApp ClipコードをリリースしますこれはユーザがApp Clipを見つけるための最良の方法ですそれは視覚的に美しくはっきりしているのでユーザがそれを見るとApp Clipがあることがわかります
各App ClipコードはURLをエンコードします Appleは今年これらの美しいビジュアルコードを作成できるツールをリリースする予定です
App Clipへのリンクをたどるさまざまな方法を見てきました次に開発者がこのApp Clipのリンクを設定する手順を見ていきましょう
最初にこれらのリンクを App Clipで処理できるように WebサーバーとApp Clipのプロジェクトファイルを変更する必要があります
次にユーザにApp Clipを紹介しまたApp Clipエクスペリエンスの一部である App Clipカードを構成する必要があります App Store Connectで Defaultおよび Advanced App Clip Experiencesを設定できます
最後に App ClipをWebページに表示するように Smart App Bannerを構成しましょう Webページのコンテンツをより優れたより合理化された App Clipエクスペリエンスとして配信したい場合はこのバナーを追加して― ユーザがWebページからApp Clipにアクセスする方法を提供することを検討してください
まずリンク処理のためにWebサーバーとApp Clipを構成することから始めましょう
Webサイトの代わりにApp ClipがURLのコンテンツを表示できるようにするにはウェブサイトとApp Clipの関連付けを検証する必要があります App Clipをサーバーに安全に関連付けるには App ClipにAssociated Domainsのentitlementを設定し Webサーバーに apple-app-site-associationファイルを置く必要があります次にNSUserActivityからのリンクを処理するために App Clipのコードを更新する必要があります
まず Webサーバー上の apple-app-site-associationファイルを更新し
このファイルはサーバーのルートフォルダ内の ./well-knownサブディレクトリにあります以前にAppのユニバーサルリンクを設定したことがあればサーバーにこのファイルが既に設定されていてルートディクショナリには― Webクレデンシャルやapplinksなどの他のエントリーがすでにあるはずですこのファイルで新しいApp Clipの関連付けを宣言するにはキー「appclips」を使用してルートディクショナリに別のエントリを追加し App ClipのApp IDの配列を値とした単一の「apps」キーを持つ― ディクショナリを追加します
次に App Clipのプロジェクトファイルに Associated Domainsのentitlementを追加します
Xcodeでプロジェクト設定に移動し Associated Domainsのcapabilityを追加します
「Domains」に「appclips:」という新しい文字列を追加します
ウェブサイトとApp Clipの両方に関連ドメインが設定されたので App Clipに渡されるURLを含むNSUserActivityを処理するコードを追加しましょう
App Clipが新しいSwiftUI appライフサイクルを採用している場合はこのようにWebブラウジングのユーザアクティビティのハンドラーを追加しますこれでNSUserActivityから WebページのURLプロパティを取得できます次にそのURLを解析してリンクされたコンテンツにユーザを誘導できます
ユーザがApp Clipから Appにアップグレードすると App Clipへのリンクのナビゲーションは Appの起動に代わることにご注意くださいユニバーサルリンクのURLを処理する同様のコードが Appにも実装されていることを確認してください
App ClipがUIKitの SceneDelegateライフサイクルを使用している場合 UISceneDelegateに入ってくるユーザアクティビティを処理する― 同様のコードを次に示します
関連ドメインの設定方法とNSUserActivitiesの処理方法については「Universal Linksに関する新機能」セッションを参照してください
XcodeでApp Clipの URL処理コードをテストするために App Clipに渡すテストURLを指定できます Xcodeでスキームエディターを開きます「arguments」タブを選択します
「Environment Variables」で _XCAppClipURLを指定します XcodeからApp Clipを実行するとこのURLで起動されます
WebサーバーとApp Clipの構成が完了したので App Clipエクスペリエンスを構成しましょう
各App ClipエクスペリエンスはユーザがApp Clipのリンクをタップしたときに表示されるApp Clipカードから始まります App Clipに関する情報を表示しそれを開くためのユーザの同意を求めます
App Clipカードの構成に使用するメタデータを考えるときカードの最適なレイアウト表示の為タイトルとサブタイトルの長さに関するこれらの要件に従ってくださいまたすべてのデバイスで最高のユーザエクスペリエンスを実現するために画像のサイズ縦横比およびフォーマットの要件もあります選択する画像はこのApp Clipアクションが提供する体験と一致する必要があります
次に App Store Connectで App Clipカードを設定します
AppとApp Clipの両方を含むビルドを App Store Connectに配信すると新しいApp Clipの構成をするセクションが表示されます App Store ConnectでDefaultおよびAdvanced App Clip Experiencesを構成する方法です
Default App Clip Experiencesのメタデータには App Clipカードの画像サブタイトルアクションの動詞が含まれます選択可能な事前定義されたアクションのリストがありますこのメタデータは SafariのSmart App Banner およびメッセージのApp Clipのリンクの吹き出しで使用されますそしてカードが表示される時に App Clipカードにも使用されます
Safariとメッセージ以外からもApp Clipにアクセスできるようにしたい場合はこちらの「Get Started」リンクをクリックして Advanced App Clip Experiencesを設定する必要があります各Advanced App Clip Experiencesは NFCタグなどの物理タグまたはQRコードにエンコードできるURLに関連付けられているためこれらの物理的な呼び出し方法から App Clipを起動できます
イントロダクション画面をクリックするとこのページが表示され Advanced App Clip Experiencesの URLを指定できます同じApp Clipに対して異なるURLを持つ複数の Advanced App Clip Experiencesを設定できます複数のApp Clipエクスペリエンスの例を少し紹介します
次のページで画像タイトルサブタイトルを設定しこのエクスペリエンスのApp Clipカードのアクション動詞を選択しますこのApp Clipエクスペリエンスを物理的な場所に関連付けることもできます
次に Advanced App Clip Experiencesのいくつかの使用例とこれらのエクスペリエンスのURLを登録するベストプラクティスを見てみましょう
1つのApp Clipでさまざまな種類のタスクを処理できるため同じApp Clipに対して異なる App ClipエクスペリエンスをカスタマイズできますたとえばこのレストランのApp Clipはユーザに２種類のエクスペリエンスを提供しますユーザがメニューを表示して注文できるフードオーダーエクスペリエンスと顧客がテーブルを予約できる予約エクスペリエンスです
この場合 2つのAdvanced App Clip Experiencesを設定します 1つはmelamela.example/order 画像はメニューの写真でありサブタイトルは「View menu and order」ですまたもう一つはmelamela.example/reservationでレストランの写真でサブタイトルは「Reserve a table」です
URLがApp Clipにマッピングされる方法について覚えておくべきことの1つは登録された App Clipエクスペリエンス URLに対する― 最長プレフィックス・マッチに基づいていることですつまりビジネスで起こりうる全てのApp Clipの URLをひとつひとつ登録する必要はありません
ただし登録済みのエクスペリエンスURLがプレフィックスとしてのみ使用されている場合でも App Clipは登録されているURLでの起動を処理できる必要があることに注意してくださいこれは Siriの周辺検索及びマップから App Clipが呼び出されたときに起こりますこれは1つのApp ClipエクスペリエンスのURLを登録して複数の呼び出しURLを処理する方法の例です自転車店にはオンラインの自転車レンタルシステムがあります ID番号で識別される何百ものレンタル自転車があります
これらの自転車を予約するためのURLはクエリ文字列引数でそのIDを指定します
幸い URLはプレフィックス・マッチに基づいて一致するため自転車店は全てのURLに対してAdvanced App Clip Experiencesを登録する必要はありません登録する必要があるのはたった1つのApp Clipエクスペリエンス URL https://bikesrental.example/rentだけですたったこれだけでそのプレフィックスとクエリ文字列引数を持つこれら全ての自転車のURLに App Clipエクスペリエンスを提供できます
ここから DefaultおよびAdvanced App Clipエクスペリエンスの設定を開始できますこの例のカフェは複数の店舗を持つ大きなチェーン店であり各店舗は基本的に顧客に同じような体験を提供しています
すべての店舗に共通のURL形式があり https//brighteggcafe.example/store/で始まる為そのURLプレフィックスにApp Clip エクスペリエンスを登録するだけで済みます顧客がいずれかの店舗へのリンクをたどると同じApp Clipカードを入手できます
しかしコーヒーショップが― クパチーノの旗艦店にもっと特別な App Clipエクスペリエンスを提供したいとしますそうするためには異なる画像とサブタイトルを使用し異なるApp Clipエクスペリエンス用のクパチーノ店舗URLを登録しますここでの主な重要ポイントはほとんどの場合をカバーする― より短くより一般的なURLプレフィックスを登録し異なるApp Clipエクスペリエンスを提供する必要がある場合にのみより詳細なURLを登録できることです
App Store ConnectでのDefaultおよび Advanced App Clip Experiencesの― セットアップの詳細については「App Store Connectの新機能」セッションを参照してくださいまた App Clipカードのデザインに関するベストプラクティスについては「優れたApp Clipをデザインする」のセッションを参照してください
App Clipへのリンクを処理する最後の手順に進みましょう Smart App Bannerを設定してApp Clipを開きます
これはこのバナーが設定されている WebページのURLが送信されたときに Safariまたはメッセージで WebページからApp Clipを開く方法です
以前にAppのSmart App Bannerを設定したことがあれば Appの識別子を指定するために WebページのHTMLに追加する― apple-itunes-app タグをよくご存知だと思います App Clipにこのバナーを設定するにはコンテンツ属性app-clip-bundle-idを App ClipのバンドルIDに設定します app-id属性も引き続き設定する必要がありますそうすることで iOS 14よりも古いシステムのユーザに対しフルAppへのリンク動作にフォールバックします
Safariはバナーを表示する前に― WebサイトとApp Clip間のドメインの関連付けを確認します
デフォルトではユーザがSmart App Bannerの「Open」ボタンをタップするとこのApp Clip用に構成されたデフォルトのApp Clipカードが表示されます
ただしこのURLをAdvanced App Clip エクスペリエンスに登録するとエクスペリエンスのメタデータをカスタマイズしてバナーでユーザによりわかりやすいタイトルを表示しこのApp Clipが実行するタスクに合わせた App Clipカードを取得できるようになります
App Clipのリンク処理について私たちがお話したことをお見せするため同僚のルーミンにデモをお願いしますルーミンエイダ App Clipへのリンクに関するすばらしい紹介をありがとう App Clipチームのエンジニアであるルーミンです本日は App Clipへのリンク方法をお見せします物理的またはデジタルの呼び出しを介してユーザをApp Clipにリンクするには最初に関連ドメインを設定する必要があります私の同僚であるエイダが先ほど述べたようにリンク処理のためにWebサーバ―と App Clipプロジェクトの両方を構成する必要がありますそれではまずWebサーバーから始めましょう
ここに私のWebサーバーのソースコードがあります非常に単純な静的なWebサイトです私のWebサーバーのルートディレクトリの下には ./well-knownフォルダが既に作成されておりその中にapple-app-site-associationファイルがあります私のAASAファイルはユニバーサルリンクハンドオフおよびPassword AutoFillを使用した Webクレデンシャル用にすでに設定されていますここで行う必要があるのはAASAファイルを更新して App Clipにリンクすることだけです
このようにします
Webサーバーの構成が完了したので Fruta Xcodeプロジェクトに戻りましょう
App Clipをリンクするには NSUserActivityTypeBrowsingWebタイプの userActivityを処理するように登録する必要があります App ClipのWindowGroup宣言で TypeBrowsingWebの新しいonContinueUserActivity ハンドラーを追加します
その中で入ってくるURLを解析して URL内のqueryItemsを取得します
その後「smoothie」という名前の最初のqueryItemを取得しますそれが存在する場合はデータストアのselectedSmoothieIDをスムージー識別子であるそのURLパラメーターに設定します Fruta Xcodeプロジェクトに戻り「Signings and Capabilities」タブに移動しますその中に新しい機能を追加します「associated domains」を追加します
この機能を展開しプラスボタンをクリックして新しい関連ドメインを追加しますここでは「appclips:fruta.example」と入力します関連ドメインを設定したので App Clipをデバッグするための起動URLを構成しましょうこれを行うには「Target 」ポップアップボタンをクリックし「Edit Scheme」をクリックします Environment Variablesセクションには値「example.com」がすでに入力されていることがわかります
ここで必要なのは名前 _XCAppClipURLの環境変数の前にあるチェックボックスにチェックを入れることだけです
その中に App Clipが解析できるURLを入力します App Clipはsmoothie=berry-blue パラメータを取得します
エディターを閉じてデバイスでクリップをビルドおよび実行します
ほら私たちのAppは Appの起動URLを自動的に解析し Berry Blueスムージーに移動しました注文し Apple Payで支払います
そして私の注文ができ上がるのを待ちます
どうやら私のスムージーが出来上がったようです
スムージーを美味しく楽しみたいですがまだデモの続きがあります私はすでにFrutaAppを App Store Connectに送信しておりエイダが先ほど説明したフローを使用して App Store Connectで App Clipカードエクスペリエンスを構成しているためこのNFCタグでスマートフォンをタップすると App Clipカードが表示され物理的な呼び出しでここでクリップを起動できます
別の方法として同僚のエイダが前半でご説明したように SafariのSmart App Bannerを使用する方法があります
今 Webサイトのソースに戻りました index.htmlファイルで App Clipに新しいメタタグを追加するだけです
コンテンツとして「apple-itunes-app」と「app-clip-bundle-id」という名前を指定しました iOS 14より以前のiOSリリースを実行しているユーザが引き続きSmart App Bannerを見ることができるよう app-idパラメーターを保持していることに注意してくださいそしてユーザにApp StoreからAppをダウンロードするよう通知します
いいですね変更をサーバーにプッシュした後スマートフォンに戻り Safariでfruta.exampleに移動します
ご想像のとおり― fruta.exampleは.exampleドメインであり非売品ですが今年は多くの制作予算があります皆様方は爽快な14時間のドメインオークションマラソンに参加することができますもちろん以前と同じように Webページのメニューを閲覧することもできますがページの上部に新しいSmart App Bannerがあります「Open」をタップすると NFCを介して物理的に呼び出したときと同じ App Clipカードが表示されます
「Open」をタップすると再びApp Clipが表示されます
これは App Clipへのリンクに関する簡単なデモですありがとうございましたエイダに戻ります App Clipでリンクを設定する方法を見せてくれてありがとうルーミンそのBerry Blueのスムージーはとても爽やかでしたね
簡単に説明したいことがもう1つありますそれは App Clipのベータテストです
AppとApp Clipの両方を含むビルドを App Store Connectに配信した後 TestFlightで App Clipのテスト呼び出しポイントを追加する新しいApp Clipセクションを見つけてくださいそうすることでベータ版テスターはさまざまなApp Clipエクスペリエンスの URLをテストできます「Add App Clip Invocation」をクリックして
ベータ版テスターに試してもらいたい App ClipエクスペリエンスのタイトルとURLを設定します
App Store Connectでの App Clipのテストと送信の詳細については「What's New in App Store Connect」セッションをご参照ください
要約するとこのセッションでは新しいApp Clipサービスタイプに関連付けられたドメインを設定し App ClipでWebブラウジングのNSUserActivityを処理することにより App Clipへのリンク処理の方法そして
App Store ConnectでDefailt およびAdvanced App Clipエクスペリエンスを構成する方法 App Clipエクスペリエンスの登録時に使用する URLのベストプラクティスを示しました
そして最後に App Clipをテストするための TestFlightの新機能についてご説明しました
ご覧いただきありがとうございましたあなたが作成したApp Clipを見られるのを楽しみにしています

5:04 - Update the apple-app-site-association file

{
    "appclips": {
        "apps": [ "ABCDE12345.example.fruta.Clip" ]
    },
 
   ...
}

6:17 - Configure app clip for link handling (SwiftUI app life cycle)

import SwiftUI

@main
struct AppClip: App {
    var body: some Scene {
        WindowGroup {
           ContentView()
              .onContinueUserActivity(NSUserActivityTypeBrowsingWeb) { userActivity in
                  guard let incomingURL = userActivity.webpageURL,
                        let components = NSURLComponents(url: incomingURL,
                            resolvingAgainstBaseURL: true) 
                  else {
                      return
                  }

                  // Direct to the linked content in your app clip.
              }
        }
    }
}

6:54 - Configure app clip for link handling (UIKit scene-based life cycle)

// Handle NSUserActivity in UISceneDelegate.

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    func scene(_ scene: UIScene, continue userActivity: NSUserActivity) 
    {
        // Get URL components from the incoming user activity
        guard userActivity.activityType == NSUserActivityTypeBrowsingWeb,
            let incomingURL = userActivity.webpageURL,
            let components = NSURLComponents(url: incomingURL, 
                resolvingAgainstBaseURL: true) 
        else {
            return
        }

        // Direct to the linked content in your app clip.
    }

}

14:35 - Configure the Smart App Banner to open app clip (HTML)

<meta name="apple-itunes-app" 
    content="app-clip-bundle-id=com.example.fruta.Clip,
    app-id=123456789">

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC23

WWDC21

WWDC20

WWDC19