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

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

ウィジェットのエコシステムが拡大しています。最新のWidgetKit APIを使用して、ウィジェットをあらゆる場所で美しく表示する方法について解説します。ウィジェットをどんな環境にもシームレスにフィットさせるために、ウィジェットの背景を識別したり、レイアウトをダイナミックに調整したり、バイブラントレンダリングで使用するカラーを準備する方法を紹介します。

関連する章
- 0:00 - Introduction
- 1:44 - Transition to content margins
- 3:00 - Add a removable background
- 4:31 - Dynamically adjust layout
- 6:00 - Prepare for vibrant rendering
リソース
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
- ウィジェットに命を吹き込む方法
WWDC22
- コンプリケーションとウィジェット：リローデッド
ダウンロード

♪ ♪
Kathryn：こんにちは System Experience エンジニアのKathrynです本日はウィジェットの新しい表示場所と全ての場所で優れた見た目になるように簡単に調整する方法についてお伝えしますまずウィジェットの歴史を簡単に解説します iOS 14でホーム画面にウィジェットが導入され iOS 16で同じWidgetKit APIを使ってロック画面にウィジェットが導入されました今年ウィジェットのエコシステムは 4カ所に拡大されます Macのデスクトップ iPadのロック画面 iPhoneの新しいスタンバイモード Apple Watchの新しいスマートスタックですこれにより人々がお気に入りのウィジェットをさらに多くの場所で見ることができますウィジェットはこれらすべての場所に自動的に表示されるため表示場所に関わらず美しく見せることが大切です iPhoneのウィジェットにMacからアクセスすることもできるので macOSアプリを持っていない場合であっても Mac上でウィジェットを使うことができます友人のDevonとGrahamに Emoji Rangersのウィジェットをアップデートして新しい表示場所に対応できるように頼まれました WWDC20の「Widget Code-Along」や WWDC22の「コンプリケーションとウィジェット : リローデッド」で登場したプロジェクトですまずウィジェットの新しいコンテンツマージンと Apple Watchへの移行方法について解説します次にウィジェットに自動的に削除可能な背景を追加しますそして環境に合わせて動的にレイアウトを拡大できるようにウィジェットを修正します最後にウィジェットの要素に対し vibrantレンダリングが可能になるよう確認を進めますでは始めましょう今年のウィジェットの新機能はコンテンツマージンですコンテンツマージンはウィジェットのボディに自動的に適用される余白でコンテンツがウィジェットコンテナの端に近づきすぎるのを防ぎますこのマージンはウィジェットが表示される環境に応じて伸縮します watchOS 9以前ではウィジェットはシステム定義のセーフエリアを使用してコンテンツが端に近づきすぎないようにしていましたウィジェットはignoresSafeAreaのようなモディファイアをビューに追加することでセーフエリアの外側に拡張できました watchOS 10以降ではウィジェットのセーフエリアはコンテンツマージンの使用に置き換えられますこれによりignoresSafeAreaのようなモディファイアはウェジェットでは効果が無くなりますほとんどのウィジェットではこの変更は見た目に影響しませんしかしウィジェットにセーフエリアを無視するコンテンツがある場合 contentMarginsDisabledモディファイアを追加することで同じ効果を得ることができますそしてデフォルトのコンテンツマージン内に残すべきコンテンツは .paddingを追加するだけでよくなります widgetContentMargins環境変数を使って現在の環境のデフォルトマージンを取得できますコンテンツマージンはこれらの新しいモディファイアや変数と同じくウィジェットが表示されるすべてのプラットフォームで利用可能ですでは Emoji Rangersウィジェットに削除可能な背景を追加しましょう既存のアクセサリウィジェットは iPadのロック画面でも自動的に動作します iPhoneも同様です iPadはすぐ横にシステムスモールウィジェットを表示することもできますロック画面ではこのように表示されますこの環境では背景を削除して他のウィジェットと合わせる必要があります幸いなことにこれはとても簡単ですここに systemSmallウィジェットのビューのコードがあります現在は ZStackを使って gameBackgroundカラーに AvatarViewを重ねています背景色を削除可能にするにはビューにcontainerBackground モディファイアを追加して gameBackgroundカラーをその中に移動させますするとウィジェットの表示場所に応じてシステムが自動的に背景を取り除くようになります Apple WatchのSmart Stackもこの新しい containerBackgroundを利用できますデフォルトでは accessoryRectangularウィジェットはこの環境ではダークマテリアルの背景を受け取っています同じcontainerBackgroundモディファイアをビューに追加することでウィジェットは他のウィジェットと同じ背景に配置されアプリのビジュアルアイデンティティとリンクされますこの新しい環境の詳細については「Apple Watchのスマートスタック向けウィジェットのデザイン」をご確認ください写真やマップのウィジェットのようにフォアグラウンドに明確なコンテンツがないウィジェットもありますその場合背景を削除する意味はなくなりますこの場合 WidgetConfigurationに containerBackgroundRemovable モディファイアを追加して falseに設定しますでは iPadのロック画面やスタンバイモードでのレイアウトを最適化しましょう天気ウィジェットはウィジェットの背景が削除された時にレイアウトを変更する方法の例です
ウィジェットに含まれる情報は同じですがスペースを有効活用するために最適化されていますコンテンツは端まで押し出され重要な要素は拡大されていますこれにより遠くからでも読みやすくなりスタンバイモードによりシームレスに統合されますこのレイアウト変更により iPadのロック画面に表示されるアクセサリファミリーウィジェットと調和しどのファミリーでも一貫した見た目を維持することができます Xcodeに移動してこれらの変更をウィジェットに実装してみましょうこれは systemSmallで使用する AvatarViewのコードです右側には Xcode Previewsでウィジェットがどう見えるかのライブプレビューが表示されていますコンテナの背景が削除されたコンテキストを表示すると widgetContentMarginsは自動的に縮小されコンテンツが端まで表示されます showsWidgetContainerBackground 環境変数を使ってウィジェットの背景が削除されたかを検出できます削除された場合ヒーローのレベルとXPの詳細を HeroNameViewで省略し代わりにその詳細を下に表示します
この環境ではヒーローの名前も拡大されますこれらのコンテンツを切り替えるとレイアウトが元のビューから新しい拡大ビューに自動で変更されます
アクセサリファミリーウィジェットと同様にシステムファミリーウィジェットは iPadロック画面では vibrantレンダリングモードで表示されますつまりウィジェットは彩度を落としロック画面の背景に適した色で表示されますこのようにレンダリングするとコントラストがウィジェットの読みやすさに影響します例えばヒーローのアバターは円形の背景と区別が難しくなります Xcodeに戻り vibrantレンダリングモードでは背景を削除するようにウィジェットを修正しますスタンバイナイトモードで確認しましょう widgetRenderingMode環境変数を使うと使用中のレンダリングモードを検出できますアバターのincludesBackground パラメータを変更してレンダリングモードが vibrantか確認しましょう
スタンバイナイトモードも vibrantレンダリングを使用するためアバターはこの状況でもはっきり見えますウィジェットのレンダリングモードについては WWDC22の「コンプリケーションとウィジェット : リローデッド」をご確認くださいウィジェットのさらなる新機能については「ウィジェットに命を吹き込む方法」をご覧ください今回のウィジェットのアップデートにワクワクしていますウィジェットを強化するこれらの新機能を使ったアイデアを楽しみにしていますありがとうございました ♪ ♪

