WWDC 2023で発表されたvisionOSのSDKが公開されたので、早速インストールしてサンプルコードで触って、個人開発AppをVision Proのシミュレーターで動かしてみた。
WWDC 2023で待望のApple Vision Proが発表されて、空間コンピューティングの時代が来た！と盛り上がり、体験レポートを観れば観るほど欲しくなってくるが、デベロッパーとしてはvisionOSにはどう対応すればいいかが気になる。
セッションを視聴しながらSDKの公開を待っていたが、ついに手元でも触れるようになったので、早速インストールして、Hello Worldというサンプルコードを触ってみた。このサンプルコードでは空間コンピューティングの新しい概念であるWindows / Volumes / Spacesについて一通り触れることができるのでおすすめ！

Windows / Volumes / Spaces

• Windows

  • SwiftUIで構築された従来のViewやControlのあるコンテンツで、基本的に2Dだが、ウィンドウ内に3Dコンテンツを含めることもできる。Appは1つまたは複数のウィンドウを持つことができる。

• Volumes

  • 3Dコンテンツを表示するのに適したSwiftUIのシーン。3DコンテンツはRealityKitやUnityで構築することができ、Shared SpaceまたはFull Spaceに配置できる。

• Spaces

  • Shared Space

    • Macのデスクトップのような複数Appが表示される空間。AppはWindowsやVolumesを使ってコンテンツを表示でき、ユーザーはそれらの配置を変更できる。なお、AppはデフォルトではShared Spaceで起動される。

  • Full Space

    • App専用の空間で、より没入感のある体験を提供できる。

サンプルコード

“Hello World”を実行すると、Vision Proのシミュレーターが起動し、Living RoomというシーンにWindowが浮かぶ。シミュレーターではLiving Roomの他にKitchenやMuseumのシーンがあり、Day / Nightを切り替えることもできる。また、右下のツールバーでカメラ操作ができる（Ctrl + マウスの方が便利）。

“Planet Earth”をタップすると詳細画面が表示された。ここでの遷移は馴染みのあるNavigationStackを使っているようだ。さらに”View Globe”をタップすると、地球の3DモデルがVolumeで表示される。このようにShared SpaceにはWindowやVolumeを複数表示でき、それぞれの配置も変更できる。

“Objects in Orbit”では、Window内に3Dモデルが埋め込まれていて、直接触って回転させて見ることができる。Volumeではないので、自由に動かすことはできないが、3Dコンテンツを表示して少し見せるくらいがちょうど良いかも。

そして、”The Solar System”では、Full Spaceに切り替えて没入感のある太陽系を見ることができる。地球と月、太陽の3Dモデルが宇宙を背景とした空間に浮かんでいる。ExitでShared Spaceに戻ることもできる。

改めて、”Hello World”はWindows / Volumes / Spacesの基本的な使い方がよくわかるサンプルコードで、visionOS向けのアプリ開発では参考になる部分が多い。ちなみに、App構造体ではWindowGroupやImmersiveSpaceを複数定義していて、それぞれwindowStyleやimmersionStyleを指定していることがわかる。

@main
struct WorldApp: App {
    @State private var model = ViewModel()
    @State private var orbitImmersionStyle: ImmersionStyle = .mixed
    @State private var solarImmersionStyle: ImmersionStyle = .full

    var body: some Scene {
        // The main window that presents the app's modules.
        WindowGroup("Hello, world", id: "modules") {
            Modules()
                .environment(model)
        }
        .windowStyle(.plain)

        // A volume that displays a globe.
        WindowGroup(id: Module.globe.name) {
            Globe()
                .environment(model)
        }
        .windowStyle(.volumetric)
        .defaultSize(width: 0.6, height: 0.6, depth: 0.6, in: .meters)

        // An immersive space that places the Earth with some of its satellites
        // in your surroundings.
        ImmersiveSpace(id: Module.orbit.name) {
            Orbit()
                .environment(model)
        }
        .immersionStyle(selection: $orbitImmersionStyle, in: .mixed)

        // An immersive Space that shows the Earth, Moon, and Sun as seen from
        // Earth orbit.
        ImmersiveSpace(id: Module.solar.name) {
            SolarSystem()
                .environment(model)
        }
        .immersionStyle(selection: $solarImmersionStyle, in: .full)
    }
    ...
}

個人開発AppをVision Proのシミュレーターで動かす

次に個人で開発したSFClockというフリップ時計とカレンダーのアプリをVision Proのシミュレーターで動かしてみた。
SFClockはフルSwiftUIで実装し、ライブラリも使っていなかったので、iOS 17ビルドも問題なく通り、DestinationにApple Visionを追加してビルドするだけでVision Proのシミュレーターで起動できた。なお、Destinationには最初からApple Vision (Designed for iPad)があり、この設定でもVision Proシミュレーターで起動できるが、visionOSに最適化されていないため、UIや機能面で制限があるようだ。

最後に

visionOSではWindows / Volumes / Spacesなど空間コンピューティングの新しい概念が出てきて、今までのような2Dではなく、3D空間を意識した設計や開発が必要になる。まだ難しくて手探りなところも多いが、空間コンピューティング時代の幕開けにワクワクしながらやっていきたい！

参考