ライブアクティビティの基本

ライブアクティビティの基本

ライブアクティビティを活用してアプリの利用体験を向上させましょう。ライブアクティビティを表示できる場所は多数ありますが、Dynamic Islandの新しいスタイルとして、iPhoneを横向きで使用する際にさらに多くの情報を表示するスタイルが追加されました。ActivityKitとプッシュ通知を使用して、スペースごとのライブアクティビティの調整、コンテンツとデータの構造化、プロセス全体を通じたリアルタイムのアップデートを行う方法を紹介します。

関連する章
- 0:01 - Introduction
- 1:53 - Create and update
- 9:51 - Optimize
リソース
関連ビデオ

WWDC24
- Apple Watchでのライブアクティビティの表示
- SwiftUIの基本
WWDC23
- ダイナミックなライブアクティビティのデザイン
こんにちは Adiです System Experienceエンジニアです。
本日はライブアクティビティを構築するための基本事項を説明します。あらゆる画面でより魅力的にする方法もご紹介します。まずライブアクティビティが提供するエクスペリエンスの概要から始めアプリでライブアクティビティを作成する方法と最新状態を保つ方法を説明します。その後、アプリに合わせてさらに最適化する方法についても触れます。
ライブアクティビティは、アプリがタイムリーな情報を提供する優れた方法です今起きていることを一目で把握できます。 MLBアプリのこれがその例です。お気に入りのチームを追跡して試合中はライブアクティビティを表示します。スコア、現在のイニング、主なゲーム情報をロック画面から直接確認できます。ホーム画面やアプリ使用中は Dynamic Islandに直接表示されるため見逃すことはありません。
ライブアクティビティは展開することもできます。 Dynamic Islandからさらに詳しい情報を表示できます。アラートの更新が発生した場合やロングプレスした場合に表示されます。展開されたビューはさらに多くのスペースを提供し重要な更新情報を知らせることができます。
iOS 27では、ライブアクティビティが Dynamic Islandに表示されます。縦向きと横向きの両方で利用できます。
他の場所にも表示されます。 iPhoneを横向きで充電中のスタンバイなどです。
アプリがiPhoneでライブアクティビティを実行すると他のAppleデバイスに自動的に表示されます。スマートスタック内の Apple Watchにも表示されます。 macOSのメニューバーや CarPlayダッシュボードにも表示されます。アプリの重要な情報をどこにいても一目で確認できる非常に便利な方法です。
ライブアクティビティをアプリに追加するために作成方法と最新状態を保つ方法を説明します。まずデータモデルの設計から始めます。ライブアクティビティの更新を高速かつ効率的にするためです。次に、各主要プレゼンテーションの基本ビューを作成します。最後に、アプリ実行中はアプリからまたはバックグラウンドでプッシュ通知を通じて更新を提供します。まずデータモデルから説明します。その方法を探るために現在開発中のアプリにライブアクティビティを追加します。地元のコーヒーショップでコーヒーを注文できるアプリです。お気に入りのドリンクを選んで好みにカスタマイズできます。完了したら、ピックアップのために注文を店舗に送ります。ライブアクティビティを構築する最初のステップは優れたデザインを考えることです。
即座に一目でわかる情報を提供するためのものです。デザインを考える際には時間の経過とともに人々が知る必要がある重要な情報を優先させましょう。インスピレーションとしてヒューマンインターフェイスガイドラインでライブアクティビティのデザインのヒントを確認し「Design dynamic Live Activities」セッションもご覧ください。このアプリでは、ロック画面の初期デザインを使ってデータモデルの計画を始めます。注文が確定した時、準備中の時、受け取り準備完了の時、そして完了後にフィードバックを残す機会など異なる表示があります。データの静的な部分と動的な部分を考慮する必要があります。ライブアクティビティは静的データと動的データを異なる方法で扱うためです。効率的な更新を提供するためです。動的データのみがライブアクティビティの存続中に更新できます。変化しないデータはstructに格納され ActivityAttributesプロトコルに準拠します。時間の経過とともに変化する値は別のContentState structに含まれます。コーヒーの注文には静的な情報がいくつかあります。注文は同じコーヒーショップに紐づいているためショップ名は静的です。注文したドリンクも変わりません。ただし注文のステータスと残り時間は動的です。アプリはこれらの値を時間の経過とともに更新します。
このライブアクティビティのデータモデルを作成するために ActivityKitをimportして DrinkOrderAttributes structを作成します。 ActivityAttributesに準拠します。次に、すべての静的データのプロパティを追加します。ショップ名、注文のドリンク、サーバーが各注文を追跡するための一意の識別子です。
次に、動的データを含む ContentState structを追加します。
これには注文のフェーズが含まれます。準備中や受け取り準備完了などです。また、準備完了予定時刻と注文に対するレーティングも含まれます。
これで完了です。データモデルが整ったのでライブアクティビティのビューを構築します。
ライブアクティビティのインターフェースは WidgetKitで構築します。始めるには widget extensionをアプリに追加しますまだない場合です。そこにActivityConfigurationを提供してビューを説明します。ライブアクティビティの各プレゼンテーションは SwiftUIビューです。提供されたattributesと content stateを読み取ります。 SwiftUIが初めての方は「SwiftUI essentials」動画をご覧ください。ドリンクの注文ではまずActivityConfigurationの作成から始めます。 widget extensionの中にです。 DrinkOrderAttributes型を指定することでこれらのビューは正しいライブアクティビティに関連付けられます。
content closureは表示される SwiftUIビューを提供します。この場合、ActivityViewというビューがあります。コーヒーが準備中か受け取り準備完了かなど正しい値を表示するために contextパラメーターを使用します。 contextにはattributesとレンダリングすべき最新の content stateが含まれています。次に、Dynamic Island用のビューを提供します。
最初の3つはcompactLeading、 compactTrailing、minimalビューです。これらは小さなビューでアクティブに操作されていない時に表示されます。どの情報が必須かを慎重に検討してください。大きなプレゼンテーションからこれらのビューに表示する情報を検討してください。コーヒーの注文では leadingビューは注文したドリンクの種類を示すシンボルを表示し trailingビューには注文のフェーズのラベルがあります。 minimalビューも提供します。このビューは複数のライブアクティビティが実行中の場合に表示されることがあります。
minimalビューは一目で確認できる最も重要な情報を提供するべきです。人々がちらりと見る情報です。この注文では、残り時間を示す円形のゲージを表示します。
最後に、Dynamic Islandの expandedビューを構築します。このビューはかなり大きくより多くの情報を表示できます。ロック画面のビューに似ています。 iPhoneのセンサーを囲む複数の領域で構成されます。各クロージャの中に DynamicIslandExpandedRegionブロックで必要な各領域のビューを提供します。
データモデルとビューが構築できたのでライブアクティビティを開始して最新状態を保つ時です。
ライブアクティビティはいくつかの方法で開始できます。 ActivityKitフレームワークを使うとアプリがフォアグラウンドで実行中はいつでも直接開始できます。または特定の時間に前もって開始するようライブアクティビティをスケジュールできます。あるいは、プッシュ通知から開始することもできます。
最もシンプルな方法はActivityKitを使うことです。アプリでは、まずライブアクティビティが許可されているか確認します。次に、注文のためのDrinkOrderAttributes structのインスタンスを作成します。静的データを入力します。コーヒーショップ名と注文したドリンクなどです。次にcontentStateを構築します。このライブアクティビティの動的データの初期値が含まれます。
注文の最初のフェーズである orderedフェーズを設定します。ほとんどのドリンクは15分で準備できますので今から15分後の初期準備完了時間を設定します。ライブアクティビティのcontentStateには staleDateもあります。 staleDateはこのコンテンツをいつ古いと見なすかを指定します。コンテンツが古い場合ライブアクティビティのビューでそれを示せます。今回はコーヒーの注文に staleDateを設定しません。
次に、システムにライブアクティビティの開始をリクエストします。定義したattributesと contentを使ってです。
ライブアクティビティの実行中は更新も簡単です。新しいContentStateで .updateメソッドを呼び出します。新しいstaleDateも合わせてです。ライブアクティビティはプッシュ通知でも更新できます。 2つの戦略から選べます。 1つ目はブロードキャスト更新です。数百人、数千人以上が同じライブアクティビティを同時に実行している場合に最適な選択です。この戦略ではサーバーがブロードキャストチャンネルを使って全員に更新を送信します。次に、そのチャンネルを購読するようライブアクティビティを設定します。更新を受け取るためです。もう1つの戦略はプッシュ通知を使う方法です。他のすべてのユースケースに最適です。サーバーはプッシュ通知を送信して特定のデバイスに更新を届けます。この戦略ではライブアクティビティのプッシュトークンを取得して各更新の送信に使用します。詳細については、ドキュメントにわかりやすいガイドがあります。 ActivityKitプッシュ通知の使い方についてです。
ここまでライブアクティビティの最初のステップを説明しました。次に、さらに最適化する方法を説明します。カスタマイズされたプレゼンテーションの追加について説明しビューにインタラクティブ機能を追加する方法もご紹介します。まず、プレゼンテーションのさらなる改善から始めます。
iOS 27では Dynamic Islandのcompactビューと minimalビューが縦向きと横向きの両方で表示されます。縦向きではcompactビューは幅が柔軟ですが横向きでは幅を広げるスペースがありません。ライブアクティビティは Dynamic Islandの幅が制限されている場合に対応する必要があります。コーヒーの注文の CompactTrailingViewの実装です。ドリンク注文の推定時間がある場合はそれを表示する SwiftUIビューです。または注文のフェーズのラベルを表示します。「Ready」という文字列などです。
まずisDynamicIslandLimitedInWidth environment valueを追加し Viewのbodyを調整します。 Dynamic Islandの幅が制限されている場合代替trailingビューを表示します。注文の進捗を示すアイコンを表示します。新しいtrailingビューは制限された幅にうまく収まります。
考慮すべき別のプレゼンテーションとしてスタンバイがあります。 iPhoneを横向きで充電中に表示されることがあります。
このプレゼンテーションではロック画面のビューが使用され 200%に拡大されます。ロック画面では見栄えのよいグラデーション背景がアクティビティを小さく見せて画面を埋めません。多くの空白スペースが残ります。これを改善するためにライブアクティビティのビューが背景を表示する方法を調整します。 showsWidgetContainerBackground @Environment valueをビューに追加します。この値はロック画面でtrueなのでそこでは gradient .backgroundを適用します。次に、ViewにactivityBackgroundTintを使います。それ以外の場所で認識しやすい背景色を設定します。
これでライブアクティビティがスタンバイでエッジツーエッジの背景tintカラーを表示します。ライブアクティビティはApple Watchのスマートスタックにも表示されます。 CarPlayにも表示されます。これらの場所に合わせてカスタマイズするには smallデバイスファミリーのサポートを追加します。ライブアクティビティはiPhoneから CarPlayに自動的に転送されデフォルトでActivityViewを使用します。このビューはロック画面では見栄えがよいですがこのスペースにはうまく収まりません。
このレイアウトに対応するためにまずsmall activity familyのサポートを宣言します。これはビューがこの小さなフォーマットに適応されていることをシステムに示します。
次に、activityFamily @Environment valueをViewに追加します。このプレゼンテーション用のカスタマイズされたビューを提供します。 activityFamilyの値が .smallの場合です。これでライブアクティビティはどこでも見栄えよく表示されます。
アプリの一目でわかる情報に外出中でもアクセスできることを人々は喜んでいます。
small activity familyへのビューの適応について詳しくは「Bring your Live Activity to Apple Watch」セッションをご覧ください。ライブアクティビティは素晴らしい機会です。すばやく即座にアクションを取るためにです。インタラクティブ機能を追加することでこれを実現できます。コーヒーアプリで注文が完了した時注文を評価しやすくしたいと思います。そのためにライブアクティビティの各ボタンは App Intentに関連付けます。ボタンをタップするとシステムが関連するintentを実行します。
実装では、RateDrinkIntentが LiveActivityIntentに準拠し注文のIDという 2つのパラメーターを取ります。レーティングがポジティブかどうかを表すbooleanもあります。
performメソッドはアプリのロジックを実装する場所です。どちらのボタンをタップしてもこの関数が実行されます。アプリはこのメソッドを実装して必要な処理をすべて行えます。このレーティングをサーバーに送信したりデータベースを更新したりです。
最後に、レーティングボタンの Viewを更新します。 ActivityViewと DynamicIslandExpandedRegionの両方で使用します。各intentに2つのボタンを追加し各アクションのRateDrinkIntentを作成できます。
ライブアクティビティはリアルタイムで起きていることについて人々が関心を持つことを最新状態に保つ優れた方法です。アプリでの実装を始める準備が整いました。
次のステップとして ActivityKitとWidgetKitフレームワークでライブアクティビティを構築する。 attributesとcontent stateを使って静的データと動的データをモデル化して効率的な更新を実現する。ロック画面や Dynamic Islandなどで優れたプレゼンテーションを作成する。 ActivityKitとプッシュ通知を使ってデータをタイムリーに更新する。横向き、スタンバイ、Apple Watchなど各エクスペリエンスをキュレートする。ご視聴ありがとうございました。

