SwiftUIで作るvisionOS向けTabViewUIの知見

https://connpass.com/event/291022/
こちらで発表した内容です！

Transcript

1. SwiftUIで作るvisionOS向け TabViewUIの知見 さくたま
2. 自己紹介 #M1 #慶應 #CG研 #IwakenLab #MESONインターン #NeRF #ドラム #ARステージ演出 #Adobeファン #Nianticファン
3. 話すこと • TabViewの見た目 https://zenn.dev/meson/articles/visionos-tabview ◦ 種類 ◦ Ornament • SwiftUI開発でのデザイナーさんとの連携 ◦ WWDC Designセッション ◦ Figma テンプレート ◦ エンジニアがオプションを検証 • マルチウィンドウの使い方難しい ◦ 最前ウィンドウ管理がうまくいかなかった
4. 作ったもの • 音声認識→検索アプリ • Windowベース • SwiftUI • 2つのウィンドウ • ChatGPT検索 ARISE - Decode Vision Pro でデモ
5. 公式ドキュメント • 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/
6. TabViewの見た目 方法は二つ • TabViewを使ってTabViewStyleでスタイルを指定 • TabView + PickerでPicker部分を別に実装
7. TabViewの見た目 DefaultTabViewStyle
8. TabViewの見た目 Ornament • ウィンドウの内容と，コントロールUIを分離できる • 補助的な情報を表示できる • 視線が当たっていない時最小化 →視線が当たった(ユーザーが必要な)時だけ情報を出す • なるべくデフォルトのデザインを使う ToolBar (内容はそのままで，操作を切り替える ) TabView (内容を切り替える)
9. TabViewの見た目 PageTabViewStyle
10. TabViewの見た目 (Picker + TabView) SegmentedPickerStyle MenuPickerStyle WheelPickerStyle NavigationLinkPickerStyle
11. TabViewの見た目 (Picker をOrnament化) SegmentedPickerStyle MenuPickerStyle WheelPickerStyle NavigationLinkPickerStyle ❌
12. 話すこと • TabViewの見た目 ◦ 種類 ◦ Ornament • SwiftUI開発でのデザイナーさんとの連携 ◦ WWDC Designセッション ◦ Figma テンプレート ◦ エンジニアがオプションを検証 • マルチウィンドウの使い方難しい ◦ 最前ウィンドウ管理がうまくいかなかった
13. デザイナーさんとの連携 WWDC23のうち特にデザイナー&エンジニアの共通認識にするべきと思ったもの
14. デザイナーさんとの連携 Figma • パーツの名前がわかって ドキュメントを調べやすい https://www.figma.com/community/file/1253443272911187215
15. デザイナーさんとの連携 1. 推奨されているパーツや使い方を共通認識として理解する ◦ WWDC セッション ◦ Figma ◦ ドキュメント 2. 推奨されていないが実現可能なものをエンジニアが検証する 3. 実現したいケースに最適なUI設計を「選ぶ」 SwiftUIでは(今の段階では？)「パーツを組み合わせて自由に作る」というより 「UI構成全体を提示されているものから選ぶ」というつもりの方が良いのでは
16. 話すこと • TabViewの見た目 ◦ 種類 ◦ Ornament • SwiftUI開発でのデザイナーさんとの連携 ◦ WWDC Designセッション ◦ Figma テンプレート ◦ エンジニアがオプションを検証 • マルチウィンドウの使い方難しい ◦ 最前ウィンドウ管理がうまくいかなかった
17. マルチウィンドウ難しい Ornamentのドキュメントより 補助的なコントロールや情報を提供するには、別ウィンドウではなくオーナメントを 使用します。関連する機能を提供するためにオーナメントを使用することで、人々が 個別に管理しなければならない追加のウィンドウを開くことを避けることができま す。 →複数のウィンドウを使うことはあまり推奨されていない(SplitViewなど使う) →macOSのマルチウィンドウよりは実用性あると思うけど...
18. マルチウィンドウ難しい (余談) 最前ウィンドウ管理ができなかった 調査中...(というか後回しになり中...) (↓雑メモ) https://zenn.dev/sakutama_11/scraps/f393837ed4d5ac
19. まとめ ドキュメントやWWDCセッションを見てSwiftUIで使える選択肢を調査する →情報多いので共有，日本語まとめ超大事！ TabViewについてまとめたのでぜひ見てください https://zenn.dev/meson/articles/visionos-tabview 組み立てて作るというよりは，Appleが推奨する構成の選択肢から「選ぶ」