Elevate your windowed app for spatial computing

ハイライト

visionOS では SwiftUI がガラス背景、動的スケーリング、vibrancy マテリアル、hover effect などを自動適用し、既存のマルチプラットフォーム SwiftUI アプリをほぼ変更なしで Shared Space で動かせます。ornament、ベクターアセットなどの少しの調整で、空間コンピューティング固有のインタラクションを十分に活用できます。

主要内容

iPad から visionOS へ：あと一歩

iPhone、iPad、Mac、Apple Watch 向けの SwiftUI アプリを visionOS でも動かしたい。新プラットフォームへの適応は以前、大量の UI コード書き換えを意味していました。visionOS は違います——SwiftUI は最初からこのプラットフォームを想定して設計されています。

Xcode の Supported Platforms に visionOS を追加すれば、シミュレータで動作します。レイアウトは iPad 風ですが、細部は変わっています：ウィンドウにガラス背景、ナビゲーションバーのボタンが円形に、リスト行は視線でハイライト。これらはすべて SwiftUI が自動処理します。

（02:51）

ガラスと Vibrancy：ライト/ダークのない世界

visionOS はライトモードとダークモードを区別しません。ガラス背景は環境光と背後の色に応じてコントラストを自動調整します。colorScheme チェックでモード別の色を設定する従来のやり方は使えません。

ソリッドカラーはガラス上で固定に見え、環境変化に適応できません。SwiftUI のセマンティックスタイルは自動的に vibrancy マテリアルを採用し、ガラス上でも読みやすさを保ちます。カスタムビューの背景をソリッドカラーから .fill などのセマンティックスタイルに変えると、コードが簡潔になり、全プラットフォームで正しく見えます。

（06:58）

Hover Effect：空間インタラクションの視覚的フィードバック

visionOS には 4 つのインタラクション方式があります：間接ピンチ（最も一般的）、直接タッチ、トラックパッドポインタ、アクセシビリティ。どの方式でも、インタラクティブなコンテンツには hover effect による視覚的フィードバックが必要です。

SwiftUI のシステムコントロールには hover effect が自動付与されます。カスタムのインタラクティブビューには手動で追加が必要です：

// カスタムのインタラクティブビューに hover effect を追加
BirdView()
    .hoverEffect()

キーポイント:

• hoverEffect() はデフォルトでハイライト効果を提供。視線でビューがわずかに明るくなる
• システムの hover effect はアプリプロセス外で実行され、プライバシーを保護——アプリはユーザーの視線位置を直接取得できない
• アプリが受け取れるのはピンチ、タッチ、ホバー中の指、ポインタのイベントのみ

hover effect の境界が理想でない場合は contentShape でカスタマイズ：

BirdView()
    .contentShape(.hoverEffect, RoundedRectangle(cornerRadius: 12))
    .hoverEffect()

キーポイント:

• contentShape(.hoverEffect, ...) で hover effect の形状と境界を指定
• ここでは角丸矩形で角丸と適切なパディングを付与

より良い方法は、インタラクティブビューを直接 Button にすること：

Button(action: showBirdDetails) {
    BirdView()
}
.buttonStyle(.plain)

キーポイント:

• visionOS の Button はデフォルトで枠線あり。.plain で背景を除去
• Plain ボタンは標準の hover effect とタップ時のスケールアニメーションを自動取得

（10:16）

Ornament：ウィンドウ外のコントロール

visionOS のウィンドウは画面サイズに制限されず、コントロールもウィンドウ内に留まる必要はありません。Ornament はウィンドウの端に付着するコントロールコンテナで、補助機能の配置によく使われます。

visionOS の TabView は自動的にウィンドウ左端の ornament になります。通常は折りたたまれ、アイコンを視線で見るとラベルが展開されます。

Toolbar も .bottomOrnament placement で ornament にできます：

.toolbar {
    ToolbarItem(placement: .bottomOrnament) {
        TimeRangePicker()
    }
}

カスタム ornament は ornament() 修飾子を使用例：

.ornament(
    attachmentAnchor: .scene(.bottom),
    contentAlignment: .center
) {
    NotificationBanner()
        .glassBackgroundEffect()
}

