Widgetに設定とインテリジェンスを追加する

こんにちは WWDCへようこそ

“お持ちのウィジェットに 設定とインテリジェンスを追加する” 私 イアンと 同僚のケルビンがお届けします 今回はウィジェットを設定可能にする方法と 設定可能なウィジェットが インテリジェントに システムと協調する方法について お話しします

iOS 14およびmacOS Big Surの新機能として 新しいウィジェット体験が実装されました ウィジェットを使うとアプリケーションは 新しいエキサイティングな方法で 新しい情報を表示できるようになります

ウィジェットは今までより多くの場所 例えばホーム画面のページ スタックの一部 今日のビュー そしてmacOSの通知センターで 表示できます

これらのウィジェットの基盤がWidgetKitです WidgetKitを使うと それぞれが独自の ソリューションを提供する 複数のウィジェットを作成できます それぞれのウィジェットは異なる サイズとレイアウトをサポートします 実例を見てみましょう

アプリケーションを作成しました クレジットカードの取引履歴を すべて見ることができるものです 出費についての情報を見て すべての口座について 残高を追跡できます 私が一番よくやることは 残高を確認して 最近の取引を見ることです その情報がホーム画面で すぐに見られたらすばらしいことです そこで２つのウィジェットを作ります

１つ目は “最近の購入”という名前です これはカードのうちの１つについて 購入履歴を表示します ２つ目は“支払日”です これは次の支払日と 引き落とし額を示します

一度に見たい情報が １つのカードだけであることも多いので どのカードを表示するか選べる 設定を追加しました “ウィジェットを編集”をタップして カードを選択すると変更できます

ウィジェットを設定可能にしたので ユーザは“支払日”ウィジェットについて 設定が異なる複数のインスタンスを作成して それぞれで別のカードを表示できます

それでは本日お話しする 内容を見てみましょう まず ウィジェットを設定可能とする 方法の基本について 次にユーザに入力を 求めることができる情報のタイプ そしてアプリケーションからの データのインターフェイスを どのように生成するかについて お話しします

その後 ウィジェットの タイトルや内容背景の色などを カスタマイズする方法について ご説明します 最後にウィジェットを設定可能とすることで 前面表示のタイミングを 予測しやすくなることについてお話しします まず基本から始めましょう システムの最初の一歩は ウィジェット拡張です ウィジェット拡張には SwiftUIプログラムが含まれます SwiftUIはウィジェットの見た目を 構築するものです そこにはウィジェットそのものに関する メタデータも含まれます

WidgetKitとSwiftUIを使った ウィジェット拡張は すでは作成済みを前提とします まだ作成されていない方は “Meet WidgetKit”のセクションを 必ずご覧になってください

ウィジェットを設定可能にすると 何をシステムに表示するかウィジェットの裏側で ユーザが選択できるオプションの内容を 指定することができます これらの選択事項はパラメーターと呼ばれます 先ほどの“最近の購入”ウィジェットです “カード”と“カテゴリー”の パラメーターがあります カードパラメーターはユーザに 表示するカードを選択できるようにします カテゴリーパラメーターは ユーザが例えば食料品などの 特定のカテゴリーだけの表示を 選択できるようにするものです

どのパラメーターを表示するか定義するには インテントを使用します これSiriやショートカットのサポートを アプリケーションに追加する際と同様のものです インテントには指定された パラメーターのリストが含まれます インテントに入れた各パラメーターは ウィジェットの設定UIで 1つの行として表示されます

Xcode内ではインテントは Intent Definition Fileを使って宣言できます このファイルにはインテント パラメーター そしてそれらがシステムの どの部分をサポートするかが 記述されています このファイルをアプリケーションに コンパイルすると システムはインテントの情報を 読み出すことができます

インテントが定義できたら Xcodeがインテントクラスも 生成します 各パラメーターの プロパティーが入っています このウィジェットに対しては ViewRecentPurchasesIntentクラスがあり カードとカテゴリーの プロパティーが入っています

