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
150
エンジニアとデザイナーがわかる 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
480
react-reconcilerでオレオレReact Nativeを作ろう!
kwzr
1
2.4k
iOS・Androidで使える デザインシステムをどう実装するか
kwzr
3
5.5k
Apple Pencilと左利き対応
kwzr
5
2.3k
BitriseでUIの差分検出
kwzr
0
1.5k
CIをGASで継続的に改善したら幸せになった
kwzr
3
1.7k
Other Decks in Programming
See All in Programming
JVM の仕組みを理解して PHP で実装してみよう
m3m0r7
PRO
1
250
がんばりすぎないコーディングルール運用術
tsukakei
1
180
rbs-traceを使ってWEARで型生成を試してみた After RubyKaigi 2025〜ZOZO、ファインディ、ピクシブ〜 / tried rbs-trace on WEAR
oyamakei
0
1k
衛星の軌道をWeb地図上に表示する
sankichi92
0
250
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
1
660
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
610
テスト分析入門/Test Analysis Tutorial
goyoki
11
2.7k
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
130
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
mufrid
0
370
「兵法」から見る質とスピード
ickx
0
200
抽象データ型について学んだ
ryounasso
0
210
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
190
Featured
See All Featured
Side Projects
sachag
454
42k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
79
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Making Projects Easy
brettharned
116
6.2k
GraphQLとの向き合い方2022年版
quramy
46
14k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Six Lessons from altMBA
skipperchong
28
3.8k
How STYLIGHT went responsive
nonsquared
100
5.6k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
The World Runs on Bad Software
bkeepers
PRO
68
11k
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 ͲͪΒຖߪೖՄೳʂ