WidgetKitのコンプリケーションによるさらなる進化

WidgetKitを使用して、文字盤の美しいコンプリケーションを作成する方法をご確認ください。WidgetKitに含まれるwatchOS固有の機能について紹介します。また、既存のClockKitのコンプリケーションからの移行を可能にする方法もお伝えします。 WidgetKitの詳細については、WWDC22の「コンプリケーションとウィジェット：リローデッド」をご確認ください。

リソース

関連ビデオ

Tech Talks

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

WWDC22

WWDC20

ダウンロード

♪ ♪ こんにちは　watchOSのソフトウェアエンジニアの August Jokiです WidgetKitのコンプリケーションを進化させる方法を紹介します最初にWidgetKitのコンプリケーションの基本をカバーしているこちらのトークをご覧くださいこのセッションでは Watchの文字盤に表示されるコンプリケーションの概念について説明します私のWWDC20のセッション「SwiftUIでコンプリケーションを構築する」でより具体的な色合いや SwiftUIの描画を解説しています本セッションでは WidgetKitの watchOSならではの機能と ClockKitのコンプリケーションを WidgetKitに移行する方法について説明します Coffee TrackerのサンプルApp からインスピレーションを得てこのセッションで例として使用しますこのAppは一日に飲んだコーヒー紅茶ソーダの数を記録し体内のカフェイン量を経時的に確認します watchOSの特徴から説明しましょう iOS 16では iPhoneのロック画面にコンプリケーションスタイルのウィジェットを導入しました watchOS 9では Watchのコンプリケーションに WidgetKitを導入しました Watchの文字盤には画面の角に表示される独自のコンプリケーションが搭載されていますそれを表現するには accessoryCornerという独自のWidgetKit ファミリーが必要です独自のプレゼンテーションの一部は SwiftUIのView によって指定された補助的なコンテンツなのでコンテンツの一部としてレンダリングされません代わりにWatchの文字盤でレンダリングされます

円形部分はSwiftUIの標準的なレンダリングで補助コンテンツは角の曲線部分です

あるいはインフォグラフの文字盤の中にもあります

accessoryInlineファミリーは文字盤で優れた動作をします文字盤に応じて複数のレンダリング方法があります時にはフラットに時には文字盤に合わせたカーブを描きます

独自の機能のサポート方法を Coffee Tracker Appを WidgetKitを使用してアップデートし確認していきましょう

iOS 16の新しい3つのウィジェットファミリーの AccessoryRectangular accessoryCircular accessoryInlineに加え watchOS 9では accessoryCornerというファミリーが追加されました

accessoryCornerは下部の地図や心拍数のように大きな円形コンテンツとして表示されたり上部のCoffe Trackerや月のように小さな円形コンテンツとカーブしたラベルやゲージとともに表示もできます

内側の補助コンテンツ表示を制御するため watchOS 9に加わった新しいビューモディファイアを紹介しましょう

コーナーコンプリケーションを見てみましょう

大きな円形のコンテンツスタイルから始めて SF Symbolと背景を持つ ZStackを作成します SwiftUIのコンテンツは自動的に円形に切り取られコーナーコンプリケーションのデザインにあわせられます

内側のカーブしたコンテンツ追加のため widgetLabel ビューモディファイアを使用します文字盤はモディファイアを抽出しファミリーと文字盤のスタイルに適したコントロールを描画します円形のコンテンツは自動的に縮小しスペースを確保します accessoryCornerではウィジェットのラベルに SwiftUIのテキストゲージ progressViewを指定できます

accessoryCornerのみがwidgetLabel対象の唯一のファミリーではありません accessoryCircularファミリーで使用方法を見てみましょうインフォグラフの文字盤には内側に４つの円形のコンプリケーションが搭載されています Coffee Trackerの円形のコンプリケーションは中央上部にありダイアルに文字が入っているのが特徴ですこれからそのテキストを追加する方法を紹介します

円形のコンプリケーションデザインにはコーナーコンプリケーションでwidgetLabelのゲージを前面の中心へと移動させるのが適切だと思いましたインフォグラフの中央上部の位置を利用するためゲージにwidgetLabelを追加し円形のコンテンツに収まらない長いベゼル領域にテキストを表示しますしかしメインビューとその上のテキストの間に冗長な情報があります円形のコンテンツをコーナーコンプリケーションからの格好いいコーヒーカップ SF Symbolに変えれば綺麗ですしかしベゼルのない円形のコンプリケーションを表示する文字盤に切り替えるとカフェイン情報が消えてしまします幸いどちらのケースでもコンプリケーションを動作させることができます

