ウィジェットの新機能

ウィジェットの新機能

WidgetKitは、ウィジェット、ライブアクティビティ、コントロールのアップデートによってアプリを向上させます。ウィジェットをvisionOSに取り込んだり、CarPlayを使って運転中にウィジェットを操作したり、アクセント付きレンダリングモードでウィジェットの外観を向上させる方法を学びましょう。また、watchOSのスマートスタックに関連ウィジェットを表示する方法や、プッシュ通知を使用してウィジェットを最新の状態に維持する方法も説明します。

関連する章
- 0:00 - Introduction
- 1:03 - Widgets in new places
- 15:31 - Relevance widgets
- 18:12 - Push widget updates
リソース
関連ビデオ

WWDC25
WWDC24
- システム全体にアプリのコントロールを拡張
- Apple Watch向けのライブアクティビティのデザイン
WWDC23
- ウィジェットの新しい場所への展開方法
- プッシュ通知コンソールについて
WWDC20
- プッシュ通知のプライマー
こんにちは Tanner Oakesです System Experienceチームでエンジニアをしていますウィジェットはタイムリーな情報やアクションをシステム随所に表示してアプリをバックグラウンドでも有効に機能させる優れた手段です WidgetKitは拡張を続けておりウィジェットの機能をさらに高め新たな活躍の場を生み出しています友人のLucaはカフェイン摂取量を記録するアプリを担当しています私もアプリの更新を手伝いました今回はウィジェットの新たな機能を存分に活用するコツを皆さんにご紹介しますこのビデオでは Appleのプラットフォーム全体で動作するウィジェットやライブアクティビティやコントロールについてご紹介します watchOSのスマートスタックで関連性の高いウィジェットのコンテンツを表示する新しい方法も説明します最後にプッシュ通知機能を利用してウィジェットを複数のデバイスで最新の状態に保つ方法もお伝えしますウィジェットやライブアクティビティやコントロールは大きく変化しましたまずはウィジェットが初めて登場した場所でどれだけ見た目が変化したかを紹介しましょう iOS 26ではホーム画面のアイコンやウィジェットを透明なガラスのような見た目にしたり色付けを選択してカスタマイズしたとえばこんなブルーで表示したりという設定も可能になりましたこうした外観はデスクトップ上のウィジェットや macOS Tahoeの通知センターでも設定できますこうした新しい表示の仕組みは iOSとmacOSで共通していますまずウィジェットのコンテンツをアクセントレンダリングモードで生成してコンテンツ全体を白く着色します次にウィジェットの背景を削除してテーマ別ガラスや色付けカラーエフェクトに置き換えますカフェイントラッカーウィジェットはアクセントモードにしただけで見た目がずっと良くなりましたウィジェットの見栄えを良くするため微調整が必要な場合もあります手持ちのアプリに自分がよく飲むドリンクを表示するウィジェットを追加しましたちなみに私は抹茶ラテですウィジェットにはドリンクを描いた大きな画像が表示されその下にはタイトルでテキストの背後はグラデーションにして画像に重ねたとき読みやすくなるようにしています。アクセントレンダリングを適用するとウィジェットのコンテンツはすべて白く着色されますこのラテカップのようにコンテンツが不透明な場合は白一色になりますグラデーションのように一部が透明なコンテンツは不透明な部分も残しながら白く色付けされます私のイメージとはかけ離れています画像が分かりにくいし文字も読み取れませんアクセントレンダリングの効果を上げるウィジェット更新方法を紹介しますウィジェットのビューはこんな感じですドリンクの画像を含むZStackとグラデーションとテキストビューです widgetRenderingMode環境変数をウィジェットビューに追加しますウィジェットをフルカラーでレンダリングする場合に限るという条件を付けて大きい画像と線形グラデーションを表示します次に VStackに画像を追加してテキストの上に戻し画像表示にあたりウィジェットがアクセントモードの場合という条件を付けますいい感じのレイアウトになりましたここからは画像の見た目を良くする作業です widgetAccentedRenderingMode モディファイアを画像に追加して低彩度に設定します widgetAccentedRenderingModeはウィジェットのImagesに適用できる SwiftUIモディファイアですアクセントモードでの画像の見せ方は I pass inという引数で正確にコントロールできます widgetAccentedRenderingModeは 5つのモードに対応していますそれぞれのモードが画像の表示にどう影響するか紹介します iOSとmacOSのアクセントモードを Watchのアクセントモードと比較します
widgetAccentedRenderingModeで nilを渡すということはモディファイアをまったく適用しないのと同義です画像にはメインコンテンツの色が適用されます iOSとwatchOS 両方のウィジェットで画像が完全に白になりました .accentedを渡すと画像がアクセントカラーになります。 iOSとmacOSではメインカラーとアクセントカラーは両方とも白なので画像も白くなります watchOSではアクセントカラーが文字盤のカラーと同じになるのでウィジェットの画像は青くなります .desaturatedを渡すと画像の彩度が低下しますエフェクトの結果は iOSとwatchOS 両方の表示スタイルで同じに見えます .accentedDesaturatedを渡すと指定した 2つのエフェクトが両方とも適用されますつまり画像の彩度が低下し選択したテーマのアクセントカラーが適用されます iOSでは画像がやや白っぽくなります watchOSでは低彩度にした画像がテーマのアクセントカラーであるブルーで着色されます .fullColorを渡すとアクセントレンダリングモードでの画像修正はゼロになります文字盤との馴染みという都合上 watchOSで使われることはありませんほとんどのウィジェットはホーム画面の他の要素と馴染むよう .desaturatedまたは .accentedDesaturatedが使われますアルバムのアートワークや本の表紙などメディアコンテンツを表す画像には .fullColorを使用しますここからはウィジェットをまったくの新次元へとシフトさせます visionOS 26では visionOSアプリにもウィジェットを設定できるようになりました互換性のあるウィジェット付きの iPhoneアプリやiPadアプリをお持ちなら visionOSでもそのまま利用できます iOSやmacOSのシステムファミリサイズ全般に対応します他のプラットフォームと同様に visionOSのウィジェットも操作可能でアニメーション表示ができますウィジェットの動作と WidgetKitによる新しいオプションを紹介します visionOSではウィジェットを部屋に追加して壁に固定できますデフォルトでは壁に直接掛けたような凸面状になりますウィジェットは壁面より凹ませて壁に直接埋め込んだように見せることもできますスタイルがウィジェットに馴染まない場合はウィジェット設定で supportedMountingStylesモディファイアを使い提供させたいオプションを指定しますこのモディファイアは visionOSとiOS両方のウィジェットで使用できますデフォルトではウィジェットはすべてガラステクスチャで描画されます visionOSアプリではウィジェットに紙のテクスチャを指定してポスターのような見た目にできます左側はよく飲むドリンクのウィジェットをガラスで構成したもので右側は同じウィジェットですが実験のため紙のテクスチャを指定したものですウィジェット設定で widgetTextureモディファイアを使いウィジェットのレンダリングを紙のテクスチャで行うかガラスボードを使うか指定しますポスター調のウィジェットを完成させるため visionOSでは新たにsystemExtraLargePortrait ウィジェットファミリーが登場しましたこれは systemExtraLargeという横幅拡張用ウィジェットファミリーの垂直方向版です
supportedFamiliesモディファイアを使用してこれをウィジェット設定に追加します visionOSではウィジェットのカラーテーマもカスタマイズできますデフォルトではフルカラープレゼンテーションで表示されます緑のテーマを選択するとアクセントレンダリングモードでコンテンツが表示されますウィジェットのフレームとコンテンツは選択した色で着色されますバックグラウンドは削除されて選択したカラーテーマに合わせた単色に置き換えられますこのスタイルでは先ほど説明した iOSおよびmacOSと同じレンダリングアプローチを適用します先ほどと同じ技術を使って指定したカラーテーマでウィジェットをベストの見た目に仕上げます widgetAccentedRenderingMode モディファイアを使って画像の見た目をカスタマイズします環境変数widgetRenderingModeを使って条件付きでより大きな変更を適用します
visionOSではウィジェットを環境内に取り込んで壁などに配置することができます空間内を移動してもウィジェットは固定した場所から動きません部屋の向こう側の壁という遠い場所にウィジェットがある場合遠くにあるウィジェットもまた実際に存在する物体のように小さくて見づらくなります実際の物体とは異なり visionOSのウィジェットは LevelOfDetail APIによって距離に応じて表示の仕方を変えますカフェイン摂取量トラッカーにこのAPIを追加する方法を紹介します
こちらは1日のカフェイン摂取量と直近に飲んだドリンクと他のドリンクを簡単に追加できる便利なボタンが表示されている既存のウィジェットですウィジェットが遠い場所にある状態でも総カフェイン摂取量は大きく表示して読みやすくしたいと思いますボタンも隠したいところです遠くからでは操作できませんからねさてカフェイン摂取量ウィジェットで TotalCaffeineViewのサイズを変更して下側にあるLogDrinkViewの表示／非表示も条件付きの切り替えに更新してみますまず環境プロパティLevelOfDetailをビューに追加します LevelOfDetailは2つの値の一方になりますデフォルトではウィジェットにおける通常の詳細レベルが選択されています visionOSではウィジェット表示はほどよい距離にある状態でデフォルトの詳細レベルになりますウィジェットとの距離が物理的にある程度大きくなると表示レベルは簡略化に切り替わりウィジェットが遠くからでもぱっと読み取れるよりシンプルな形で表示されます条件を追加して LevelOfDetailがデフォルトの場合だけ LogDrinkViewを表示させます次にカフェイン摂取量の更新です
総カフェインの表示ではタイトルとフォーマットされた総カフェイン摂取量を表示させていますまず環境変数LevelOfDetailをビューに追加します表示を大きくするため総カフェイン摂取量のフォントを条件付きで変更して詳細レベルに応じてタイトルと大きなタイトルを切り替えます
これでウィジェットからの距離がある程度まで広がるとウィジェットの表示がよりシンプルで一目で読み取りやすいバージョンに切り替わるようになりましたウィジェット内のタイムライン変更と同じく詳細レベルの変更もアニメーション化されます空間スタイルのカスタマイズや詳細レベルについてのアドバイスや新しい環境へのウィジェット移行時に考慮するべきポイントについては「Design Widgets for visionOS」で詳しく紹介しています。ここでギアをチェンジしますウィジェットとライブアクティビティは今まさに CarPlayと公道を駆けています CarPlay Ultraではウィジェットはダッシュボード左側のスタックに表示されます iOS 26以降この機能はすべてのCarPlay搭載車で利用可能になりますウィジェットの設定は CarPlayの設定アプリで実行できます車載ディスプレイで使用するため CarPlayでは一目でわかる情報大きな文字判読性が重要になりますそのためCarPlayはウィジェットの背景を削除し fullColorの systemSmallファミリーを使用して StandByスタイルでレンダリングしますウィジェットの操作はタッチスクリーンで実行できるほか CarPlayシミュレータをデベロッパサイトから入手してウィジェットをテストすることも可能です StandBy表示にウィジェットをマッチさせる方法の詳細は WWDC 23の「Bring widgets to new places」で紹介していますライブアクティビティは CarPlayのホーム画面にも表示できますデフォルトではライブアクティビティの Dynamic Islandには「leading」ビューと「trailing」ビューが表示されていますこれはコーヒー注文トラッカーのライブアクティビティを CarPlayに表示した状態です確かに悪くはありませんがほんの少しコードを足せばもっと良い出来になりますこれがライブアクティビティのコードです現状では「Leading」ビューと「Trailing」ビューが表示されていますこのライブアクティビティの表示を CarPlay用にカスタマイズするため supplementalActivityFamilies モディファイアを追加して Activity Configurationへの引数として「.small」で渡します LeadingビューとTrailingビューを使用する代わりに CarPlayには iPhoneのロック画面と同じ ActivityViewを表示させますこれでうまく表示されるライブアクティビティもあるでしょうが今回は情報が多すぎてコンテンツの一部が見切れています幸いここからさらにカスタマイズを加えられます
こちらはActivityViewです activityFamily環境変数をビューに追加します条件を指定してビューのボディに表示するコンテンツを切り替えたりレイアウトを調整して上質の使用体験を提供したりできます activityFamilyが「small」の場合は小さめのレイアウトに最適化したショップオーダービューを表示しますそれ以外の場合はデフォルトのオーダービューを表示します追加のコードを少々加えたら CarPlayのライブアクティビティが見栄えよくなりました注文が上がるまでの残り時間もひと目で確認できます supplementalActivityFamilyの追加によりペアリング済みApple Watchでのライブアクティビティの表示もかなり改善されます iPhoneアプリが自動で実行するため watchOS専用アプリは必要ありません watchOSのスマートスタックでライブアクティビティの見た目をブラッシュアップする方法については「Design Live Activities for Apple Watch」をご覧ください CarPlayでウィジェットの効果をさらに高める方法を知りたいなら「Turbocharge your app for CarPlay」も要チェックですライブアクティビティが活躍する場は CarPlayだけではありませんペアリング済みiPhoneからの情報は macOS Tahoeにも表示されます iPhoneのDynamic Islandと同様に注文トラッカーのライブアクティビティも LeadingビューとTrailingビューの2つをメニューバーに表示させますライブアクティビティを選択すると iPhoneのロック画面が表示されますロック画面の表示をクリックすると関連するアプリが iPhoneミラーリングを使用して起動します macOSでのライブアクティビティは iOS 18以降搭載のiPhoneで利用できますコード変更は不要で macOSのiPhoneウィジェットと同様に連携操作とディープリンクに対応しますでは macOSとwatchOSのコントロールの新たな世界を紹介します macOSの場合は macOS SDKと Catalyst いずれのビルドかを問わず Macで動作中のアプリからコントロールを実行できます Appleシリコン搭載のMacで動作する iOSアプリからでもコントロールできますコントロールはコントロールセンターで追加できます iOSで利用可能な 3種類の表示サイズ（小、中、大）を macOS上でも選択できますメニューバーに直接コントロールを配置することもできますコーヒートラッカーのコントロールを macOSに追加したのでメニューバーからコーヒーログを簡単に更新できます watchOS 26ではコントロールを3か所に表示できますサイドボタンからアクセスできるコントロールセンターで設定ができます Apple Watch Ultraのアクションボタンを押してもコントロールを実行できますそれに加えてスマートスタックでも設定を実行できます他のウィジェットにならんでコントロールのマークやタイトルや現在の値が表示されますコントロールはペアリング済みデバイスの watchOSアプリまたはiPhoneアプリから実行できますコントロールのビルド方法に関する広範なガイドは WWDC24の「Extend your app’s controls across the system」で確認できます次は watchOS 26スマートスタックの relevanceウィジェットを紹介します watchOSのカフェイン摂取量アプリにお気に入りのコーヒーショップが半額になるハッピーアワーの時間帯を確認できるようにするウィジェットを追加しましたウィジェットで改善したいポイントが 2つあります第一に複数のコーヒーショップのハッピーアワーを追跡しているとハッピーアワーが重なることがありますつまりスマートスタックの表示もいきおい詰め込みがちになります第二にハッピーアワーの時間帯はほぼ一定する傾向にありますつまり他の時間帯にはウィジェットの出番がありませんハッピーアワーウィジェットを関連性の高いタイミングにのみスマートスタックに表示して開催中のハッピーアワーの情報をより詳しくしたいところです watchOS 26のrelevanceウィジェットならそれも不可能ではありませんハッピーアワーをウィジェットとして設定する方法を紹介します relevanceウィジェットを定義するにはウィジェット型を作成して StaticConfigurationや AppIntent構成に代えて RelevanceConfigurationを使います他の構成と同様に種類文字列やプロバイダオブジェクトやカスタムエントリをSwiftUIビューに変換するクロージャで構成されていますプロバイダ型は RelevanceEntriesProviderですプレースホルダとrelevanceメソッドは TimelineEntriesProviderと同様ですプレースホルダにはコンテンツの準備中に表示させるシンプルなエントリを返します relevance用にまずは自分で定義した一連の構成オブジェクトを取得します
ハッピーアワーウィジェットの場合構成と関連性があるのはハッピーアワーの開始時間と終了時間ですハッピーアワー各回の日付間隔を使ってこのコンテキストで該当する属性を定義しますそうしたらエントリメソッドを実装しますタイムラインウィジェットとは違い RelevanceEntriesProviderは単一のエントリだけを構成に提供します構成にはこのエントリに必要なショップデータやハッピーアワーの時間範囲というすべてのデータを記入してありウィジェットをすぐに作成できます他のデータやアセットが必要ならメソッドをasyncとマークしてあるのでここで取得できます relevanceウィジェットの設定が完了し関連性ある場合だけハッピーアワーがスマートスタックに表示されます複数の構成で関連性が同時発生した場合はウィジェットの複数のインスタンスをスマートスタックで確認できます relevanceウィジェットは watchOS 26のパワフルな新機能ですウィジェットのコンテンツと関連性を直接関連付けることができます relevanceウィジェットは単体で使ってもまたタイムラインベースの既存のウィジェットと併用しても素晴らしい効果を発揮します Relevanceウィジェットの詳細については「What’s new in watchOS 26」をご覧ください今回ウィジェットを表示できる場所やプラットフォームがさらに増えましたどこに表示する場合でもウィジェットを常に最新の状態に維持する必要があります先日サーバを追加したのでカェイン摂取量データをすべてのデバイスで同期できますウィジェットを更新するための方法をご紹介します最初はウィジェットの定期的なリロードですこの図で左側のApp BundleにはアプリとWidget Extensionが含まれています右側のボックスはWidgetKitを表しています iPhoneのホーム画面や Apple Watchの文字盤などでウィジェットを設定すると WidgetKitはWidget Extensionにタイムラインを要求します Widget Extensionはウィジェットタイムラインを返しますこの応答には TimelineReloadPolicyが含まれています WidgetKitはこれに基づいてウィジェットを次にリロードするタイミングを決定します TimelineReloadPolicyを使用する方法は定期的な更新を必要とするウィジェットに適しています例えばカフェの営業時間を表示するウィジェット、天気予報ウィジェット、株価ウィジェットなどですパフォーマンスとバッテリー駆動時間を管理するためタイムラインの定期的なリロードにはバジェットが適用されます
アプリでWidgetCenter APIを使用する方法もありますウィジェットに反映する必要があるデータ変更がアプリ内で発生した場合 WidgetCenterのreloadAllTimelines またはreloadTimelines(ofKind:)メソッドが呼びだされますこれによりウィジェットのコンテンツが古くなりリロードする必要があることを WidgetKitに伝えます通知を受けたWidgetKitは Widget Extensionにタイムラインを要求してウィジェットを更新しますこの方法はウィジェットコンテンツが主にアプリ内で変更される場合に適しています例えばカフェイン摂取量の更新、メモの変更、リマインダーのチェックなどがありますこのAPIが呼び出された時点でアプリが実行されるためこのリクエストにはバジェットが適用されませんではサーバ上または別のデバイスでデータ変更が発生するとどうなるでしょうかこの場合ウィジェットのプッシュ更新が発生しますデータ変更を追跡しているサーバがプッシュ通知をAPNsに送信します APNsはアプリのウィジェットをリロードするようWidgetKitに指示します他の更新と同じように WidgetKitは最新のタイムラインをウィジェットに要求しますウィジェットのプッシュ更新はデータがそのデバイス以外で変更される場合に適しています TimelineReloadPolicyと同様パフォーマンスとバッテリー駆動時間を管理するためウィジェットのプッシュ通知更新にもバジェットが適用されますこの機能を使用するとそれぞれの状況に適した方法でウィジェットをリロードできますこれらは相互に排他的ではありませんウィジェットによっては複数の方法を使用すると便利ですウィジェットのプッシュ更新を使用すると iPadのアプリ、Vision Proのウィジェット、 macOSのメニューバーコントロールなどカフェイン摂取量をどこで更新するかに関わらずすべてのデバイスで最新データを確認できますこの機能をウィジェットに追加する方法をご紹介しましょう WidgetPushHandlerを作成してウィジェット構成に追加します Push Notificationエンタイトルメントを Widget Extensionに追加してウィジェット更新プッシュリクエストを作成しますまず WidgetPushHandlerプロトコルに準拠した構造体を作成しますこのタイプはプッシュトークンの変更または設定済みのウィジェットの変更を通知するためのものです pushTokenDidChangeメソッドを使用してプッシュトークンとウィジェットの情報をサーバに送信します次にウィジェットの設定を更新する必要がありますここではカフェイン摂取量ウィジェットの設定を使用します pushHandlerモディファイアをウィジェットに追加してプッシュ通知のサポートを登録しますこのモディファイアでは前に実装したウィジェットpushHandlerのタイプを渡します
最後に Xcodeで Widget Extensionのタブに移動しますここでPush Notification エンタイトルメントを追加して APNsと通信できるようにしますこれでウィジェットのプッシュ更新を設定できました次にウィジェット更新のプッシュ通知を送信する方法を説明しますプッシュ通知を使用してウィジェットを更新するには HTTPS POSTリクエストを Apple Pushサーバに送信します WidgetPushHandlerでリクエストパスの最後の部分として提供されたウィジェットプッシュトークンを使用しますヘッダーでは APNsプッシュタイプとして「widgets」を使用しアプリのバンドルIDを使用して apns-topicヘッダーを設定します末尾に「.push-type.widgets」を付けますリクエストの本文では apsディクショナリで content- changedキーをtrueに設定しますプッシュ通知の詳細については「Push Notifications Primer」をご覧ください「Meet Push Notifications Console」ではプッシュ通知リクエストを簡単にテストする方法をご確認いただけますウィジェットを最新の状態に維持するにはプッシュ更新が役立ちますが他の通知に常に優先するものではありません必要に応じて実行してください緊急または重要な更新を表示する場合はユーザー通知を使用します飲み物の注文、試合のスコア、フライト情報など限られた期間中更新が定期的に発生する場合はライブアクティビティを使用しますウィジェットを最新の状態に維持する時はウィジェットのプッシュ更新を使用しますウィジェットのプッシュ更新はウィジェット対応の全プラットフォームで利用できますウィジェットのプッシュ通知を送信すると対象デバイスのすべてのプッシュ対応ウィジェットが更新されますウィジェットのリロードはバジェットを消費しますサーバでの更新を制限するなど更新プッシュは最小限に抑えてください開発時やテスト中は設定でWidgetKitデベロッパモードを使用するとアプリのプッシュとリロードのバジェットを無視できます本日は新しいウィジェット向けプラットフォームについて詳しくご説明しましたここで紹介したビデオもぜひご覧くださいまた iOSとmacOSではウィジェットの外観が新しくなります最後に外部ソースまたは他のデバイスからウィジェットのデータを更新する場合はプッシュ通知を追加して最新の状態に保つことも検討しましょう本日はウィジェットの様々な新機能や表示場所をご紹介しました皆さんのウィジェットでぜひご活用くださいご視聴ありがとうございました

