SwiftUIによるvisionOSのシーンの設定

SwiftUIによるvisionOSのシーンの設定

visionOSアプリのウインドウ、ボリューム、イマーシブ空間を強化する、エキサイティングな新しいAPIを紹介します。再起動やロックされた場合にシーンの動作を微調整したり、クリッピングマージンやスナップ機能を使ってボリュームを周囲に適応させたりすることが可能です。イマーシブなコンテンツをMacからVision Proにストリーミングすることもできます。ボリュームとイマーシブ空間を活用して、UIKitベースの既存のアプリを向上させましょう。

関連する章
- 0:00 - イントロダクション
- 2:11 - 起動とロック
- 8:15 - ボリュメトリックの機能強化
- 15:58 - イマーシブ空間
- 22:16 - シーンブリッジング
- 24:01 - 次のステップ
リソース
関連ビデオ

WWDC25
こんにちは Miguelです SwiftUIチームのエンジニアですこのビデオでは visionOS 26に追加されたシーンの素晴らしい新機能をいくつかご紹介しますそして私たち自身のシーンをどのように演出するかも学ぶかもしれません
visionOSの3つのシーンタイプはウインドウボリュームイマーシブ空間ですアプリではこの3つを組み合わせることで独自の魅力的な体験を創出できます
本日は 3つのタイプすべてに適用される新しいAPIとボリュームとイマーシブ空間に重点を置いたいくつかのAPIについて説明します友人のMaks、Amanda、Trevorが BOTanistの魅力的な改良に取り組んでいます空中庭園でロボットが美しい植物を育てるのを手伝うゲームです
私自身はシーンの構築や装飾をとおしてアプリに取り組んできましたロボット君がシェイクスピアのキャラクターに生命を吹き込み演技の世界に挑戦するのを手助けしてきました
アプリを開くとステージ選択画面が表示されます新しいステージを作成します
これで BOTanistを動かしてシーンを設定できますステージのいたるところに移動できます
これでロボット君がお気に入りの演劇を再現できますまるで「ロボとジュリエット」です
新しいシーンAPIでアプリを改善する方法を見てみましょう visionOS 26の新しいシーンAPIです
最初に新しいライフサイクルAPIについて説明しますウインドウを起動してルームに固定するときの動作を定義します
次に新しいボリュメトリックの機能強化について紹介しますユーザーの環境に合わせて調整できます
そして RemoteImmersiveSpaceを追加して macOSアプリから Apple Vision Proのシーンをプレビューします
既存のUIKitアプリに対しては新しいシーンブリッジAPIを使ってこれらの驚くべき立体的で没入感のある体験を追加して締めくくります
最初に起動と固定について説明します
visionOS 26ではいくつかの macOS ライフサイクルAPIが導入されましたこれは非常に便利ですシーンの復元とアプリの起動を管理するAPIについて説明します固有のウインドウを作成する APIについても説明します
visionOS 26ではウィンドウやボリュームさらには新しいウィジェットを特定の部屋に固定して物理的な環境に保持できるようになりました
これによりバーチャルコンテンツはその空間により存在感を持つようになりますこれらの固定されたウインドウは使用された部屋に結び付けられます
後でその部屋に戻るとウインドウが再び表示されます
固定機能によるシーン復元は素晴らしいですすべてのウインドウを残しておきいつでも戻ってくることができます
一般的にユーザーはすべてのウィンドウを固定できることを期待しシステムがそれを復元することを望みますそのためほとんどのシーンで復元を優先してくださいシステムが自動的にこれを行います
ただしいくつかのウィンドウはこの方法で保持するのが適切でない場合もあります
ウェルカム画面や特定のアプリ状態に結びついたツールウィンドウログインプロンプトのような一時的な要素ではシーン復元を無効にすることを検討してください
アプリにイマーシブモードを追加したのでお気に入りのロボットの動きを十分に楽しむことができますツールバーは前方の独立したツールウインドウに分離されイマーシブな状態でも簡単にステージコントロールにアクセスできます
イマーシブ空間は復元されないことに注意してください
したがってこの部屋に戻ってきたときイマーシブ空間は復元されません
ただし誰かがツールウィンドウを固定していた場合単独で何もない状態で表示されることになります
この予期しない状態を回避するには restorationBehavior(.disabled) 修飾子を WindowGroupに追加しますこれによりツールウィンドウが復元および固定されなくなります
これで後でこの部屋に戻ったときに余分なウィンドウは戻りません
アプリを起動すると最初のウィンドウが表示され新しいスタートとなります
UIKitでは新しい destructionConditions APIの .systemDisconnectionプロパティを使用してUIシーンの復元を無効にできます詳しくはドキュメントをご覧ください
場合によってはアプリが開始するシーンを動的に変更することでメリットが得られることがあります
例えばアプリの初回起動時にステージ選択の前に挨拶するウェルカムウィンドウを追加したいと考えています
アプリの状態に基づいて起動時に表示するウインドウをカスタマイズするには defaultLaunchBehavior修飾子を使用します
ここではアプリの初回起動時にウェルカムウィンドウを表示するように優先します
そのウィンドウが表示されたら値をオフに切り替えることができますもうそのウィンドウを表示する必要はありません
選択した起動ウインドウの役割は Info.plistの Application Scene Manifestの希望するデフォルトシーンセッションの役割プロパティと一致している必要があります
つまりデフォルトのシーンセッションの役割をウィンドウに設定するとアプリ起動時にシステムが通常のウィンドウシーンのみを考慮します
その場合defaultLaunchBehaviorで優先しようとしてもボリュームは無視されますそのため希望するシーンをそのセッションの役割と一致させてください
defaultLaunchBehavior修飾子にはもう一つ便利な機能があります
部屋に戻ったときにツールパネルが再表示されないようにしたいこととそれを修正するために restorationBehaviorを使えることについて話しましたこちらでも似たような問題があります
今のところ Crownを押してイマーシブ空間を解除しツールウィンドウを閉じても
アプリを再起動するとこのウィンドウが再表示されます
これにより復元機能がある場合と同じような予期しない状態になります
代わりにステージ作成ウィンドウから始めて安全な状態でアプリを再開したいです
これを行うにはdefaultLaunchBehavior (.suppressed)修飾子をツールウインドウに追加しますこれによりホームビューからアプリを再起動するときにこのウィンドウを再表示しないようにシステムに指示します
一般的に予期しない状態に陥るのを避けるためにセカンダリーシーンには defaultLaunchBehavior (.suppressed)を使用します
UIKitではUISceneの destructionConditionsに userInitiatedDismissalオプションを追加することで同じ動作を実現できます
visionOS 26では独自のウィンドウの作成もサポートしています
これらは複製できないウインドウです一度に1つの一意のインスタンスしか存在できません
Macと同様 WindowGroupではなく Window APIを使用して宣言します
ゲームウィンドウやビデオ通話のような重要なインターフェースの重複を防ぐためにこれらを使用してください
また 1つ以上のインスタンスを必要としない補助的な機能を提供するために使用してください
ウェルカムウインドウには複数のインスタンスは必要ありませんそのため独自のウインドウに置き換えます
ただしメインステージのボリュームは複数のステージを同時に作成できるように WindowGroupとして保持します
すばらしいアプリのライフサイクルはこれまでで最高です固定時やアプリ起動時に表示されるウィンドウをカスタマイズしましたそして必要に応じてウィンドウを独自に保つようにしました
visionOS 26にはボリュームをさらに深めるための多くの新しい強化機能があります
新しい平面へのスナップ機能表示機能の強化および Clipping Margins API について話します
では早速始めましょう
visionOS 26の新機能ではウィンドウやボリュームを物理的環境にスナップできますウィンドウを表面に近づけるだけでスナップできます復元可能なウインドウの場合これでウィンドウを固定して保持できます
ウィンドウの背面を壁のような垂直面にスナップできますボリュームの底面を床やテーブルのような水平面にスナップすることもできます
visionOS 26の新機能のウィジェットはどちらの種類にもスナップできます
visionOSアプリにウィジェットを追加する方法について詳しくは「What’s new in widgets」をご参照ください
ウィンドウやボリュームではスナッピングイベントに関する情報も取得できます
アプリではボリュームをテーブルにスナップして水平に固定できます
これは第一歩ですが空間におけるステージをより存在感のあるものにしたいと思いますボリュームがテーブルにスナップされたときロボットを直接テーブルに立たせたいと思います
スナッブ状態に関する情報を取得するには新しい SurfaceSnappingInfo APIを使います
このAPIはウィンドウの一般的なスナップ状態を判断するための簡単なisSnappedプロパティを提供します
より高度なユースケースではスナップサーフェスの ARKit分類を取得できますこの詳細レベルにはユーザーの許可が必要ですその方法を説明します
詳細なスナップサーフェス情報を有効にするにはまず Application Wants Detailed Surface InfoキーをYESに設定し Privacy World-Sensing Usage-Descriptionキーには許可を求める際に表示する説明を設定する必要があります
これら2つのキーはアプリのInfo.plistで設定できます
それが終わったらコードに取り掛かれます
ここで環境からsurfaceSnappingInfoを取得します
onChangeの中でシーンが現在スナップされているかどうかを確認しますそしてスナップ面の分類にアクセスする権限があるかを確認します
authorizationStatusを確認ことで必要に応じて自動的に許可を求めます
ここでテーブルにスナップされたときステージの下のプラットフォームを隠したとしますこれを管理するために状態変数を使用します
これらの変更によりボリュームをテーブルにスナップさせロボットが自分の環境で存分に動作できます素晴らしいですね
またテーブルの周りを歩くと邪魔になる壁が隠れるようにしたので常にボリュームの中を見ることができます
これはonVolumeViewpointChange 修飾子を使用してシーンの視点の変化に反応することで行いました
OwenがどのようにBOTanistに追加したかは WWDC24の「Dive deep into volumes and immersive spaces」で詳しくご確認ください
またステージの周りに新しい小道具を配置できるようにしたいですボリュームのツールバーに様々な小道具を追加できるポップオーバーを追加できます
いいですねようやく『The Tragedy of King Gear』を再現できます
以前は表示は Windowsでのみサポートされていました
visionOS 2.4でネストされた表示のサポートが追加されシートから表示されるポップオーバーやオーナメントから表示されるコンテキストメニューなどが可能になりました
visionOS 26ではプレゼンテーションにまったく新しいソースが加わりましたこれでボリューム内やボリュームのオーナメントから RealityViewsへのアタッチメントまたはRealityKitの PresentationComponentを使用して直接プレゼンテーションができます
アタッチメントと PresentationComponentを使った RealityKitでのプレゼンテーションについて詳しくは「Better Together: SwiftUI and RealityKit」をご参照ください
これは小さなサブセットに限定されませんすべての表示タイプが利用可能ですメニューツールチップポップオーバーシートアラート確認ダイアログなどです
これらのプレゼンテーションをSwiftUIで作成する方法についてはドキュメントを確認してください
これらのプレゼンテーションはすべて 3Dコンテンツによって隠されても見えるように特別な視覚処理が施されています
デフォルトでは遮るコンテンツとさりげなくブレンドします
ただしこれは遮るコンテンツを目立って突破するかその背後に隠れるようにカスタマイズできます
これをカスタマイズするには subtle prominent none オプションを使用します
これらのオプションは presentationBreakthroughEffect 修飾子を使って適用できます
プレゼンテーション以外の要素には breakthroughEffect修飾子を使用して同じ効果を得ることができます
プレゼンテーションにカスタムUIを好きな場所に追加できるようになりましたさらに追加してみます
ポップオーバーメニューを追加して舞台装飾を変更しますこれでロボット君を劇場から南国の島に移動できます『Tempest』にぴったりです
このセットは多くの可能性を秘めていますしかし何かアレンジを加えたいところです滝はどうでしょうか雷雲もいいかもしれません
それでもこれらのものがアクションの核心を妨げないように注意しますこれには新しいクリッピングマージンを使用します
ボリュームを使うと新しいpreferred WindowClippingMargins APIでシーンの境界外にコンテンツをレンダリングできます
このコンテンツはインタラクティブではありませんしたがって視覚的な華やかさのためだけに使用してください
このような境界はシステムによって許可されない可能性がありますこれに対応するには windowClippingMargins環境変数で windowClippingMargins環境変数を使用します
実際に見てみましょう
preferredWindowClippingMargins APIで希望するクリッピングマージンを指定できますここでは下部にマージンを設定したいです
maxWaterfallHeightを 1メートル単位でポイントに変換するために PhysicalMetricから得た pointsPerMeter係数を掛けています
次にwindowClippingMargins 環境変数で許可されたマージンを読み取ります
これにより滝を拡大縮小してマージン内でレンダリングできます
許可されたものに関係なく滝のモデル全体が常にレンダリングされるようにマージンと滝の高さの最小値を取ります
するとこうなりますとても良くなりました雲が良い嵐の雰囲気を加え滝はベースプレートの下にレンダリングされますコンテンツを上にずらさずに島とそこにいるロボットに焦点を当て続けます
BOTanistが注油直後だといいですね
これで私たちの最新の演劇作品はこれまで以上にリアルに感じらます平面へのスナップとクリッピングマージンによりコンテンツは私たちの物理的な空間に適応しますプレゼンテーションを使って完璧なシーンを作り上げるための強力なインターフェースを作成できます
それではアプリのイマーシブ体験を向上させるために何ができるか見てみましょう
イマーシブ空間は空間的な体験を周囲にもたらします visionOS 26はイマーシブ空間でさらに多くのことを行うための素晴らしい新しい方法をもたらします
ワールドリセンタリングイベントのイマーシブスタイルの新機能 macOS でのリモートイマーシブ空間 Metal によるレンダリングのためのコンポジターベースのイマーシブ空間を紹介しましょう自分の空間を移動するときユーザーはDigital Crownを長押して周囲のアプリの体験を再センタリングできます
アプリがARKitデータを使用する場合保存しておいた位置情報が無効になることがあります
新しいonWorldRecenterビュー修飾子でワールドリセンターリングイベントを聞くことができ通知を受けることができます
これは新しい座標系に基づいて位置を再計算し保存するのに非常に役立ちます
visionOS 26にはイマーシブ空間に利用できる様々な没入スタイルの新しいカスタマイズも含まれています
段階的なイマーシブスタイルはイマーシブ空間を部分的に提示しながら現実世界にユーザーを留めておく素晴らしい方法です
イマーシブコンテンツはポータル内に表示され Digital Crownを回すことでサイズを変更できます
この没入範囲は段階的なイマーシブスタイルでカスタマイズできます
visionOS 26ではこのポータルのアスペクト比もカスタマイズできます既存の横向きのアスペクト比または新しい縦向きのアスペクト比を使用できます
iPhoneゲームをApple Vision Proでプレイする場合や多くの動きが含まれる体験には縦向きのアスペクト比を検討してください周囲が安定していることでユーザーはより快適に感じることができます
このアスペクト比は没入範囲と同様に段階的なスタイルのパラメータで指定できます
段階的なスタイルに加えてイマーシブ空間の混合イマーシブスタイルにも新しいカスタマイズがあります
イマーシブスタイルを mixedに設定するとイマーシブ空間のコンテンツは周囲に溶け込みます
これはこのアプリのデフォルトスタイルです
visionOS 26ではイマーシブ空間のコンテンツがシステム環境とも融合できますつまり月にいながらロボットの最新作を観ることができます
これを可能にするために共存動作を持つ immersiveEnvironmentBehavior シーン修飾子を使用してください
混合イマーシブ空間でユーザーが現実世界の周囲を認識する必要がない場合にこれを行ってください
アプリに追加した小道具を気に入っていますが新しいシーンを作成する際は自分のモデルを持ち込みたいと思っていることもわかっていますこれらのモデルはお気に入りの macOSアプリで作成されるかもしれません
これらのモデルをMacから直接使用できるようにするために同じステージ作成機能を備えたアプリを macOSに導入しました
より迅速な反復のために macOSからvisionOSにステージを移行せずに直接イマーシブ空間としてシーンをプレビューできたらすごいですよね
visionOS 26とmacOS Tahoeはそれを可能にする RemoteImmersiveSpacesを追加しますリモートイマーシブ空間を使用すると CompositorLayerでMetalを使って Macのアプリコードやリソースからコンテンツをレンダリングし
Vision Proでイマーシブ体験として表示できます
アプリでこの機能を実際に見てみましょう
Macアプリで Metalを使用して新しいイマーシブ空間を構築しボタンを追加しました
これをクリックするとターゲットの Vision Proデバイスの選択を求められます
Vision Proで接続リクエストを承認します
するとすぐに ImmersiSpaceが開きロボットの最新ショーに追加した新しい小道具を見ることができます
これを実現するために CompositorLayerを含む CompositorLayerが含まれています
これがvisionOSで表示されメインステージのような他のシーンは引き続きMacで直接表示されます
CompositorLayerとARKitSessionをリモートVision Proデバイスに適応させる方法について詳しくは「What’s new in Metal rendering for immersive apps」をご覧ください
リモートイマーシブ空間で CompositorLayerを使用すると Metalを使ったイマーシブ体験を作成するための多くの可能性が得られます
ただし CompositorLayerはビューではないため ImmersiveContentなどビューを必要とするコンテキストでは使用できません
これまで環境変数やView修飾子が CompositorLayerには利用できないことを意味していました
visionOS 26では新しいCompositor Contentビルダータイプが追加され CompositorLayerでSwiftUIの全機能を使用できるようになりました
これにより環境変数にアクセスしたり修飾子を追加したり SwiftUIビューと同じように状態変数を使用することもできます
CompositorContentは scenePhaseやopenWindowなど多くの便利な環境変数と onImmersionChangeやonWorld Recenterなどの修飾子を提供します
これらにより CompositorLayerはリモートイマーシブ空間でも visionOSで直接動作する通常の空間でも強力に使用できるようになります
アプリのアップグレードにより CompositorContentを使用することは使用可能なイマーシブ空間修飾子の一部を見直しアプリにどのように適用できるかを見直す素晴らしい方法となりました
以上がイマーシブ空間の新機能です環境再センタリングイベント新しいイマーシブスタイルのカスタマイズ RemoteImmersiveSpaceによる Macからのイマーシブ空間の創出そしてCompositorContentについて説明しました
これらの機能によりアプリの見た目は素晴らしいものになりました実際これらの素晴らしいボリュメトリック体験を他のアプリにも追加したいと思っています
ただし一部のアプリはUIKitで構築されており UIKitはボリュームやイマーシブ空間をサポートしていませんしかし今はシーンブリッジングによってそれが可能になります
シーンブリッジングを使用すると既存のUIKitアプリと既存のUIKitアプリとイマーシブ空間を統合できます
例えば Safariは SwiftUIビューを使用していますが UIKitライフサイクルで構築されています
Safariは新しい空間ブラウジング機能にシーンブリッジングをうまく活用しています
その方法を見てみましょう
SwiftUIのシーンをUIKitアプリにブリッジするにはまず UIHostingSceneDelegateを継承するクラスタイプを作成します
このタイプを使用して使い慣れたのシーンボディ構文で rootSceneプロパティに SwiftUIシーンを宣言できます
これで他のUIKitシーンと同様に UISceneSessionActivationRequestを作成してこのシーンをリクエストできます
この場合シーンを宣言するホスティングデリゲートクラスと開きたいシーンのIDを渡します
あとは activateSceneSessionを使用してこのリクエストを送信するだけです
configurationForConnectingでホスティングデリゲートクラスを設定すると外部イベントに対応することもできます
このAPIには既存のmacOS AppKitアプリに SwiftUIシーンをブリッジするための対応するAppKit APIも含まれています
このアプリは現在 visionOS 26の新機能を最大限に活用しており位置の固定表面へのスナップ Macからのリモートオープンなどが可能です友達に見せるのが楽しみです
ご自身のアプリを見直してシーンを見直して位置の固定と復元機能を最大限に活用しているか確認してください
スナップやクリッピングマージンを使用してシーンを周囲に適応させることができます
そしてリモートイマーシブ空間を使って macOSアプリのコンテンツを Vision Proで没入させてください
幕は降りますがアプリでは1シーンずつショーが続きますご視聴ありがとうございました

