コンプリケーションとウィジェット：リローデッド

watchOSやiOSのロック画面を掘り下げていく、ウィジェットのCode-alongが帰ってきました。WidgetKitの最新の改善点をご確認ください。WidgetKitに加えられた改善により、watchOS上の複雑なコンプリケーションを支え、iPhone用のロック画面用ウィジェットが作成できるようになりました。さらに、最新のSwiftUIビューを組み込んで、一目で理解できるデータ表示をする方法をはじめ、各プラットフォームでコンテンツをレンダリングする方法、ウィジェットやコンプリケーションにて、コンテンツのデザインや操作性をカスタマイズする方法について解説します。

リソース

関連ビデオ

WWDC23

ウィジェットの新しい場所への展開方法

Tech Talks

エンタープライズデベロッパ向けの最新情報

WWDC22

WWDC21

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

WWDC20

WidgetKitについて

ダウンロード

♪メロウなヒップホップ音楽♪ ♪ こんにちは！Devonです私はwatchOSチームのエンジニアで本日はiOSについてお話します iOSチームのエンジニアの Grahamです本日は watchOSについてお話します WidgetKitに追加したロック画面用のアクセサリウィジェットや watchOS用のコンプリケーションが書けるAPIについて SwiftUIへの追加機能とともに両方を一緒に開発する方法を紹介しますウィジェットやタイムラインリロードに詳しくない方は過去のWidgetKitのセッションをご覧くださいまずコンプリケーションの歴史とその進化について続いてウィジェットやコンプリケーションを新しい環境で彩る新しいAPIについてその後 Grahamが独自のウィジェットの作成方法と既存のウィジェットExtensionを watchOSに移行する方法をデモで紹介します次にこれらの小さなビューを最大限に活用する方法を紹介します最後にウィジェットが表示される可能性がある場所でのプライバシー環境についてお話ししますコンプリケーションは Watchの文字盤に素早く一目でわかる情報を表示する watchOSの重要な一部ですぐにアクセスできる価値の高い情報を提供しタップするとApp内の関連する場所に移動します watchOS 2で ClockKitによって独自のコンプリケーションが作成できるようになりましたその後改善が大きく進み

グラフィックコンテンツと一連の新しいファミリーとリッチコンプリケーションを watchOS 5に導入しました watchOS 7では SwiftUI コンプリケーションと複数コンプリケーションを導入してこれまで以上の選択肢の提供が可能になりましたコンプリケーションは WidgetKitによって再構築され SwiftUIを採用しウィジェットという形で一目でわかるコンプリケーション体験を iOSにもたらしました iOS 16とwatchOS 9の WidgetKitを使用すると両方のプラットフォームで一目でわかるウィジェットとコンプリケーションが構築できコードを一度書けば既存のホーム画面ウィジェットとインフラ共有が可能ですそのために既存のWidgetFamilyタイプに ”accessory”で始まる新しいウィジェットファミリーを追加しました新しいaccessoryRectangular ファミリーは ClockKitの graphic Rectangularファミリーと同様複数行のテキストや小さなグラフやチャートを表示できます　accessory Circularファミリーは簡単な情報やゲージ進捗状況の表示に最適で ClockKitのgraphicCircular ファミリーを置き換えます新しいaccessoryInlineは watchOSの多くの文字盤にあるテキストのスロットで iOSでは時刻の上に表示されますインラインスロットには様々なサイズがあり活用法は後ほどご紹介します watchOSに特有なのは