struct MostFrequentBeverageWidgetView: View {
    @Environment(\.widgetRenderingMode) var renderingMode
    
    var entry: Entry
    
    var body: some View {
        ZStack {
            if renderingMode == .fullColor {
                Image(entry.beverageImage)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
            
                LinearGradient(gradient: Gradient(colors: [.clear, .clear, .black.opacity(0.8)]), startPoint: .top, endPoint: .bottom)
            }
            
            VStack {
                if renderingMode == .accented {
                    Image(entry.beverageImage)
                        .resizable()
                        .widgetAccentedRenderingMode(.desaturated)
                        .aspectRatio(contentMode: .fill)
                }
                
                BeverageTextView()
            }
        }
    }
}

6:08 - visionOS Widget Configuration

struct CaffeineTrackerWidget: Widget {
    var body: some WidgetConfiguration {
        StaticConfiguration(
            kind: "BaristaWidget",
            provider: Provider()
        ) { entry in
            CaffeineTrackerWidgetView(entry: entry)
        }
        .configurationDisplayName("Caffeine Tracker")
        .description("A widget tracking your caffeine intake during the day.")
        .supportedMountingStyles([.elevated])
        .widgetTexture(.paper)
        .supportedFamilies([.systemExtraLargePortrait])
    }
}

8:56 - LevelOfDetail - CaffeineTrackerWidgetView