// Disabling restoration

WindowGroup("Tools", id: "tools") {
    ToolsView()
}
.restorationBehavior(.disabled)

4:36 - Disabling restoration in UIKit

// Disabling restoration

windowScene.destructionConditions = [
    .systemDisconnection
]

5:02 - Specifying launch window

// Specifying launch window

@AppStorage("isFirstLaunch") private var isFirstLaunch = true

var body: some Scene {
    WindowGroup("Stage Selection", id: "selection") {
        SelectionView()
    }

    WindowGroup("Welcome", id: "welcome") {
        WelcomeView()
            .onAppear {
                isFirstLaunch = false
            }
    }
    .defaultLaunchBehavior(isFirstLaunch ? .presented : .automatic)

    // ...
}

6:39 - "suppressed" behavior

// "suppressed" behavior

WindowGroup("Tools", id: "tools") {
    ToolsView()
}
.restorationBehavior(.disabled)
.defaultLaunchBehavior(.suppressed)

7:44 - Unique window

// Unique window

@AppStorage("isFirstLaunch") private var isFirstLaunch = true

var body: some Scene {
    // ...

    Window("Welcome", id: "welcome") {
        WelcomeView()
            .onAppear {
                isFirstLaunch = false
            }
    }
    .defaultLaunchBehavior(isFirstLaunch ? .presented : .automatic)

    WindowGroup("Main Stage", id: "main") {
        StageView()
    }

    // ...
}

