ActivityKitについて

ライブアクティビティによって、アプリ内のタスクの進捗を一目で確認できるようになります。ロック画面、Dynamic Island、スタンバイのために役立つ体験を作成する方法について解説します。アプリのライブアクティビティを更新し、アクティビティの状態を監視し、WidgetKitとSwiftUIを活用してリッチな体験を構築する方法をご確認ください。

リソース

関連ビデオ

WWDC23

ダウンロード

♪ ♪

こんにちは Can Aranです iOS System Experience Teamのエンジニアですライブアクティビティについてお話しできてうれしいです今回はライブアクティビティの概要についてお話ししますそしてライブアクティビティのライフサイクルについて説明します最後にアクティビティ用のイマーシブなシンプルなUIの構築方法を紹介しますまずライブアクティビティで何ができるかを説明しますライブアクティビティはイベントやタスクの進捗を一目で把握できるイマーシブな方法です開始と終了を個別に設定しバックグラウンドアプリのランタイムからあるいはプッシュ通知を使ってリモートからリアルタイムのアップデートを提供できますユナイテッド航空とMLBの素晴らしい例をご覧ください iPhone 14 ProとPro Maxでは一層ライブアクティビティがイマーシブです Dynamic Islandはアプリがバックグラウンドにあるときシステム全体にライブアクティビティを表示しますライブアクティビティがアクティブになると可変幅の「コンパクト」プレゼンテーションでレンダリングされます Dynamic Islandは一度に最大 2つのライブアクティビティを表示しますそのうち1つはTrueDepthカメラに接続されて表示されもう1つは独立したビューでレンダリングされますどちらのライブアクティビティも「最小限」の表示を使用しますライブアクティビティを長押しするといつでも「拡張」画面が表示されより多くの情報を一目で確認できます拡張表示ではアプリ内の様々なエリアにディープリンクすることができリッチなユーザーエクスペリエンスを提供します iOS 17ではライブアクティビティに関する新しい体験が複数ありますロック画面とDynamic Islandに加えてライブアクティビティはスタンバイにも表示されますそして iPadもライブアクティビティをサポートするようになりました iPadOSで実装を有効にして Crumbl Cookiesのこのようなイマーシブなライブアクティビティを iPadで実現しましょう iOS 17では WidgetKitとSwiftUIを使ってライブアクティビティにインタラクティブ性を追加できますユーザーエクスペリエンス向上のためボタンやトグルを追加できます Lucaの動画「ウィジェットに命を吹き込む方法」でウィジェットにインタラクティブ性を持たせる方法の詳細をご確認くださいライブアクティビティは ActivityKitフレームワークに依拠しておりアプリがアクティビティのリクエストや更新ライフサイクル管理をできるようにしますそれらはSwiftUI と WidgetKitを使って宣言的にレイアウトされますホーム画面のウィジェットの実装経験があれば非常に馴染み深いでしょうライブアクティビティはフォアグラウンドにアプリがあるときにリクエストできますアプリは個別のユーザーアクション後にのみライブアクティビティをリクエストすべきで例えば特定のイベントを「フォロー」したり明示的にタスクを開始したりといった具合ですこれはポジティブなユーザー体験を保証するために非常に重要なことですライブアクティビティは通知と同様ユーザーによって管理されます誰かが簡単にあなたのアプリに対してそれらの却下やオフができます APIはロック画面から3つの Dynamic Islandプレゼンテーションまですべてのプレゼンテーションをサポートする必要がありますスタンバイではシステムはロック画面のプレゼンテーションを画面いっぱいに拡大縮小しますバックグラウンドランタイムに依拠するだけでなくアプリで "liveactivity" プッシュタイプを指定しプッシュ通知を使用したライブアクティビティのリモート更新も可能ですプッシュ通知でライブアクティビティを更新する方法の詳細は Jeffの動画をご確認くださいアプリのライブアクティビティはライフサイクルの中で様々な段階を経ます私はEmoji Rangersアプリからヒーローを選んで冒険に連れ出すライブアクティビティを作っています冒険の間ヒーローは課題に直面しボスと戦いますこの冒険の重要な瞬間をライブアクティビティに表示しますこのライブアクティビティにはヒーローの冒険に関する最も重要な情報が表示されますこれにはヒーローの名前と統計アバター健康レベルこのヒーローが冒険で経験することの説明が含まれますライブアクティビティのライフサイクルは主に4ステップですアクティビティのリクエストから始めますアクティビティが始まったら最新のコンテンツで更新してくださいその間アクティビティを観察しアクティビティが終了するなどの状態変化に対応しましょうタスクが完了したらアクティビティを終了してくださいライブアクティビティのリクエストは非常に簡単ですアプリがフォアグラウンドの状態で初期コンテンツと必要なアクティビティリクエストデータがあるようにアプリを設定してください Emoji Rangersのアプリでライブアクティビティをリクエストする前に「ActivityAttributes」を実装してライブアクティビティ用の静的・動的データのセットを定義することから始めますこれを「AdventureAttributes 」と呼んでいます「AdventureAttributes」は 1つの静的データを記述しますまた必要なカスタム「ContentState」を定義しヒーローの健康レベルとイベントの説明をカプセル化しますこれらのプロパティが変更されるとライブアクティビティUIが更新され画面上に冒険の現在の状態を表示できるようになります動的データと静的データの準備ができたので冒険アクティビティのリクエストをセットアップしますヒーローでAdventureAttributesのインスタンスを作成しヒーローの健康レベルとイベントの説明で初期コンテンツを設定します各アクティビティコンテンツはコンテンツが古いと判断されたときにシステムに通知するために古くなった日付を提供することができます今のところは nilを渡しますコンテンツの関連性スコアは複数の冒険アクティビティが開始されたとき各ライブアクティビティの表示順を決めますもし別の冒険アクティビティを始めるのであればそれぞれに異なる関連性スコアを指定するでしょう関連度スコアの指定は任意ですデフォルト値は0ですアクティビティをリクエストできるようになりました属性や初期コンテンツやプッシュ通知タイプを渡しますプッシュ通知タイプはライブアクティビティがActivityKitのプッシュ通知で動的コンテンツの更新を受け取るかどうかを示しますこの例では「nil」に設定しますこのアクティビティがローカルでのみ更新を受け取れることを意味しますこのをライブアクティビティ開始するには Emoji Rangersアプリのライブアクティビティ設定を有効にする必要がありますライブアクティビティがリクエスト可能になったのでヒーローがスリル満点のタスクをこなしたときに冒険を更新する方法を調べますダイナミック属性はライブアクティビティを更新するタイミングを教えてくれますイベントの説明やヒーローの健康レベルが変わるたびに自分のアクティビティを更新しますしまった！ヒーローがボスから致命傷を受けたそこで健康レベルの変化を反映した「contentState」を作成しイベントを記述しますヒーローの健康レベルが大幅に減少したのでアラートを送る必要がありますそのためのアラート設定を作りますこれによりライブアクティビティで重要な情報が変化した場合 iPhone iPadまたは同期された Apple Watchにアラートが表示されますこの場合主人公は重傷を負い回復のためにポーションを必要とする指定音とともに表示されます設定タイトルと本文は Apple Watchでのみ使用され通知として表示されます iPhoneとiPadでは更新された内容のアクティビティUIが指定された音と共に表示されますこれで更新されたコンテンツとアラート設定を持つアクティビティオブジェクトの update APIを呼び出すことができますこれによりライブアクティビティの UIが更新されユーザーにアラートが通知されますアクティビティの状態変更はライブアクティビティのライフサイクル中いつでも起こり得ます可能な状態は4つあります「started」「finished」「dismissed」「stale」ですアクティビティオブジェクトの activityStateUpdates APIを使ってこれらの状態を観察し非同期で更新を受け取りますアクティビティが却下されたらもう冒険データを追跡していないことを確認しアプリのUIを更新して進行中のアクティビティを表示しないようにします activityState APIを使って状態をチェックし必要なときに同期的に取得することもできます僕のヒーローはたくさんのことを経験しました冒険ライブアクティビティを終了する時が来ましたアクティビティを終了させるためにまず最後のコンテンツを作ります私のコンテンツは主人公がボスを倒した冒険の最終状態を表示しますそれからUIの終了ポリシーを決めますこの場合はデフォルトのポリシーが適していますこのポリシーでは冒険終了後しばらくはロックスクリーンに冒険情報が表示されるので誰かがロックスクリーンを見て冒険の最後に何が起こったかを確認することができますこれで冒険アクティビティを終了しヒーローを休ませることができますライブアクティビティのライフサイクルに関するすべてのロジックを構築しましたアクティビティUIに集中する番です現在 Emoji Ranger Widgets Extensionには WidgetBundleに 2つのウィジェットがあります WidgetBundleにライブアクティビティの設定を追加する必要があります「AdventureActivityConfiguration」と呼ぶことにします「AdventureActivityConfiguration」はウィジェットインフラストラクチャを活用するのでボディで WidgetConfigurationを返します ActivityConfigurationオブジェクトを作成しライブアクティビティの内容を記述します各プレゼンテーションクロージャに対して ActivityConfigurationオブジェクトは私の静的および動的属性とアクティビティIDを格納する ActivityViewContextを提供しますこのコンテキストはコンフィギュレーションに渡された属性タイプに基づいて作成されますこのタイプはアクティビティが要求される属性と一致しなければなりませんアクティビティコンフィギュレーションが正常に初期化されるようここでは「AdventureAttributes」タイプを渡します「ActivityConfiguration」の最初のクロージャはロック画面のUIを指定しますアクティビティが更新されるとビューコンテキストが変わるので更新のたびにこのUIがレンダリングされますウィジェットと同様にライブアクティビティのロック画面UIのサイズは指定せずシステムに適切なサイズを決定してもらいます絵文字レンジャーのアクティビティではヒーロー情報や名前とアバター健康レベルそしてイベントの説明を紺色の背景のロック画面に表示します「AdventureLiveActivityView」には渡されたビューコンテキストを通してすべての情報が表示されますロック画面のライブアクティビティはシンプルでエレガントに見えヒーローが冒険の中で経験することについて必要な情報をすべて持っていますロック画面のUIを完成させたので次はDynamic Islandのプレゼンテーションを実装しますコンパクトと最小限と拡張の 3つのプレゼンテーションがありますアプリのライブアクティビティだけがシステム上で動作しているときはコンパクトなプレゼンテーションを使って表示されますコンパクトなプレゼンテーションには先頭と末尾の2つのエリアがありますこれらは一緒に表示されDynamic Islandでまとまったプレゼンテーションを形成しますスペースは限られているので先頭と末尾のスペースに表示する必須コンテンツを選択しますユーザーはここのコンテンツを見て特別なアクティビティを特定できるはずです ActivityConfigurationオブジェクトの「DynamicIsland」クロージャで再びビューコンテキストにアクセスして expanded compactLeading compactTrailing minimalビューを作成しますそれぞれのプレゼンテーションを表現するために DynamicIslandビュービルダーを作成する必要がありますヒーローの冒険ではヒーローのアバターを先頭側のコンテンツに追加し健康レベルを末尾側のビューに追加しますまたヒーローの健康レベルに基づいてダイナミックな色合いを設定しますこれで冒険のためのコンパクトなプレゼンテーションが出来上がりました複数のアプリがライブアクティビティを開始するとシステムは表示するライブアクティビティを選択しそれぞれのアクティビティに対して最小限のプレゼンテーションを使用して両方を表示します　1つの最小限のプレゼンテーションはDynamic Islandに接続された状態で表示されもう1つは切り離された状態で表示されます最小限のビューでは作業できるスペースが非常に限られているため最も重要な情報のみ表示する必要がありますライブアクティビティの最小限ビューの場合最も重要な情報はヒーローの正体とヒーローの健康状態ですよってユーザーは最小限ビューを見ることでヒーローを助けるタイミングがわかりますこれでユーザーは最小限表示を見ればヒーローを助けるタイミングを知ることができますユーザーがコンパクトまたは最小限表示のライブアクティビティをタッチおよびホールドするとシステムはコンテンツを拡張表示しますこちらもサポートする必要があります拡張プレゼンテーションではシステムは拡張プレゼンテーションを異なるエリアに分割します DynamicIslandビュービルダーの最初のクロージャは展開されたコンテンツを表しますそのクロージャの中で展開された領域が特定の位置を渡すことで各セクションのコンテンツを定義することができますヒーローの名前とアバターを先頭のスペースにヒーローの統計情報を末尾のスペースにそして最後にヘルスバーとイベントの説明を一番下のスペースに追加します最終的に私のDynamic Island UIはシンプルに見え冒険に必要なすべての情報を提供しますさあ大好きなヒーローと一緒に冒険の旅に出ましょう！今作ったばかりのシンプルでイマーシブなライブアクティビティUIで一緒に冒険を楽しみましょう独自のUIをデザインする際ライブアクティビティには最も必要なコンテンツだけを表示しましょうシンプルに保ちユーザーがライブアクティビティをタップするとアプリの追加詳細が表示されます詳しくは「ダイナミックなライブアクティビティのデザイン」をご確認くださいライブアクティビティは進行中のアクティビティを一目で見られるようにライブで表示する強力なツールです簡単な設定でiOSやiPadOSのユーザーとダイナミックに関わることができますプッシュ通知の詳細については「プッシュ通知によるライブアクティビティの更新」をご確認ください ActivityKitを使ってみなさんが何を開発するのか楽しみですご視聴ありがとうございました！ ♪ ♪

