WWDC2023でApple Vision Proが発表され、そのOSであるvisionOSも発表されました。
本記事ではvisionOS向けにどのようにアプリを開発するか、WWDC2023で公開された動画を元に紹介していきたいと思います。

Apple Vision Proについて

空間コンピューティングと言われているように、Apple Vision Proでは映像として映される現実世界に仮想のディスプレイなどを配置し、それを操作するようなコンピューティングを実現しています (もちろんVRのような視界全体を埋め尽くすような別世界に没入することもできます) 。

Apple Vision Pro上で動作するアプリはさまざまな形式があるのですが。上の写真にあるような従来の平面のアプリケーションはWindowsと呼ばれており、他にはVolumes、Spacesがあります。

特にWindowsはmacOSやiOS上で動作するアプリと大きくは違わない外観をしていますが、これらは従来のデバイスとは異なり、視線と手の動き、そして声によって操作するものとなっています。

visionOSのユーザインタフェース

macOSやiOSと特に異なるUIの特徴について紹介します。

Glass Material

デモで登場したアプリの背景部のパネルは磨りガラスのように透過していました。
これは空間に馴染むよう設計され、角が丸くなっていたり、部屋の明るさによって背景色が変わるようになっています。
逆に、不透明な背景色は避けることが推奨されているようです。

明るい部屋の場合	暗い部屋の場合

上の画像ではナビゲーション部分の背景色と、コンテンツ部分の背景色が異なります。
このようにして、異なる透過な背景色を用いることで領域を分けることが推奨されているようです。

タイポグラフィ

visionOSではiOSよりも大きなフォントが推奨されています。
これは実際にApple Vision Proをつけてみて実感したいですね。

visionOSアプリケーションの構成要素

visionOSにおけるUIコンポーネントについて紹介します。

Button

macOSやiOSと同様にvisionOSアプリにもボタンがあります。
iOSとの大きな違いはホバーの存在で、視線を合わせると背景色が変わります。
分かりにくいですが、下の画像は2つのボタンのうち上のボタンに視線を合わせており、微妙に色が異なっています。
macOSでマウスポインタをボタンに合わせたときに色が変わるのに似ています。

SwiftUIのコード自体は変わりないようです。

Button("Of course") {
  // perform action
}

また、Toggleの例ですが、視線を合わせたときにラベルを表示することもできるようです。

Toggle(isOn: $favorite) {
    Label("Favorite", systemImage: "star")
}

TabView

visionOSアプリでのTabViewは、下の画像のようにWindowの横にアイコンが独立して存在するようなかたちになっています。

TabViewのコードをSwiftUIで書くと以下のようになり、従来とあまり変わらないようになっています。

@main
struct WorldApp: App {
    var body: some Scene {
        WindowGroup("Hello, world") {
            TabView {
                Modules()
                    .tag(Tabs.menu)
                    .tabItem {
                        Label("Experience", systemImage: "globe.americas")
                    }
                FunFactsTab()
              	    .tag(Tabs.library)
                    .tabItem {
                        Label("Library", systemImage: "book")
                    }                    
            }
        }
    }
}

ただ、従来のTabViewと異なる点として、視線を合わせることによって表示される内容が変わる、というものがあります。

Volume

3Dのオブジェクトを表現する場合　 volumetric という windowStyle を使います。

3DオブジェクトはRealityKitの Model3D　を使うようです。

@main
struct WorldApp: App {
    var body: some Scene {
        WindowGroup {
            Globe()
        }
        .windowStyle(.volumetric)
        .defaultSize(width: 600, height: 600, depth: 600)
    }
}

struct Globe: View {
    var body: some View {
        Model3D(named: "Earth")
    }
}

Model3D 自体にはタップジェスチャーなどをつけることができるようで、デモではタップしたら回転する地球が紹介されていました。

struct Globe: View {
    @State var rotation = Angle.zero
    var body: some View {
        ZStack(alignment: .bottom) {
            Model3D(named: "Earth")
                .rotation3DEffect(rotation, axis: .y)
                .onTapGesture {
                    withAnimation(.bouncy) {
                        rotation.degrees += randomRotation()
                    }
                }
                .padding3D(.front, 200)
            
            GlobeControls()
                .glassBackgroundEffect(in: .capsule)
        }
    }

    func randomRotation() -> Double {
        Double.random(in: 360...720)
    }
}

また、コントロール部を置くこともできるようで、デモでは GlobeControls というViewを追加していました。

まとめ

visionOSアプリの開発についてWWDC2023の内容をベースにまとめました。
世間の期待度も大きいので、早く開発してみて、知見をためていければと思っています。

引用元

https://developer.apple.com/videos/play/wwdc2023/10109/
https://developer.apple.com/videos/play/wwdc2023/10076/