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
490
react-reconcilerでオレオレReact Nativeを作ろう!
kwzr
1
2.5k
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
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
970
効率的な開発手段として VRTを活用する
ishkawa
0
160
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
230
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
What's new in AppKit on macOS 26
1024jp
0
150
PipeCDのプラグイン化で目指すところ
warashi
1
310
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.1k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
「App Intent」よくわからんけどすごい!
rinngo0302
1
110
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
型で語るカタ
irof
0
700
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Bash Introduction
62gerente
613
210k
Writing Fast Ruby
sferik
628
62k
We Have a Design System, Now What?
morganepeng
53
7.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Gamification - CAS2011
davidbonilla
81
5.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
A better future with KSS
kneath
238
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Why Our Code Smells
bkeepers
PRO
337
57k
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 ͲͪΒຖߪೖՄೳʂ