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 ああうえ
iOS Apple Dev Tutorialsとpointfreeのモダン実装を比較する
kwzr
1
500
react-reconcilerでオレオレReact Nativeを作ろう!
kwzr
1
2.6k
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
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1k
Updates on MLS on Ruby (and maybe more)
sylph01
1
170
Namespace and Its Future
tagomoris
6
670
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
110
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
350
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
Improving my own Ruby thereafter
sisshiki1969
1
140
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
680
TDD 実践ミニトーク
contour_gara
1
260
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
220
複雑なドメインに挑む.pdf
yukisakai1225
4
810
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
73
5k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
The Invisible Side of Design
smashingmag
301
51k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
YesSQL, Process and Tooling at Scale
rocio
173
14k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Music & Morning Musume
bryan
46
6.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Rails Girls Zürich Keynote
gr2m
95
14k
Agile that works and the tools we love
rasmusluckow
330
21k
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 ͲͪΒຖߪೖՄೳʂ