コンプリケーションを更新し showsWidgetLabelという Environmentプロパティを追加しましたウィジェットラベルの内容が表示される文字盤上にコンプリケーションがある場合は常にtrueになります

そしてshowsWidgetLabelの値に対応するようコンテンツを変更すると適切な情報を持たせることができます先程accessoryCircularが文字盤に表示される２種類の方法を紹介しましたもう１つ知っておくべきことがあります特大文字盤は長い間時刻を大きく表示する素晴らしい方法として利用されてきました円形のコンプリケーションをサポートしています accessoryCircularファミリーを使用し特大文字盤のスタイルにマッチするようコンテンツを自動的に拡大しますご注意くださいこのフェイスは単一の大きなコンプリケーションを搭載する設計ですがキャンバスサイズが大きくなってもコンプリケーションに要素を詰め込まないでくださいコンテンツはCircularファミリーと同じであるべきです先ほどの通り文字盤のウィジェットにはあと２つファミリーがあります accessoryRectangularと accessoryInlineです widgetLabelを表示する長方形のコンプリケーションの文字盤はありません accessoryInlineはすでに widgetLabelとして動作しますインラインコンテンツから画像やテキストを抽出しレンダリングして文字盤のスタイルに合わせます次はマイグレーションについてですマイグレーションには２つのパートがあります既存のClockKitのコードを WidgetKitに書き換えることそしてマッピングを提供することで文字盤にセットした既存のコンプリケーションをアップグレードできます WidgetKitの採用すると新しいコンテンツや文字盤編集のために ClockKitデータソースはシステムから要求されなくなります

WidgetKitをWatchにもたらすと同時に watchOS 9では文字盤がアップデートされリッチコンプリケーションに対応しました　その結果コンプリケーションを12種類から４種類に減らすことができました長方形とコーナーは accessoryRectangularと accessoryCornerに直接マッピングされます３つのグラフィックCircular スタイルのClockKitファミリーは１つのaccessoryCircular WidgetKitファミリーになりました utilitarianSmallFlatや utilitarianLargeの場所に accessoryInlineファミリーが使用されます

これまでutilitarianSmall だった多くの場所が accessoryCornerファミリーを使うよう更新されました

WidgetKitとSwiftUIビューそしてステートドリブンデザインが ClockKitのテンプレートに取って代わりました WidgetKitにはよく似たタイムラインとエントリがありますこれらはClockKitに触発されたものですつまりコンプリケーションデータソースは静的またはインテント型のWidgetKit 構成に上手く移行できます

WidgetKitがサポートする構成の種類や一般的なサポートについてはオリジナルのWidgetKitのセッションをご確認ください ClockKitに最後のAPIを追加しコンプリケーションをシステムで自動的に移行できるようにしましたこれにより既存の文字盤に搭載されているコンプリケーションを自動的に新しいWidgetKit ベースのコンプリケーションにアップグレードできます AppがWatchでアップデートされると文字盤は Appのバンドルにウィジェットがあるかどうかチェックします見つかれば ClockKitのデータソースを起動し既存のコンプリケーションのマイグレーションを生成しますこの時点から CLKComplicationDataSourceは ClockKitコンプリケーションが入った共有の文字盤を受けるとマイグレーションを要求するため実行されます新しい文字盤が共有されるたびマイグレーションを要求します一貫した経験を提供するためマイグレーションを保つのです美しいWidgetKitのコンプリケーションの作成を終えたら新しいプロパティの widgetMigratorを追加し新しいMigratorプロトコルに準拠したオブジェクトを提供できますコンプリケーションデータソースのままか他のタイプか

CLKComplication WidgetMigratorプロトコルは CLKComplicationDescriptors から文字盤ウィジェットへマイグレーション設定を提供する単一関数を備えています新しいAPIを採用する最も簡単な方法はデータソースを新しいMigratorプロトコルに準拠させることです

WidgetKitコンプリケーションが静的な設定を使用する場合静的なマイグレーション設定を提供しますウィジェットコンプリケーションでインテント使用する場合は相当するマイグレーション設定がありますインテントに基づくマイグレーション設定を提供する場合はWidget Extention だけてなく Watch Appにもインテント定義を含める必要があることにご注意くださいこれで両方の場所でインテントオブジェクトを作成できます WidgetKitはWatchのクリエイティブなコンプリケーション作成を可能にし体験を劇的に簡素化しますご視聴ありがとうございました

