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
アイフォンX、凹みを切るか?凹みを使うか? ~iPhoneX対応のススメ~
Search
Keisuke Tatsumi
October 18, 2017
Technology
13
11k
アイフォンX、凹みを切るか?凹みを使うか? ~iPhoneX対応のススメ~
CA.swift #4 (
https://cyberagent.connpass.com/event/66850/
)での発表資料です。
Keisuke Tatsumi
October 18, 2017
Tweet
Share
More Decks by Keisuke Tatsumi
See All by Keisuke Tatsumi
Cross Deviceチームにおけるスマートテレビアプリ開発ってどんな感じ?
cokaholic
0
420
AbemaTV×Keirin AR
cokaholic
2
3.6k
アイフォンX、凹みを切るか?凹みを使うか? ~iPhoneX対応のススメ in 2018~
cokaholic
0
190
とある端末の触覚技術 -フィードバック-
cokaholic
0
3.4k
ゼロから始める ARKit
cokaholic
0
240
ゼロから始める Drag and Drop
cokaholic
1
1.1k
Other Decks in Technology
See All in Technology
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
140
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
940
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
200
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
280
アイテムレビュー機能導入からの学びと改善
zozotech
PRO
0
160
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
140
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
140
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
ソースを読むプロセスの例
sat
PRO
7
2.6k
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
270
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Faster Mobile Websites
deanohume
310
31k
Designing Experiences People Love
moore
142
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Mobile First: as difficult as doing things right
swwweet
224
10k
Code Review Best Practice
trishagee
72
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Producing Creativity
orderedlist
PRO
347
40k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Building an army of robots
kneath
306
46k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Transcript
CA.swift #4 2017/10/18 Keisuke Tatsumi ~iPhoneXରԠͷεεϝ~
Keisuke Tatsumi • iOS engineer at AbemaTV, Inc. • Github,
Qiita : cokaholic • Twitter : @TK_u_nya • AppStore : Keisuke Tatsumi
None
ຊͷςʔϚ…
iPhoneXରԠ
Agenda • What’s iPhoneX • What’s Safe Area • How
To “TRUE” Support iPhoneX • Summary
Agenda • What’s iPhoneX • What’s Safe Area • How
To “TRUE” Support iPhoneX • Summary
What’s iPhoneX • 9݄12ʹ։࠵͞ΕͨApple Special Eventʹ ͯൃද͞Εͨ࠷৽ͷiPhone
One more thing…
None
৽ܕiPhoneΩλʔʂ
What’s iPhoneX • 9݄12ʹ։࠵͞ΕͨApple Special Eventʹ ͯൃද͞Εͨ࠷৽ͷiPhone
What’s iPhoneX • 9݄12ʹ։࠵͞ΕͨApple Special Eventʹ ͯൃද͞Εͨ࠷৽ͷiPhone • ϕθϧϨεσΟεϓϨΠ
None
͓Θ͔Γ͍͚ͨͩͨͩΖ͏͔ʁ
None
͑…͜Ε…ԜΈͷ෦ɺ͘Ͷʁ
ͦ͜Ͱొ͢Δͷ͕...
Safe Area
Agenda • What’s iPhoneX • What’s Safe Area • How
To “TRUE” Support iPhoneX • Summary
What’s Safe Area API Roadmap • Apple͕iOS11͔Βಋೖͨ֓͠೦
What’s Safe Area API Roadmap • Apple͕iOS11͔Βಋೖͨ֓͠೦ • φϏήʔγϣϯόʔεςʔλεόʔͳͲͷ֎ ଆͷUIʹඃΒͳ͍҆શͳྖҬΛऔಘͰ͖Δ
What’s Safe Area API Roadmap • Apple͕iOS11͔Βಋೖͨ֓͠೦ • φϏήʔγϣϯόʔεςʔλεόʔͳͲͷ֎ ଆͷUIʹඃΒͳ͍҆શͳྖҬΛऔಘͰ͖Δ
• iPhoneXͷΑ͏ͳԜΈΛؚΜͩը໘ʹରԠ Ͱ͖Δ
What’s Safe Area API Roadmap • Apple͕iOS11͔Βಋೖͨ֓͠೦ • φϏήʔγϣϯόʔεςʔλεόʔͳͲͷ֎ଆͷ UIʹඃΒͳ͍҆શͳྖҬΛऔಘͰ͖Δ
• iPhoneXͷΑ͏ͳԜΈΛؚΜͩը໘ʹରԠͰ͖Δ • Xcode9+ɺiOS11+ SDKΛ༻͠ɺLaunch images Ͱͳ͘ɺLaunch Screen storyboard͕ඞਢ
What’s Safe Area API Roadmap • ηʔϑΤϦΞΛ༗ޮʹ͢Δ 1. StoryboardΛ։͘ 2.
ӈଆʹ͋ΔInterface BuilderͷΠϯεϖ ΫλΛ։͘ 3. ʮUse Safe Area Layout Guidesʯͷ νΣοΫΛONʹ͢Δ 4. ࣗಈͰηʔϑΤϦΞ(UILayoutGuide) ͕ Ճ͞ΕΔ
Safe Area Preview API Roadmap J1IPOF9 J1IPOF 1PSUSBJU -BOETDBQF എܠ৭͖ͷϥϕϧΛSafeAreaʹදࣔ͢ΔΑ͏ʹ੍ΛՃ࣮ͯ͠ߦͨ͠߹
What’s Safe Area API Roadmap • ͍··ͰͷStoryboardͰηʔϑΤϦΞΛ༗ޮʹ͢Δͱɺ Top Layout GuideBottom
Layout Guideʹଓ͍ͯ͠ ͨϏϡʔࣗಈͰηʔϑΤϦΞͷTopɺBottomʹࠩ͠ସ ͑ͯ͘ΕΔ ηʔϑΤϦΞద༻લ ηʔϑΤϦΞద༻ޙ
ͭ·Γ
ԜΈΛΔ͜ͱͰ
iPhoneXରԠྃʂ
ͱ͍͖·ͤΜ iPhoneXରԠྃʂ
Agenda • What’s iPhoneX • What’s Safe Area • How
To “TRUE” Support iPhoneX • Summary
How To “TRUE” Support iPhoneX API Roadmap • ༨ന෦ͷഎܠʹؾΛ͚ͭΑ͏
API Roadmap Designing for iPhone X - Fall 2017 -
Videos - Apple DeveloperΑΓ ηʔϑΤϦΞͰΓऔΔ͚ͩͷσβΠϯඇਪ
How To “TRUE” Support iPhoneX API Roadmap • ༨ന෦ͷഎܠʹؾΛ͚ͭΑ͏ •
ඞཁͳՕॴͰclipsToBoundsʹͳ͍ͬͯΔ͔ؾ Λ͚ͭΑ͏
API Roadmap ※ը૾։ൃதͷͷͰ͢ɻରԠ൛Ͱى͖·ͤΜͷͰɺ҆͝৺͍ͩ͘͞ɻ clipsToBoundsΛ໌֬ʹࢦఆ͓͔ͯ͠ͳ͍ͱɺ ηʔϑΤϦΞ͕શવηʔϑʹͳΒͳ͘ͳΔ ແ೦ʹΈग़ͯ͠͠·ͬͨ…
How To “TRUE” Support iPhoneX • ༨ന෦ͷഎܠʹؾΛ͚ͭΑ͏ • ඞཁͳՕॴͰclipsToBoundsʹͳ͍ͬͯΔ͔ؾ Λ͚ͭΑ͏
• ίʔυϕʔεͷϏϡʔʹؾΛ͚ͭΑ͏
• ίʔυϕʔεͰViewControllerͷViewͳͲʹՃ͠ ͍ͯΔViewʹࣗಈͰηʔϑΤϦΞద༻͞Εͳ͍ • iOS11͔ΒUIViewͷϓϩύςΟʹsafeAreaInsets (UIEdgeInsets) ͕Ճ͞Ε͍ͯͯɺ͔ͦ͜Βηʔϑ ΤϦΞͷϚʔδϯΛऔಘͰ͖Δ • iOS11+͔͑͠ͳ͍ϓϩύςΟͷͨΊɺ
#available(iOS 11, *) Ͱͷذ͕ඞཁ How To Get Safe Area
How To Get Safe Area import UIKit class ViewController: UIViewController
{ // ͜͜ͰsafeAreaInsets͕ॳΊͯ֬ఆ͢Δ override func viewWillLayoutSubviews() { super.viewWillLayoutSubviews() // iOS11͔Ͳ͏͔Ͱذ͢Δ let safeAreaInsets: UIEdgeInsets if #available(iOS 11, *) { safeAreaInsets = view.safeAreaInsets } else { safeAreaInsets = .zero } print("safeAreaInsets: \(safeAreaInsets)") } } UIViewController.swift UIViewControllerͷview͔ΒsafeAreaInsetsΛऔಘ͢Δ
How To “TRUE” Support iPhoneX API Roadmap • ༨ന෦ͷഎܠʹؾΛ͚ͭΑ͏ •
ඞཁͳՕॴͰclipsToBoundsʹͳ͍ͬͯΔ͔ؾ Λ͚ͭΑ͏ • ίʔυϕʔεͷϏϡʔʹؾΛ͚ͭΑ͏ • ϑϧεΫϦʔϯදࣔͰͷΞεϖΫτൺकΖ͏
Designing for iPhone X - Fall 2017 - Videos -
Apple DeveloperΑΓ ίϯςϯπΛϑϧεΫϦʔϯදࣔ͢ΔࡍʹΞεϖΫτൺΛอͪ·͠ΐ͏ iPhone8 (16:9) Λج४ʹ͢Δ߹ ࠨӈΛΓऔͬͯදࣔ ্ԼΛΓऔͬͯදࣔ or
͔͠͠ɺ͜͜Ͱ͕
Safe Area Preview API Roadmap J1IPOF9 J1IPOF 1PSUSBJU -BOETDBQF എܠ৭͖ͷϥϕϧΛSafeAreaʹදࣔ͢ΔΑ͏ʹ੍ΛՃ࣮ͯ͠ߦͨ͠߹
Safe Area Preview API Roadmap J1IPOF9 J1IPOF 1PSUSBJU -BOETDBQF എܠ৭͖ͷϥϕϧΛSafeAreaʹදࣔ͢ΔΑ͏ʹ੍ΛՃ࣮ͯ͠ߦͨ͠߹
Safe Area Preview API Roadmap J1IPOF9 J1IPOF 1PSUSBJU -BOETDBQF എܠ৭͖ͷϥϕϧΛSafeAreaʹදࣔ͢ΔΑ͏ʹ੍ΛՃ࣮ͯ͠ߦͨ͠߹
ఈ͕ΕͪΌͬͯΔΜͰ͚͢Ͳ…
How To Support Fullscreen API Roadmap • Bottomͷ੍Λ࣍ͷΑ͏ʹมߋ͠·͠ΐ͏ Portraitͷͱ͖
How To Support Fullscreen API Roadmap • Bottomͷ੍Λ࣍ͷΑ͏ʹมߋ͠·͠ΐ͏ Portraitͷͱ͖
How To Support Fullscreen API Roadmap • Bottomͷ੍Λ࣍ͷΑ͏ʹมߋ͠·͠ΐ͏ Landscapeͷͱ͖
How To Support Fullscreen API Roadmap • Bottomͷ੍Λ࣍ͷΑ͏ʹมߋ͠·͠ΐ͏ Landscapeͷͱ͖
How To Support Fullscreen ͜ΕͰແࣄʹϑϧεΫϦʔϯදࣔྃʂ
How To Support Fullscreen ͜ΕͰແࣄʹϑϧεΫϦʔϯදࣔྃʂ
How To Support Fullscreen Home Indicator ͕अຐͳΜͰ͚͢Ͳ…
How To Support Fullscreen • Home Indicator ඇදࣔʹͰ͖Δ ‣ iOS11͔ΒUIViewControllerͷΦʔόʔϥΠυϝιο
υͱͯ͠ɺ༻ҙ͞Ε͍ͯΔ import UIKit class ViewController: UIViewController { private var isHiddenHomeIndicator: Bool = true override func viewDidLoad() { super.viewDidLoad() // HomeIndicatorͷදࣔΛߋ৽͢ΔͨΊͷϝιου if #available(iOS 11, *) { setNeedsUpdateOfHomeIndicatorAutoHidden() } } @available(iOS 11, *) override func prefersHomeIndicatorAutoHidden() -> Bool { return isHiddenHomeIndicator } } UIViewController.swift
How To Support Fullscreen ͜ΕͰຊʹϑϧεΫϦʔϯදࣔྃʂ!
How To “TRUE” Support iPhoneX API Roadmap • ༨ന෦ͷഎܠʹؾΛ͚ͭΑ͏ •
ඞཁͳՕॴͰclipsToBoundsʹͳ͍ͬͯΔ͔ؾ Λ͚ͭΑ͏ • ίʔυϕʔεͷϏϡʔʹؾΛ͚ͭΑ͏ • ϑϧεΫϦʔϯදࣔͰͷΞεϖΫτൺकΖ͏ etc.
Agenda • What’s iPhoneX • What’s Safe Area • How
To “TRUE” Support iPhoneX • Summary
Summary • iPhoneXʹରԠ͢ΔʹηʔϑΤϦΞͷ֓೦͕ ॏཁʹͳΔ • ηʔϑΤϦΞͰ݁͢Δ͚ͩͰiPhoneXର ԠʹͳΒͳ͍ • ԜΈΛΔ͚ͩͰͳ͘ɺԜΈΛͬͯɺԜΈ Λ׆͔࣮͕ͨ͠ඞཁ
Thank youʂ
ࢀߟϦϯΫ • Designing for iPhone X - Fall 2017 -
Videos - Apple Developer https://developer.apple.com/videos/play/fall2017/801/ • iPhone X - Overview - iOS Human Interface Guidelines https://developer.apple.com/ios/human-interface-guidelines/ overview/iphone-x/ • iPhone XͷηʔϑΤϦΞϚʔδϯ෯ʹ͍ͭͯ - Qiita https://qiita.com/usagimaru/items/761e9a5f3d78b1939df8 • ʲiOS11ʳsafeAreaInsetsͷ͕औಘͰ͖ΔλΠϛϯά https://qiita.com/hituziando/items/e5873b5bfa42247071e6