5:40 - Define ActivityAttributes

import ActivityKit

struct AdventureAttributes: ActivityAttributes {
    let hero: EmojiRanger

    struct ContentState: Codable & Hashable {
        let currentHealthLevel: Double
        let eventDescription: String
    }
}

6:28 - Request Live Activity with initial content state

let adventure = AdventureAttributes(hero: hero)

let initialState = AdventureAttributes.ContentState(
    currentHealthLevel: hero.healthLevel,
    eventDescription: "Adventure has begun!"
)
let content = ActivityContent(state: initialState, staleDate: nil, relevanceScore: 0.0)

let activity = try Activity.request(
    attributes: adventure,
    content: content,
    pushType: nil
)

8:00 - Update Live Activity with new content

let heroName = activity.attributes.hero.name               
let contentState = AdventureAttributes.ContentState(
    currentHealthLevel: hero.healthLevel,
    eventDescription: "\(heroName) has taken a critical hit!"
)

var alertConfig = AlertConfiguration(
    title: "\(heroName) has taken a critical hit!",
    body: "Open the app and use a potion to heal \(heroName)",
    sound: .default
)  
     
activity.update(
    ActivityContent<AdventureAttributes.ContentState>(
        state: contentState,
        staleDate: nil
    ),
    alertConfiguration: alertConfig
)