struct CaffeineTrackerWidgetView : View {
    @Environment(\.levelOfDetail) var levelOfDetail
    
    var entry: CaffeineLogEntry

    var body: some View {
        VStack(alignment: .leading) {
            TotalCaffeineView(entry: entry)

            if let log = entry.log {
                LastDrinkView(log: log)
            }

            if levelOfDetail == .default {
                LogDrinkView()
            }
        }
    }
}

9:46 - LevelOfDetail - TotalCaffeineView

struct TotalCaffeineView: View {
    @Environment(\.levelOfDetail) var levelOfDetail
    
    let entry: CaffeineLogEntry

    var body: some View {
        VStack {
            Text("Total Caffeine")
                .font(.caption)

            Text(totalCaffeine.formatted())
                .font(caffeineFont)
        }
    }
    
    var caffeineFont: Font {
        if levelOfDetail == .simplified {
            .largeTitle
        } else {
            .title
        }
    }
    
    var totalCaffeine: Measurement<UnitMass> {
        entry.totalCaffeine
    }
}

11:49 - Add .supplementalActivityFamilies

struct ShopOrderLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: Attributes.self) { context in
            ActivityView(context: context)
        } dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                    ExpandedView(context: context)
                }
            } compactLeading: {
                LeadingView(context: context)
            } compactTrailing: {
                TrailingView(context: context)
            } minimal: {
                MinimalView(context: context)
            }
        }
        .supplementalActivityFamilies([.small])
    }
}

