App Clipのストリームライン化

App Clipのストリームライン化

好きな清涼飲料水の注文から駐車料金の支払いまで、「いまこの時」の体験をユーザーに提供するにはApp Clipが最適です。目的に特化し一貫したApp Clipを構築するためのガイドラインとベストプラクティスを共有し、App clipsの通知や位置確認といった技術を活用することで決済体験を簡素化、App ClipからフルAppへの移行をサポートする方法もお見せします。このセッションを活用するために、「App Clipの紹介」と「App Clipを設定し、リンクする」を先に見ておくことをお勧めします。

リソース
関連ビデオ

WWDC20
ダウンロード

こんにちは WWDCへようこそ “App Clipのストリームライン化” ようこそ　私はヨンジュンです App Clipsチームのエンジニアです今日は同僚のルーミンと共に App Clip体験を簡略化する方法について話しますご存じのとおり App Clipはアプリケーションのほんの一部です軽く必要な時に瞬時に使えます App Clip体験用に登録したURLによって起動しますまたユーザーは体験中にアプリケーションを簡単に入手できます今日は３つのテーマについてお話ししますまずはApp Clipの設計･構築のベストプラクティスについてです次に App Clipで決済の効率化を行う事例を紹介します最後にユーザーを― App Clipからアプリケーションに移行させやすくする技をお伝えします
ベストプラクティスについて話しましょう
App Clipの要はスピードです App Clipとのインタラクションは速く的確でなければなりません App Clipは不可欠なタスクと― 目前のタスクに必要な特定の機能に集中する必要がありますその他の幅広い複雑な機能はフルのアプリケーションに任せます
App Clipを立ち上げた時点ですぐに使えなければなりません迅速な初期体験に必要なアセットをすべて盛り込んでくださいスプラッシュ画面は入れないでくださいタスク開始前にユーザーにダウンロード待ちをさせないようにしましょう
アカウント作成は複雑で時間を要する面倒なタスクですサインアップを促すのはユーザーがタスクを終えてからにしましょう
ユーザーデータを利用したい場合は必要になった時点で許諾を求め― その理由を明確に説明してください
ユーザーがアプリケーションにアップグレードすると― App Clipと置き換わりますアプリケーションも App Clipと同様の効率的な体験を提供しなければなりませんそしてApp Clipの名称とアイコンは必ずアプリケーションと同じにしてくださいそうすればユーザーは一貫性のある体験ができます
App Clipの設計についての詳細は “Design Great App Clips”をご覧ください
App Clipを構築するにはアプリケーションのXcodeプロジェクトに新規ターゲットを追加する必要があります
アプリケーションには既にアセットとクラスがあり― 中にはApp Clipと共通のものもあります
体験に必要な全リソースを見極め App Clip appのバンドルにまとめてください App Clipが小さいほどユーザーに速く届くので必要なものだけを追加してください
アプリケーションとApp Clipの両方で使っているアセットを共有アセットカタログにまとめましょうクラスとローカリゼーション文字列ファイルを整理しアプリケーションとApp Clipの両方で共有できるようにしてください “Appleでサインイン”はユーザーのアカウント取得には最善の方法ですそれ以外の認証連携ログインシステムがサービスでサポートされている場合は ASWebAuthenticationSessionがサードパーティのサービスを認証する軽量のソリューションですユーザーをApp Clipに留めアプリケーションへの切り替えを要求しません
アプリケーションのアカウントを既に持っているユーザーに対してはユーザー名とパスワードのログイン機能も提供すべきです App ClipはPassword AutoFillに対応しているのでログインがとても簡単です
ユーザーがパスワードで App Clipにログインした場合は “Appleでサインイン”へのアップグレードを― フルのアプリケーションの起動時に提案してみましょう
ユーザー名とパスワードで最善のサインインをサポートする方法については “What's New in Authentication”をご覧くださいそして“Appleでサインイン”と強力なパスワードアップグレードの提供方法については “Securing Accounts with Upgrades to Sign in with Apple and a Strong Password”をご覧ください
App Clipはつかの間の体験ですユーザーがプライバシー保護について何の不安もなく試せることが大切です
機密性の高いユーザーデータの中には App Clipでは使えないものもあります App Clipの軽くて速い体験には不要ですしそれに関わる機能を使いたい時はいつでもユーザーにアプリケーションの入手を促せばよいのです App Clipはカメラマイク Bluetoothへのアクセス権限を要求できます
高速のストリームライン体験を保つためユーザーがアプリケーションを入手した時にこの権限データを転送します再度要求せずに済むからです App Clipとアプリケーションプライバシーの詳細については “Build Trust Through Better Privacy”をご覧ください
日々さまざまなiOSアプリケーションで決済が使われています一般的な決済には複数の段階があります例を見てみましょうスムージーを注文したいとしますスムージー店に入り　NFCタグをタップし FrutaのApp Clipを立ち上げます
私の入ったスムージー店を特定するため App Clipは私に位置情報取得の許諾を求めます
次に App Clipが注文用にメニューを表示します
好きなスムージーを選んで支払いをします
するとApp Clipはスムージーができた時に通知を送る許諾を私に求めます最後に App Clipは次回の割引を提示しサインアップまたはサインインを勧めてきます段階がとても多いですこのように改善できないでしょうか
まずは位置情報です App ClipはNFCタグなどの物理的なタグをトリガーにして起動できます
スムージーの例で言えば NFCタグのURLでどのスムージー店かを特定できますそれによって店舗の情報を取得し正しいメニューを表示し支払いを受けますしかしタグが間違った店にあったらどうでしょうあるいは誰かがこの店にわざと異なるタグを設置したら？混乱を招き詐欺につながる可能性さえありますそれを防ぐにはユーザーがタグをスキャンした時本当にその店舗にいるかを確認すべきです
そのためにはユーザーの位置の取得が必要ですその情報を使って店舗の位置と一致するかを確かめます
場所の確定ができれば十分に実現できます位置情報にフルでアクセスする必要はありません
ユーザーはApp Clipカードがその実行を許可する権限を持っています
App Clipが物理的なコードからペイロードを受け取るとペイロードが特定の場所で入手されたかをシステムに確認しますすると“はい”か“いいえ”の返答が得られますプロンプトは不要です
位置確認を有効にするには NSAppClipRequestLocationConfirmationのキーをInfo.plistに追加してください
App Clipが起動し NSUserActivityからペイロードを取得したら― 座標と半径を使ってコードを取得すべき領域を準備します半径は500メートルまで設定できます
最後にconfirmedAcquired(in:region) APIをプログラムしてくださいクロージャが結果を教えてくれますこれが位置情報確認です
次に支払いですアプリケーションと同様 App Clipでもあらゆる支払い方法が使えます Apple Payを使えば迅速かつ安全に購入ができますクレジットカード番号の入力も不要です支払い体験を高速化する優れた手段です
通知を使ってApp Clip使用後のユーザーとつながることができます昨今通知を送るにはまず許諾を求める必要があります
App Clipの通知を使えば１回の起動につき８時間後まで許諾を受け取れます
ユーザーはApp Clipカード上で変更できます起動後通知を送れますプロンプトは必要ありません App Clip起動中はいつでも一般的な許諾を要求できます
App Clipの通知を有効にするには NSAppClipRequestEphemeralUser NotificationをInfo.plistに追加してください
App Clipカードでユーザーが許可を与えたかどうかを知るには通知設定のauthorizationStatusを確認してください
最後にサインインです “Appleでサインイン”はアカウント作成や既存のアカウントへのサインインの際に秘密が守られる便利な方法ですユーザーが既にアカウントのパスワードを持っている場合は AuthenticationServices APIを使えば― ログイン画面の表示することもなくサインインを効率化できます
以上の改善策をすべて統合すると― 決済体験ははるかにスムーズです
ユーザーはApp Clipを持っていていつでも簡単にアプリケーションを入手できます iOSはその機会をユーザーに何度も提供します
App Clipを有効にすると名称やアイコン App Storeリンクを含むアプリケーションバナーを少しの間表示しますバナーをタップするとApp StoreにつながりアプリケーションをインストールできますユーザーはApp Clip設定パネルからもアプリケーションを入手できます App ClipはビューにStoreKitやSKOverlayを埋め込むことも可能ですユーザーがタスクを終えた後にオーバーレイを表示すると最も効果的でしょう例えば支払い確認ページに並べて配置してはどうでしょう
SKOverlayをApp Clipに追加するには appStoreOverlay修飾子を使い AppClipConfigurationで設定してください SKOverlayの詳細については “What's New with In-App Purchase”をご覧ください
購入リストや購入履歴などのユーザーデータを App Clipからアプリケーションに渡したい場合 Secure Application Groupを使えば可能です
Secure Application Groupには App Clipとの間でのみアクセスできますユーザーがアプリケーションをインストールすると App Clipが削除されアプリケーショングループがアプリケーションに転送されます
ユーザーは既にアプリケーショングループで App Clipにサインインしている場合自動的にアプリケーションにサインインできます手順を説明しますユーザーがApp Clipで “Appleでサインイン”でログインしたら userIDをファイルまたはデータベースとして sharedAppGroup内に保存します
ユーザーがアプリケーションにアップグレードした後アプリケーショングループに保存された userIDを読み込みますそして ASAuthorizationAppleIDProvider()を使ってuserIDを検証しますユーザーが既に App Clipでサインインしていた場合はシームレスにアプリケーションへサインインできます
ここでルーミンに交代しデモをしてもらいますルーミンヨンジュン App Clip体験の簡略化の説明をありがとう App Clipsチームのエンジニアルーミンです今日はApp Clipを簡略化する方法のデモをします簡略化されていなければ App Clipを起動したユーザーには次のような画面が表示されますその場で位置情報や通知のアクセスを許可するかを決めなければなりませんストレスのない体験とは言えませんではこれらの許諾要求を簡略化する方法を考えましょうまずは通知です App Clipはアラート表示行うことなく８時間は一時的に通知を送れるよう要求できます “Fruta”のXcodeプロジェクトを開きましたまずApp ClipのInfo.plistを確認します NSAppClipDictionaryを開きブーリアン値を設定しましょう NSAppClipRequestEphemeralUser Notificationを“Yes”と設定します次にFrutaClip.swiftに戻り通知の認証を求める前に App Clipが既に一時的な通知を認めるステータスになっていることを確認します
これはiOS 14でApp Clipに導入された新しい値です既に一時的な通知を認めるステータスを取得していればユーザーにアラートの許可を得る必要はありません Clipをビルドしデバイスにインストールしましょう
位置情報のプロンプトは残っていますが通知許諾のプロンプトはなくなりました確認しましょう設定に進み Frutaの通知設定を見ると “８時間後にオフ”と表示されますこれはFrutaのApp Clipに物理的な起動に紐づく８時間の一時的な通知の許可を与えられたことを示しています偶然にもスムージーができたようです一時的な通知が機能していることも確認できました次に NFCやQR コードなど物理的な起動方法で立ち上げた場合 App Clipは単発の位置情報確認を要求できます設定を確認しましょう Info.plistのNSAppClipDictionaryでの一時的な通知の設定方法と― 位置情報確認のための作業はよく似ています今回は AppClipRequestLocation Confirmationのブーリアン値を “Yes”と設定しますそしてFrutaClip.swiftに戻ります Core Location APIを使えば既存のコードを削除して位置情報の更新を明示的に要求できます既にプロジェクト設定でAppClip.frameworkにリンクしているのでここにフレームワークをインポートします
次に handleUserActivityで URLから認証するため appClipActivationPayloadおよび位置の緯度と経度を取得します
この後確認したい領域をインスタンス化します
そしてpayloadの confirmAcquired(in: region)を呼び出しましょう
次にユーザーが領域内にいる時のみ Apple Payの稼働を許可します
もう一度App Clipをビルドし実行します
Fruta本社のQR コード発送チームが QR コードの印刷で― クパチーノ店とサンフランシスコ店のものを混同してしまいました位置情報確認がなければ何も知らない顧客が誤って他人のスムージーの支払いをしてしまうかもしれませんここで良い点は位置情報確認が我々を守ってくれることです位置情報確認がどのように自分や顧客の動きを防御するのかを見てみましょう私は今クパチーノ店にいますこのサンフランシスコ店の QR コードをスキャンします
App Clipを立ち上げて注文しようとすると位置情報確認が機能してスムージーの支払いはできなくなりました私がFrutaの店舗所在地であるサンフランシスコにいないからですではXcodeに戻り Xcodeを使ってサンフランシスコの中心地にいるとしてデバイスのシミュレーションをしますテレポーテーション技術を使い光の速さで長距離を移動しました同じQR コードを再びスキャンしましょう
今回はApp Clipを開くと普段どおり支払いに進めます
最後に App Clipからアプリケーションへの認証情報の移行についてです同僚のヨンジュンが説明したように既に安全なグループコンテナを設定しアプリケーションとApp Clip間で共有しました OrderPlaceView.swiftを開きます
“Appleでサインイン”が成功したらグループコンテナに認証情報を書き込みます
ユーザーが簡単にフルアプリケーションにアップグレードできるようこの機にこそStoreKit overlayを設定するといいでしょう
“Appleでサインイン”が成功した直後とユーザーが決済を完了した後にも表示させましょうフルアプリケーションを立ち上げる時コードを追加して FrutaModel.swiftに認証情報を移行できます
App Clipではなくメインのアプリケーションをビルドする時のみアカウント情報を移行しますグループコンテナから保存したuserIDを読み込みましょう新規のASAuthorizationAppleIDProvider()をインスタンス化し認証状態を取得しますもう一度 Clipを実行しましょう
今回は注文をします
注文の品が準備できたら “Appleでサインイン”します
ユーザーにとってこれはフルアプリケーションを取得し― ログイン情報を自動的に移行する絶好の機会ですそこで先ほどヨンジュンが説明したように UI SKOverlayを追加したのです
アカウント移行の処理に関してアプリケーションに加えた変更はまだApp Storeに提出されていませんビルド･実行しフルアプリケーションへのアップグレードをシミュレーションしましょうターゲットスキーム選択で― フルアプリケーションを選びデバイスでビルド･実行します
ご覧のとおり自動的にログインされポイントが表示されています一時的な通知と単発の位置情報確認の設定方法についてお話ししました App Clipからフルアプリケーションへのユーザーデータ移行についても説明しました “App Clip体験の簡略化”のデモは以上ですヨンジュンにつなぎますありがとうルーミン位置情報確認とApp Clip通知の使い方がよく分かりましたこの動画では App Clipの設計と構築のベストプラクティスと― App Clipの決済を簡略化する方法と― ユーザーがアプリケーションに移行しやすくなるアイデアをお伝えしましたありがとうございました WWDCをお楽しみください

