App Clipの紹介

こんにちは WWDCへようこそ “App Clipの紹介” こんにちは ジェームスです ルーミンと一緒に App Clipについて ご説明します

新しいテクノロジーの App Clipで もっと多くの人が 皆さんの アプリケーションにつながります 今回は App Clipの サンプルを使って どんな体験を創造できるか 見ていきます

App Clipを Xcodeで作成する基本を確認し― テクノロジーの概要をまとめます

App Clipの設計と 構築を始める前に App Clipについて 理解しておきましょう ここで ３つのコンセプトをご紹介します まずは 皆さんのアプリケーションです App Clipは 追加機能ですから アプリケーションは先に 用意しておきます

次に App Clip体験と 呼ばれるものです iOS 14では Webブラウザではなく App Clipで処理されるURLがあります

App Clip自体について 最後にお話しします ユーザは ネイティブアプリケーションの体験を インストール不要で得られます ２つの新しいコンセプトについて 詳しく見ていきましょう 体験の方から始めます 体験とは ユーザが― App Clipを発見し 起動するベースになります 皆さんのアプリケーションへの 新しいエントリーポイントです

これらの体験の識別には URLを使用します すでに Universal Linkを お使いでしたら App Clip URLを 扱うプロセスはとてもよく似ています 主な違いとして App Clip URLは Apple App Site Associationsファイルで 定義するのではなく App Store Connectで登録します

体験の作成とカスタマイズについては 「App clipsを設定し、リンクする」の セッションを視聴してください

App Clip体験を登録すると App Clipがストアで公開され URLで呼び出せる状態になり― QR codeやNFCタグ Safariやメッセージのリンク ビジネスの詳細やマップから 起動できます デバイスの使用方法に 関わらず 皆さんのApp Clipが 発見されます App Clipを発見してもらう ベストな方法は 今年後半に公開される 新しい App Clipコードです App Clipが利用可能である事が ひとめでわかります App Clipコードは NFCの手軽さと視覚コードを組み合わせて タップやスキャンで 優れたユーザ体験を 提供します 次に App Clipについて お話しします デベロッパの皆さんが 興味を持たれるのは アプリケーションの一部をオンデマンドで 実行する方法でしょう 魔法はありません Xcodeで 別のアプリケーションターゲットを 作成します このApp Clipターゲットに 必要なコードとアセットを含めて App Clip体験を 制御します

App Clipターゲットは アプリケーションと同じように構築しますが 対応するアプリケーションを ビルドして 一緒に審査を受けます App Clip または― 対応するアプリケーションを 別々にアップロードする事はできません

アプリケーションとApp Clipが App Storeに公開された後は 相互排他的になります 皆さんのApp Clipが ダウンロードされるのは App Clip体験を 見つけたユーザが アプリケーションをインストールして いない場合です そうでなければ アプリケーションが優先です アプリケーションをインストールした ユーザは その体験が継続することを 期待しているからです

あとは― App Clipが提供するのは 迅速で瞬時の体験なので なるべく小さくして ダウンロードと起動は 一瞬でできなければなりません Thinning後のサイズは 10MB未満でなければなりません 起動後すぐに使うアセットと ダウンロードが必要なデータ量の バランスを考慮する必要があります 体験は十分 ご説明できましたので ここで 例を見てみます このフローチャートでは アプリケーションの画面を ボックスで表しています 間の線はユーザの動きです これは 多くのアプリケーションの構造に 当てはまります 左の 高レベルの分岐から 開始します 開始ページやタブバーです 右へ行くに従い ナビゲーションスタックを経て ゴールに向かいます このような階層構造は 複雑なアプリケーションを たどりやすくしてくれます しかし App Clipの体験を 設計するときには このフローを 大胆に 再考していただきたいのです まずは App Clipの 強みを発揮できる アプリケーションの機能のみを含める事から始めます

App Clipは コンテキストの中で かつ 必要なときに発見されます ユーザが瞬時に使える機能を考えれば ディレクトリ一覧や プロファイル画面などは 意味がありません

次に App Clip体験に 使用するURLが ディープリンクになることを考慮します App Clipでは 最上位の ナビゲーション要素を省略します タブバーなどです 代わりに 個別の体験に 別々のURLを使用します

たとえば ある体験では 商品を注文して届けてもらうか 今いる店内で購入します 複数の店舗がある場合は 今いる店舗を URLで識別します これで 店舗選択をスキップして すぐに本題に入れます

最終的に 提供したいのは ユーザに合ったフローで ゴールへと導くことです とはいえ あるApp Clipの 機能は１つに限定せず 設計次第で 多くのことができます ただし フォーカスするのは 一度に１つです 理論としては十分です ここまでの内容のデモを ルーミンが担当します App ClipをXcodeで 作成してもらいます

App Clipの 紹介をありがとう ジェームス App Clipチームの ルーミンです アプリケーションから App Clipを作成するデモをします

