Widget Code-Along 3 - アドバンシングタイムライン

こんにちは WWDCへようこそ “Widget Code-Along 3 アドバンシングタイムライン” iOS System Experienceチームの イジーです Widget Code-Alongの 最終回です ウィジェットエクステンションから URLセッションを使う方法を説明します ウィジェット用のAPIが いくつか追加されています SwiftUIのLink APIを使い ウィジェットで タップできるリージョンを作成します また ウィジェットバンドルを追加します 同じエクステンションで 複数のウィジェットを提供でき すごく便利です さらに ウィジェットの設定に オプションの動的なセットを 提供する方法を見ていきます このセッションはCode-Along方式です Widgets Code-Alongセッションの 続きを学習します 前回までを実践済みの 皆さんは先に進みましょう まだの方も 大丈夫 パート３の内容を サンプルプロジェクトで学習できます 今回はたくさんの 説明事項がありますので チェックリストを作りました

それではパート３を始めましょう

先にプロジェクトにもう一つの ウィジェットを追加しておきました Leaderboardウィジェットです 見てみましょう

ヘルス順にソートされた キャラクターのリストを提供します 仕組みを少し説明しましょう ウィジェットがネットワークから データを取得する方法です お気づきかと思いますが Timeline Provider APIは 戻り値ではなく 完了ハンドラで構築することで 特に 非同期のタスクの実行― ネットワークフェッチなどを 簡単にしています ここに CharacterDetailオブジェクトの loadLeaderboardData 非同期リクエストがあります 実装を見てみましょう

これは 通常のURLセッションで 通常のデータタスクの リクエストをしています

今はローカルファイルで リモートフェッチをシミュレートしていますが 普段はリモートウェブサービスを 呼び出すでしょう これは通常の プロセス内URLセッションAPIであり― 想像通りの動きをします バックグラウンドセッションは どうでしょうか？

他のエクステンションタイプで 完了時にエクステンションをホストするアプリケーションを バックグラウンドURLセッションで起動するのを ご存じかも知れません これはウィジェットには当てはまりません ウィジェットは作成する すべてのURLセッションに応答します バックグラウンドセッションも含めてです ただしアプリケーションデリゲートがありません ウィジェットはどうすればよいのでしょう？

WidgetConfigurationのonBackground URLSessionEventsモディファイアがあります アプリケーションデリゲートメソッドに 似ています

sessionIdentifierと―

完了ブロックがあります

これらをアプリケーションと同じように扱います これが URLセッションです

Leaderboardウィジェットを ホーム画面に追加します

Character Detailウィジェットと同じように キャラクターをタップして 詳細画面を起動できるようにしたいです これはウィジェットURLと同じく とてもシンプルです SwiftUIのLink APIを使います

Leaderboardウィジェットに AllCharactersViewがあります

この定義にジャンプして―

HStackをクリックすると SwiftUIのプレビューの 対応するHStackに 青色の枠が表示されます これをリンクに埋め込んで―

destinationにキャラクターのURLをセットします

ビルドと実行をしてみましょう

ウィジェットをクリックすると－

その行がハイライトされ－ タップして 直接 キャラクターの情報に移動できます 今のはSpouty こちらはEggheadです

Linkの使用方法でした

お気づきと思いますが ウィジェットギャラリーに－ Leaderboardウィジェットしかありません Ranger Detailウィジェットから メイン属性を Leaderboardウィジェットに移動したためです

原則としてプロセスごとに メインは１つだけで 両方には追加できません ただしWidgetBundleを 作成できます

WidgetBundleに 両方のウィジェットを追加して @mainを Leaderboardウィジェットから―

バンドルに移動します ビルドと実行をして―

ウィジェットギャラリーへ

LeaderboardとRanger Detail ウィジェットが表示されました これでよし

ウィジェットバンドルでした

前回のセッションでは ハードコードしたリストで ウィジェットを構成できるようにしました でも 全部のオプションが 分からない場合は？ この構成は SiriKitのインテントですので オプションの動的リストを インテントエクステンションで提供できます 他のインテントベースの機能と同じです

エクステンションは すでに追加してありますが 手順をご説明します FileからNew そしてTargetで―

“Intent”を検索し―

Intents Extensionを追加します

言語はSwiftを選択します Starting Pointは“None”にしてください これでできます

インテントの定義を見ていきます 前回の静的インテントと よく似ていますが タイプはenumではなく カスタムのTypeです プロパティを見てみましょう

identifierとdisplayStringの２つです これらはカスタムインテントタイプの デフォルトプロパティです では これらの値はどこから？

IntentHandlerからです これがオプションの動的なセットを提供します timelineメソッドと同じく 非同期呼び出しです キャラクターのデフォルトセットは すでに返していますが CharacterDetailには remoteCharactersリストもあります これを追加しましょう

ネットワークから追加の 情報をフェッチするものです ウィジェットを更新して 動的インテントを使ってみましょう

CharacterSelectionIntentを “Edit All in Scope”します

もうenumの値はありませんので このメソッドは不要です

selectedCharacterは characterFromNameです

nameは インテントのidentifierです

表示してみましょう

Character Detailウィジェットで 構成に行くと―

元のCharacter Detailの EggheadとSpoutyに Mr. SpookとCake そしてOctoが加わりました ではCakeを

オーケー やっぱりMr. Spookを チェックしたいので ホーム画面に 置くことにします

これで ウィジェットに URLセッションと SwiftUIのLink APIを使用 ２種類のウィジェットが入った バンドルを追加し さらに 動的構成を サポートできました 優れたウィジェットの デザイン的な観点については “Design Great Widgets”をご覧ください また それらのデザインガイドラインの SwiftUIへの適用については “Build SwiftUI Views for Widgets”を WWDC 2020で視聴してください ご視聴ありがとうございました これでウィジェットを 構築する準備は完了です 皆さんのアイデアを楽しみにしています