このインテントクラスのインスタンスは 実行時にウィジェット拡張に渡されます それでウィジェットは ユーザが何を設定し表示すべきか 知ることができます 次にインテントに加えることができる パラメータータイプについて説明します 前にお話ししたように インテントの定義に基づいて ウィジェットのUIが構築されます 幅広い種類の入力がサポートされていますので １つ１つ見ていきましょう パラメータータイプとして “String”を指定すると 設定UIはテキストフィールドを表示します そして“Boolean”パラメーターへ 切り替えるボタンを表示します 設定UIは様々な入力方法の 数値もサポートしています 整数については数値フィールドと 増減ボタンがサポートされています 小数については数値フィールドと 増減スライドがサポートされています

設定UIは連絡先と場所の 選択もサポートしています “Person”型は 連絡先選択画面を表示し “Location”型は 場所選択画面を表示します

設定UIはまた 一覧表からの選択もサポートしています この一覧表は静的なものも アプリケーションのコンテンツから 動的に生成するものも表示できます 動的生成のオプションについては 後で詳しくご説明します 設定UIはその他 数多くの タイプの入力をサポートします それぞれが固有のUIを持っています パラメーターは複数値を サポートします 例えばウィジェットがカレンダーからの イベントの一覧を表示する場合 インテントが複数のカレンダー項目を 選択するのをサポートするよう設定できます iOS 14の新機能として インテントが 固定サイズの配列をサポートしました これはウィジェットが決まった数の項目を 表示することをサポートする場合に有用です 決まった数を超える項目を ユーザが配列に追加できないようにします インテントエディターで項目数を ウィジェットのサイズに応じて設定できます それでは詳細な設定を ウィジェットに追加する方法について 順に見ていきましょう 最初の段階は何を設定可能とするか 見極めることです ここでも“最近の購入”ウィジェットを 例にしてみます “最近の購入”では１つのウィジェットが １つのカードしか表示できません しかし人によってはアプリケーション内に 複数のカードを持っている場合があります したがってそれを設定できるように することには意味があります

最近の購入ウィジェットを 複数表示できるようになります ホーム画面上でそれぞれが 違うカードを表示します 表示をカテゴリーで 絞り込めるようにするのも有用でしょう １つのウィジェットが交通費を表示し もう１つが食費を表示するようにできます

したがって カードを設定可能にすることに加えて カテゴリーも 設定できるようにしようと思います

これから最近の購入ウィジェットを 設定可能にする方法について説明します これがプロジェクト画面です 既にウィジェットが設定されています 現在のウィジェットは StaticConfigurationになっています

ウィジェットを設定可能にするには StaticConfigurationから IntentConfigurationへ 切り替える必要があります IntentConfigurationへ 切り替える第一歩は ウィジェットを設定するのに使用する インテントを定義することです Intent Definition File内で カスタムインテントを定義できます

このプロジェクトでは 既にファイルを作成しました ファイルはアプリケーションと ウィジェット拡張ターゲットの 両方で受付けられます

それでは左下の＋ボタンを使って インテントを作成しましょう

ViewRecentPurchasesと呼ぶことにします

次に“Intent is eligible for widgets” オプションのチェックボックスをオンにします

そうするとインテントがウィジェットを 設定するものとして動作するようになります ショートカットアプリケーションも サポートするようにしたい場合 “Intent is user-configurable in the Shortcuts app and Add to Siri”をオンにします このデモではこのオプションをオンにせず ウィジェットに集中しましょう また“Intent is eligible for Siri Suggestions” チェックボックスも 今のところオフにしておきます ケルビンがセクションの後半で ウィジェットにインテリジェンスを追加する 方法を順を追ってご説明します また このインテントのカテゴリーを “ビュー”に設定します 取引のビューを作成することが 目的だからです

それでは パラメーターリスト内の ＋ボタンを使用して カードのパラメーターを追加します 最初の段階はパラメーターの 名前を決めることです ラベルはウィジェット設定UIに 表示されます “カード”と名付けましょう

次にタイプを選択します

クレジットカードはアプリケーション内の オブジェクトを表しますので それを表現するのに カスタムタイプを作成します ご覧のとおり既に“カード”タイプを 作成しました 名前とIDが含まれています これをタイプとして使います

カードのリストはアプリケーションが 提供する必要があります そしてサインインした人に応じて変化します そのため“Options are provided dynamically” チェックボックスをオンにします