// Define initial Live Activity.

import ActivityKit
import Foundation

public struct DrinkOrderAttributes: ActivityAttributes {
    let shopName: String
    let drink: Drink
    let orderID: UUID

    public struct ContentState: Codable, Hashable {
        var phase: DrinkOrder.Phase = .waiting
        var estimatedReadyDate: Date
        var rating: DrinkOrder.Rating?
    }
}

5:35 - Create each Live Activity view

// Create each Live Activity view

import ActivityKit
import SwiftUI
import WidgetKit

struct DrinkOrderLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: DrinkOrderAttributes.self) { context in
            ActivityView(context: context)
        } dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                    ExpandedLeadingView(context: context)
                }
                DynamicIslandExpandedRegion(.center) {
                    ExpandedCenterView(context: context)
                }
                DynamicIslandExpandedRegion(.trailing) {
                    ExpandedTrailingView(context: context)
                }
                DynamicIslandExpandedRegion(.bottom) {
                    ExpandedBottomView(context: context)
                }
            } compactLeading: {
                CompactLeadingView(context: context)
            } compactTrailing: {
                CompactTrailingView(context: context)
            } minimal: {
                MinimalView(context: context)
            }
        }
    }
}

7:43 - Start and update a Live Activity

// Start a Live Activity

func launchLiveActivity(order: DrinkOrder) throws {
    guard ActivityAuthorizationInfo().areActivitiesEnabled else { return }
    let attributes = DrinkOrderAttributes(shopName: "Coffee Shop", drink: order.drink, orderID: order.id)
    let estimatedReadyDate = Date.now + (15 * 60)
    let contentState = DrinkOrderAttributes.ContentState(phase: .waiting, estimatedReadyDate: estimatedReadyDate)
    let activityContent = ActivityContent(state: contentState, staleDate: nil)
    let activity = try Activity.request(attributes: attributes, content: activityContent)

}

