App Clipの最新情報

App Clipの最新情報です。サイズ制限、CloudKit、キーチェーンの使用方法が改善され、App Clipの構築が簡単になりましたので、是非ご確認ください。また、診断ツールでApp Clipを診断する方法や、App Store Connectを使用した高度なApp Clip体験のワークフローを自動化する方法も紹介します。

リソース

関連ビデオ

WWDC21

WWDC20

♪ ♪ こんにちは Charles Yingです App Clipの最新情報へようこそ App Clipは Appの小さな一部分でして軽くて速く見つけやすいので必要なものを必要なときに素早く手に入れられますメッセージやマップ SpotlightやSafari 世界中のQRコードや App Clipコードから見つけられますその一例がToastです ToastのApp ClipはQRコードで卓上での会計ができますレシートに印刷された既存のQRからApp Clipが開くようにも設定しました App Clipの導入によりユーザチェックアウトが早まり多くのユーザがフルAppのインストールを選択しました既存フローにApp Clipを組み込み顧客の体験を効率化することができますユーザがApp Clipをより活用できるようにする新機能と App Clipの開発をより簡単にする機能を紹介します App Clipのサイズ制限から始めましょう App Clipは軽くて速いスピード重視の設計です即座に感じられるには小さくあることが必要ですワイヤレスネットワークが 2年前よりも高速になり iOS 16では新たに App Clipのサイズを最大15MBまでにできるようになりましたそのため理想の体験を構築する余地が広がります App Clipのミニマムバージョンを iOS16に設定すると新制限が適用され 10MB以下に設定すれば iOS15以前と互換性が保たれますいずれにせよ App Clip 起動後常に追加リソースをダウンロードすることができます素晴らしい体験にはやはりスピードが重要ですユーザが常に高速回線のある場所にいるとは限らず App Clipの最適化はこれまで同様に重要です App Clip最適化については「軽量かつ高速なApp Clipの構築」をご覧ください次に App Clip体験やユニバーサルリンクが正しく設定されているか確認するシンプルな新しいツールを紹介しますその仕組みはこうです iPhoneかiPadの「Developer」設定から「App Clips Testing」の「Diagnostics」を選択しますここで URLを入力しますデバイスをXcodeに接続し Developer設定をオンにできます iOSは URLの設定を確認します正しく設定されていれば緑色のボックスが示されます

問題があればこの画面が表示され何が起こったかを正確に知ることができます Safariバナーが表示されないあるいは App Clipではなく Webページに移動するなどの問題を解決できます各診断には設定ステップをさらに詳しく説明するドキュメントへのリンクがありますこれで何が問題かを正確に把握ができます

App Clip診断では物理コード Safari iMessageを使用する App Clip体験を確認しユニバーサルリンク関連ドメインの設定も確認しますこのシンプルな新ツールで正しい設定が簡単になります

次に CloudKitです

AppがiCloudの保存データにアクセスする構成ですこれまでCloudKitは App Clipには未対応でした App Clipはデータやリソースを読むのにサーバを使う場合がありました

iOS 16からは CloudKitのパブリックデータベースに格納されたデータやリソースも読み込むことができます CloudKitが提供する全パワーとスケールを使って AppとApp Clipの両方で同じコードを共有し同じデータにアクセスできます 2つの重要な違いは App Clipはパブリックデータベースから読み取りは可能ですが CloudKitへの書きこみはできません App Clipはクラウドドキュメントとキーバリューストアも使えません App Clipが使われなくなった際 iOSがAppとそのデータを削除するというユーザへの約束を守る為です

XcodeでApp Clipのために CloudKitを有効にするには App Clipターゲットの Signing and Capabilitiesタブを開き App Clipに使用させたい CloudKitコンテナを選択しますこのCloudKitコンテナはフルAppと共有する新規または既存のコンテナです App ClipからCloudKitのパブリックデータを読む例ですコンテナの識別子で CKContainerを作成し publicCloudDatabase プロパティにアクセスします次にパブリックデータベースから必要なレコードを取得します

次にキーチェーンの移行です認証トークンや決済情報などの機密情報を App ClipからフルAppに転送したい場合 App Clipはこのデータを共有Appグループコンテナに格納することになります iOSはユーザがアップグレードする際このデータを保存します

フルAppはApp グループのコンテナを読み取りその情報をキーチェーンに保存します

しかしこのような情報を安全に保管するためにはキーチェーンが最適なのです今年からユーザがAppをインストールすると App Clipのキーチェーンに保存されているアイテムが App ClipからAppに転送されるようになりましたこれでキーチェーンに安全なアイテムを保存し Appインストール時に移動されることが可能になります共有キーチェーングループと iCloudキーチェーンには未対応ですこれによりApp Clipを使わなくなった後もキーチェーン情報が残らないユーザへの約束が守られます

キーチェーンにログイン情報を保存読み取る例を紹介します AppそしてApp Clipともにコードは同じです SecItemAddでキーチェーンに新アイテムを追加できます SecItemCopyMatchingで Keychainからアイテムを出しますアイテムにラベルを追加し App Clipによって保存されたアイテムである事をフルAppが識別可能にします

