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
エンジニアとデザイナーがわかる iPadの画面サイズ対応入門
Search
ああうえ
January 26, 2023
Programming
0
160
エンジニアとデザイナーがわかる iPadの画面サイズ対応入門
2023/1/26 pixiv App Night
https://www.youtube.com/watch?v=AWESPAsGP-8
ああうえ
January 26, 2023
Tweet
Share
More Decks by ああうえ
See All by ああうえ
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
780
iOS Apple Dev Tutorialsとpointfreeのモダン実装を比較する
kwzr
1
510
react-reconcilerでオレオレReact Nativeを作ろう!
kwzr
1
2.7k
iOS・Androidで使える デザインシステムをどう実装するか
kwzr
3
5.6k
Apple Pencilと左利き対応
kwzr
5
2.4k
BitriseでUIの差分検出
kwzr
0
1.5k
CIをGASで継続的に改善したら幸せになった
kwzr
3
1.7k
Other Decks in Programming
See All in Programming
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
900
実践AIチャットボットUI実装入門
syumai
7
2.4k
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
プログラマのための作曲入門
cheebow
0
530
CSC305 Lecture 04
javiergs
PRO
0
230
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
240
Swift Concurrency - 状態監視の罠
objectiveaudio
2
450
麻雀点数計算問題生成タスクから学ぶ Single Agentの限界と Agentic Workflowの底力
po3rin
5
2.1k
止められない医療アプリ、そっと Swift 6 へ
medley
1
110
CSC305 Lecture 02
javiergs
PRO
1
260
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.2k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
150
Featured
See All Featured
Side Projects
sachag
455
43k
Git: the NoSQL Database
bkeepers
PRO
431
66k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
What's in a price? How to price your products and services
michaelherold
246
12k
Embracing the Ebb and Flow
colly
88
4.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
How to train your dragon (web standard)
notwaldorf
96
6.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Transcript
͋͋͏͑(@_kwzr_) iPadͷը໘αΠζରԠೖ ΤϯδχΞͱσβΠφʔ͕Θ͔Δ
ࣗݾհ • ͋͋͏͑(@_kwzr_) • ॴଐ: ৽نࣄۀ෦ɾσβΠϯγεςϜ෦ • ಛٕ: iPad͕͖ͳͷͰ4͍࣋ͬͯ·͢
iPadରԠͯ͠·͔͢ʂ
pixiv SketchͰ͍ͯ͠·͢ʂ
શવ࠷ۙͬͨͱ͔Ͱͳ͘ɺ 2019͘Β͍ʹͬͯ·ͨ͠ ݟΛ͢λΠϛϯάΛಀͨ͠...ʂ
Α͋͘ΔiPadରԠͷؒҧ͍
× UIUserInterfaceIdiomΛͬͯ͠·͏
UIUserInterfaceIdiomΛ͏ͱͲ͏ͳΔ͔
SplitView • ը໘Λׂͯ͠ԣฒʹΞϓϦΛஔͰ͖Δ • 1/3, 1/2, 2/3ͷ3ͭͷαΠζʹͳΔ • ※ॎը໘Ͱ1/2αΠζʹͳΒͳ͍
SlideOver • ϑϧεΫϦʔϯΞϓϦʹΦʔόʔϨΠͰΞϓϦΛஔͰ͖Δ • ӈ·ͨࠨʹஔՄೳ
StageManager • iPadOS 16.1͔Β༻Մೳʹͳͬͨ • ίϯτϩʔϧηϯλʔ͔ΒONʹ͢Δͱɺ ΞϓϦͷαΠζɾஔΛ͜Ε·ͰΑΓࣗ༝ ʹஔͰ͖Δ
SizeClassΛ͓͏
SizeClass • SizeClassiOSͰσόΠεͷը໘αΠζΛ ද͢ྨ • ԣํHorizontalSizeClassɺॎํ VerticalSizeClass • ʹUnspeci fi
edɾCompactɾRegular ͕͋Δ https://developer.apple.com/documentation/uikit/uitraitcollection
SizeClass • ԿpointҎ্ͱ͔Ͱͳͯ͘ɺ͝ͱʹܾ·͍ͬͯΔ • ྫ: iPhone 8 PlusͱiPhone 14ͷHorizontalSizeClassΛൺֱ •
iPhone 8 Plus(ԣը໘): Regular(736pt) • iPhone 14(ԣը໘): Compact(844pt) • iPhone 14ͷํ͕pt͕େ͖͍͕ɺCompact
SizeClassͷදه • wC, hC, wR, hR, wAny, hAnyͳͲͱॻ͘ɻXcode্ͳͲͰͨ·ʹݟ͔͚ ·͢Ͷ •
wC: ෯͕Compact • hC: ߴ͕͞Compact • wR: ෯͕Regular • hR: ߴ͕͞Regular
ΫΠζ: ͦΕͧΕͷHorizontalSizeClassͲΕ? • iPad Pro 12.9Πϯν(ୈ6ੈ)(ԣ͖)Ͱ1/2ʹׂͨ͠ͱ͖ • iPad Pro 12.9Πϯν(ୈ6ੈ)(ԣ͖)Ͱ1/3ʹׂͨ͠ͱ͖
• iPhone 14 Pro(ԣ͖) • iPhone 14 Pro Max(ԣ͖) • 1: Compact, 2: Regular
ΫΠζ: ͦΕͧΕͷHorizontalSizeClassͲΕ? • iPad Pro 12.9Πϯν(ୈ6ੈ)(ԣ͖)Ͱ1/2ʹׂͨ͠ͱ͖ 2: Regular • iPad
Pro 12.9Πϯν(ୈ6ੈ)(ԣ͖)Ͱ1/3ʹׂͨ͠ͱ͖ 1: Compact • iPhone 14 Pro(ԣ͖) 1: Compact • iPhone 14 Pro Max(ԣ͖) 2: Regular • 1: Compact, 2: Regular
σβΠϯ͢Δͱ͖ • ಛʹiPadͰ৭ʑͳը໘αΠζʹͳΔ͜ͱΛ͓ͬͯ͘ • جຊతʹHorizontalSizeClassΛҙࣝ͢Δ • VerticalSizeClassΛ͏͜ͱ͋·Γͳ͍...ͣ • εϚϗΞϓϦେମॎεΫϩʔϧ͢Δͷ͕ଟ͘ɺॎ෯͕มΘͬͯͦ ͷڍಈࣗମมΘΔ͜ͱ͕গͳ͍
ͦͷଞ: HIGʹै͏ • On iPad, consider placing controls on the
sides of the screen in landscape orientation. • iPadͷԣ͖ͷը໘Ͱɺૢ࡞ੑͷ؍͔Βը໘ͷ྆ʹஔ͢Δ͜ͱ ΛקΊΒΕ͍ͯΔ • https://developer.apple.com/design/human-interface-guidelines/ foundations/layout/
UIUserInterfaceIdiomΛ͏ͱ͖ • SizeClassΛߟ্ྀͨ͠ͰiPad͔Ͳ͏͔ఆ͍ͨ͠ͱ͖ • SplitViewͳͲʹରԠ͠ͳ͍߹(Requires Full Screen͕ON) • ήʔϜͳͲ
࣮ํ๏ΛΔ
SwiftUI • Environment͔Βऔಘ͠·͢ • SizeClassΛ͏ํ๏͕·͍ͬͯͯྑ͍Ͱ͢Ͷ
UIKit • UITraitCollection͔Βऔಘ͠·͢ɻUIViewUIViewControllerʹɺ traitCollectionͷϓϩύςΟ͕ੜ͍͑ͯΔͷͰ͜ΕΛར༻͢Δ
SizeClass͕มΘͬͨ͜ͱΛݕ͢Δ • UIKitͷίʔυͰϨΠΞτΛ͍ͯ͠Δ߹SizeClass͕มΘͬͨͱ͖ʹ ࠶ϨΠΞτͯ͋͛͠Δඞཁ͕͋Δ
TraitCollectionͷมߋݕ • TraitCollectionͷมߋʹΑͬͯݺΕΔϝιου2ͭ • traitCollectionDidChange • willTransition • ͲͬͪΛ͏ͷ͕ྑ͍?
traitCollectionDidChange(_:) • ͦͷ··ɻTraitCollection͕มΘͬͨޙʹݺΕΔ • UIViewɾUIViewControllerͰ༻Մೳ
willTransition(to:with:) • UIViewControllerʹੜ͑ͯΔ • ୈ1ҾʹมߋޙͷTraitCollection͕͞ΕΔ
traitCollectionDidChange vs willTransition • willTransitionͷυΩϡϝϯτΛಡΉ https://developer.apple.com/documentation/uikit/uicontentcontainer/1621511-willtransition
willTransitionͷ͍Ͳ͖ • A common use of this method is to
make changes to the high-level presentation style when the current size class changes. • > ϋΠϨϕϧϓϨθʔςϯγϣϯελΠϧ < • ΞχϝʔγϣϯΛ͍ͨ࣌͠ͱ͔Ͱ͢Ͷ
SizeClassͷݕ • high-level presentation style͍ͨ͠߹willTransitionΛ͏ • ͦΕҎ֎traitCollectionDidChangeͰྑ͍
গ͠ൃలతͳࣄྫ
TraitCollectionͱը໘αΠζΛ͍ͬͯΔ߹ • ྫ͑ɺpixiv SketchͷΥʔϧͰ • ը໘෯͕Compactͷ߹ͦͷ·· • ը໘෯͕Regularͷ߹ɺCollectionViewͷ෯ΛΠϥετ͕ݟ͍͢ αΠζʹௐ͍ͯ͠Δ
TraitCollectionͱը໘αΠζΛ͍ͬͯΔ߹
TraitCollectionͱը໘αΠζΛ͍ͬͯΔ߹
TraitCollectionͱը໘αΠζΛ͍ͬͯΔ߹ • traitCollectionDidChangeTraitCollection͕มΘ͔ͬͨ࣌͠ݺΕͳ͍ • → iPadͩͱը໘ճసͯ͠TraitCollection͕มΘΒͳ͍͜ͱ͕͋Γɺܭ ࢉ͕ݺΕͳ͍ • → ը໘αΠζͷมߋΛݕͨ͠ํ͕߹͕ྑ͍
ը໘αΠζͷมߋΛݕ͢Δ • ը໘αΠζͷมߋʹΑͬͯݺΕΔViewControllerͷϝιου͍ͭ͘ ͔͋Δ • viewWillLayoutSubviews • viewWillTransition • ...
viewWillLayoutSubviews() • SubviewΛϨΠΞτ͠Α͏ͱ͍ͯ͠Δͱ͖ʹݺͼग़͞ΕΔϝιου • ը໘Λ։͍ͨͱ͖ը໘αΠζ͕มߋ͞Εͨͱ͖ʹݺͼग़͞ΕΔ
viewWillTransition(to:with:) • ը໘ճసը໘ͷαΠζ͕มΘͬͨ࣌ʹݺΕΔ • willTransitionಉ༷ʹΞχϝʔγϣϯͷରԠ͕Մೳ
viewWillTransitionͷҙ • viewWillTransitionαΠζ͕มߋ͞ΕΔલʹݺΕΔ • ϝιου͕ݺΕͨλΠϛϯάͰ • ViewControllerͷtraitCollectionʹݹ͍͕ೖ͍ͬͯΔ • view.frame.sizeͳͲʹೖ͍ͬͯΔ·ͩݹ͍
• coordinator.animate(alongsideTransition:completion:) ͷதͰ৽͍͠ TraitCollectionΛऔಘ͢Δ viewWillTransitionͷҙ
• ৽͍͠ը໘αΠζΛར༻͍ͨ͠߹ҾͷsizeΛར༻͢Δ viewWillTransitionͷҙ
viewWillLayoutSubviews vs viewWillTransition • viewWillLayoutSubviewsݺΕΔλΠϛϯά͕ଟ༷ɻ viewWillTransitionݺΕΔλΠϛϯά͕Θ͔Γ͘͢ɺॻ͖͍͢ • ϋϚΓͲ͜Ζ͋ΔɻΞχϝʔγϣϯෆཁͳΒviewWillLayoutSubviews ͚ͩʹϨΠΞτॲཧΛॻ͍ͯ͠·͏ͷ͕γϯϓϧ •
Կߟ͑ͨ͘ͳ͍߹྆ํͰϨΠΞτॲཧΛݺΜͰ͓͘ͱྑ͍
(ಡ·ͳ͍)ϋϚΔέʔε • SketchͷྫͷΑ͏ʹCollectionViewͷFlowLayoutͷinsetʹܭࢉͨ͠Λઃఆ͍ͯ͠Δ߹ɺinset͕ collectionViewͷ෯Λ͑ͯ͠·͏ͱϥϯλΠϜΤϥʔ(negative or zero sizes are not supported
in the fl ow layout)ͰΫϥογϡ͢Δ • viewWillTransitionͰcoordinator.animateΛݺͼग़ͨ࣌͠ͷclosure͕ݺΕΔλΠϛϯά viewWillLayoutSubviewsΑΓޙ • viewWillLayoutSubviewsͰcollectionViewLayout.invalidateLayout()ΛݺΜͰ͍Δ߹ɺλΠϛϯάతʹ ্هͷΤϥʔ͕ग़Δ߹͕͋Δ • ͳͥviewWillLayoutSubviewsͰinvalidateLayout()ΛݺͿඞཁ͕͋Δ͔ͱ͍͏ͱɺUITabBarControllerͳ ͲͰผλϒΛ։͍͍ͯΔ్தʹը໘ճసͳͲΛ͢ΔͱinvalidateLayout()͕ػೳ͠ͳ͍έʔε͕͋Γɺλ ϒʹ͖ͬͯͨ߹ʹݺͼ͍ͨ
SwiftUIΛ͓͏...
·ͱΊ(͍͑ͨ) • iPadͷϨΠΞτSizeClassΛͬͯఆ͠Α͏ • iPadରԠΞϓϦΛ૿͍ͨ͠ʂiPadͷϢʔβʔΛҙࣝ͠Α͏ʂ • ϐΫγϒͷϞόΠϧΞϓϦΤϯδχΞ։ൃػߪೖ੍ͰiPhoneɾiPad ͲͪΒຖߪೖՄೳʂ