Apple Watchでのライブアクティビティの表示

iPadOS 18とwatchOS 11で、Apple Watchのスマートスタックにライブアクティビティを追加する方法を説明します。Apple Watchにライブアクティビティがどのように表示されるかに加え、スマートスタックでの表示を向上させる方法についても解説します。さらに、Apple Watchのライブアクティビティに常に最新情報が表示されるようにするための考慮事項も取り上げます。

リソース

こんにちは Anneです watchOSのフレームワークエンジニアです本日は既存のiOSライブアクティビティで Apple Watchの優れた体験を実現する方法をご紹介しますライブアクティビティを使用するとアプリのアクティビティやイベントに関する最新情報をロック画面スタンバイ Dynamic Islandなど一目でわかる場所に表示できます iOS 18とwatchOS 11では iOSライブアクティビティが Apple Watchのスマートスタックに自動的に表示されますまずwatchOS 11にアップデートした後ライブアクティビティがApple Watchにどのように表示されるかを説明します

次にスマートスタックのライブアクティビティビューのカスタマイズ方法を紹介しますまたwatchOSのアクティビティアップデートの詳細とライブアクティビティを最新の状態に保つ方法も紹介します

まず既存のiOSライブアクティビティが watchOS 11のApple Watchにどのように表示されるかを確認しましょう

Dynamic Islandを搭載したiPhoneでユーザーがロック画面を離れるとライブアクティビティはDynamic IslandのコンパクトなLeadingビューと Trailingビューの表示に切り替わります Dynamic Islandのビューは compactLeadingビュービルダーと compactTrailingビュービルダーから取得されます Apple Watchでは同じビューがスマートスタックに自動的に表示されアプリによって提供されたことを示すタイトルも表示されますこれはコンパクトビューが最新情報を提供するためにスペースを最大限に活用しているかどうかを検討する絶好の機会ですここでアプリはLeadingビューに配達までの予想時間を表示し注文の現在のステータスを Trailingビューに表示しています

iOSで更新されたライブアクティビティは自動的にApple Watchに送信されます iOSではアラートのアップデートがアニメーション化され Dynamic Island拡張ビューが表示されます Apple Watchでアラートのアップデートが受信されると現在文字盤が表示されている場合はシステムがスマートスタックを自動的に起動しアラートを表示してからライブアクティビティを表示します

アプリがフォアグラウンドにある場合は画面の下部にバナーが表示され Dynamic Islandのコンパクトビューが表示されます

ライブアクティビティをタップするとプレゼンテーションが全画面で表示され iPhoneのアプリを開くオプションも表示されます

iOSライブアクティビティの Dynamic Islandコンパクトビューはスマートスタックに自動的に表示されます現在のビューを確認して動的に更新される情報を表示しアクティビティの状態をユーザーに知らせるようにしてくださいこれは iOS 18および watchOS 11にアップデートしたユーザーと既存のiPhoneユーザーにメリットをもたらします

iOS 18およびwatchOS 11にアップデートすると自動的に何が起こるかについて説明しましたまた Apple Watch向けのカスタムライブアクティビティビューを提供することもできますこのアプリでは地元の農産物を注文して自宅に配送しライブアクティビティを使用して配達状況を確認できます次は Apple Watchのライブアクティビティビューをカスタマイズしましょう

現在ライブアクティビティはスマートスタックのデフォルトのプレゼンテーションを使用してコンパクトな Dynamic Islandビューを表示していますプレビューを使用して Xcodeでそれがどのように表示されるかを確認できます

でを選択すると Canvas内のすべてのビュースタイルが表示されますまたはモードに切り替えてを更新しを表示してスマートスタックビューにフォーカスします

watchOSスマートスタック用にカスタマイズするにはライブアクティビティの WidgetConfigurationに supplementalActivityFamilies モディファイアを追加します .smallを使用してスマートスタックのサポートを示しますこれでアクティビティコンテンツの iOSロック画面ビューがコンパクトビューではなくスマートスタックに表示されますロック画面のコンテンツは大きく見えるようにデザインしているので Apple Watchではテキストが途中までしか表示されませんこれをスマートスタック用にカスタマイズします

