Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SwiftUIで作るvisionOS向けTabViewUIの知見
Search
さくたま
July 26, 2023
Programming
1
360
SwiftUIで作るvisionOS向けTabViewUIの知見
https://connpass.com/event/291022/
こちらで発表した内容です!
さくたま
July 26, 2023
Tweet
Share
More Decks by さくたま
See All by さくたま
8th Wall × Babylon.jsでhavok physics 【Babylon.js ゆるほめLT会 vol.2】
sakutama_11
0
620
【NeRF撮り方LT会】NeRFが空間を理解する仕組み
sakutama_11
1
1.3k
Other Decks in Programming
See All in Programming
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
410
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
1.5k
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
52
32k
Honoの来た道とこれから
yusukebe
19
3.1k
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
560
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
140
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
350
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.6k
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
9
1k
Amazon Neptuneで始めてみるグラフDB-OpenSearchによるグラフの全文検索-
satoshi256kbyte
4
330
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
48
10k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Typedesign – Prime Four
hannesfritz
39
2.4k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Why Our Code Smells
bkeepers
PRO
334
57k
It's Worth the Effort
3n
183
27k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Transcript
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が推奨する構成の選択肢から「選ぶ」