// Update a Live Activity

await activity.update(
    ActivityContent(
        state: DrinkOrderAttributes.ContentState(
            phase: .preparing,
            estimatedReadyDate: estimatedReadyDate
        ),
        staleDate: nil
    )
)

10:33 - Optimize for limited width in the Dynamic Island

// Optimize for limited width in the Dynamic Island

struct CompactTrailingView: View {
    @Environment(\.isDynamicIslandLimitedInWidth) var isDynamicIslandLimitedInWidth
    var context: ActivityViewContext<DrinkOrderAttributes>
    var body: some View {
        if isDynamicIslandLimitedInWidth {
            StepProgressIconView(context: context)
        } else if context.state.phase.showsTimer {
            EstimatedReadyView(context: context, font: .system(.body).monospacedDigit())
                .multilineTextAlignment(.trailing)
                .frame(maxWidth: maximumTimerLabelWidth)
        } else {
            OrderPhaseLabelView(context: context, font: .caption2.bold(), color: .brown)
                .multilineTextAlignment(.trailing)
        }
    }
}

11:34 - Extend background color in StandBy

// Extend background color in StandBy

struct ActivityView: View {

    @Environment(\.showsWidgetContainerBackground) var showsWidgetContainerBackground
    var context: ActivityViewContext<DrinkOrderAttributes>

