Apple Watchのスマートスタック向けウィジェットの構築

Apple Watchのスマートスタック向けウィジェットの構築

最新のSwiftUIとWidgetKit APIを使用して、watchOS 10のスマートスタック向けウィジェットを作成する過程を紹介します。Apple Watchで関連情報を表示するウィジェットの作成に関するヒント、テクニック、ベストプラクティスをご確認ください。

関連する章
- 0:58 - Get started
- 2:03 - Configure the widget
- 3:51 - Set up the timeline
- 10:16 - Build widget views
- 16:27 - Finish building timeline
- 19:58 - Provide relevant intents
リソース
関連ビデオ

WWDC23
- Apple Watchのスマートスタック向けウィジェットのデザイン
ダウンロード

♪ ♪
Calvin：こんにちは Calvin Gaisfordです watchOS teamのエンジニアです今回のcode-alongは Apple Watchの新しいスマートスタック用ウィジェットを作成します AppIntent構成を使いウィジェットをビルドする全てのプロセスを説明しますその過程で WidgetKitとSwiftUIの最新アップデートを使用します
code-alongのために Backyard Birdsアプリを使用します Backyard Birdsは野鳥が集まる裏庭を作成・管理するアプリですウィジェットは裏庭の状態を表示します鳥が訪れると鳥が表示され裏庭の状態も表示されますウィジェットはスマートスタックに関連する日付を提供し最も関連性の高い時にウィジェットを優先させることができますこのセッションで使用するサンプルコードをダウンロードして Backyard Birdsの Xcodeプロジェクトを開いてみてくださいすでにプロジェクトに Widget Extensionを追加し BackyardVisitorsWidgetを含む複数のファイルを生成しましたほとんどの時間このファイルの更新作業を行います内容は以下の通りですまずウィジェットを定義するウィジェット構造を見ていきますそしてウィジェット構成インテントの概要を説明します次にウィジェットビューのデータを保持する TimelineEntry構造をカスタマイズしタイムラインを構築しますプレビューを有効にするために必要なデータがタイムラインにそろったらウィジェットのビューを構築しますビューが構築されたらタイムラインに戻り仕上げを行います最後にRelevant Intent Managerを見て watchOSスマートスタック上でウィジェットを優先する日付のインテントを設定しますではコードでウィジェット構成を確認しウィジェットの設定を始めましょう
ウィジェットの設定はウィジェット構成で定義されます AppIntentConfigurationsが新たにwatchOSに実装されました AppIntentConfigurationをウィジェットに使用します構成インテントプロバイダビューはすべて WidgetExtensionの作成時に無効になっていますそれぞれを確認して Backyard Birdsウィジェットに実装しますウィジェットの定義は良さそうなので次に WidgetConfigurationIntentを見てみましょうウィジェットは App Intent Configurationを使用して 2つのことができますまずウィジェットは watchOSウィジェットギャラリーで設定済みのウィジェットのセットを提供できます Backyard Birdsの場合アプリ内の各庭の設定を提供できます次に WidgetConfigurationIntentを使用してウィジェットに最も関連のある日付を指定できますスマートスタックはこの情報を使用してスマートスタック内のウィジェットを優先順位付けします
ウィジェットのConfiguration App Intentを見てみましょう Backyard Birdsの各庭には固有のIDがありますすでにbackyardIDというパラメータを追加したのでこれを使用して一連のウィジェットのインテントを作成し庭ごとにbackyard IDで識別可能です今回作成するウィジェットに必要なパラメータは以上です Appインテントの詳細と WidgetConfigurationIntentの使い方については Appインテント関連のセッションをご覧くださいウィジェット構成が定義され WidgetConfigurationIntentが backyard IDを保持できるようになりましたウィジェットタイムラインに移動して TimelineEntry構造体を見てみましょう TimelineEntry構造体にはウィジェットビューが特定の日付にレンダリングを行うのに必要なデータが格納されます BackyardVisitorsWidgetファイルに戻り生成された SimpleEntry構造体を見てみましょう
このファイルが生成された時に日付と設定のプロパティが追加されましたウィジェットビューに必要な追加のプロパティを定義する必要がありますウィジェットは裏庭の状態名前エサ水の状態を表示します鳥が訪問している場合はその鳥と鳥の名前が表示されます鳥がいなければ訪問した鳥の数を表示します庭に関する情報を表示するためにある時点での裏庭に関するすべての情報を保持する Backyard Birdsアプリの構造体を使用します TimelineEntryには未来の日付が含まれる可能性があるためこれは重要です TimelineEntryに裏庭のプロパティを追加しましょう
先ほど追加した裏庭のプロパティに基づいていくつかの計算プロパティを追加しましょうまず鳥のプロパティを追加してウィジェットのビューで鳥が訪れているかをチェックして表示可能にします
では庭の情報を表示するためにビューで使用するプロパティを2つ追加しましょう
waterDurationと foodDurationはビューで使用され水とエサの使用期限を表示しますこれは TimelineEntryの dateプロパティから計算されます
TimelineEntryには relevanceというプロパティもあり実装するとどのタイムラインエントリが最も重要かをwatchOS スマートスタックに伝えられます relevanceプロパティを TimelineEntryに追加しましょう
その中で TimelineEntryの日付に裏庭に鳥がいるかをチェックしましょう
鳥がいれば TimelineEntryRelevance 構造体を返します
TimelineEntryRelevance構造体には scoreとdurationの 2つのパラメータがあります scoreは同じタイムラインの他のエントリに対して優先順位をつけるために使われます鳥がいるエントリのscoreを10にして鳥がいないエントリより高く設定しますこの値は任意でタイムラインのエントリのランク付けに必要な範囲の値を付けられます durationはこの関連エントリの有効期限をスマートスタックに伝えるために使用しますここでは来訪した鳥のendDateに設定します鳥がいなければ Relevance構造体はゼロのscoreを返すようにします
これでスマートスタックにどのタイムラインエントリが最も重要かを伝えられますその時点で起きている事象により watchOSスマートスタック上でウィジェットの優先順位が上がります
ウィジェットビューが適切にレンダリングするために必要なものがすべてそろいました次に TimelineProviderを用意しましょう TimelineProviderには定義する必要のある関数が placeholder　snapshot timeline recommendationsの4つあります placeholder関数はウィジェットを初めて表示する際素早く戻る必要がある時に使用されます TimelineEntryはbackyardの値を取るので定義が必要ですアプリのデータモデルからランダムな backyardを追加して修正します
良いですね　次に行きます snapshot関数はウィジェットが一時的な状況にある時に使われますこの関数は素早く返す必要があるのでフェッチするのに数秒以上掛からなければサンプルデータを使っても問題ありません placeholder関数の時と同様にランダムなbackyardを渡します
良いですが　もっと良い方法があります snapshot関数には先ほど追加した backyardIDプロパティを持つ configurationインテントが渡されますすべてのデータはローカルなのでランダムなbackyardを使う代わりに適切なbackyardをすぐに調べて返すことができます設定のbackyardIDから設定されているbackyardを取得します
次に backyardをチェックしてそこから visitorEventを取得できるか確認します
鳥の訪問日で設定されたエントリを返し鳥がいなければ現在の日付に設定された backyardを返します
これにより設定された backyardが表示されるためより良いプレビューとなります timeline関数の前に Xcodeキャンバスプレビューをオンにします SimpleEntryを修正してプレビューできるようにbackyardを付与します
キャンバスをオンにします
Xcodeで新たにウィジェットのタイムラインをプレビュー可能になりましたキャンバスに長方形のウィジェットのプレビューが表示され下部にウィジェットのタイムラインを構成する TimelineEntriesが表示されますキャンバスのプレビューはウィジェット追加時に生成されたデフォルトのビューを使用していますタイムラインプロバイダを完成させる前にビューを構築してタイムラインを見ながら構築しましょう BackyardBirdsWidgetEntryViewを探します各ファミリー専用のビューを構築できるように widgetFamilyに Environmentプロパティを追加します
bodyをswitch文に置き換えて accessoryWidgetファミリーごとにビューを実装できるようにします
accessoryRectangularのcaseを作成してエントリをパラメータとして受け取るビューを作成しますこのビューを下に実装します
長方形のビューは watchOSスマートスタックに表示されるウィジェット独自のビューになります長方形のビューで一般的なパターンに従い左側に画像右側にテキストを3行配置しますファイルの一番下に移動し RectangularBackyardViewを作成します
このビューでは先程変更した TimelineEntryを使い裏庭のデータを格納します続ける前にキャンバスビューを Smart Stack Rectangular ビューに変更します
これによってウィジェットをビルドしながらビジュアライズできますビューのHStackに画像と3行のテキストを入力します
プレビューをご覧くださいちょっと違いますねテキストの行を VStackに入れます
だいぶ近づきましたビューにエントリの実際のデータを入れますまずBackyard Birdsアプリで鳥を表示する ComposedBirdビューを使います
鳥はオプショナルなのでアンラップします ComposedBirdビューとVStackを if-letチェックに入れて鳥がエントリに存在するか確認します
鳥がいなければ庭の噴水の画像と鳥の不在を示すテキストを入れます
タイムラインを確認し鳥の存在を示す3行のテキストと鳥の不在を示すエントリを見てみましょう
まず鳥がいる場合の詳細を入力します 1行目には鳥の名前 2行目には裏庭の名前 3行目には庭のエサと水に関する情報を追加します
鳥がいない場合は庭の名前エサと水の情報この庭を訪れた鳥の数を表示します
エントリを見てみましょう
良いですが少しレイアウトを修正しますまず ComposedBirdを更新しますビューをscaledToFit そしてwidgetAccentableにして色付きの文字盤で表示した時に色合いが変わるようにします鳥の名前に.headlineフォントを追加し scaleにします文字盤に合わせて widgetAccentableにしますそして foregroundStyleを使用してテキストを鳥の翼の色にします
長い名前に備えて他の両方のビューに ScaleFactorを追加します
最後の行のforegroundStyleを secondaryに設定します
最後に 3つのテキストビューをそろえるためスタックを先頭揃えにします
ビューの見た目は良さそうです鳥がいない時のelse文のビューにも同じ内容を適用します
ウィジェットの見た目が改善されました
ウィジェットが鳥を表示する時と庭を表示する時で間隔が異なっています鳥のビューと画像ビューにフレームを追加して一致させましょう
VStacksにフレームを追加して正しく合わせましょう
あと1つオプションを追加すれば watchOSのスマートスタックウィジェットは完成です SwiftUIに containerBackgroundが新たに追加されました containerBackgroundに裏庭のグラデーションを使用します containersBackgroundの配置をウィジェットに設定します
containerBackgroundはシステムによって選択的に使用されここではwatchOSのスマートスタックにのみ表示され文字盤には表示されません
これでwatchOSスマートスタックのビューは完成ですビューは完璧です TimelineProviderに戻りタイムラインを完成させます
タイムライン関数はウィジェットがビューをレンダリングするためのデータを含む一連のタイムラインエントリを生成しますこれがウィジェットの主力となる関数です現在ランダムな裏庭のデータで 5つのエントリを生成していますこれを鳥でいっぱいのタイムラインに置き換えましょう関数の先頭に TimelineEntriesの配列がありますこれを使ってタイムラインを構築しますまず生成されたタイムラインのコードを削除します
次にConfigurationAppIntentから backyardIDを使って設定した庭を取得します
backyardの構造体にはその庭のすべての visitorEventsを含むプロパティがあります取得した庭の visitorEventsを記述しましょう各イベントについて visitorEventのstartDateを含む TimelineEntryを作成し設定したbackyardを渡します
タイムラインのプレビューが更新されました違いを見てみましょうタイプラインエントリを選択すると鳥が現れますこれは予想通りですしかしすべてのエントリに鳥がいます鳥が去った時のエントリも追加する必要があります 2つ目のエントリを作成し visitorEventのendDateを使いましょう同じ裏庭を使いエントリをエントリの配列に追加します
タイムラインを見てみましょう
これで鳥が来た時と去った時のエントリができましたウィジェットタイムラインの完成です新しいプレビューは素晴らしいですねウィジェットやタイムラインの作成がより簡単になります
最後にタイムラインプロバイダの recommendations関数を実装しますここでは backyardIDを保持する WidgetConfigurationIntentを含む AppIntentRecommendationsの配列を返しますデフォルトの実装を削除します
recommendationsを返す配列を作成します
次にアプリの各backyardに対して recommendationを作成したいのですべてのbackyardを繰り返し処理します
各backyardについて ConfigurationAppIntentを作成し backyardIDを設定します
最後に ConfigurationIntentを使用して AppIntentRecommendationを作成し配列に追加します裏庭の名前を説明文に使用します
Backyard Birdsウィジェットを選択すると recommendations関数がウィジェットギャラリー内で裏庭ごとに1つウィジェット設定の一覧を提供するようになりましたおめでとうございますこれで文字盤のコンプリケーションと watchOSスマートスタックとして表示されるウィジェットが出来ました先ほど TimelineEntryに relevanceプロパティを実装した時に関連性の話をしましたがさらにできることがあります Backyard Birdsアプリの各庭は鳥が利用できる水とエサを記録しています新しいウィジェットにもその情報が表示されています水やエサの不足が分かった時に関連するインテントの一覧をシステムに提供することができますこれらの状況でウィジェットを優先的に表示させ庭に注意を払うよう知らせることができます
コードに戻って必要なウィジェットに関連するインテントを生成し RelevantIntentManagerにインテントを追加する新しい関数を作成します updateBackyardRelevantIntentsという新しい関数を作成します
この関数に relevantIntentsの配列を追加します
その配列で RelevantIntentManagerを更新します
relevantIntents配列に入力するためアプリ内のすべての裏庭をループします次に裏庭の configurationIntentを作成し現在の裏庭にbackyardIDを設定します日付に基づいて RelevantContextを作成しますこの場合将来的に裏庭のエサが少なくなる日付と空になる日付を使用します
最後に relevantIntentを作成しますウィジェットのconfigurationIntent ウィジェットの種類先ほど作成した relevantDateContextを使い配列に追加します
次に裏庭のlowWaterとemptyWaterの日付も同じようにします
良さそうですねこれでRelevantIntentManagerに各ウィジェットがより高い関連性を持つ可能性のある日付が設定されましたこの関数を主要なコンポーネントに追加して適切な時にrelevantIntentsが更新されるようにしますまずタイムラインプロバイダの timeline関数に戻ります timelineを返す直前に関数を呼び出します
これでウィジェットのタイムラインが更新されるたびに relevantIntentsを最新の状態に保つことができます Backyard Birdsアプリを見てみましょう Backyard Birdsアプリには各庭の詳細が表示されエサと水を補充するページが用意されていますエサと水の供給量は変化するため relevantIntentsの更新に最適な場所です BackyardContentTabに Refillボタンがタップされた時に updateBackyardRelevantIntentsを持つ Taskを追加しますエサと水が更新されたことが分かったので WidgetKitにコールを行いウィジェットのタイムラインをリロードします
関連するインテントが更新されました庭で水やエサが補充されるとウィジェットのタイムラインが再読み込みされます
watchOSスマートスタックがビルドされました RelevantIntentManagerを更新して最も関連度の高い時にウィジェットの優先度を上げるdateインテントを追加しましたご視聴ありがとうございました皆さんの watchOSスマートスタック用ウィジェットを見るのが楽しみですウィジェットやスマートスタック Appインテントの詳細については以下のセッションをご覧ください今後も冒険心を忘れずコーディングを続けましょう