この動的リストをどう生成するかの 詳細は後ほどご説明します このインテントはSiriでの動作を サポートしていないため “Siri can ask for value when run” オプションをオフにできます

次にカテゴリーを 選択できるようにするため インテントに“カテゴリー” パラメーターを追加します

このパラメーターのタイプとして 一覧表を使用します カテゴリーのセットは 決まっているからです 既に一覧表は定義済で それを選択します

カテゴリーの初期値は “すべて”に設定します 初期状態ではすべての取引を 見られるようにするためです

カテゴリーについても“Siri can ask for value when run”オプションはオフにします

それでは動的な選択肢と 検索についてご説明しましょう 多くの場合 ウィジェット設定で 表示したいデータは人によって異なります そのためIntent Definition Fileで 事前に指定することができません 例のアプリケーションで カードのリストは人によって異なります これは動的オプションを実装することで 実現することができます

インテントのいずれかのパラメーターに対し 動的オプションを有効にするには Xcode内で“Dynamic Options” チェックボックスをオンにします 動的オプションを有効にすると 好きな値を入力できるようにするのではなく 選択できる可能性がある値を アプリケーションと相談して 取得するようシステムに指示します 動的オプションを有効にすると ２つのことが起きます まず ウィジェットの裏側で パラメーターの見た目が変わります モードに応じた選択肢のリストを 開くボタンになります

次にアプリケーション内で実装する ２つのメソッドを生成します 可能性のある選択肢のリストと 初期値です

これらのメソッドはインテントハンドラ プロトコルの一部分で Xcodeが生成します アプリケーション内か インテント拡張内のいずれかで このプロトコルに準拠した クラスを作成する必要があります ユーザがウィジェットを 設定する時 そのクラスに対してシステムが可能性のある 選択肢を提供するよう請求します

例のアプリケーションでは実装すべき 上記の２つのメソッドを provideCardOptionsCollectionおよび defaultCardとします provideCardOptionsCollectionについては ユーザが設定したカードのリストを ロードして 完了ハンドラを呼び出します defaultCardについては ユーザが設定した メインカードを返します

provideCardOptionsCollectionメソッドは カードの単純なリストか セクション分けしたリストを 提供できるようにします

例えばクレジットとデビットのように カードの種類によって セクション分けして表示できます セクションを使用すると UIはこのように見えます

クレジットカードすべては “クレジット”セクションの下に表示されます そして他の種類のカードが含まれる 他のセクションも表示されます

初期値では上部にある検索バーで 提供するオプションを絞り込めます 場合によって リストにして見せるのが難しいほど 多数のデータが アプリケーション内にある可能性があります その場合ユーザが打ち込んだ データに応じた検索結果を提供できます これらの結果には動的に提供される 標準選択肢以外の 選択肢を含めることができます

そうするためには “Intent handler provides search results as the user types”をオンにします そして入力欄も提供します

チェックボックスをオンにすると provideCardOptionsCollectionメソッドは 検索単語パラメーターを取得します ユーザがリストを最初に見る時 メソッドは検索用語NILで呼び出され 文字入力を始めると 更新された検索用語付きで メソッドが再度呼び出されます それでは動的オプションを実装する 方法について 簡単なデモをしましょう 前のデモに続けて 動的にカードのリストを返す 実装を続けましょう 最初の段階はViewRecentPurchases インテントに対する インテントハンドラを設定することです インテントハンドラをインテント拡張内に 置くことにします インテント拡張は既に 他のウィジェット用に設定済ですので プログラムをそこへ加えます

次の段階はインテントハンドラを ViewRecentPurchasesインテント 取扱いプロトコルに準拠させることです

このプロトコルには１つの 必須メソッドがあります provideCardOptionsCollection メソッドです これをアプリケーション内のカードのリストを 返すように実装する必要があります まずアプリケーション内のオブジェクトから カスタムカードオブジェクトを作成します それからそれを INObjectCollectionに渡します 必要があればセクションを 追加できるようにするためです

今のところセクションは考えていないので 単に項目をリストとして集めたものを 作成します それから作成した集合に 完了ハンドラを呼び出します

また 初期値のカードを提示する メソッドもオプションとしてあります

