WidgetKitについて

WidgetKitのご紹介: Appで最も役立つ情報をホーム画面に直接表示する最善の方法です。優れたウィジェットとはどのようなものかを紹介し、WidgetKitの機能や特徴について確認します。ウィジェットの作り方や、WidgetKitがSwiftUIを活用してどのようにステートレスな体験を提供しているかを学ぶことができます。既存のプロアクティブテクノロジーと併用することで、ウィジェットが確実に関連事項を表示する方法をご紹介します。また、コンテンツの内容が常に最新となるようなTimelineを作成します。ウィジェットの作成の詳細については、"Build SwiftUI views for widgets"と"The widgets code-along"をご覧ください。

リソース

関連ビデオ

WWDC22

WWDC21

優れたウィジェットの原則

WWDC20

ダウンロード

“ようこそ　WWDC2020へ”

WWDCへようこそ “WidgetKitについて” こんにちは　私はナヒール iOS System Experienceチームのマネージャーです同僚のニールも後で登場します今日は皆さんに WidgetKitをご紹介します iOS 14ではホーム画面が劇的にリニューアルよりダイナミックで個性化されウィジェットを重視しています新しいウィジェットは大胆でひと目で分かるデザインです iPhoneのホーム画面だけでなく

新しいToday Viewも iPadのホーム画面に適応 MacOS Big Surの新しい通知センターに適しています

APIを掘り下げる前にウィジェットで体験できることをご紹介しますチームで考えた最高のウィジェットの３つのポイントはひと目で分かり関連性があり個々にカスタマイズできること

“ひと目で分かる”とはどういうことか？新しいウィジェットにはさまざまなサイズがあります最小サイズで使うのはホーム画面アイコン４つ分ほどのスペースですそこを有意義に使いたいですねホーム画面にいるのはほんの少しですぐ別の画面に移りますよねちらっとのぞく程度だったウィジェットを最大限に活用しましょう

小サイズを例として見てみましょうボタンを押したり複雑なユーザ―インターフェイスを解明する必要はありません重要なのはコンテンツですウィジェットはミニAppではありません “ホーム画面に小さなボタンが並ぶミニApp”でなくより突出したコンテンツと考えてくださいイメージしにくい場合は― デザインチームのセッションをご覧ください魅力的なウィジェットを作る秘策を教えてくれます

見やすさはその１つにすぎません関連性を持たせることも重要です例えば朝支度している時私が気にするのは天気ですその後日中は “リマインダー”でやるべきことをチェック１日の終わりは“ミュージック” 近所迷惑なほど大音量では聴きませんよスペースがカギとなる Mobile Platformsでは適切なウィジェットを必要な時にすぐ使えるようにしたい

そこでSmart Stackの登場ですウィジェットを自動的に回転させ適切なウィジェットを前面に表示しますスワイプできますし楽しいですよ Stackでの表示には on-device intelligenceを使いますこれに使えるのが Siri Shortcuts donations ここ数年で我々が開発したシステムですまた特定のWidgetKit APIのおかげでウィジェットがより関連性を持つタイミングをシステムが認識できますこれはウィジェットに限った話ではありませんこのトピックに特化したセッションがあるので確認してみてください３つ目は個々にカスタマイズ可能なこと例えば“天気”ウィジェット私はカナダ人なのでセ氏表示ですご覧のとおり小中大の３つのサイズがあります全サイズに対応させる必要はなく App次第ですが多くのサイズに対応するのをお勧めしますさらにカスタマイズしましょうタップして編集モードに入りフリップで迅速に構成できます構成オプションはショートカット同様に Intentでビルドされています都市の選択もその一例で大いに可能性のある効果的なシステムです WidgetKitがすばらしいのはこのConfiguration UI全体を Intentから完全に自動で生成できることです要点をまとめると最高のウィジェットはひと目で分かり関連性があり個々にカスタマイズできる

これらを踏まえて開発したのが WidgetKitですまず我々が目指したのはウィジェットをマルチプラットフォーム化し簡単にすることでディベロッパが学んだことをiOSやiPadOS macOSに適用できるようにすることそのためウィジェットのインターフェイスと WidgetKitはSwiftUIでビルドされていますまたSwiftUIは Dynamic Typeやダークモードのような機能をほぼ自動的にサポートしやすくします次にホーム画面にウィジェットを置くのは大きな意味がありますホーム画面を見るのは１日当たり平均で90回以上毎回見る時間はごくわずか

そのためローディングスピナーばかり表示されるのは避けたいもの watchOSを開発した時もひと目で分かり瞬時に表示することを目指しました今回そのプロセスを参考にしたのです