ウィジェットコンテンツの小さな円形とテキストやゲージを合わせたaccessory CornerファミリーですここではiOSとwatchOS共通のファミリーに焦点を当てます新しいwatchOS ファミリーやコンプリケーションの詳細は「WidgetKitのコンプリケーションによるさらなる前進」をご覧くださいカラーとレンダリングモードに移りましょうアクセサリウィジェットは異なる外観を持つことにお気づきでしょうかアクセサリファミリーウィジェットの外観はシステムで制御されますがレンダリングスタイルに適用するツールを紹介しますウィジェットの表示にはレンダリングモードが 3種類ありますフルカラーアクセンテッドバイブラントが適用できますこの3種類を表現するため WidgetRenderingMode型を導入していますこの値は WidgetRendering Modeのキーパスで Environmentからアクセスできますコンテンツを条件付きで変更することでどのモードでも丁度よい見た目で表示できます watchOSのフルカラーモードではみなさんの指定通りにコンテンツを表示します天気のゲージのグラデーションやアクティビティリングの色など既存のコンプリケーションでは多くがフルカラーで表現できますアクセンテッドレンダリングモードではビューを2つに分割しそれぞれ独立して色付けします 2つのカラーリンググループはオリジナルの不透明度だけ残してフラットに着色します .widgetAccentable() ビューモディファイアでビューをグループ化する方法をシステムに指示したり Widget Rendering Mode 環境の値に基づいてコンテンツを切り替えてフラット化したときに完璧な見た目にできますこのシステムではコンテンツの色合いを自在に変化させられ反転するものもあります黒い背景や watchOS 9で新たに追加したフルカラーの背景もあります iOSのバイブラントレンダリングモードではコンテンツは彩度を落としロック画面の背景に適切な色になりますグレースケールのコンテンツを素材感のある外観にマッピングするシステムですこの素材は背後のコンテンツに適応し環境に合わせて表示されますロック画面では鮮やかなレンダリングモードに色味を持たせる設定もできます明るい光源色のほとんどは不透明で明るく仕上がります暗い光源色は後ろの背景のボケが目立たなくなり少し明るくなる程度にしか見えませんこのモードでは視認性を確保するために透明な色は避けてください代わりに濃い色や黒を使って視認性を維持しながらさりげないコンテンツを表示しますこのようなニュアンスを表現するため AccessoryWidgetBackground ビューを導入し円形カレンダーのような背景が必要なウィジェットに一貫した背景を与えられますアクセサリウィジェットのほとんどに背景はないですが背景が付くスタイルもあります背景表示はさまざまなウィジェットレンダリングモードで異なる外観になりフェイスまたはロック画面のスタイルに適するようシステムで調整されますこれはフルカラーやアクセンテッドの柔らかい透明感のある表示と鮮やかな環境での黒で結果的に輝度が低くぼかしが多くなります Grahamがロック画面やコンプリケーション用の新しいウィジェットを作るのを楽しみにしていますよでは彼に引き継ぎますまたお会いしましたね！ WWDC2020の「Widget Code-Along」でおなじみのApp Emoji Rangersに新しいウィジェットファミリーのサポートを追加予定です始める前に既存のウィジェットフリープロジェクトをお持ちの方へ開始するには iOSにすでに存在し watchOSに導入した Widget Extensionのターゲットをプロジェクトに追加します今日は新しいウィジェットの追加やコンプリケーションについてお話しします

Emoji Rangersプロジェクトについて続けますこのAppはお気に入りのEmoji Rangerをトラッキングしホーム画面のウィジェットでレンジャーの健康状態や充電時間を知らせます Emoji Rangerを watchOSに導入し私たちの手首の上に持ってきました今日は新しいウィジェットファミリーのサポートと Emoji Rangerを拡張して Watchでウィジェットの Extensionを実現します早速 Widet Extensionを Watchに搭載してみましょう既存のiOSターゲットとコードを共有する新しいwatchOSターゲットを追加します iOSのWidget Extensionのターゲットを複製し

より良い名前を付け

バンドル識別子が Watch Appで始まるように変更してターゲットをwatchOSとし

新しいExtensionを Watch Appに埋め込みます watchOS上でコードをビルドする必要がありますやってみましょう

EmojiRangerWidgetのコードを見るとシステムがコンテンツをリロードする際に使うタイムラインプロバイダや

異なるファミリーのために SwiftUIでコンテンツを生成するビュー

ウィジェットのconfiguration そして Xcodeプレビュープロバイダがあります Emoji Rangers Appはすでに iOSのホーム画面ウィジェットに対応済みです system small と medium を提供していますがウィジェットのconfigurationで新しいファミリーを追加してみます

システムファミリーは Watchで利用できないのでプラットフォームマクロで supportedFamiliesを指定します

プレビュープロバイダで新しいファミリーのプレビューを追加します