struct SimpleEntry: TimelineEntry {
    var date: Date
    var configuration: ConfigurationAppIntent
    var backyard: Backyard
    
    var bird: Bird? {
        return backyard.visitorEventForDate(date: date)?.bird
    }
    
    var waterDuration: Duration {
        return Duration.seconds(abs(self.date.distance(to: self.backyard.waterRefillDate)))
    }

    var foodDuration: Duration {
        return Duration.seconds(abs(self.date.distance(to: self.backyard.foodRefillDate)))
    }

    var relevance: TimelineEntryRelevance? {
        if let visitor = backyard.visitorEventForDate(date: date) {
            return TimelineEntryRelevance(score: 10, duration: visitor.endDate.timeIntervalSince(date))
        }
        return TimelineEntryRelevance(score: 0)
    }
}

7:50 - placeholder function

func placeholder(in context: Context) -> SimpleEntry {
  return SimpleEntry(date: Date(), configuration: ConfigurationAppIntent(), backyard: Backyard.anyBackyard(modelContext: modelContext))
}

8:15 - snapshot function

func snapshot(for configuration: ConfigurationAppIntent, in context: Context) async -> SimpleEntry {
  if let backyard = Backyard.backyardForID(modelContext: modelContext, backyardID: configuration.backyardID) {
    if let event = backyard.visitorEvents.first {
      return SimpleEntry(date: event.startDate, configuration: configuration, backyard: backyard)
    } else {
      return SimpleEntry(date: Date(), configuration: configuration, backyard: backyard)
    }
  }

  let yard = Backyard.anyBackyard(modelContext: modelContext)
  return SimpleEntry(date: Date(), configuration: ConfigurationAppIntent(), backyard: yard)
}