    var body: some View {
        DetailView(context: context)
            .background {
                if showsWidgetContainerBackground {
                    LinearGradient.barista
                }
            }
            .activityBackgroundTint(.espresso)
    }
}

12:30 - Add support for activityFamily small

// Add support for activityFamily small

import ActivityKit
import SwiftUI
import WidgetKit

struct DrinkOrderLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: DrinkOrderAttributes.self) { context in
            ActivityView(context: context)
        } dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                    ExpandedLeadingView(context: context)
                }
                DynamicIslandExpandedRegion(.center) {
                    ExpandedCenterView(context: context)
                }
                DynamicIslandExpandedRegion(.trailing) {
                    ExpandedTrailingView(context: context)
                }
                DynamicIslandExpandedRegion(.bottom) {
                    ExpandedBottomView(context: context)
                }
            } compactLeading: {
                CompactLeadingView(context: context)
            } compactTrailing: {
                CompactTrailingView(context: context)
            } minimal: {
                MinimalView(context: context)
            }
        }
        .supplementalActivityFamilies([.small])
    }
}

12:43 - Optimize for small family

// Optimize for small family

struct ActivityView: View {
    @Environment(\.showsWidgetContainerBackground) var showsWidgetContainerBackground
    @Environment(\.activityFamily) var activityFamily