7:53 - Confirm a physical code's location.

import AppClip

guard let payload = userActivity.appClipActivationPayload else {
    return
}

let region = CLCircularRegion(center: CLLocationCoordinate2D(latitude: 37.3298193,        
    longitude: -122.0071671), radius: 100, identifier: "apple_park")

payload.confirmAcquired(in: region) { (inRegion, error) in

}

9:24 - Query if user has granted app clip notification on app clip card.

import UserNotifications

let center = UNUserNotificationCenter.current()

center.getNotificationSettings { (settings) in
   if settings.authorizationStatus == .ephemeral {
        // User has already granted ephemeral notification.
    }

}

10:49 - Embed SKOverlay to your app clip

import SwiftUI
    import StoreKit

    struct ContentView : View {
        @State private var finishedPaymentFlow = false

        var body: some View {
            NavigationView {
                CheckoutView($finishedPaymentFlow)
            }
            .appStoreOverlay(isPresented: $finishedPaymentFlow) {
                SKOverlay.AppClipConfiguration(position: .bottom)
            }
        }
    }

11:32 - Save user ID in app clip's secure app group.

// Automatically log in with Sign in with Apple
import AuthenticationServices

SignInWithAppleButton(.signUp, onRequest: { _ in
}, onCompletion: { result in
    switch result {
    case .success(let authorization):
        guard let secureAppGroupURL = 
            FileManager.default.containerURL(forSecurityApplicationGroupIdentifier:
                "group.com.example.apple-samplecode.fruta")
            else { return };
        guard let credential = authorization.credential as? ASAuthorizationAppleIDCredential 
            else { return }
        save(userID: credential.user, in: secureAppGroupURL)
    case .failure(let error):
        print(error)
   }
})

11:55 - Automatically sign in users to your app if they have signed into your app clip.

import AuthenticationServices

let provider = ASAuthorizationAppleIDProvider()
guard let secureAppGroupURL =
    FileManager.default.containerURL(forSecurityApplicationGroupIdentifier:   
        "group.com.example.apple-samplecode.fruta")
    else { return };
let user = readUserID(in: secureAppGroupURL)
provider.getCredentialState(forUserID: user) { state, error in
    if state == .authorized {
       loadFavoriteSmoothies(userID: user)
   }
}

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

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

リソース

関連ビデオ

WWDC20