初期値は 最初にウィジェットがホーム画面に ドラッグされた時に使用されます そのため 適切な初期値を提示することは 本当に重要です

インテントを作成してインテントハンドラを 実装しましたので IntentConfigurationを ウィジェットに適用できるようになりました

これは従来使っていた StaticConfigurationと非常によく似ています しかし それはインテントタイプを アーギュメントとして取得します

またTimelineProviderの IntentTimelineProviderへの切り替えも必要です

これは初期値のTimelineProviderに 非常によく似ています しかしメソッドは追加のインテント アーギュメントを持っています 何を表示するか決定するために使用します

ここでカードをインテントから取得して どの購入を表示するか決定するために それを使用する必要があります 以前には初期値のカードによる 購入だけを表示していました

プログラムを実行して ウィジェットを設定してみましょう

ウィジェットをドラッグすると 初期値のカードの取引を表示する ことにご注意ください

これは初期値カードのメソッドを 実装しているからです

ここでウィジェットを回転させて “カード”ボタンをタップすると カードのリストが表示されます

“カテゴリー”オプションをタップすると カテゴリーのリストが表示されます

こんな感じです

それではウィジェット設定UIの 外見をカスタマイズできる方法について いくつかご説明します SwiftUI変更のうち“configurationDisplayName” および“description”を ウィジェット拡張内で使用すると タイトルと内容が変更できます

次に色です アプリケーションのカラースキームに合わすため ウィジェット設定UIの 背景色とアクセント色を 変更できます

そのためには ウィジェット拡張のアセットカタログに 名前の色を追加する必要があります アクセント色用に1色 背景色用にもう1色追加しましょう

次に色の名前をウィジェット拡張の ビルド設定に追加する必要があります “グローバルアクセント色名”および “ウィジェット背景色名”について です

もう一つ需要があるのは他のパラメーターに 基づいて 特定のパラメーターについて 隠したり 表示したりすることです 例えばカレンダーウィジェットで Mirror Calendar Appボタンをオフにすると “カレンダー”のパラメーターが表示され マニュアルでどのカレンダーを 表示するか選択できます

Intent Definition Fileについて 見てみましょう Mirror Calender Appとカレンダーとの 間の関係性を指定する方法を見てみましょう

Mirror Calender Appオプションが オフの時だけ カレンダーパラメーターを 表示するように指定したいとします Mirror Calender Appパラメーターを カレンダーパラメーターの親にすれば可能になります

そのためには カレンダーパラメーターを選択して Mirror Calender Appを 親として選択します それから親が“FALSE”の値を持っている 場合にだけ表示するように設定します これでカレンダーパラメーターは Mirror Calender Appが オフになっている場合にだけ 表示されます 私からは以上です 続いてケルビンがシステムインテリジェンスと ウィジェットをご説明します

こんにちは 私はケルビンです Appleのプロアクティブチームで働いています システムインテリジェンスについて お話しします ウィジェットは iOS iPadOS およびmacOSを横断する エキサイティングな新しいチャンスの一つです iOS 14ではホーム画面に ウィジェットを追加するだけでなく 複数のウィジェットをスタックにまとめて 様々なウィジェットを一か所で簡単に スワイプして切り替えていくことができます

これの利用方法は いろいろあるでしょう それでも複数のウィジェットを 一つにまとめることができれば 一日を進めていくうえで有用で あることは容易に想像できるでしょう スタックについて面白いのは システムが自動的にスタックの先頭に 来るウィジェットをローテーションして 有用でタイムリーな情報を提供できることです

アプリケーションがこの新しいホーム画面に 確実に収まるように スタックインテリジェンスを動作させている 設計原則と新しいAPIを実装する方法について まずご説明させてください どうすれば良いスマートスタックができるか もう少し詳細を見てみましょう スタックはタイムリーに 一瞥できる明確な数値を ユーザに提供すべきです アプリケーションのユーザにとって関連性が高い タイムリーな情報があるときに ウィジェットは前面に表示されるべきです 雷が来そうなときには 前面表示してほしいところですが 単に気温が定期的に更新された程度では そうでもありません 一般的な話として システムが特定の ウィジェットを全面表示する理由は２つあります 1つ目はユーザの行動に基づきます ユーザが特定の時間に 典型的に見に行く情報を 提供するウィジェットは 前面表示されやすくなります 例えば ユーザが頻繁に天気アプリケーションを起動して 天気を確認する場合 システムはその代わりに天気情報 ウィジェットを前面に表示して 見たい情報に より素早くアクセスできるようにします