9:30 - Observe activity state

// Observe activity state asynchronously
func observeActivity(activity: Activity<AdventureAttributes>) {
    Task {
        for await activityState in activity.activityStateUpdates {
            if activityState == .dismissed {
                self.cleanUpDismissedActivity()
            }
        }
    }
}

// Observe activity state synchronously
let activityState = activity.activityState
if activityState == .dismissed {
    self.cleanUpDismissedActivity()
}

10:03 - Dismiss Live Activity with final content state

let hero = activity.attributes.hero

let finalContent = AdventureAttributes.ContentState(
    currentHealthLevel: hero.healthLevel,
    eventDescription: "Adventure over! \(hero.name) has defeated the boss! Congrats!"
)

let dismissalPolicy: ActivityUIDismissalPolicy = .default

activity.end(
    ActivityContent(state: finalContent, staleDate: nil),
    dismissalPolicy: dismissalPolicy)
}

10:50 - Add ActivityConfiguration to WidgetBundle

import WidgetKit
import SwiftUI

@main
struct EmojiRangersWidgetBundle: WidgetBundle {
    var body: some Widget {
        EmojiRangerWidget()
        LeaderboardWidget()
        AdventureActivityConfiguration()
    }
}

11:05 - Define Lock Screen presentation

struct AdventureActivityConfiguration: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: AdventureAttributes.self) { context in
            AdventureLiveActivityView(
                hero: context.attributes.hero,
                isStale: context.isStale,
                contentState: context.state
            )
            .activityBackgroundTint(Color.navyBlue)
        } dynamicIsland: { context in
            // ...
        }
    }
}