WidgetKit extensionは Background extensionでタイムラインで一連の View Hierarchyを返します SwiftUIの宣言型の資質を使ってタイムラインのこれらの表示をまとめ― ホーム画面に送りタイムラインに従って適当な時に表示できますこれは読み込んで表示させるというランチャーのプロセスを回避し瞬時に見やすい表示を実現します

事前に表示を準備できればそれらをシステムの他の領域に再利用できます例えばWidget galleryからウィジェットを追加することでホーム画面でウィジェットがどう見えるかプレビューが可能ですタイムラインはメインAppからリフレッシュできます例えばAppの変更時はウィジェットも更新されますもしくはextensionからスケジュール更新も要求できます

例えば“カレンダー”のウィジェットはその日の予定を把握しています extensionはこの情報を元に表示を変え次に出席すべき会議は何時からか事前に教えてくれるのですニールと私がコーヒーをスキップしてステーキ店に行くことにした場合 “カレンダー”で予定を更新します

“カレンダー”はAPIを使ってタイムラインをリロードするとextensionが起動し最新情報と共に新しいタイムラインに返すのです WidgetKitの仕組みが分かったところで次はニールがウィジェットの作り方を説明しますよろしくありがとう　ナヒール私はニール･デサイ WidgetKit エンジニアリングマネージャーです最高のウィジェットの作り方をお話ししますこれには４つの重要なポイントがありますウィジェットを定義する方法ひと目で分かる体験の実現方法ウィジェットのエンジンである表示タイムラインリロードそしてウィジェットのカスタマイズとインテリジェンスについてウィジェットはシンプルですが非常に効果的です使えるツールについてお話ししましょうまずはウィジェットを定義する方法ですこれにはいくつかのコンセプトがあります種類構成 supportedFamilies プレースホルダです

さまざまなウィジェットを実現するために我々が求めたのは１つのextensionで多種のウィジェットに対応するメカニズムです

例えば“株価”の１つのextensionが提供する “株価”の概要ウィジェット２～３銘柄の情報がひと目で分かる最高のウィジェットですまた同じextensionが “株価”の詳細ウィジェットも起動しホーム画面やmacOSの通知センターで１銘柄を表示できるようにしますこれらに使うのがSwiftUIやマルチプラットフォームextensionです WidgetKit extensionはSwiftUIやAppKit Catalystベースの macOS Appに対応しますまたウィジェットの種類は対応する構成も表します１つはStaticConfiguration もう１つはIntentConfigurationです

フィットネスのウィジェットではユーザ―に構成を行わせる必要はなくその日のアクティビティを表示するだけ私自身のデータはよくないですもっと体を動かさないと… 本題からそれましたねこのウィジェットは StaticConfigurationを使います “リマインダー”では特定のリストをカスタマイズできますこちらのウィジェットは IntentConfigurationを使います “supportedFamilies” また特定の種類は１つ以上のsupportedFamiliesを有効にできますウィジェットはデフォルトですべてのfamilyに対応しています “天気”ウィジェットも同様どのfamilyタイプでも気温を華氏で見られますナヒールはセ氏表示でしたねこれらのfamilyは iOSやmacOSの表示にぴったりですウィジェットの定義に関する最後のコンセプトはプレースホルダUI どのウィジェットでもデフォルトのユーザ―インターフェイスですその役割はただウィジェットの種類を表すことでありユーザ―のデータは含みませんこのインターフェイスは小出しに引き出されそれがいつ行われるかは不明ですデバイスの環境が変わる時のみ新しいプレースホルダUIを求めます例えばデバイスのDynamic Type設定が変わる時

プレースホルダUIはウィジェットの種類を表しますウィジェットに最適なインターフェイスを吟味するといいでしょうコードですねこれら４つのコンセプトがウィジェットの定義を実現しますここでウィジェットのプロトコルに適合したサンプルのウィジェットを定義し種類を指定しますいくつかのアイテムで構成されたウィジェットの構成を返し PlaceholderViewで providerを指定します

このようにしてウィジェットのエンジンを設定するのです

次はひと目で分かる体験の実現についてお話しします例を挙げると“天気”や “Nike Run Club”“ カレンダー”などです有用な情報を表示し Appを起動させるように誘導します方法の１つは StatelessUIを作ることであり SwiftUIがこれに最適ですホーム画面や通知センター上のインタラクションとは違いますこれらのウィジェットでスクロールはできませんしスイッチやその他のシステム制御映像や動画にも対応していませんひと目で分かるインターフェイスによりユーザ―は― 気軽にウィジェットをタップし Appに入りますこれはsystemSmallでの“ミュージック” 直近で再生したアルバムにタップし直接 Appに入ることができます systemSmallではウィジェットそのものにタップしユーザ―を直接 Appへ導きます