10:24 - Surface snapping

// Surface snapping

@Environment(\.surfaceSnappingInfo) private var snappingInfo
@State private var hidePlatform = false

var body: some View { 
    RealityView { /* ... */ }
    .onChange(of: snappingInfo) {
        if snappingInfo.isSnapped &&
            SurfaceSnappingInfo.authorizationStatus == .authorized
        {
            switch snappingInfo.classification {
                case .table:
                    hidePlatform = true
                default:
                    hidePlatform = false
            }
        }
    }
}

14:41 - Clipping margins

// Clipping margins

@Environment(\.windowClippingMargins) private var windowMargins
@PhysicalMetric(from: .meters) private var pointsPerMeter = 1

var body: some View {
    RealityView { content in
        // ...
        waterfall = createWaterfallEntity()
        content.add(waterfall)
    } update: { content in
        waterfall.scale.y = Float(min(
            windowMargins.bottom / pointsPerMeter,
            maxWaterfallHeight))
        // ...
    }
    .preferredWindowClippingMargins(.bottom, maxWaterfallHeight * pointsPerMeter)
}

16:44 - World recenter

// World recenter

var body: some View {
    RealityView { content in
        // ...
    }
    .onWorldRecenter {
        recomputePositions()
    }
}

17:58 - Progressive immersion style

