Configure and link your app clipsを見たのでメモです。このセッションにはサンプルコードもついているので合わせて見ると良いと思います。

※ここに出てくるスクリーンショットは、全て上記の動画のものです。

概要

App Clipを使えば、ユーザは簡単かつシームレスにアプリを体験できる。このセッションでは以下のことを説明している。

App ClipのURLの扱い方
App Store Connectで設定する方法
スマートアップバナーを使ってApp Clipを起動する方法
App ClipをTestFlightで扱う方法

App Clipの使用例

スムージースタンドでは以下のようなシーンが考えられる。

NFCタグに触れる → 端末の画面下部にスムージー注文用のApp Clipカードが表示される → 開くボタンをタップする → App Clipが起動する → スムージー注文ページに遷移する → Apple Payで購入する → スムージーを受け取る

このようにNFCタグにApp Clipで使うURL情報を書き込んでおくと、ユーザがタップしたときにNSUserActivityを経由してURL情報が渡され、直接注文ページを開くことができる。

App Clipの起動方法いろいろ

NFCタグ：URLが記録されたタグを読み込み
QRコード：URLが記録されたコードを読み込み
地図アプリ：プレースカードのApp Clip URLをタップ
Siri：位置情報ベースのサジェストをタップ
Safari：バナーをタップ
iMessageアプリ：ウェブページのURLを送信したときに表示されるバナーをタップ

Appleは、App Clip用のビジュアルコードを作成できるツールを今年後半にリリースする予定。

設定手順

大きく分けると以下の3つの手順を踏む。

Webサーバ上の設定の変更とApp Clipプロジェクトの作成
App Clipカードの設定（App Store Connect上でのデフォルト設定）
WebページにApp Clipを表示するためのスマートバナーを設定

Webサーバ側の準備

WebサイトとApp Clipの関連付けは、Universal Links対応のときと同じようにapple-app-site-associationファイルを使う。今回新たにappclipsの項目を追加する。

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

   ...
}

App Clipプロジェクトの準備

Xcodeでプロジェクトの設定に移動し、Signings & Capabilities → Associated DomainsにApp Clipのドメインを追記する。

App ClipがSwiftUIで作られている場合は、以下のようなコードになる。NSUserActivityからwebpageURLを取得している。

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.
              }
        }
    }
}

ユーザがApp Clipから普通のアプリにアップグレードした場合、App Clipのリンクを経由するとApp Clipではなくアプリが開かれることになる。そのため、アプリにもユニバーサルリンクを処理するための同様のコードを用意する。

もしApp ClipがUIKitのSceneDelegateライフサイクルを使用している場合、以下のようにハンドリングする。

// 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.
    }

}

associated domainを設定してNSUserActivitiesを扱う方法については「What's New in Universal Link」セッションを参照する。

デバッグ

XcodeでApp Clipを試したいときは、スキームエディタ→Argumentsタブから環境変数を設定する。この状態でRunすると、指定したURLで起動されるようになる。

App Clipカードの表示要件

App Clipカードに載せるメタデータを考えるときは、以下に従うとより適切な表示ができる。

画像はApp Clipアクションにマッチしたものにすると良い。

App Store Connectでの設定

アプリとApp Clipの両方を含むビルドをApp Store Connectに送ると、App Store Connect上でApp Clipの設定をするセクションが表示されているはず。ここでデフォルトのApp Clip設定をする。予め定義されたアクションのリストがあるので、それも選択する。

Safariやメッセージ以外からもApp Clipにアクセスできるようにしたい場合は、Advanced App Clip ExperiencesセクションのGet Startedをクリックし、高度な設定を行う。この高度な設定をすることでNFCタグやQRコードなどの物理的な方法からも呼び出しが可能になる。

いくつか画面を進めるとこのようなページが表示される。複数のApp Clip Experienceを設定することもできる。

次のページでは画像やタイトルなどを指定する。

App Clipの複数設定

レストランアプリの場合、注文用App Clip Experience（melamela.example/order）と予約用App Clip Experience（melamela.example/reservation）を設定することもできる。

ベストプラクティス

App Clipは可能な限り全てのパスを登録する必要はなく、汎用的なプレフィックスを持ったURLを登録すれば良い。

例えば自転車のオンラインレンタル屋さんの場合。
ある自転車を借りるときのURLは https://bikesrental.example/rent?bikeID=2 になっている。自転車にはそれぞれIDが振られており、予約するときはそのIDを指定する仕様になっている。この場合、App ClipのURLとして登録するのはhttps://bikesrental.example/rentの一つで良い。

次に大手チェーンのカフェ屋さんの場合。
ある店舗のURLは https://brighteggcafe.example/store/campbell になっている。全ての店舗で https://brighteggcafe.example/store/ までは共通なので、このURLを登録すれば良い。

もしこのコーヒーショップのクパチーノ店舗だけ特別なApp Clip体験を提供したい場合はhttps://brighteggcafe.example/store/cupertino を登録し、異なる画像やタイトルを登録すれば良い。

つまり、基本的には全てをカバーする一般的なURLプレフィックスを登録し、異なる体験を提供したいときだけ、より具体的なURLを登録すれば良い。より高度な設定については「What's New in App Store Connect」にて説明される。デザインのベストプラクティスについては「Design Great App Clips」にて。

Webページでのスマートアプリバナー設定

以下のようなメタタグを書く。iOS 14よりも古いユーザの場合は従来のスマートアプリバナーとして使えるように、app-idも忘れずに指定する。

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

バナーの開くボタンをタップすると、デフォルトのApp Clipカードが表示される。もし高度なApp Clip Experience設定をしていたら、その設定に従った表示が出てくる。

デモ

スムージーアプリの実装例はこんなかんじ。

Test Flight

アプリとApp Clipの両方を含むビルドをApp Store Connectに配信した後、Test FlightタブからApp Clipセクションを見つけて、「Add App Clip Invocation」をクリックする。タイトルとURLを設定すればTest Flightでテストできるようになる。

App Store Connectでのテストの詳細については「What's New in App Store Connect」にて。

App Clipの概要と設定方法

概要