２番目はアプリケーションからの適切な情報に 基づきます 例えば 雷が落ちそうな場合 ウィジェットはシステムに対して 関連性が高い更新があることを通知します するとシステムはウィジェットをスタックの 先頭に表示することを検討します

システムがウィジェットを全面表示するのに 必要な情報を提供するために 使用するAPIについてお話しましょう

ユーザの行動の方から始めます

ユーザが情報を得るためにアプリケーションを よく見る状況ではシステムが ウィジェットを前面に表示しようとします iOS 12で ショートカットとカスタムインテント ドネーションの概念が導入されました ユーザがアプリケーション内で何をしているのか システムが理解する方法を提供するものです この情報を使って システムはユーザがとりたい 行動について 予測をSpotlightで提供します

iOS 14の新機能として 同じドネーションが ウィジェットをいつ前面表示すると タイムリーなのか システムに対して通知します

それでは また前の例に戻って 続けましょう “最近の購入”ウィジェットです ここでは既にウィジェット設定用の インテントを設定済です ユーザが情報を表示してほしい クレジットカードと カテゴリーを指定できるようになっています システムインテリジェンスがウィジェットを ローテーションできるように 同じインテントでホストアプリケーションによる ドネーションができるよう設定する必要があります

考え方としては要するに ユーザがアプリケーションの中でいつ 特定のクレジットカードを確認しているか システムに通知しようということです それはこのインテントを ドネートすることで実行します もう少し後で バックグラウンドで 何が起きているかご説明します とりあえずどう設定するかの 詳細を確認しましょう

まずこのインテントについて Siriからの提案を有効にするフラグを立てます すると一番下に“提案”という 表題のセクションが開きます この例ではユーザが特定の クレジットカードをいつ確認するか システムが予測した上で その同じカードが設定されている ウィジェットと照合 するよう指示します それを実現するため カードパラメーターだけを含む Supported Combinationsを追加する必要があります

カスタムViewRecentPurchases インテントが設定できましたので ホストアプリケーションの中で ユーザが最近の購入を見るたびに ホストアプリケーションがそれを ドネートできるようにする必要があります そのために INInteractionオブジェクトを作成します そしてドネート機能を呼び出し インテントに渡します

既にSupported Combinationsは カードパラメーターだけと指定しましたので ドネートの中にカテゴリーパラメーターを 提供したとしても システムはカードパラメーターだけを 考慮します それですべきことは終わりです システムが残りをやってくれます それではドネートがあった場合に システムが水面下で何をしているか 詳細を見てみましょう ユーザが 定期的に正午になると AcmeCardの食料品 購入を見ていて 夕方になるとSoupPayカードの レストラン購入を確認しているとします ホストアプリケーションはこのように インテントをドネートします

このドネーションに基づいて システムは ユーザが通例 AcmeCardを正午に確認することを認識します すると金曜日の正午には AcmeCardを見るだろうと 予測して ウィジェットを前面表示します ただしカテゴリーに関係なく AcmeCardを表示するよう 設定していることが前提です

代わりにカードとカテゴリーの両方をサポートする 組み合わせに追加したらどうなるでしょうか 起きそうなことを見てみましょう 今度はサポートする組み合わせに カテゴリーが入っていますので システムに対してそれが重要な パラメーターであると伝えていることになります すると金曜日の正午には AcmeCardの“食料品”カテゴリーを 見るだろうと システムが予測して ユーザが明示的に両方のパラメーターを 設定して AcmeCardの “食料品”カテゴリーを表示するよう 設定したウィジェットだけを 前面に表示します

つまり要するにSupported Combinationsが システムと通信する手段であり その設定パラメーターが 本当にユーザが求める情報である必要があります