// Progressive immersion style

@State private var selectedStyle: ImmersionStyle = .progressive

var body: some Scene {
    ImmersiveSpace(id: "space") {
        ImmersiveView()
    }
    .immersionStyle(
        selection: $selectedStyle,
        in: .progressive(aspectRatio: .portrait))
}

18:37 - Mixed immersion style

// Mixed immersion style

@State private var selectedStyle: ImmersionStyle = .progressive

var body: some Scene {
    ImmersiveSpace(id: "space") {
        ImmersiveView()
    }
    .immersionStyle(selection: $selectedStyle, in: .mixed)
    .immersiveEnvironmentBehavior(.coexist)
}

20:14 - Remote immersive space

// Remote immersive space

// Presented on visionOS
RemoteImmersiveSpace(id: "preview-space") {
    CompositorLayer(configuration: config) { /* ... */ }
}

// Presented on macOS
WindowGroup("Main Stage", id: "main") {
    StageView()
}

20:48 - 'CompositorLayer' is a 'CompositorContent'

// 'CompositorLayer' is a 'CompositorContent'

struct ImmersiveContent: CompositorContent {
    @Environment(\.scenePhase) private var scenePhase

    var body: some CompositorContent {
        CompositorLayer { renderer in
            // ...
        }
        .onImmersionChange { oldImmersion, newImmersion in
            // ...
        }
    }
}

23:00 - Scene bridging

// Scene bridging

import UIKit
import SwiftUI

// Declare the scenes
class MyHostingSceneDelegate: NSObject, UIHostingSceneDelegate {
    static var rootScene: some Scene {
        WindowGroup(id: "my-volume") {
            ContentView()
        }
        .windowStyle(.volumetric)
    }
}

// Create a request for the scene
let requestWithId = UISceneSessionActivationRequest(
    hostingDelegateClass: MyHostingSceneDelegate.self, id: "my-volume")!

// Send a request
UIApplication.shared.activateSceneSession(for: requestWithId)

関連する章

リソース

関連ビデオ

WWDC25