“ミュージック”のウィジェットは systemMediumにも対応しています膨大な種類のアルバムが表示され各アルバムがリンクとなり直接Appへ導きますウィジェット全体はwidgetURL APIを使って URLリンクと関連づけられます systemMediumかsystemLargeでサブリンクを作りたければ新しいLink APIとSwift APIを使えます

以上がウィジェットの定義とひと目で分かる体験の実現方法です次はウィジェットのビュータイムラインリロードについて考慮すべきは３タイプのユーザーインターフェイスです先述のプレースホルダにスナップショットとタイムラインですスナップショットでは単体の入力を素早く表示するので extensionには表示を迅速に返すことが求められますそうすればウィジェットが iOSの魅力的なWidget galleryで見られますこれはデザイン時のスクリーンショットや画像でなく iOS iPadOS macOSで実際に体験できるウィジェットです

大抵はタイムラインの最初の入力とスナップショットが同じ入力として返されますつまりWidget galleryで見る内容はユーザーがデバイスに追加した際のものそのスレッドに従いスナップショットが単体の入力であれば適当な時に表示される一連の多重ビューはタイムラインにすぎませんタイムラインは返されたビューと日付の組み合わせでありこれにより特定のビューをいつ出すか指示できます

そしてタイムラインを返すことでウィジェットの体験が実現するのですタイムラインはダークとライトモード両方で返すべきです WidgetKit extensionが入力を返す時その情報を取ってView Hierarchyを diskへシリアライズします “WidgetKit ExtensionからWidgetへ” つまり個々の入力をジャストインタイムでレンダリングするのですするとシステムが多くのウィジェットを多くのタイムラインと共に起動しますこれは本当にクールなテクノロジーですタイムラインは通常数日分のコンテンツのために返されるべきものしかしウィジェットは時により最新の情報を返す必要がありますこれをリロードのコンセプトを通して行います

リロードではシステムがextensionを呼び出し各ウィジェットの新しいタイムラインを要求そしてコンテンツが最新であることを確認しますコードは新しいトピックを学ぶための最も簡単な方法と思います見てみましょうこれは“TimelineProvider”プロトコルです主に日付で構成されている“TimelineEntry” 環境情報を提供しシステムが入力を要求する“Context”

スナップショット機能ではシステムが単体の入力を要求タイムライン機能ではシステムが一連の入力を要求します

ではTimelineProviderプロトコルにどうやって準拠するか？ providerを作成しスナップショットで単体の入力を作成し返しますタイムラインでは一連の入力を返しリロードポリシーを添付リロードポリシーは各タイムラインに組み込まれ次のタイムラインを要求する時をシステムに教えます

リロードを要求できるのはタイムラインの最後か特定の日付の後ですタイムラインをリロードしないよう指定することも可能です例えばウィジェットがタイムラインを返す前にユーザーのデータを求める場合システムがリロードポリシーを考慮しウィジェットのリロードに最適なタイミングを判断しますよく見られるウィジェットはリロードが多くまれに見られるウィジェットはその逆ですまたシステムはデバイス環境の変更時にリロードを強制します時刻変更が起きた時などがその一例です

システムはリロードに最適な時間を決めますがイベントによってはあなたがシステムに指示する必要があります例えばAppが受け取るバックグラウンド通知やユーザーがAppに変更を加えた時ですバックグラウンド通知を受ける時 WidgetCenter経由でWidgetKit APIを使いタイムラインをリロードすれば extensionを呼び出しますフォアグラウンドAppにユーザーが変更を加える場合もタイムラインをリロードできます

フォアグランドAppのリロードの際は反映すべき変更がAppで起きた時のみにウィジェットをリロードしましょうタイムラインのリロードには AppプロセスのWidgetCenter APIか extensionが使えます種類ごとまたはすべてのタイムラインをリロードする方法があり CurrentConfigurationsのリストを引き出せますまた追加の情報をサーバに問い合わせる時もありますタスクを始めるために Background URL Sessionを使えば onBackgroundURLSessionEventsのモディファイアを経由してペイロードがextensionに送られますネットワーキングの使用についても認識すべきですリクエストをサーバへバッチ処理し必要な分だけネットワーキングを使いましょう

Appのprocessor widgetがバックグラウンドで動いている時リロードはシステムに割り当てられていますウィジェットが必要な分だけ処理やネットワーキングを行いましょうウィジェットではホーム画面での― ライブ体験の実現を目指しているのではありません