    var context: ActivityViewContext<DrinkOrderAttributes>

    var body: some View {
        contentView
            .background {
                if showsWidgetContainerBackground {
                    LinearGradient.barista
                }
            }
            .activityBackgroundTint(.espresso)
    }

    @ViewBuilder
    var contentView: some View {
        if activityFamily == .small {
            SmallView(context: context)
        } else {
            DetailView(context: context)
        }
    }
}

13:36 - Add interactivity with App Intents

// Add interactivity with App Intents

struct RateDrinkIntent: LiveActivityIntent {
    static var title: LocalizedStringResource = "Rate Drink"

    @Parameter(title: "Order ID")
    var orderID: String

    @Parameter(title: "Positive")
    var isPositive: Bool

    func perform() async throws -> some IntentResult {
        await updateLocalDatastore(rating: isPositive ? .great : .poor, dismissPolicy: .after(.now + 15))
        return .result()
    }
}

14:06 - Associate an intent with a button

// Associate an intent with a button

struct RatingButtons: View {
    var context: ActivityViewContext<DrinkOrderAttributes>
    var body: some View {
        HStack(spacing: 12) {
            Button(intent: RateDrinkIntent(
                orderID: context.attributes.orderID.uuidString, isPositive: false)) {
                Label("Not Good", systemImage: "hand.thumbsdown.fill")
            }
            .buttonStyle(RatingButtonStyle(color: .red))

            Button(intent: RateDrinkIntent(
                orderID: context.attributes.orderID.uuidString, isPositive: true)) {
                Label("Great", systemImage: "hand.thumbsup.fill")
            }
            .buttonStyle(RatingButtonStyle(color: .green))
        }
    }
}

- 0:01 - Introduction
- Live Activities keep people up-to-date about ongoing tasks or events with progressing information over time, appearing on the Lock Screen, in the Dynamic Island, on Apple Watch, and on the CarPlay Dashboard.
- 1:53 - Create and update
- Start by defining an efficient data model using ActivityAttributes for static data and ContentState for dynamic data. Construct tailored UI for each presentation and manage the activity's lifecycle locally via ActivityKit or remotely using push notifications.
- 9:51 - Optimize
- Refine the Live Activity experience by adapting layouts to accommodate specific constraints, such as limited width in the Dynamic Island in landscape, or adopting the small activity family for Apple Watch. Integrate App Intents to let people perform quick, contextual actions.

「今すぐ始める」を詳しく見る

最新情報

プラットフォームを詳しく見る

特集

テクノロジーを詳しく見る

特集

コミュニティを詳しく見る

特集

ドキュメントを詳しく見る

リリースノート

ダウンロードを詳しく見る

特集

サポートを詳しく見る

特集

クイックリンク

関連する章

リソース

関連ビデオ

WWDC24

WWDC23