10:26 - Widget Entry View

struct BackyardBirdsWidgetEntryView: View {
    @Environment(\.widgetFamily) private var family
    var entry: SimpleEntry
    
    var body: some View {
        switch family {
        case .accessoryRectangular:
            RectangularBackyardView(entry: entry)
        default:
            Text(entry.date, style: .time)
        }
    }
}

11:23 - Backyard Rectangular View

struct RectangularBackyardView: View {
    var entry: SimpleEntry
    
    var body: some View {
        HStack {
            if let bird = entry.bird {
                ComposedBird(bird: bird)
                    .scaledToFit()
                    .widgetAccentable()
                    .frame(width: 50, height: 50)
                VStack(alignment: .leading) {
                    Text(bird.speciesName)
                        .font(.headline)
                        .foregroundStyle(bird.colors.wing.color)
                        .widgetAccentable()
                        .minimumScaleFactor(0.75)
                    Text(entry.backyard.name)
                        .minimumScaleFactor(0.75)
                    HStack {
                        Image(systemName: "drop.fill")
                        Text(entry.waterDuration, format: remainingHoursFormatter)
                        Image(systemName: "fork.knife")
                        Text(entry.foodDuration, format: remainingHoursFormatter)
                    }
                    .imageScale(.small)
                    .minimumScaleFactor(0.75)
                    .foregroundStyle(.secondary)
                }
                .frame(maxWidth: .infinity, alignment: .leading)
            } else {
                Image(.fountainFill)
                    .foregroundStyle(entry.backyard.backgroundColor)
                    .imageScale(.large)
                    .scaledToFit()
                    .widgetAccentable()
                    .frame(width: 50, height: 50)
                VStack(alignment: .leading) {
                    Text(entry.backyard.name)
                        .font(.headline)
                        .foregroundStyle(entry.backyard.backgroundColor)
                        .widgetAccentable()
                        .minimumScaleFactor(0.75)
                    HStack {
                        Image(systemName: "drop.fill")
                        Text(entry.waterDuration, format: remainingHoursFormatter)
                        Image(systemName: "fork.knife")
                        Text(entry.foodDuration, format: remainingHoursFormatter)
                    }
                    .imageScale(.small)
                    .minimumScaleFactor(0.75)
                    Text("\(entry.backyard.historicalEvents.count) visitors")
                        .minimumScaleFactor(0.75)
                        .foregroundStyle(.secondary)
                }
                .frame(maxWidth: .infinity, alignment: .leading)
            }
        }
        .containerBackground(entry.backyard.backgroundColor.gradient, for: .widget)
    }
}

