SwiftUIで作るvisionOS向け TabViewUIの知見 さくたま

自己紹介 #M1 #慶應 #CG研 #IwakenLab #MESONインターン #NeRF #ドラム #ARステージ演出 #Adobeファン #Nianticファン

話すこと ● TabViewの見た目 https://zenn.dev/meson/articles/visionos-tabview ○ 種類 ○ Ornament ● SwiftUI開発でのデザイナーさんとの連携 ○ WWDC Designセッション ○ Figma テンプレート ○ エンジニアがオプションを検証 ● マルチウィンドウの使い方難しい ○ 最前ウィンドウ管理がうまくいかなかった

作ったもの ● 音声認識→検索アプリ ● Windowベース ● SwiftUI ● 2つのウィンドウ ● ChatGPT検索 ARISE - Decode Vision Pro でデモ

公式ドキュメント ● SwiftUI Doc https://developer.apple.com/documentation/swiftui/tabview ● Design Doc https://developer.apple.com/design/human-interface-guidelines/tab-views ● WWDC Session(必見) https://developer.apple.com/videos/play/wwdc2023/10109/

TabViewの見た目 方法は二つ ● TabViewを使ってTabViewStyleでスタイルを指定 ● TabView + PickerでPicker部分を別に実装

TabViewの見た目 DefaultTabViewStyle

TabViewの見た目 Ornament ● ウィンドウの内容と，コントロールUIを分離できる ● 補助的な情報を表示できる ● 視線が当たっていない時最小化 →視線が当たった(ユーザーが必要な)時だけ情報を出す ● なるべくデフォルトのデザインを使う ToolBar (内容はそのままで，操作を切り替える ) TabView (内容を切り替える)

TabViewの見た目 PageTabViewStyle

TabViewの見た目 (Picker + TabView) SegmentedPickerStyle MenuPickerStyle WheelPickerStyle NavigationLinkPickerStyle

TabViewの見た目 (Picker をOrnament化) SegmentedPickerStyle MenuPickerStyle WheelPickerStyle NavigationLinkPickerStyle ❌

話すこと ● TabViewの見た目 ○ 種類 ○ Ornament ● SwiftUI開発でのデザイナーさんとの連携 ○ WWDC Designセッション ○ Figma テンプレート ○ エンジニアがオプションを検証 ● マルチウィンドウの使い方難しい ○ 最前ウィンドウ管理がうまくいかなかった

デザイナーさんとの連携 WWDC23のうち特にデザイナー&エンジニアの共通認識にするべきと思ったもの

デザイナーさんとの連携 Figma ● パーツの名前がわかって ドキュメントを調べやすい https://www.figma.com/community/file/1253443272911187215

デザイナーさんとの連携 1. 推奨されているパーツや使い方を共通認識として理解する ○ WWDC セッション ○ Figma ○ ドキュメント 2. 推奨されていないが実現可能なものをエンジニアが検証する 3. 実現したいケースに最適なUI設計を「選ぶ」 SwiftUIでは(今の段階では？)「パーツを組み合わせて自由に作る」というより 「UI構成全体を提示されているものから選ぶ」というつもりの方が良いのでは

話すこと ● TabViewの見た目 ○ 種類 ○ Ornament ● SwiftUI開発でのデザイナーさんとの連携 ○ WWDC Designセッション ○ Figma テンプレート ○ エンジニアがオプションを検証 ● マルチウィンドウの使い方難しい ○ 最前ウィンドウ管理がうまくいかなかった

マルチウィンドウ難しい Ornamentのドキュメントより 補助的なコントロールや情報を提供するには、別ウィンドウではなくオーナメントを 使用します。関連する機能を提供するためにオーナメントを使用することで、人々が 個別に管理しなければならない追加のウィンドウを開くことを避けることができま す。 →複数のウィンドウを使うことはあまり推奨されていない(SplitViewなど使う) →macOSのマルチウィンドウよりは実用性あると思うけど...

マルチウィンドウ難しい (余談) 最前ウィンドウ管理ができなかった 調査中...(というか後回しになり中...) (↓雑メモ) https://zenn.dev/sakutama_11/scraps/f393837ed4d5ac

まとめ ドキュメントやWWDCセッションを見てSwiftUIで使える選択肢を調査する →情報多いので共有，日本語まとめ超大事！ TabViewについてまとめたのでぜひ見てください https://zenn.dev/meson/articles/visionos-tabview 組み立てて作るというよりは，Appleが推奨する構成の選択肢から「選ぶ」