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
140
エンジニアとデザイナーがわかる 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
470
react-reconcilerでオレオレReact Nativeを作ろう!
kwzr
1
2.4k
iOS・Androidで使える デザインシステムをどう実装するか
kwzr
3
5.5k
Apple Pencilと左利き対応
kwzr
5
2.2k
BitriseでUIの差分検出
kwzr
0
1.5k
CIをGASで継続的に改善したら幸せになった
kwzr
3
1.7k
Other Decks in Programming
See All in Programming
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
7
1.5k
AIコーディングの理想と現実
tomohisa
24
31k
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
4
1.1k
Vibe Coding の話をしよう
schroneko
8
2.4k
Kamal 2 – Get Out of the Cloud
aleksandrov
1
190
SwiftUI API Design Lessons
niw
1
290
Rollupのビルド時間高速化によるプレビュー表示速度改善とバンドラとASTを駆使したプロダクト開発の難しさ
plaidtech
PRO
1
180
「”誤った使い方をすることが困難”な設計」で良いコードの基礎を固めよう / phpcon-odawara-2025
taniguhey
0
160
On-the-fly Suggestions of Rewriting Method Deprecations
ohbarye
1
2.8k
Amazon CloudWatchの地味だけど強力な機能紹介!
itotsum
0
170
Do Dumb Things
mitsuhiko
0
440
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
k0kubun
0
860
Featured
See All Featured
Optimizing for Happiness
mojombo
377
70k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Cult of Friendly URLs
andyhume
78
6.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
GraphQLとの向き合い方2022年版
quramy
46
14k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Rails Girls Zürich Keynote
gr2m
94
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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 ͲͪΒຖߪೖՄೳʂ