watchOS向けのビルドを成功させる前に新しいIntentRecommendation APIを実装します iOSでは Intentsはウィジェット編集UIで設定可能ですが watchOSでは事前に設定されたリストの提供が必要です IntentTimelineProviderの新しいレコメンデーションメソッドをオーバーライドするとできます

順調に構築中ですプレビューを再開して円形ウィジェットの見え方を確認しましょう

小さなウィジェットを想定したコンテンツは新しいフォームファクタにうまく収まりません新しいウィジェットファミリーはホーム画面にあるiOSのウィジェットより小さいためコンプリケーションのコンテンツの考慮が必要ですそこでコンプリケーションを際立たせる新しいビューについてお話ししますそのビューの話題に移りましょう systemSmallや他のウィジェットのコードがありますが accessory Circularケースのコードを追加してみますアバターだけでもまずは良さそうです

しかしこれはAppへのクイックショートカットを提供しますがユーザーには何の情報も提供しませんレンジャーが再び戦闘可能なタイミングをユーザーに知らせるためにエッジの周りにプログレスビューを追加します

問題は進捗状況をアニメーション表示するには連続したタイムラインのエントリが必要なことです代わりに SwiftUIの自動更新のProgressViewが使えますレンジャーが完全に回復するまで時間範囲が必要ですシステムがその進捗を更新し続けるのでタイムラインの入力は 1つで済みます

この方がずっといいですねでは長方形のファミリーを追加してみましょう

recutangularのプレビューを選択しますスペースに余裕があるのでコンプリケーションのように 3行表示にしてみますまずキャラクターの名前次にレベルと完治までの時間自動更新の dateフィールドを使いますキャラクターの名前を目立たせるため見出しのフォントスタイルでテキストのサイズを調整し色を調整する widgetAccentable モディファイアを追加します

他のレンダリングモードでどのように表示されるか見てみましょう

キャラクターの名前がアクセントカラーになっていますウィジェットやコンプリケーションが環境に馴染むようデフォルトのフォントパラメータを使用しフォントスタイルを活用します iOSとwatchOSではフォントのスタイルやサイズが異なります iOSは通常のテキストデザイン watchOSは重厚感のある丸みを帯びたデザインを採用していますウィジェットやコンプリケーションは画面上でほかの要素と隣り合って表示されますそのため Title Headline Body Captionのフォントスタイルの使用をお勧めします

Xcodeのプレビューによるとアバターも追加する余裕があります

iPhoneで見てみましょう

いい感じですね！最後にテキストの行とオプションで画像表示する accessoryInlineを追加しましょうインラインアクセサリはシステムが定義するカラーリングとフォントに従って描画されますプレビューを選択しましょう

ヒーローの名前と回復のカウントダウンを表示します

このテキストは Watch スロットには長すぎます今こそViewThatFitsをお見せするときです長いビューも簡潔なビューも提供できて ViewThatFitsは切り捨てや切り抜きなしに利用可能なスペースに適合する最初のコンテンツビューを選択しますテキストを短くしましょう

まだ最短のWatchスロットには長すぎるかもしれないのでアバターを名前に置き換えるという第3の選択肢を用意します

その様子を見てみましょう