これが私のアプリケーション Fruitaです スムージーのメニューを ブラウズしたり 注文したり お気に入りを記録したり ポイントを貯めたり レシピ検索もできます アプリケーション全体の機能は どれもよいのですが フォーカスしたいのは App Clipで 効率よく注文する体験です 機能はすべて メニュータブにあります

早速 App Clipを 作成しましょう

スムージーのXcodeプロジェクトを開き 新しいターゲットを作成します 新しいApp Clipターゲットの 作成を選び 次に進みます 名前は“Fruita Clip”で― これで 自動的に元の アプリケーションに埋め込まれます Xcodeが自動的に名前と バンドル識別子を App Clipにも展開します

デバイスで実行していきます

“ビルド完了” App Clipの ビルドと実行は一瞬です ビルドと実行ができました まだ App Clipは 空のひな形の状態です “Hello, world!”ができました コードとリソースを App Clipに追加します

Fruita アプリケーションは nutrition facts に 依存性があります App Clipにも追加します App Clipターゲットで 新しい依存性を追加します nutrition facts の依存性を追加します

次に アセットカタログを作成し アプリケーションとApp Clipで アセットを共有します

新しいファイルを作成します 新しいアセットカタログの 作成を選び 名前を“Shared Assets”にします

これを Fruita Clipの ターゲットメンバーシップに追加します ２つのアセットカタログを 並べて見てみましょう

アプリケーションとApp Clipの 両方にアイコンが必要なので アプリケーションアイコンを アセットカタログから Shared Assetカタログに ドラッグします 色 材料 スムージーも同じです これらも全部ドラッグして― レシピはApp Clipに 含めないので そのままにします

コードをグループ化していますので グループごとに見ていきながら― App Clipターゲットに― 必要なSwiftソースファイルだけ 追加しましょう “Model”は必要なので ターゲットメンバーシップで App Clipに チェックを入れます “Store”は レシピ追加の ロック解除用ですので 除外します “Orders” これは App Clipにも必要です これもチェックを入れます ただし App Clipに タブバーは不要です 最初のタブの 注文にフォーカスします アプリケーションのメインメニューにあります ですので ナビゲーションコードは除外します “Smoothies” これは必要ですからチェックします

“Recipes” これは除外で “Ingredients” これは必須です あと “Components”と“Styles”も Visual Effect View ラッパーも含めます Fruita Clipチェックボックスを オンにします これで Clipに必要なコードは 全部ですね ビルドしましょう “ビルド失敗” ビルドエラーがあるようです なぜでしょう？ 実は OrderPlacedView.swiftが “Store”を参照しており 先ほどApp Clipから 除外してしまったため ビルドできませんでした “Store”への参照を コンパイル条件から 外す必要があります App Clipターゲットの ビルド設定に戻ります

Swiftコンパイラ カスタムフラグの セクションで 新しいカスタム条件を定義します “APPCLIP” 全部大文字です デバッグスキームと リリーススキームの両方です

OrderPlacedView.swiftに 戻って “Store”への参照を コンパイル条件から外します

最後に App Clipに スムージーメニューを追加します

App Clipの FruitaClip.swiftファイルで 新しいFruita Modelのインスタンスを データストアオブジェクトとして生成し

環境変数として コンテントビューに渡します

コンテントビューのボディで プレースホルダーの “Hello, world!”を削除し ナビゲーションビューを作成します

ナビゲーションビューに SmoothieMenuを含めます

では ビルドと実行です

やった App Clipを 実行できました Clipはうまく動作して いるようです スムージーのメニューをブラウズして

お気に入りを注文すると―

“ご注文ありがとうございます！” “スムージーができました！” スムージーができたみたいですね いただきます ジェームスにお返しします

ありがとう ルーミン 今のデモでは シンプルな方法で コードとアセットを Xcodeの機能で共有していました アセットカタログとソースファイルを 共有できるのは Apple WatchやMac OSなど 複数の プラットフォーム向けの開発にも好都合です また 別のテーマも 取り上げていました 既存のテクノロジーを転用して 手軽にApp Clipを 作れる点です

App Clipは― アプリケーションと同じ UIフレームワークで構築します これには UIKit か新しいSwiftUIの アプリケーションのライフサイクルが含まれます 起動すると App Clip またはアプリケーションは― NSUserActivityを受け取ります App Clipで複数の 体験をサポートする場合 このアクティビティに ウェブページのURLを使用して どの体験かを把握します Universal Linkでは おなじみの方法です

拡張機能と違い App ClipはiOS SDKの どのAPIでも使えます 簡単に アプリケーションと App Clipでコードを 共有できます ただし App Clipからの 個人情報へのアクセスは限定されます 特別に必要なことは ありません リクエスト時に データへのアクセスを 確認してください

たとえば HealthKitフレームワークを 使用するソースコードを共有できますが HKHealthStoreの isHealthDataAvailableは App Clipでの実行時は 常にfalseを返します