struct SafeAreasWidgetView: View {
    @Environment(\.widgetContentMargins) var margins

    var body: some View {
        ZStack {
            Color.blue
            Group {
                Color.lightBlue
                Text("Hello, world!")
            }
                .padding(margins) 
        }
    }
}

struct SafeAreasWidget: Widget {
    var body: some WidgetConfiguration {
        StaticConfiguration(...) {_ in
            SafeAreasWidgetView()
        }
        .contentMarginsDisabled()
    }
}

3:19 - EmojiRangerWidget systemSmall

struct EmojiRangerWidgetEntryView: View {
    var entry: Provider.Entry
    
    @Environment(\.widgetFamily) var family

    var body: some View {
        switch family {
        case .systemSmall:
            ZStack {
                AvatarView(entry.hero)
                    .widgetURL(entry.hero.url)
                    .foregroundColor(.white)
            }
            .containerBackground(for: .widget) {
                Color.gameBackground
            }
        }
        // additional cases
    }
}

3:48 - EmojiRangerWidget accessoryRectangular

var body: some View {
    switch family {
    case .accessoryRectangular:
        HStack(alignment: .center, spacing: 0) {
            VStack(alignment: .leading) {
                Text(entry.hero.name)
                    .font(.headline)
                    .widgetAccentable()
                Text("Level \(entry.hero.level)")
                Text(entry.hero.fullHealthDate, style: .timer)
            }.frame(maxWidth: .infinity, alignment: .leading)
            Avatar(hero: entry.hero, includeBackground: false)
        }
        .containerBackground(for: .widget) {
            Color.gameBackground
        }
    // additional cases
}

4:22 - PhotoWidget

struct PhotoWidget: Widget {
    public var body: some WidgetConfiguration {
        StaticConfiguration(...) { entry in
            PhotoWidgetView(entry: entry)
        }
        .containerBackgroundRemovable(false)
    }
}

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

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

関連する章

リソース

関連ビデオ

WWDC23

WWDC22