activityFamilyの環境値を取得します activityFamilyが小さい場合はコンテンツの新しいレイアウトを指定します

activityFamilyが中規模の場合 iOSロック画面では元のコンテンツビューのレイアウトを使用します

スマートスタックでビューがどのように表示されるかをライブアクティビティのXcodeプレビューを使用して確認できます

supplementalActivityFamilies モディファイアを追加することで Apple Watchのライブアクティビティ表示でカスタムビューが提供されるようになります

ライブアクティビティはWatchアプリがなくても Apple Watchで動作しますただしWatchアプリがある場合はスマートスタックのライブアクティビティをタップして開くようにオプトインすることもできます

Watchアプリターゲットので Info.plistのSupports Launch for Live Activity Attribute Types キーの値を追加します全てのライブアクティビティでWatchアプリを起動するにはこの値を空のままにします特定のライブアクティビティでのみ起動するには Watchアプリを起動する ActivityAttributes 適合型ごとに項目を追加します

わずか数行のコードでライブアクティビティの表示方法を更新し表示方法をプレビューできました Apple Watchではライブアクティビティに可能な限り最新の情報を表示し意図したとおり機能するようにするため知っておくべき追加事項がいくつかあります更新頻度と予算接続制限への対処常時表示ディスプレイ用のライブアクティビティビューの調整について説明します

iPhoneとApple Watchでは更新頻度と予算に若干の違いがあります

ライブアクティビティの更新は Apple Watchに自動的に同期されます個別のプッシュトークンを管理したりコードを追加したりする必要はありませんバッテリー駆動時間を保護するため更新の同期には予算が設けられています予算のしきい値はiOSと同様です現在ライブアクティビティでプッシュ通知による更新を使用している場合追加の作業なしで Apple Watchの予算内に収まるはずです Apple Watchは必要に応じて高頻度の更新もサポートしています

iOSアプリではライブアクティビティが ActivityKitを使用してローカルで更新される場合を検討してください現在これらの更新は Apple Watchにも同期され更新の予算に含まれます更新が予算を超えた場合手首を下げているときにすぐには表示されない場合がありますただし手首を上げるとライブアクティビティに最新の情報が表示されます

アクティビティがApple Watchでタイムリーに更新を受信しないもう1つの理由に接続状態があります Watchが近くのiPhoneと良好な接続状態にある場合または同じWi-Fiネットワーク上にある場合更新はApple Watchに送信されます接続が制限されている場合 Apple Watchでは開始終了および警告の更新が優先されます

システムはスマートスタックに最終接続メッセージを表示することで最新の情報が表示されていない可能性があることをユーザーに知らせますまたアクティビティビューを常時表示向けに調整すべきか検討してください Apple Watchが常時表示モードの場合ユーザーが手首を下ろすとシステムは自動的に配色を暗くし輝度を下げます

色鮮やかなビューがある場合は isLuminanceReduced環境値を使用して明るい要素を削除するか明るさを下げます

私のビューでは輝度が下がるとゲージに異なる色合いを使用して明るさを落とし読みやすさを維持しています

ライブアクティビティを明るい外観にしたい場合は preferredColorSchemeを lightに設定します自動的に暗めの外観が使用され常時表示ディスプレイの輝度が下がりますプライマリなどのセマンティックカラーでは配色に適切な色が自動的に使われますこれでアクティビティの見栄えが良くなり常に最適な情報が表示されます

iOS 18とwatchOS 11以降では iOSライブアクティビティが Apple Watchのスマートスタックに自動的に表示されます Dynamic Islandコンパクトビューがタイムリーで関連性が高く有益であることを確認します supplementalActivityFamiliesで Apple Watchのライブアクティビティをカスタマイズします優れたライブアクティビティのデザインの詳細については「Design Live Activities for Apple Watch」をご覧ください watchOS向けの開発が初めての場合はライブアクティビティが watchOS向けにアプリコンテンツをカスタマイズする第一歩になるかもしれませんこのプラットフォームにご参加いただき本当に嬉しく思います皆さんのApple Watch向けアプリ開発に役立てていただければ幸いですありがとうございました