ウィジェットを最新に保つにはさまざまなリロード方法がありますあなたのウィジェットに合った体験を考え― タイムラインの多様なリロード方法を効率よく使いましょう最後にウィジェットをカスタマイズする方法と Stackでインテリジェンスを伝える方法をお話しします

カスタマイズとインテリジェンスには２つのコンセプトがありますウィジェットを設定するメカニズムとして使われるIntentと Stackでインテリジェンスを開発者に伝えさせるレレバンスです IntentはIntents frameworkによって動きユーザーへの質問であるパラメータ一式を含みます例えば“天気”の構成に関する質問では予報を返すべき場所を問います Intentの枠組みは Siriやショートカットとの統合や iOS 14ではウィジェットの構成を起動するのに使われています

例を見てみましょう “株価”の単一のシンボルウィジェットはどの銘柄を表示するか尋ねますユーザーがウィジェットを設定する時 Intentは答えるために “株価”のAppで示されている同様の株価リストを返しますこれはAppに必要なツールを与えユーザーに最高の構成を提供するものです

それが不十分な時もありますメインAppで存在しない株価を表示したい時は？ Intentのおかげでこのようなタイプの体験は Intents dynamic options capabilityを使って実現できますユーザーはconfiguration UIで検索しシステムはStocks Intents Extensionを起動それが一連の答えを銘柄記号で返します新しいiOS 14ではIntentが App内Intent handlingに対応しているため Appが質問に答えます

App内Intent handlingについての詳細は “What's New in SiriKit and Shortcuts”トークをご覧ください先ほど定義したウィジェットを変更して Intentに対応するには？ StaticConfigurationの代わりに IntentConfigurationを指定し関連するIntentを指定します

同様に先ほどのTimelineProviderが IntentTimelineProviderに適合した providerに発展しています Intentオブジェクトをパスされ Intentのパラメータに基づき― 特定のタイムラインを生成できます

ウィジェットの利点の１つは Stackに複数存在することですシステムが最も関連性の高いウィジェットをローテートしあなたのAppとウィジェットがインテリジェンスをフィードできます主な方法は２つです Appはユーザーが操作を行う時ショートカットを寄与できますウィジェットに同じINIntentがある場合その操作を行う時にウィジェットがローテートされるのですさらに詳しく知りたければ “Enable Widget Personalization and Intelligence”トークをご覧くださいまたウィジェットのextensionは TimelineEntryRelevance API経由でタイムライン入力を関連する値と共に注釈できます適当な時に入力が最適だとあなたが思う時 scoreとdurationを返しシステムに特定のウィジェットをローテートするよう伝えられます Scoreはあなたが与えた入力すべてに関連する浮動値であり Durationは特定の入力が関連する時の時間間隔です

強調したいのは関連する値があなたが与えた入力すべてに関連していることシステムが関連する値と他のすべてのウィジェット値を元に Stackで適切なウィジェットをローテートさせます

ウィジェットはシンプルですがものすごく効果的ですミニAppではないためユーザーがひと目で分かる体験を考えましょうタイムラインやリロードのコンセプトインテリジェンスを駆使し iOS iPadOS and macOSで最高の体験を実現してくださいあなたにとって最高のWWDCになりますようにあなたの開発が楽しみです

11:01 - StaticConfiguration Widget definition

@main
public struct SampleWidget: Widget {
    private let kind: String = "SampleWidget"

    public var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind,
                            provider: Provider(),
                            placeholder: PlaceholderView()) { entry in
                                SampleWidgetEntryView(entry: entry)
                            }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

15:51 - TimelineProvider example

public struct Provider: TimelineProvider {

    public func snapshot(with context: Context, 
                         completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date())
        completion(entry)
    }

    public func timeline(with context: Context, 
                         completion: @escaping (Timeline<Entry>) -> ()) {
        let entry = SimpleEntry(date: Date())
        let timeline = Timeline(entries: [entry, entry], policy: .atEnd)
        completion(timeline)
    }
}

20:45 - IntentConfiguration Widget definition

@main
public struct SampleWidget: Widget {
    private let kind: String = "SampleWidget"

    public var body: some WidgetConfiguration {
        IntentConfiguration(kind: kind,
                    intent: ConfigurationIntent.self
                            provider: Provider(),
                            placeholder: PlaceholderView()) { entry in
                                SampleWidgetEntryView(entry: entry)
                            }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

20:54 - IntentTimelineProvider example

public struct Provider: IntentTimelineProvider {

    public func timeline(for configuration: ConfigurationIntent, with context: Context, 
                         completion: @escaping (Timeline<Entry>) -> ()) {
        let entry = SimpleEntry(date: Date(), configuration: configuration)

        // generate a timeline based on the values of the Intent

       completion(timeline)
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。