3:06 - Large Corner

struct CornerView: View {
    let value: Double

    var body: some View {

        ZStack {
            AccessoryWidgetBackground()
            Image(systemName: "cup.and.saucer.fill")
                .font(.title.bold())
                .widgetAccentable()
        }

    }
}

3:27 - Corner with Gauge

struct CornerView: View {
    let value: Double

    var body: some View {

        ZStack {
            AccessoryWidgetBackground()
            Image(systemName: "cup.and.saucer.fill")
                .font(.title.bold())
                .widgetAccentable()
        }
        .widgetLabel {
            Gauge(value: value,
              in: 0...500) {
                Text("MG")
            } currentValueLabel: {
                Text("\(Int(value))")
            } minimumValueLabel: {
                Text("0")
            } maximumValueLabel: {
                Text("500")
            }
        }


    }
}

4:24 - Circular Gauge

struct CircularView: View {
    let value: Double

    var body: some View {

        Gauge(value: value,
              in: 0...500) {
            Text("MG")
        } currentValueLabel: {
            Text("\(Int(value))")
        }
        .gaugeStyle(.circular)

    }
}

4:34 - Circular Gauge with Widget Label

struct CircularView: View {
    let value: Double

    var body: some View {
        let mg = value.inMG()

        Gauge(value: value,
              in: 0...500) {
            Text("MG")
        } currentValueLabel: {
            Text("\(Int(value))")
        }
        .gaugeStyle(.circular)
        .widgetLabel {
            Text("\(mg, formatter: mgFormatter) Caffeine")
        }

    }

    var mgFormatter: Formatter {
        let formatter = MeasurementFormatter()
        formatter.unitOptions = [.providedUnit]
        return formatter
    }
}

extension Double {
    func inMG() -> Measurement<UnitMass> {
        Measurement<UnitMass>(value: self, unit: .milligrams)
    }
}

4:51 - Circular Stack with Widget Label

struct CircularView: View {
    let value: Double

    var body: some View {
        let mg = value.inMG()

        ZStack {
            AccessoryWidgetBackground()
            Image(systemName: "cup.and.saucer.fill")
                .font(.title.bold())
                .widgetAccentable()
        }
        .widgetLabel {
            Text("\(mg, formatter: mgFormatter) Caffeine")
        }

    }

    var mgFormatter: Formatter {
        let formatter = MeasurementFormatter()
        formatter.unitOptions = [.providedUnit]
        return formatter
    }
}

extension Double {
    func inMG() -> Measurement<UnitMass> {
        Measurement<UnitMass>(value: self, unit: .milligrams)
    }
}

5:12 - Circular Stack or Gauge

struct CircularView: View {
    let value: Double
    @Environment(\.showsWidgetLabel) var showsWidgetLabel

    var body: some View {
        let mg = value.inMG()
        if showsWidgetLabel {
            ZStack {
                AccessoryWidgetBackground()
                Image(systemName: "cup.and.saucer.fill")
                    .font(.title.bold())
                    .widgetAccentable()
            }
            .widgetLabel {
                Text("\(mg, formatter: mgFormatter) Caffeine")
            }
        }
        else {
            Gauge(value: value,
                  in: 0...500) {
                Text("MG")
            } currentValueLabel: {
                Text("\(Int(value))")
            }
            .gaugeStyle(.circular)
        }

    }

    var mgFormatter: Formatter {
        let formatter = MeasurementFormatter()
        formatter.unitOptions = [.providedUnit]
        return formatter
    }
}

extension Double {
    func inMG() -> Measurement<UnitMass> {
        Measurement<UnitMass>(value: self, unit: .milligrams)
    }
}

9:47 - Widget Migrator

var widgetMigrator: CLKComplicationWidgetMigrator {
    self
}

9:56 - Static Migration Configuration

func widgetConfiguration(from complicationDescriptor: CLKComplicationDescriptor) async -> CLKComplicationWidgetMigrationConfiguration? {
    CLKComplicationStaticWidgetMigrationConfiguration(kind: "CoffeeTracker", extensionBundleIdentifier: widgetBundle)
}

10:03 - Intent Migration Configuration

func widgetConfiguration(from complicationDescriptor: CLKComplicationDescriptor) async -> CLKComplicationWidgetMigrationConfiguration? {
    CLKComplicationIntentWidgetMigrationConfiguration(kind: "CoffeeTracker", extensionBundleIdentifier: widgetBundle, intent: intent, localizedDisplayName: "Coffee Tracker")
}

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