キーポイント:

• attachmentAnchor: .scene(.bottom) でウィンドウ下部に ornament を付着
• contentAlignment: .center で ornament の中心をアンカー点に合わせる
• カスタム ornament はデフォルトでガラス背景なし。.glassBackgroundEffect() を手動追加

（13:34）

詳細

Vector Asset：動的スケーリングの鍵

visionOS ではアプリが遠くにあっても、目の前に引き寄せられても、横から見られてもあり得ます。システムは動的スケーリングで任意の距離でもコンテンツを鮮明に保ちます。そのためベクターリソースが必要です。

テキストと SF Symbols はすでにベクターです。カスタムアイコンとグラフィックは Asset Catalog で Single Scale にし、Preserve Vector Data にチェック：

Asset Catalog 設定：
- Scales: Single Scale
- Preserve Vector Data: ✅

ビットマップ画像は拡大するとぼやけます。ベクターに置き換えれば、ユーザーが近づいても遠ざかっても常にシャープです。

（05:52）

NavigationSplitView から TabView へ

iPad では Regular の水平サイズクラスでサイドバーが優先されます。visionOS ではウィンドウサイズに制限がなく、サイドバーはコンテンツ領域を占有します。TabView がより適しています：

TabView {
    BackyardsView()
        .tabItem {
            Label("Backyards", systemImage: "tree")
        }
    PlantsView()
        .tabItem {
            Label("Plants", systemImage: "leaf")
        }
    BirdsView()
        .tabItem {
            Label("Birds", systemImage: "bird")
        }
}

キーポイント:

• visionOS の TabView は自動的に左側 ornament として表示
• 各 tab item にタイトルとアイコンが必要
• 未操作時は tab bar が折りたたまれ、コンテンツ領域を節約

（12:15）

重要ポイント

• やること：既存の iPad SwiftUI アプリを visionOS に移植

  • 価値：Xcode で visionOS ターゲットを追加するだけで Shared Space で動作。ガラス背景、コントロール適応、hover effect を SwiftUI が自動処理し、移植コストは極小
  • 始め方：プロジェクト設定で Supported Platforms に visionOS を追加し、シミュレータで実行して自動適応を確認

• やること：カスタム ornament 通知システムを設計

  • 価値：ornament はウィンドウ外に付着し、コンテンツ領域を占有しない。ステータスヒントやクイック操作などの補助情報に最適
  • 始め方：.ornament(attachmentAnchor:contentAlignment:content:) と .glassBackgroundEffect() で浮遊通知を作成

• やること：すべてのビットマップアイコンをベクターグラフィックに置換

  • 価値：visionOS ではユーザーがアプリを目の前に引き寄せる可能性があり、ビットマップはピクセルが露呈する。ベクターは任意のスケールで鮮明
  • 始め方：Asset Catalog を確認し、マルチスケールビットマップを Single Scale ベクターに置換、Preserve Vector Data を有効化

• やること：colorScheme ベースの条件レンダリングをすべて監査

  • 価値：visionOS にライト/ダークの区別はなく、ガラス背景は動的に変化。ソリッドカラーは適応できない——セマンティックスタイルと vibrancy が正解
  • 始め方：.colorScheme とハードコード Color(...) を検索し、.fill、.background などのセマンティックスタイルに置換

• やること：すべてのカスタムインタラクティブコントロールに hover effect を追加

  • 価値：空間コンピューティングでは視線でターゲットを選択——hover effect は「このコントロールは操作可能」の確認となる視覚的フィードバック。ないとユーザーは混乱する
  • 始め方：タップ可能ビューを Button に変換することを優先。できない場合は .hoverEffect() と .contentShape(.hoverEffect, ...) を追加

関連セッション

• Meet SwiftUI for spatial computing — SwiftUI 空間コンピューティング入門とプラットフォームの基礎
• Take SwiftUI to the next dimension — SwiftUI での 3D コンテンツと Volume
• Go beyond the window with SwiftUI — Immersive Space で没入型空間体験を作成
• Meet UIKit for spatial computing — UIKit ベースのアプリの visionOS 適応