12:27 - Add .activityFamily

struct ActivityView: View {
    @Environment(\.activityFamily) var activityFamily
    var context: ActivityViewContext<Attributes>
    
    var body: some View {
        switch activityFamily {
        case .small:
            ShopOrderSmallView(context: context)
        default:
            ShopOrderView(context: context)
        }
    }
}

16:20 - Define relevance widget with RelevanceConfiguration

struct HappyHourRelevanceWidget: Widget {
    var body: some WidgetConfiguration {
        RelevanceConfiguration(
            kind: "HappyHour",
            provider: Provider()
        ) { entry in
            WidgetView(entry: entry)
        }
    }
}

16:41 - Implement RelevanceEntriesProvider

struct Provider: RelevanceEntriesProvider {
    func placeholder(context: Context) -> Entry {
        Entry()
    }
    
    func relevance() async -> WidgetRelevance<Configuration> {
        let configs = await fetchConfigs()
        var attributes: [WidgetRelevanceAttribute<Configuration>] = []
        
        for config in configs {
            attributes.append(WidgetRelevanceAttribute(
                configuration: config,
                context: .date(interval: config.interval, kind: .default)))
        }
        
        return WidgetRelevance(attributes)
    }
    
    func entry(configuration: Configuration,
               context: RelevanceEntriesProviderContext) async throws -> Entry {
        Entry(shop: configuration.shop, timeRange: configuration.timeRange)
    }
}