1:28 - Existing Live Activity views

struct DeliveryLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(
            for: DeliveryActivityAttributes.self
        ) { context in
            DeliveryActivityContent(context: context)
        } dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                    DeliveryExpandedLeadingView(context: context)
                }
                DynamicIslandExpandedRegion(.trailing) {
                    DeliveryExpandedTrailingView(context: context)
                }
                DynamicIslandExpandedRegion(.bottom) {
                    DeliveryExpandedBottomView(context: context)
                }
            } compactLeading: {
                DeliveryCompactLeading(context: context)
            } compactTrailing: {
                DeliveryCompactTrailing(context: context)
            } minimal: {
                DeliveryMinimal(context: context)
            }
        }
    }
}

3:43 - Preview Live Activities with Xcode Previews

extension DeliveryActivityAttributes.ContentState {
    static var shippedOrder: DeliveryActivityAttributes.ContentState {
        .init(
            status: .shipped,
            courierName: "Johnny"
        )
     }

     static var packedOrder: DeliveryActivityAttributes.ContentState {
         .init(
            status: .packed,
            courierName: "Contacting Courier...")
     }
}

#Preview(
    "Dynamic Island Compact",
    as: .dynamicIsland(.compact),
    using: DeliveryActivityAttributes.preview
) {
    DeliveryLiveActivity()
} contentStates: {
    DeliveryActivityAttributes.ContentState.packedOrder
    DeliveryActivityAttributes.ContentState.shippedOrder
}

4:15 - Add .supplementalActivityFamilies to indicate support for the Smart Stack

struct DeliveryLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(
            for: DeliveryActivityAttributes.self
        ) { context in
            DeliveryActivityContent(context: context)
        } dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                    DeliveryExpandedLeadingView(context: context)
                }
                DynamicIslandExpandedRegion(.trailing) {
                    DeliveryExpandedTrailingView(context: context)
                }
                DynamicIslandExpandedRegion(.bottom) {
                    DeliveryExpandedBottomView(context: context)
                }
            } compactLeading: {
                DeliveryCompactLeading(context: context)
            } compactTrailing: {
                DeliveryCompactTrailing(context: context)
            } minimal: {
                DeliveryMinimal(context: context)
            }
        }
        .supplementalActivityFamilies([.small])
    }
}

4:49 - Customize view layout for the small activity family

struct DeliveryActivityContent: View {
    @Environment(\.activityFamily) var activityFamily
    var context: ActivityViewContext<DeliveryActivityAttributes>

    var body: some View {
        switch activityFamily {
        case .small:
            DeliverySmallContent(context: context)
        case .medium:
            DeliveryMediumContent(context: context)
        @unknown default:
            DeliveryMediumContent(context: context)
        }
    }
}

5:06 - Preview customized layouts for the Smart Stack

#Preview("Content", as: .content, using: DeliveryActivityAttributes.preview) {
   DeliveryLiveActivity()
} contentStates: {
    DeliveryActivityAttributes.ContentState.packedOrder
    DeliveryActivityAttributes.ContentState.shippedOrder
}

8:37 - Use isLuminanceReduced to remove bright elements with Always On Display

struct DeliveryGauge: View {
    @Environment(\.isLuminanceReduced) private var isLuminanceReduced
    var context: ActivityViewContext<DeliveryActivityAttributes>

    var body: some View {
        Gauge(value: context.state.progressPercent) {
            GaugeLabel(context: context)
        }
        .tint(isLuminanceReduced ? .gaugeDim : .gauge)
    }
}

8:57 - For Live Activities with a light appearance, use a light preferredColorScheme

struct DeliveryActivityContent: View {
    @Environment(\.activityFamily) var activityFamily
    var context: ActivityViewContext<DeliveryActivityAttributes>

    var body: some View {
        switch activityFamily {
        case .small:
            DeliverySmallContent(context: context)
                .preferredColorScheme(.light)
        case .medium:
            DeliveryMediumContent(context: context)
        @unknown default:
            DeliveryMediumContent(context: context)
        }
    }
}

Apple Watchでのライブアクティビティの表示

関連する章

リソース