最後に App Clip Experiences APIです App Clipが成長するにつれより高度なApp Clip体験が必要になりそれぞれが独自の情報や位置情報を持つ形となりますこれらをすべて簡単に追加更新する方法が必要です App Store Connectにはこのワークフローを自動化する App Clip Experiences Web API が用意されていますこのAPIを利用して高度なApp Clip体験を追加する例を見てみましょうまず App ClipのリソースIDを取得します次にヘッダ画像をアップロードします最後に高度な App Clip体験の作成ですまず App ClipのリソースIDを探しますアイテムIDとApp ClipバンドルID を指定しWeb APIを呼び出しますそのレスポンスから後のため App ClipリソースIDを保存次に高度なApp Clip体験のためヘッダ画像をアップロードしますヘッダ画像のリソースIDを次ステップのため保存します最後に App ClipリソースIDとヘッダ画像IDで高度なApp Clip体験を作成ができます記入する箇所は 3つあります： attributes relationships そしてincludedです

attributes辞書にはアクション名カテゴリと言語高度な App Clip体験のリンクなどの情報を追加します高度な体験がマップと関連する場合 place辞書を追加します place辞書には一致するマップビジネスの場所名マップアクションマップ座標を追加します relationships辞書には App ClipリソースIDとヘッダ画像IDを追加します included辞書ではローカライズされたタイトルとサブタイトルを高度なApp Clip体験のために追加します以上です！このApp Store Connect APIを使用すれば高度なApp Clip体験の作成を完全に自動化できます App Store Connectについてより詳しく知りたい方は App Store Connect の自動化 WWDC 2020で発表された App Store Connectの新機能についてをご覧ください最後に新しいApp Clipのサイズ制限により理想的な体験を構築する余地が増えました App Clip診断ツールは App Clipとユニバーサルリンクの構成を端から端まで把握できる優れものです CloudKitとキーチェーンは多くのコードをAppと共有し開発を容易にします App Clip Experiences APIは高度なApp Clip体験を管理するためのワークフローを自動化します App Clipの開発については WWDC 2021で発表された App Clipの新機能をご確認くださいデベロッパのみなさんが素晴らしい App Clipを作ってくれましたとてもクリエイティブです！これら新機能がApp Clipの構築に役立ちますようにご視聴ありがとうございました！

4:41 - Read your CloudKit public database from your App Clip

// Read your CloudKit public database from your App Clip

let container = CKContainer.default()
let publicDatabase = container.publicCloudDatabase
let record = try await publicDatabase.record(for:
    CKRecord.ID(recordName: "A928D582-9BB6-E9C5-7881-E4EAF615E0CD"))

if let title = record["Title"] as? String,
    let description = record["Description"] as? String {
        print(“Fetched a food item from CloudKit: \(title) \(description)")
}

6:03 - Read and Write from your App Clip's keychain

// Write authentication token to App Clip keychain

let addSecretsQuery: [String: Any] = [
    kSecClass as String: kSecClassGenericPassword,
    kSecValueData as String: "smoothie-secret".data(using: .utf8),
    kSecAttrLabel as String: "foodsample-appclip"
]
SecItemAdd(addSecretsQuery as CFDictionary, nil)

// Read authentication token from app or App Clip

var readSecretsQuery: [String: Any] = [
    kSecClass as String: kSecClassGenericPassword,
    kSecReturnAttributes as String: true,
    kSecAttrLabel as String: "foodsample-appclip",
    kSecReturnData as String: true
]
var secretsCopy: AnyObject?
SecItemCopyMatching(readSecretsQuery as CFDictionary, &secretsCopy)

7:10 - Get your App Clip resource ID

# Get the App Clip resource ID

GET /v1/apps/1234567890/appClips?filter[bundleId]=com.example.foodsample.Clip

# Response

{
    "data": {
        "attributes": {
            "bundleId": "com.example.foodsample.Clip"
        },
        "id": "726ad1bb-3e1b-40eb-a986-d8a9897e4f1e"
    }
}

7:25 - Upload a header image for the advanced App Clip experience

# Upload a header image for the advanced App Clip experience

POST /v1/appClipAdvancedExperienceImages
{
    "data": {
        "type": "appClipAdvancedExperienceImages",
        "attributes": {
            "fileName": "Hero_image_US.png",
            "fileSize": 43500
        }
    }
}

# Response

{
    "data": {
        "attributes": "..."
        "id": "91c52741-832b-48a2-8935-1797655edbe7"
    }
}

7:34 - Create the advanced App Clip experience

# Create advanced App Clip experience

POST /v1/appClipAdvancedExperiences
{
    "data": {
        "type": "appClipAdvancedExperiences",
        "attributes": {
            "action": “OPEN",
            "businessCategory": "FOOD_AND_DRINK",
            "defaultLanguage": "EN",
            "isPoweredBy": true,
            "link": "https://fruta.example.com/restauraunt/simply_salad",
            "place": {
                "names": [ "Caffe Macs" ],
                "mapAction": "RESTAURANT_ORDER_FOOD",
                "displayPoint": {
                    "coordinates": { "latitude": 37.33611, "longitude": -122.00731 },
                    "source": "CALCULATED"
                }
            }
        },
        "relationships": {
            "appClip": {
                "data": {
                    "type": "appClip",
                    "id": "726ad1bb-3e1b-40eb-a986-d8a9897e4f1e"
                }
            },
            "headerImage": {
                "data": {
                    "type": "appClipAdvancedExperienceImages",
                    "id": "91c52741-832b-48a2-8935-1797655edbe7"
                }
            }
        },
        "included": {
            "type": "appClipAdvancedExperienceLocalizations",
            "attributes": {
                "language": "EN",
                "subtitle": "Fresh salad every day",
                "title": "Simply Salad"
            }
        }
    }
}