21:13 - Handle push token and widget configuration changes

struct CaffeineTrackerPushHandler: WidgetPushHandler {
    func pushTokenDidChange(_ pushInfo: WidgetPushInfo, widgets: [WidgetInfo]) {
        // Send push token and subscription info to server
    }
}

21:30 - Add pushHandler to WidgetConfiguration

struct CaffeineTrackerWidget: Widget {
    var body: some WidgetConfiguration {
        StaticConfiguration(
            kind: Constants.widgetKind,
            provider: Provider()
        ) { entry in
            CaffeineTrackerWidgetView(entry: entry)
        }
        .configurationDisplayName("Caffeine Tracker")
        .pushHandler(CaffeineTrackerPushHandler.self)
    }
}

22:29 - Push Notification Request Body

{
    "aps": {
        "content-changed": true
    }
}

- 0:00 - Introduction
- Learn about updates to WidgetKit including new ways to incorporate your app with the system, show relevant content in the Smart Stack, and keep your app up to date.
- 1:03 - Widgets in new places
- Widgets have new styling options and are available in new places. Check out tips to make your widgets look great with accented rendering mode. Widgets are available in more places, including visionOS 26 and CarPlay. Widgets on visionOS 26 can be added to rooms and pinned to surfaces. These widgets can be customized to support different mounting styles, textures, and level of detail based on proximity. CarPlay and macOS 26 now support Live Activities. Controls are available on macOS Tahoe and watchOS 26.
- 15:31 - Relevance widgets
- Relevant widgets show up in the Smart Stack on watchOS 26 when they’re most relevant based on people’s routines, location, and more. These widgets show up in the Smart Stack only when they’re relevant, and multiple instances can show up at the same time, like for overlapping calendar events or happy hours. Build relevant widgets by specifying when the widget is most relevant, like at a particular time or type of location.
- 18:12 - Push widget updates
- Widgets across all WidgetKit platforms can now be updated by push updates through APNS. There are multiple tools to keep widgets up to date, and the best tool for each use case is determined by how the data for your widget is updated. Timelines are good for regularly updating data. Changes driven by interaction in an app should reloadAllTimelines. For synchronization between devices, or external data changes, like from a server, use widget push updates. Push updates for widgets help keep widgets more up to date, but aren’t a direct replacement for other notification experiences. Consider whether a User Notification, Live Activity, or widget is best for each use case.

関連する章

リソース

関連ビデオ

WWDC25

WWDC24

WWDC23

WWDC20