このため isAppClip APIはありません お使いのフレームワークの ベストプラクティスに従ってください “位置情報確認” フリクションレスな体験の デザインに便利な 位置情報確認APIが 追加されました ユーザは 位置情報への フルアクセスを 初見のApp Clipに対し 許可をするのは違和感を覚えるかもしれません このAPIは プライバシーに配慮し ユーザが皆さんの思う場所に― いるかどうかを確認します

使い方やヒントを学ぶには 「App clipのストリームライン化」の セッションを視聴してください 最後に シームレスな体験が継続するよう アプリケーションがインストールされたら データをApp Clipから 移行できるAPIを提供します これには 共有データコンテナを 使用します 後ほど 少し触れます

App Clipの開発には すぐに慣れます アプリケーションと同様です ただし App Clipの開発には いくつか考慮すべき点があります まず App Clipは 管理を必要としません 必要なときに実行され 不要になれば iOSが データごと削除します また App Clipは iOSのバックアップに含まれません

App Clipでは アプリケーションのコードを オンデマンドで利用して欲しいので 非常にプライバシーを 重視しており 徹底して― 健康やフィットネスなどの個人情報への アクセスを制限しています

皆さんのアプリケーションが これらのデータを利用している場合 ユーザにインストールを お勧めすることになります

App Clipは 体験の提供にフォーカスしており 他の理由では起動できません そのため カスタムURLスキームや ドキュメントタイプ Universal Linkは 登録できません カスタムURLスキームを コールバックとして フェデレーションサインインに 使用している場合 要注意です ASWebAuthenticationSessionを 代わりに使用し コールバックに使用するURLスキームを 登録せずに済むようにします

そして お気づきのとおり App Clipには Extensionをバンドルする事はできません コンテンツブロッカーなどです アプリケーションとApp Clipの 類似点や相違点が分かったところで― デバイス上でどう連携するかを お話しします 誰かがApp Clipの QR codeを発見して スキャンするとします

その体験のアプリケーションが インストールされていないので iOSは自動的にApp Clipを 見つけてダウンロードし 起動します App Clipが実行され ユーザは先へ進みます

しばらくして App Clipが 使用されなくなると iOSはApp Clipと データコンテナ そしてキーチェーンデータを 削除します ユーザが再び この体験に出会うと このプロセス全体が繰り返されます これは重要な点です デバイスにApp Clipの データを保存できますが 一時キャッシュのように扱います システムの判断で 削除される 可能性があるためです

話を戻して 同じApp Clip体験が 繰り返し利用される場合を 考えてみましょう お気に入りのカフェで 注文するApp Clipは 毎日使うかもしれません

この場合 App Clipの 寿命が延びて 削除されないかもしれません よく利用することを iOSが検知するためです App Clipで 前回の注文をキャッシュすれば お勧めとして表示し 次回の注文を短縮できます それほどApp Clipを 気に入った人は アプリケーションをインストール したくなるでしょう インストールされると iOSは自動的に カメラや― マイク Bluetoothへの アクセス許可を移行します App Clipから移行する データがある場合 新しいタイプの グループデータコンテナを使います これは自動的に App Clipと 対応アプリケーションの両方で 利用可能になります このためには 移行したいデータの保存には この共有データコンテナを使い App Clipの標準コンテナは 使わないようにします

ユーザがアプリケーションを インストールすると ここでも iOSがApp Clipと データを削除しますが― このグループコンテナは アプリケーションがデータを コピーできるよう しばらく残ります

優れたApp Clipの構築には 優れたアプリケーションと同様の ベストプラクティスとテクノロジーを用います たとえば Apple Payです クレジットカードを 探す必要なく 支払いができます 通知は スムージーのできあがりや 駐車場のメーター残量を知らせます

SwiftUIはApp Clipに 非常に適しています 小さく 再利用可能なコンポーネントは アプリケーションと― App Clipターゲットの間で 共有するのに向いています

今年新たに公開されるのが SKOverlay SwiftUIでは App Storeオーバーレイモディファイアです このAPIは App Clipの 体験に満足してくれたユーザを 完全版アプリケーションに誘導する ベストな方法です 詳しくは WWDC2020の “What's New in In-App Purchase”を 視聴してください 最後に ユーザをアカウントに 関連付けたい場合 たとえば 購入ポイントの 保存などに 認証サービスの中から ASAuthorizationControllerを使います ユーザは 簡単に 既存のパスワード付きの アカウントにサインインしたり “Sign in with Apple”で アカウントを作成できます 詳しくは WWDC2019の“What's New in Authentication"を視聴してください

まとめると App Clipは 新しいタイプのユーザ体験です 体験は オンデマンドで呼び出され アプリケーションをインストールして いない人でも 専用のApp Clip バイナリを呼び出せます ただし アプリケーションが インストールされると 体験は そちらに引き継がれます

App Clipバイナリは アプリケーションと同じ テクノロジーを使って構築するので アプリケーション作成の知識を そのまま転用できます App Clip体験は 効率的かつ直線的で 特定のタスクの達成に フォーカスします ポイントプログラムなどの機能は 任意のステップとして ゴールを達成した後に 提示します ご視聴ありがとうございました WWDCをお楽しみください