Widget Code-Along 2 - 異なるタイムライン

WWDCへ ようこそ “Widget Code-Along 2 異なるタイムライン” iOS System Experienceチームのイジーです どうぞよろしく 今日のテーマはこちらです まずウィジェットファミリーについてお話します watchOSコンプリケーションを構築した ことがある方はご存知かと思います 次にタイムラインとその更新方法 ウィジェットをユーザーが 構成できるようにする方法 さらにウィジェットとアプリケーションの コンテンツをリンクする方法について解説します 最後にウィジェットを実際に更新します かなり多くの内容ですが SwiftUIのパワーを WidgetKitと結合すれば それぞれのステップは 実に簡単で分かりやすくなります WidgetKitには ３つのファミリーがあります systemSmallとsystemMedium そしてsystemLargeです コンプリケーションの構築と同様に WidgetKitのコンセプトは コンプリケーションファミリーと同じです

パート１で話したように ウィジェットのエンジンは タイムラインプロバイダです プロバイダからエントリーを １つだけ返しましたが

複数返すことも可能です ここで問題になるのは 最後に何が起こるかということです エントリーを増やすにはどうすればいいか？

TimelineReloadPolicyの選択です

１つ目の“atEnd”は タイムラインの最後のエントリーが表示された時 更新のスケジューリングを開始するよう― WidgetKitに伝えます

その更新が発生した時 タイムラインメソッドが再び呼び出されることで さらなるエントリーを返すことが可能となります

同様に“after”は指示された日時に 更新のスケジューリングを開始するよう WidgetKitに伝えます 例えば午後10時を日時に指定したとします この場合 WidgetKitは タイムラインの他のエントリーが 先または前にあるかに関係なく 午後10時に更新をスケジューリングします 最後のオプションは“never”です “never”の場合 システム単独では ウィジェットを更新しません Widget Center APIを通して 手動でリロードする― タイミングを指示する必要があります

システムでは同時に多数のタイムラインが アクティブになっており 個別のリロードポリシーがあります 最高のユーザーエクスペリエンスの提供と より早いタイミングで ウィジェットを更新するため システムは賢く 更新をスケジューリングします これは“atEnd”と“after”では より早い方の時間で リフレッシュされることを意味します ウィジェットはホーム画面で 構成できるよう設定できます WidgetKitの構成にはSiriKitを使用します つまり 構成を行うことに関しては インテリジェントシステムに ウィジェットが適合しているということです 構成のコアテクノロジーは カスタムインテントに重点を置く INIntentsです

これらの項目の詳細については “configuration and intelligence”の プレゼンテーションを参照してください

ウィジェットにはアニメーションや カスタムインタラクションはありませんが アプリケーションに ディープリンクを設定できます

systemSmallウィジェットには 大きなタップエリアがひとつありますが systemMediumとsystemLargeでは 新しいSwiftUIリンクAPIを使って ウィジェット内にタップ可能な ゾーンを複数作成できます

このセッションではcode-alongを取り上げます 最初のcode-alongセッションの 続きから再開するので そこまでお聞きいただいた方は 引き続きお聞きください そうでない方もサンプルプロジェクトの パート２ターゲットからでも問題ありません

様々なテーマをカバーしているので チェックリストを用意しました

ではパート２を開始しましょう

前のセッションでは ウィジェットを systemSmallだけに限定していました ミディアムサイズでも同じく機能するように 更新する方法を考えてみました やってみましょう

まず最初に supportedFamiliesを更新します ここではsystemSmallとsystemMediumを サポートします

次にビューがどのファミリーを対象にしているか 確認します

WidgetKitが提供する WidgetFamily環境変数を利用します

そのファミリーに切り替えて 戻したい対象のビューを決定します

AvatarViewを移動します

systemSmallについては 同じAvatarViewを戻し 他のケースについては 何か新しいものを戻すようになります

ここでスニペットを使用します これは前にHStackで使用していたものと 同じAvatarViewですが その先にいくつかテキストが追加されています そのテキストはキャラクターのbioです さらにビジュアルの関心を 少し高めるため 背景色も追加しました 次のステップに進んで systemSmallに手を加えます 私はこのやり方が気に入っています ここでHStackを埋め込みましたが 実はHStackを使いたいわけではありません 使いたいのは ZStackです そこでHStackの ショートカットに埋め込んで それをZStackに変更し 同じように背景色を追加します 背景色を付けたので 文字色も指定します

続いて プレビューが どうなっているかも確認します

このプレビューで注目すべき点は AvatarViewを戻していることです しかし実際はウィジェットファミリーに 応じて２種類のビューを戻しています ここで代わりにエントリービューを 直接戻すようにします

同時にプレースホルダーと プライマリーも更新します

このplaceholder viewが

以前のプレビューと同じく常にAvatarViewを 戻していることにお気づきでしょうか 代わりに同じようにして EntryViewを戻すようにします

では プレビューで確認してみます

これでミディアムサイズのビューができました プレビューは自動的に更新され 新しいコンテンツを反映します 動作する様子を確認しましょう

これはお気に入りのEmoji Rangersです

