-
WidgetKitの基本
ウィジェットはシステム全体にわたってアプリの重要なコンテンツを目立たせることができ、ユーザーの利用促進に役立ちます。このセッションでは、ウィジェットのさまざまな種類を紹介し、ユーザーの印象に残りやすいウィジェットはどういう特徴があるかを検討します。ウィジェットの作成方法、最新の状態に保つ方法、App Intentやダイナミックスタイリングを使用してユーザーによるウィジェットのカスタマイズを可能にする方法も紹介します。
関連する章
- 0:01 - Introduction
- 1:03 - Fundamentals
- 13:15 - Integrate with your app
- 17:04 - Adapt with the system
リソース
関連ビデオ
WWDC26
WWDC25
WWDC23
WWDC21
-
このビデオを検索
こんにちは Jonathan Longです system experienceチームのエンジニアです ウィジェットはよく使われています ウィジェットはよく訪れる場所に 関連コンテンツを表示します ウィジェットはAppleの 多くのプラットフォームで利用できます iOS、iPadOS、watchOS visionOS、macOSなどに対応しています ウィジェットはシステム全体に アプリのリーチを広げます 優れたアプリを体験する もう1つの機会を提供します WidgetKitの基礎とウィジェットについて 詳しく見ていきましょう 初めてのウィジェットの作り方と 最新の状態に保つ方法も説明します 今日はウィジェットの基本と 初めてのウィジェット構築を説明します アプリとウィジェット体験の統合に WidgetKitが提供するものも説明します システム環境の変化に ウィジェットが適応する方法も解説します ティント環境への対応なども含みます まず基礎から始めましょう ウィジェットとは何でしょうか ウィジェットを印象的にする 3つの特質があります ウィジェットはひと目でわかります ウィジェットはちらっと見るだけで 内容が理解できる必要があります 例えば天気ウィジェットは 現在の予報についてちょうど良い情報を表示します 1日の準備に役立ちます ウィジェットは適切な情報を表示します ウィジェットのコンテンツは時間や 個人のパターン、場所に応じた内容にします カレンダーウィジェットは 現在の時刻の次のイベントを表示します 1日を通じて更新されます ウィジェットはカスタマイズできます 自分にとって大切なコンテンツで 設定できます 例えばこの写真のメモリーウィジェットは 家族キャンプの素敵な思い出を表示します 娘たちとの思い出です WidgetKitとSwiftUIを使えば ひと目でわかる適切な カスタマイズ可能なウィジェットを アプリのコンテンツとして提供できます
読書量を増やすための 読書会アプリを開発していました このアプリでは読んだ量や 読み終えた本を追跡できます 次の読書会までに本を読み終える スケジュールも作成します ホーム画面からデータを直接確認できるよう ウィジェットも作りました 1つ目は読書目標ウィジェットです 1日を通じて読書を促します 2つ目は読書記録ウィジェットです 読み進めている本の進捗を 把握できます 3つ目のウィジェットは時間どおりに本を 読み終えるスケジュールを作成します このセッションでは各ウィジェットの 重要な選択について説明します ウィジェット作成時に役立ちます まずアプリがシステムに ウィジェットを提供する方法から見ていきます アプリがSwiftUIでもUIKitでも ウィジェットを持つことができます ウィジェットはSwiftUIで 構築されます アプリはwidget extensionを通じて システムにウィジェットを提供します このextensionはアプリとは 別のプロセスで動作します widget extensionが 別プロセスで動作しているため 共有コンテナを使用する 必要があります app groupの共有コンテナで アプリからwidget extensionにデータを提供します 共有データベースや user defaultsなどを利用できます widget extensionは ウィジェットのみに特化しています システムとWidgetKitが extensionと連携して ウィジェットに必要なデータを取得します WidgetKitはextensionに コンテンツを要求します このコンテンツはタイムラインと 呼ばれます
タイムラインは複数の timeline entryで構成されます WidgetKitはこれらのentryを ウィジェットのViewデータとして提供します 生成されたViewはアーカイブされます システムは適切なタイミングで これらを表示します widget extensionはウィジェットを システムに公開します タイムラインのコンテンツも提供します タイムラインはentryの系列で それぞれが必要なデータを持ちます 特定の時点でウィジェットのViewを レンダリングします 読書目標ウィジェットのコードを 見ていきましょう これらの要素をまとめたものです
widget extensionの 新しいターゲットを作成すると Xcodeがウィジェットを生成します シンプルなウィジェットの場合 必要な要素の多くがすでに実装されています WidgetConfigurationを提供する bodyから始まります
ウィジェットには2種類の設定があります AppIntentConfigurationと StaticConfigurationです AppIntentConfigurationはユーザーが ウィジェットの設定を変更できる場合に使います 私のウィジェットは読んでいる本を使って 自動設定されます 最もシンプルな StaticConfigurationを使用します StaticConfigurationには いくつかのパラメータが必要です kindはこのウィジェットタイプの 一意の識別子です ウィジェットのtimeline entryを生成する timeline providerが必要です timeline entryを受け取り Viewを返すクロージャも必要です クロージャからは提供された timeline entry用のSwiftUI Viewを返します 読書会アプリはSwiftUIで 作られているためすでにViewがあります DailyReadingGoalViewは ウィジェットにぴったりです containerBackground モディファイアで背景を指定します このモディファイアはウィジェットの 背景となるViewを指定します
ユーザーがデバイスをカラーやクリアな ティントでカスタマイズすると システムが指定した背景Viewを 置き換えられます グラスマテリアルのViewに変わります Reading GoalウィジェットのView部分が 実装できました timeline providerに期待されることを 詳しく見ていきましょう タイムラインがウィジェットを 適切な状態に保つ方法も説明します
timeline providerはentryを供給します ウィジェットの3つの状態を表す entryです Snapshot、Placeholder そしてTimelineです
Snapshotはウィジェットの リアルなプレビューです ウィジェットギャラリーで 表示されるものです ウィジェットが強い第一印象を 与えるチャンスです アプリには最初データがないので 人気の本を特集します 「Atomic Habits」に デフォルトメッセージを添えて表示します ウィジェットが最高の状態を 想像してもらえます ホーム画面に追加する前に その良さが伝わります Placeholderはウィジェットが コンテンツを表示できないときに システムが表示する代替Viewです タイムラインを初めて読み込む ときなどに表示されます 即座に表示する必要があるため Placeholderの取得は同期的です ディスクやネットワークからのデータを 必要としないPlaceholderを用意します
Reading GoalsウィジェットではSwiftUIの redactedモディファイアを使います これにより簡略化したViewが 生成されます
timeline entryはウィジェットが 特定の時点で表示するものです それは現時点か 将来の任意の時点です timeline providerはこれらの entryのコレクションを生成します システムはそれぞれを 特定の時刻にレンダリングします
読書目標ウィジェットのtimeline entryには このViewのレンダリングに必要な 全情報が含まれています モチベーションメッセージ、読んだページ数 タイトル、カバー名などです
このウィジェットでは ほとんどのデータが同じです モチベーションメッセージを除いては メッセージは1日を通じて さまざまな時間に更新されます タイムラインについて説明する際は 変化するメッセージのみを表示します 時間とともに変化する部分です タイムラインはウィジェットを 最新の状態に保つ重要な仕組みです 各timeline entryはウィジェットのViewを レンダリングするデータを提供します このタイムラインは現在 2つのentryを表示しています 午前9時と午前11時30分のものです
読書目標ウィジェットに必要な コアデータは 1日を通じて更新される モチベーションメッセージです WidgetKitがタイムラインを進めると 更新されます
これらのtimeline entryはウィジェットに 提供され関連するViewを生成します その時点のentryに対して 新しいコンテンツでウィジェットを 常に最新の状態に保ちます
いずれタイムラインを更新して timeline entryを追加する必要があります これはタイムラインのリロードと 呼ばれます タイムラインはreload policyで リロードの動作を指定します reload policyには3つの オプションがあります atEnd、afterDate、neverです 各policyと どの場合に選ぶかを 説明します
atEnd policyはすべての timeline entryが使われたときに タイムラインをリロードすることを示します
1日を通じて新しい timeline entryがレンダリングされます
午後1時に最後のentryが表示されると システムはリロードを発行します widget extensionに 追加コンテンツを要求します
widget extensionは新しいタイムラインを より多くのtimeline entryとともに提供します 読書目標ウィジェットはさまざまな時間に モチベーションメッセージを更新します 1日を通じて更新されます atEnd policyが適切な理由は ウィジェットが一連のentryを提供するためです 終了時刻が一定でなく タイムラインが使い尽くされた時に リロードする必要があるからです
afterDate policyを使うと ウィジェットがリロードを希望する 日時を指定できます 読書スケジュールウィジェットを 動かしている異なるtimeline entryです 全データを省略して チャプタ情報のみを含めています 時間とともに変化する部分です 読書スケジュールウィジェットは 今日と明日何を読むかを示す 2つのtimeline entryを提供します ウィジェットは1日の終わりに リロードする必要があります 以降のスケジュールを 再計算するためです 1日の終わりの日時を指定する afterDate reload policyを使います
現在の時刻がその日時に達すると extensionがリロードされます 新しいタイムラインが要求されます
新しいタイムラインは 火曜日と水曜日のentryを提供します 再計算されたスケジュールです afterDate policyは 読書スケジュールウィジェットのような場合に最適です ウィジェットがリロードされる 特定の時刻がわかっているときに使います
最後にnever reload policyです 名前の通りウィジェットは 自動的にリロードしません 自動リロードが不要な場合に使います 読書記録ウィジェットが 良い例です アプリまたはウィジェットを 操作したときだけ更新が必要です リロードが必要な場合は 明示的な呼び出しで行えます WidgetCenterのreload APIを使います またはプッシュ通知を 送ることでも可能です reload policyの詳細については WWDC21の「Principles of great widgets」を ご覧ください
いくつかのベストプラクティスがあります タイムラインの構築とリロードを 検討する際に念頭に置いてください
できるだけ多くの timeline entryを提供してください システムが常にウィジェットの コンテンツを表示できるようになります
WidgetKitは1日中のバッテリー寿命を 考慮して設計されています 各ウィジェットには 更新のバジェットが与えられます バジェットはユーザーの閲覧習慣に 大きく影響されます 1日を通じて更新されます 更新頻度は異なる場合があり システムは自動的に ウィジェットのリロードを 適切に調整します アプリがフォアグラウンドにある間 頻繁なリロードはスロットルされる可能性があります ウィジェットデータが変更された可能性がある場合 アプリがバックグラウンドに入るときに リロードを呼び出すと 通常は良い結果になります 開始と終了日時が決まった 一時的なコンテンツがあります より頻繁な更新が必要で スポーツイベントのように アラート機能が求められます これに当てはまる場合は Live Activityの構築を検討してください Live Activitiesについては 「Live Activities essentials」で学べます WWDC 26のセッションです
これまですべてのウィジェットを 同じサイズ（system medium）で作成しました WidgetExtensionとtimeline providerが 設定されたので 他の多くのwidget familyが 使えるようになりました ウィジェットにはさまざまな 形とサイズがあります できるだけ多くのサイズを サポートすることをお勧めします ウィジェットを配置する際に ユーザーが選択肢を持てるようにします
system extra large portrait familyは visionOS 26で導入されました macOS、iOS、iPadOS 27の新機能として system extra large portrait familyが 利用可能になりました この新しいfamilyを使うと ウィジェットのユーザーが アプリのコンテンツを じっくりと確認できます 読書会の読書スケジュールは mediumウィジェットと同じデータを再利用できます すでに実装したものです この大きなサイズでは 進捗状況を確認できます 今後2日間でどこまで進むかが わかります
すべてのwidget familyが ウィジェットに適しているわけではありません 少数のfamilyから始めるのが 最もシンプルです
私が作成している 1日の読書目標ウィジェットです .supportedFamiliesモディファイアを使って ウィジェットがサポートする 全widget familyを列挙できます
新しいwidget familyを追加するとき 同じウィジェットとtimeline providerを 再利用できます 新しいfamilyの形とサイズに合った SwiftUI Viewを構築します 初めてのウィジェットを作るための 基本的な手順を説明しました ウィジェットに特化した widget extensionでウィジェットを構築します timeline entryで構成されたタイムラインを通じて ウィジェットにコンテンツを提供します ユースケースに適した timeline reload policyを選択します
アプリに読書会のための 優れたiOSウィジェットができました ウィジェットは他の場所でも 利用できます iOSウィジェットはCarPlayと macOSのリモートウィジェットでも利用できます ウィジェットを構築するために 必要なことを説明しました WidgetKitがアプリとウィジェットを より統合するための追加オプションを説明します アプリのコンテンツとの統合に役立ちます
ディープリンクを使ってウィジェットと アプリをより統合できます ウィジェットをカスタマイズ可能にすることも またはウィジェットにインタラクティブな 要素を追加することもできます ウィジェットのデフォルトの インタラクションはアプリを開くことです これは良い出発点です ウィジェットがアプリ内の 特定のコンテンツを表示している場合 ウィジェットはそのコンテンツへの ディープリンクを提供できます Reading Goals Widgetのコードに 戻りましょう 実装方法を確認します 読書目標ウィジェットは 現在読んでいる本を表示します ウィジェットをタップすると 本の詳細ページに移動するように ディープリンクを提供します widgetURLモディファイアを使って アプリのディープリンクURLを指定します 起動時に処理します URLには本のIDがエンコードされており アプリが直接起動します 本の詳細ページに移動します
ディープリンクはウィジェットとアプリを 統合するすばらしい方法です ウィジェットとアプリ間での コンテキストを維持します カスタマイズ可能なウィジェットも アプリとの統合に非常に効果的です ウィジェットをカスタマイズ可能にすると アプリの特定のコンテンツで ウィジェットをパーソナライズできます
天気ウィジェットが良い例です 自分にとって大切な場所の 天気状況を表示するよう ウィジェットを設定できます Yosemiteの天気を 確認しておくのが好きです 急に旅行を計画できるように
読書会アプリの読書記録ウィジェットも カスタマイズ可能なウィジェットの例です アプリのユーザーはこのウィジェットを 設定して 特定の本の読書セッションを 追跡できます カスタマイズ可能なウィジェットは 配置された場所から設定できます iOSホーム画面からも設定できます 読書記録ウィジェットの設定UIです パラメータは1つだけです UIではユーザーが 追跡したい本を選択できます 最近読んだ本をデフォルトにしました ユーザーが選択する手間が省けます カスタマイズ可能なウィジェットでは 異なる設定の複数のウィジェットを 追加することもできます ホーム画面に3つの読書記録ウィジェットがあります 読んでいる3冊の本を それぞれ追跡します カスタマイズ可能なウィジェットを 検討する際は いくつか念頭に置くことがあります ウィジェットのコンテンツが 使用者によって変わるべきかを検討してください 設定はシンプルに — 1〜2つの パラメータで通常十分です 最初に設定を要求せず 適切なデフォルト値を提供して ユーザーが後で調整できるようにします App Intentでウィジェットを カスタマイズするにはWWDC23の 「Explore enhancements to App Intents」を ご覧ください
カスタマイズ可能なウィジェットは デバイスを 自分にとって適切でパーソナルな ものにするオプションを提供します ウィジェットはインタラクティブな要素を通じて アプリと統合することもできます ボタンとトグルでウィジェットから 直接アクションを実行できます リマインダーはインタラクティブな ウィジェットの良い例です タスクが完了したら ウィジェットから直接チェックできます 1日を続けるために必要な ドーパミンの刺激を得られます インタラクティブな要素を 検討する際は いくつか念頭に置くことがあります ウィジェットはトグルまたはボタンとして インタラクティブな要素を表示できます アプリで最も重要なアクションを考え ウィジェットから公開してください 読書記録ウィジェットの 「チャプター完了」ボタンのように ウィジェットのViewはシステムにアーカイブされて レンダリングされるためコードは実行されていません ウィジェットが画面に表示されている間は ボタンとトグルはApp Intentを受け取り システムが代わりに実行します ユーザーが要素を操作したときに インタラクティブなウィジェットの詳細については WWDC23の「Bring widgets to life」を ご覧ください ウィジェットはアプリの拡張です ディープリンク、カスタマイズ可能なウィジェット インタラクティブな要素はすべて アプリとウィジェットの体験を 統合するすばらしい方法です ウィジェットのユーザーはシステム体験も カスタマイズできます ウィジェットはこのような システムの変化に適応するよう設計されています iOSではシステムを特定の色で ティントするようにカスタマイズできます またはクリアなティントにもできます どちらのカスタマイズでもシステムは グラスマテリアルを通してウィジェットをレンダリングし コンテンツをティントして背景を アダプティブなグラス効果に置き換えます ホーム画面のすべてのウィジェットに 統一感をもたらします SwiftUIが多くの処理を担当しますが テストが重要です ウィジェットが見栄え良く 表示されることを確認します
読書目標ウィジェットのテストを始めると フルカラーでの表示は とても良く見えます 完成前にティントのカスタマイズで テストして ウィジェットが期待通りに レンダリングされているか確認します デバイスで実行し ホーム画面をカスタマイズして確認します iPhoneをクリアモードに変えると ウィジェットが正しくレンダリングされません 本の表紙が大きな白い四角形になり 意図した動作ではありません これがBookCoverImage viewです viewのbodyではこの特定の本の 画像がレンダリングされます asset catalogからです accented rendering modeでの レンダリング時にシステムは 画像に適切なアクセントを 付けられません この画像に使用する レンダリングモードを指定できます widgetAccentedRenderingMode モディファイアを使います このオプションでウィジェットは フルカラーで本の表紙をレンダリングします full colorオプションを使うことで 本の表紙が 元の色でレンダリングされます この変更でウィジェットがaccented rendering modeでも 見栄え良く表示されます ウィジェットが表示されるすべての環境で テストすることが重要です まずローカルデバイスから始めます フルカラー、ティント クリアモードでウィジェットをテストして 期待通りにレンダリングされるか確認します iOSウィジェットはmacOSでも リモートウィジェットとして表示されることを覚えておいてください Macから使用する際もインタラクションが 適切に機能するかをテストしてください Macから使用する際も確認が必要です SwiftUI previewsで 素早くイテレーションします
XcodeのSwiftUI canvasで 異なるfamilyをチェックできます Xcodeを離れることなくカラースキームや レンダリングモードも確認できます テスト中はWidgetKit developer modeを オンにしてください リロードバジェットなどの制約を解除できます ウィジェットをより素早く イテレーションできます システムのカスタマイズへの ウィジェットの適応については WWDC25の「What's new in widgets」を ご覧ください
今日は多くを説明しました 最後にいくつかのことを 念頭に置いてください 素晴らしいウィジェットを作る インスピレーションが得られたことを願っています アプリと統合してウィジェット体験を 拡張しパーソナライズする方法を検討してください アプリとの統合で実現します 各プラットフォームが提供するすべての カスタム環境に対して ウィジェットのテストと適応を 忘れずに行ってください ウィジェットがiPhoneを楽しく パーソナルなものにしてくれます 皆さんが作る素晴らしいウィジェットを 使うのが待ちきれません
-
-
3:50 - DailyReadingGoalWidget
struct DailyReadingGoalWidget: Widget { let kind = "DailyReadingGoalWidget" var body: some WidgetConfiguration { StaticConfiguration( kind: kind, provider: DailyReadingGoalProvider() ) { entry in DailyReadingGoalView(book: entry.book, message: entry.message, timeOfDay: entry.timeOfDay) .environment(\.colorScheme, .dark) .containerBackground(for: .widget) { Background() } } } } -
12:25 - Supported Families
struct DailyReadingGoalWidget: Widget { let kind = "DailyReadingGoalWidget" var body: some WidgetConfiguration { StaticConfiguration( kind: kind, provider: DailyReadingGoalProvider() ) { entry in DailyReadingGoalView(book: entry.book, message: entry.message, timeOfDay: entry.timeOfDay) .environment(\.colorScheme, .dark) .containerBackground(for: .widget) { Background() } } .supportedFamilies([.systemMedium]) } } -
14:03 - Adding deep links
struct DailyReadingGoalWidget: Widget { let kind = "DailyReadingGoalWidget" var body: some WidgetConfiguration { StaticConfiguration( kind: kind, provider: DailyReadingGoalProvider() ) { entry in DailyReadingGoalView(book: entry.book, message: entry.message, timeOfDay: entry.timeOfDay) .environment(\.colorScheme, .dark) .containerBackground(for: .widget) { Background() } .widgetURL(URL(string: "bookclub://reading/\(book.bookID)")) } .supportedFamilies([.systemMedium]) } } -
18:17 - Accented rendering mode
struct BookCoverImage: View { let imageName: String var body: some View { Image(imageName: bundle: .main) .widgetAccentedRenderingMode(.fullColor) } }
-
-
- 0:01 - Introduction
Widgets highlight your app's most important content across the system. The best widgets are glanceable, relevant, and personalizable. Learn how to build your first widget and keep it up to date, extending the reach of your app across platforms with WidgetKit and SwiftUI.
- 1:03 - Fundamentals
Widgets should be glanceable, relevant, and personalizable. They are built by creating a widget extension that exposes a timeline of TimelineEntry values. Each TimelineEntry provides the data to render a SwiftUI view at a particular moment in time. Learn how to define a widget with a StaticConfiguration or AppIntentConfiguration, build a quality TimelineProvider, and select a timeline reload policy to keep your widget up to date. Discover the various sizes and placements for widgets with .supportedFamilies — including the new systemExtraLargePortrait family coming to macOS, iOS, and iPadOS 27.
- 13:15 - Integrate with your app
WidgetKit offers three key integration points to tighten the connection between a widget and your app. Deep links route taps directly to specific content in your app. Configurable widgets let people personalize widget content. Interactive elements that let people perform the most important actions from within your app using App Intents.
- 17:04 - Adapt with the system
Widgets are dynamic and adapt with the system appearance modes like full color, tinted, and clear. SwiftUI handles most of the adaptation automatically, though you can customize the behavior of particular Views with the .widgetAccentedRenderingMode(.fullColor) modifier. Learn techniques to test your widgets for considerations with appearance modes and budgeted reloads.