「SwiftUIによるカスタムレイアウトの作成」のセッションで詳しくご覧ください素晴らしい！ Emoji Rangersもプライバシーを享受したいので Devonに戻します私からプライバシーの話をしますウィジェットのアクティブな状態やコンプリケーションの説明をしてきましたしかし私たちのプラットフォームではデバイスがコンテンツを適応表示しているかまたは低輝度状態かを考慮する必要があります iOSのロック画面ではデバイスのロック中でもコンテンツを表示するのがデフォルトの操作でこのグリッドの左上のセルがそれにあたりますこれは「設定」で設定できユーザーは「通知」と同様にロック時にウィジェットを適応表示することを選べます watchOSでは Watchの装着中はデバイスはロック解除されたままです非アクティブ時には常時表示に移行しコンテンツは低輝度で表示され更新頻度も低くなりますデフォルトの低輝度状態ではコンテンツは適応表示されませんロック画面と同様に常時表示状態でもユーザーがコンプリケーションの内容を適応表示できるよう設定可能ですこの状態ではコンテンツの適応表示と低輝度の両方に対応する必要がありますこのプラットフォームはこの4つの状態をカバーしますありうる状態を考慮してコンプリケーションとウィジェットが機能するようにしますその方法を説明します Watchでウィジェットは常時表示のサポートが必要です Environment値 isLuminanceReducedでコンテンツを常時表示に対応させます ClockKitから来た場合はすべてのタイムラインエントリに対し常時表示のコンテンツが使えます常時表示の場合低い更新周期をサポートするため時間軸のテキスト表示と進捗表示は忠実度が低いモードに変更されます対応するためには Environment値を用いて時間的制約のあるコンテンツを削除し低い更新頻度にコンテンツを最適化します次は適応表示についてですデフォルトのプライバシーモードでは TimelineProviderが作成したプレースホルダービューの適応表示バージョンを表示します機密性の高い要素とそうでなく適応表示の必要がない要素の両方がある場合 .privacySensitive修飾子で一部のビューだけ適応表示するようマークしますこの例ではウィジェットの心拍数を適応表示し画像は適応表示せずに残しますこれでロック画面と WidgetKitのコンプリケーション用に素晴らしいウィジェットを作る準備が整いました新機能の詳細は「SwiftUIによるカスタムレイアウトの作成」をご覧ください 2人：ご視聴ありがとうございました ♪

4:07 - widgetAccentable

VStack(alignment: .leading) {
    Text("Headline")
        .font(.headline)
        .widgetAccentable()
    Text("Body 1")
    Text("Body 2")
}.frame(maxWidth: .infinity, alignment: .leading)

5:24 - AccessoryWidgetBackground

ZStack {
     AccessoryWidgetBackground()
     VStack {
        Text("MON")
        Text("6")
         .font(.title)
    }
}

9:02 - Xcode Previews

EmojiRangerWidgetEntryView(entry: SimpleEntry(date: Date(), relevance: nil, character: .spouty))
                .previewContext(WidgetPreviewContext(family: .accessoryCircular))
                .previewDisplayName("Circular")
            EmojiRangerWidgetEntryView(entry: SimpleEntry(date: Date(), relevance: nil, character: .spouty))
                .previewContext(WidgetPreviewContext(family: .accessoryRectangular))
                .previewDisplayName("Rectangular")
            EmojiRangerWidgetEntryView(entry: SimpleEntry(date: Date(), relevance: nil, character: .spouty))
                .previewContext(WidgetPreviewContext(family: .accessoryInline))
                .previewDisplayName("Inline")

#if os(iOS)

9:38 - recommendations method

return recommendedIntents()
            .map { intent in
                return IntentRecommendation(intent: intent, description: intent.hero!.displayString)
            }

11:05 - ProgressView

ProgressView(interval: entry.character.injuryDate...entry.character.fullHealthDate,
                         countdown: false,
                         label: { Text(entry.character.name) },
                         currentValueLabel: {
                Avatar(character: entry.character, includeBackground: false)
            })
            .progressViewStyle(.circular)

11:26 - Rectangular

case .accessoryRectangular:
        HStack(alignment: .center, spacing: 0) {
            VStack(alignment: .leading) {
                Text(entry.character.name)
                    
                Text("Level \(entry.character.level)")
                Text(entry.character.fullHealthDate, style: .timer)
            }.frame(maxWidth: .infinity, alignment: .leading)
            Avatar(character: entry.character, includeBackground: false)
        }

14:03 - ViewThatFits

ViewThatFits {
                Text("\(entry.character.name) is resting, combat-ready in \(entry.character.fullHealthDate, style: .relative)")
                Text("\(entry.character.name) ready in \(entry.character.fullHealthDate, style: .timer)")
                Text("\(entry.character.avatar) \(entry.character.fullHealthDate, style: .timer)")
            }

16:18 - isLuminanceReduced

@Environment(\.isLuminanceReduced)
var isLuminanceReduced

var body: some View {
    if isLuminanceReduced {
        Text("🙈").font(.title)
    } else {
        Text("🐵").font(.title)
    }
}

16:52 - privacySensitive

VStack(spacing: -2) {
    Image(systemName: "heart")
        .font(.caption.bold())
        .widgetAccentable()
    Text("\(currentHeartRate)")
        .font(.title)
        .privacySensitive()
}

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