ウィジェットギャラリーに移動して ホーム画面にスモールか ミディアムのウィジェットを追加できます

EMOJI RANGERSを削除しますか?

ファミリーについては以上です タイムラインについて少し話しましょう

以前にも話したように WidgetKitはすべての ウィジェットのスケジューリングを 同時に行おうとします 一方 私たちは必要がない時でも リロードを要求しています キャラクターが時間とともに回復します さらに完全に回復する時間も 正確にわかります タイマーがあるからです できることは キャラクターが回復するまでの 完全なタイムラインを生成することと 他の方法で取得するよりも 多くのエントリーを タイムラインに追加することです では やってみましょう

スニペットを使用します 内容はおわかりいただけると思いますが タイプする間に それぞれの行について説明します 最初の行は選択したキャラクターを表し 次の行はキャラクターが完全回復する endDateを表します 更新を行うインターバルは1分間隔で スタートの時間はcurrentDateです

スタート時のエントリーのアレイは空です currentDateが endDateに達するまでの間 currentDateを用いて 新しいエントリーを作成し currentDateを１分先に進めて 先ほどのエントリを追加します この時点で完全なタイムラインがあるので そのタイムラインが満了するまでは WidgetKitはリロードを試みません

以前にインテリジェントシステムの 動作について話しました ウィジェットがスタックにある時 システムはそれを賢く― ローテーションできるということでした 時間に関するシステムヒント “レリバンス”を使用すれば 優先度が高くなります レリバンスにお気づきの通り― オプションプロパティとして すでに登場していますから 先に進み 追加します

レリバンスの値の範囲を設定するのは 自分たちです キャラクターが完全回復することが 最も重要ですから 単純にヘルスレベルをレリバンスとして 直接使用します

ここでレリバンスをサンプル エントリーに渡します

これで レリバンスを使用した完全な タイムラインが出来ました タイムラインについては以上です

現在 表示されているのは Power Pandaだけです しかし あと２人います 同じように活躍しているのに 表示されないのは不公平です 表示するヒーローを指定する 構成オプションを作りましょう もうすでにインテント定義は プロジェクトに追加済みです 初期状態から自分でやるには “File”から“New File”を選択し “Intent”を検索します

SiriKit Intent Definitionファイルを追加します

追加済みですので ここでは省略します ただしターゲットのメンバーシップに ウィジェットとアプリケーションの 両方が含まれていることを再確認しておきます

Intent Definitionファイルには 入力が必要なフィールドがいくつかあります

ウィジェットは情報を表示するので そのカテゴリーはInformationのViewとなります カスタムタイトルと説明があります インテントがウィジェットであることを示すため ボックスにチェックが付いていることを 確認します

インテントには “Hero”というパラメータがあります そのパラメータはenum型です enumエディターでこのenumが 提供する値を設定します すでにPandaとEggheadは追加済みですが Spoutyも追加する必要があります

インテント定義は完了です

では ウィジェットがこの定義を 使用する方法です

ウィジェットの部分に戻り

ウィジェットのタイプを変更する必要があります

StaticConfigurationを IntentConfigurationに変更します

この変更で追加の引数が１つ必要になります Xcodeに正確な内容を表示させ ビルドして

修正を適用します

ここにCharacterSelectionIntentを使用します

IntentConfigurationには 対応する IntentTimelineProviderが必要です 一番上のTimelineProviderを変更して IntentTimelineProviderにします

IntentTimelineProviderは snapshotと timelineメソッドに追加の引数を１渡します

それがconfigurationです snapshotには追加しましたが timelineにも追加する必要があります

ここで configurationからキャラクターへの マップが必要です

これらのenum値は同じように見えますが １つはインテント定義からのもので もう１つはキャラクター詳細定義からのものです ここで 選択されたキャラクターを インテントのキャラクターに 設定する必要があります

では“Build and Run”を実行して確認しましょう

ギャラリーからEmoji Rangers ウィジェットを追加した時 デフォルトはPower Pandaです

ここで長押しすると “ウィジェット編集”オプションが表示されます タップするとウィジェットがフリップして Power PandaとEgghead そしてSpoutyから 選択できるようになります

ホーム画面にSpoutyを表示することにします 構成については以上です

とてもクールなやり方ですが キャラクターの詳細画面に ジャンプすることを期待していました 表示させるキャラクター そのものを選択できるからです それはとても簡単です ビューにwidgetURLモディファイアを 追加します

systemSmallとsystemMediumの どちらにも追加します

では“Build and Run”を実行します

Emoji Rangerウィジェットを追加し

それをタップすると Power Pandaに直接移動します お気に入りのRangerを切り替えると

そちらの情報に 同様に直接移動します すばらしいです これで複数のファミリーをサポートし 完全なタイムラインを備え ユーザーによる構成をサポートし ホストアプリケーションへディープリンクされた 十分な機能を備えた ウィジェットができ上がりました code-alongについては あと１つセッションがありますので ぜひそちらもご覧になってください ウィジェット設計のアプローチ方法については “Designing Great Widgets”をご覧ください SwiftUIとウィジェットを作成して 設計を仕上げる方法について話しています 引き続きWWDCをお楽しみください