16:30 - Timeline Function

func timeline(for configuration: ConfigurationAppIntent, in context: Context) async -> Timeline<SimpleEntry> {
  var entries: [SimpleEntry] = []

  if let backyard = Backyard.backyardForID(modelContext: modelContext, backyardID: configuration.backyardID) {
    for event in backyard.visitorEvents {
      let entry = SimpleEntry(date: event.startDate, configuration: configuration, backyard: backyard)
      entries.append(entry)
      let afterEntry = SimpleEntry(date: event.endDate, configuration: configuration, backyard: backyard)
      entries.append(afterEntry)
    }
  }
  return Timeline(entries: entries, policy: .atEnd)
}

18:35 - Recommendations Function

func recommendations() -> [AppIntentRecommendation<ConfigurationAppIntent>] {
  var recs = [AppIntentRecommendation<ConfigurationAppIntent>]()

  for backyard in Backyard.allBackyards(modelContext: modelContext) {
    let configIntent = ConfigurationAppIntent()
    configIntent.backyardID = backyard.id.uuidString
    let gardenRecommendation = AppIntentRecommendation(intent: configIntent, description: backyard.name)
    recs.append(gardenRecommendation)
  }

  return recs
}

20:47 - Relevant Intents Function

func updateBackyardRelevantIntents() async {
    let modelContext = ModelContext(DataGeneration.container)
    var relevantIntents = [RelevantIntent]()
    
    for backyard in Backyard.allBackyards(modelContext: modelContext) {

        let configIntent = ConfigurationAppIntent()
        configIntent.backyardID = backyard.id.uuidString
        let relevantFoodDateContext = RelevantContext.date(from: backyard.lowSuppliesDate(for: .food), to: backyard.expectedEmptyDate(for: .food))
        let relevantFoodIntent = RelevantIntent(configIntent, widgetKind: "BackyardVisitorsWidget", relevance: relevantFoodDateContext)
        relevantIntents.append(relevantFoodIntent)

        let relevantWaterDateContext = RelevantContext.date(from: backyard.lowSuppliesDate(for: .water), to: backyard.expectedEmptyDate(for: .water))
        let relevantWaterIntent = RelevantIntent(configIntent, widgetKind: "BackyardVisitorsWidget", relevance: relevantWaterDateContext)
        relevantIntents.append(relevantWaterIntent)
    }

    do {
        try await RelevantIntentManager.shared.updateRelevantIntents(relevantIntents)
    } catch { }
}

23:00 - Update Relevant Intents

Task {
  await updateBackyardRelevantIntents()
  WidgetCenter.shared.reloadTimelines(ofKind: "BackyardVisitorsWidget")
}

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

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

関連する章

リソース

関連ビデオ

WWDC23