13:28 - Define Dynamic Island compact presentation

struct AdventureActivityConfiguration: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: AdventureAttributes.self) { context in
            // ...
        } dynamicIsland: { context in
            DynamicIsland {
                // ...
            } compactLeading: {
                Avatar(hero: context.attributes.hero)
            } compactTrailing: {
                ProgressView(value: context.state.currentHealthLevel) {
                    Text("\(Int(context.state.currentHealthLevel * 100))")
                }
                .progressViewStyle(.circular)
                .tint(context.state.currentHealthLevel <= 0.2 ? Color.red : Color.green)
            } minimal: {
                // ...
            }
        }
    }
}

14:42 - Define Dynamic Island minimal presentation

struct AdventureActivityConfiguration: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: AdventureAttributes.self) { context in
            // ...
        } dynamicIsland: { context in
            DynamicIsland {
                // ...
            } compactLeading: {
                // ...
            } compactTrailing: {
                // ...
            } minimal: {
                ProgressView(value: context.state.currentHealthLevel) {
                    Avatar(hero: context.attributes.hero)
                }
                .progressViewStyle(.circular)
                .tint(context.state.currentHealthLevel <= 0.2 ? Color.red : Color.green)
            }
        }
    }
}

15:26 - Define Dynamic Island expanded presentation

struct AdventureActivityConfiguration: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: AdventureAttributes.self) { context in
            // ...
        } dynamicIsland: { context in
            DynamicIsland {
                // Leading region
                DynamicIslandExpandedRegion(.leading) {
                    LiveActivityAvatarView(hero: hero)
                }

                // Expanded region
                DynamicIslandExpandedRegion(.trailing) {
                    StatsView(hero: hero, isStale: isStale)
                }

                // Bottom region
                DynamicIslandExpandedRegion(.bottom) {
                    HealthBar(currentHealthLevel: contentState.currentHealthLevel)
                    EventDescriptionView(hero: hero, contentState: contentState)
                }
            } compactLeading: {
                // ...
            } compactTrailing: {
                // ...
            } minimal: {
                // ...
            }
        }
    }
}

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

ActivityKitについて

関連する章

リソース

関連ビデオ

WWDC23