ストリーミングはほとんどのブラウザと
Developerアプリで視聴できます。
-
Apple Watchでのライブアクティビティの表示
iPadOS 18とwatchOS 11で、Apple Watchのスマートスタックにライブアクティビティを追加する方法を説明します。Apple Watchにライブアクティビティがどのように表示されるかに加え、スマートスタックでの表示を向上させる方法についても解説します。さらに、Apple Watchのライブアクティビティに常に最新情報が表示されるようにするための考慮事項も取り上げます。
関連する章
- 0:00 - Introduction
- 1:07 - Review your Live Activity
- 3:22 - Customize for Apple Watch
- 6:02 - Keep it live
リソース
-
ダウンロード
こんにちは 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) } } }
-
-
特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。
クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。