これまで多くの段階をご説明しました 手早くまとめます まず ウィジェットについて インテントを設定しましょう 次に システムが予測できるように Siriからの提案が 有効になるように設定しましょう 次にSupported Combinationsを設定しましょう ただしシステムに予測してほしい パラメーターだけを含めましょう 最後に ユーザがアプリケーション内で その情報を見たとき インテントをドネートしましょう それでは２番目のシナリオに移ります 重要で関連性の高い 情報がある時に システムにウィジェットを 前面表示してもらいたい場合です

簡単なまとめとして WidgetKitを使用して タイムラインエントリーを提供します 様々な時点でウィジェットが どう見えるかを決定するものです この天気の例のように 将来の ビューについて 予報を提供できる場合など 事前にウィジェットがエントリーの スケジュールを立てられる時にはうまく動きます また 最近の購入の例のように ウィジェットが リアルタイムで新情報に反応する必要があって エントリーが発生するごとに 提供するような場合もうまくいきます ユーザが 50ドルを超える 課金があった場合にアプリケーションから警告を 出してほしいと希望しているものとします

ウィジェットが Acme Booksの購入について関連性が高い 情報を持っていると システムに伝える方法は何でしょうか？ その情報を伝えるには TimelineEntryで TimelineEntryRelevanceオブジェクトを 送信しましょう

TimelineEntryは実質的に 3つの要素で成り立っています そのエントリーを表示すべき時間を 決定する日付とタイムスタンプ 表示するビュー そしてエントリーの関連性の高さです 関連性の高さは TimelineEntryRelevanceオブジェクトです そこには２つのフィールドがあります スコアと有効期限です

これがSwift内での見え方です スコアからお話しします スコアとは 過去に提供された すべてのエントリーと比べて そのエントリーがどれだけ 関連性が高いかを示す値です 範囲と規模についてはほぼ独自に 定義していただいて結構です システムは他のエントリーとの相対関係 でしかスコアを考慮しないからです 唯一の例外としてスコアがゼロか マイナスの場合 システムに対して ウィジェットが今のところ 関連性の高い情報を持っていないことを示します したがって前面表示 すべきではないことになります それでは例に戻りましょう システムに対して重要な情報がある ことを伝えたい状況です 50ドルを超える購入があった場合です そういう購入が発生した場合 単に１のスコアを提供することができます 重要性を強調するために その他の購入については 0.1のスコアをつけておきます そうすると 少額の購入でもシステムが ウィジェットを全面表示してくれる 可能性が少しだけあり 高額の購入については 優先度を高くしてもらえます 重要な情報がない場合 例えば午前８時４分の 最近の購入がない場合 スコアをゼロにします 他のウィジェットが提供するスコアは 関係ないことを覚えておいてください スコアは自分のウィジェットから 提供したスコアの中だけで比較されます 他方で 購入金額が関連性の高さを 表す良い指標であるという考えに基づくと 購入金額をスコアに セットすることもできます するとシステムも同様に高額の購入の 優先順位を高くして前面に表示するでしょう 次に有効期限についてご説明します 有効期限は関連性の高さのスコアが 固定できる期間を うまく定義できるような 場合に使用するフィールドです そうでない場合は有効期限をゼロのままで 問題ありません そうすると関連性の高さのスコアは 次のTimelineEntryRelevanceを 受領するまで 有効という意味になります

ここに有効期限の使い方を 示すよい例があります バスケットボールの試合がある時に 試合の進行を示す ウィジェットを構築したいとします 試合の開始時に スコア１を持つエントリーを作って 有効期限は試合の長さに 固定します すると それ以降のTimelineEntry更新について TimelineEntryRelevance フィールドをNILにしておけば 関連性の高さに影響を与えずに更新を 続けることができます エントリーをNILにすることで システムに対して 関連性の高さについては その更新を無視するように伝えることになります まとめると スマートスタックを使うと スタックの最前面に ウィジェットを表示できるチャンスがあります それを動作させる方法は ２つあります １つはアプリケーションからウィジェットの設定に 合ったインテントをドネートすることです ２番目はウィジェットが重要な 情報を持っている時に TimelineEntryRelevanceを 提供することです ご視聴ありがとうございます 皆さんがどのような設定可能な インテリジェントウィジェットを構築されるか 楽しみにしています