アイフォンX、凹みを切るか？凹みを使うか？ ~iPhoneX対応のススメ~

by Keisuke Tatsumi

Slide 1

Slide 1 text

CA.swift #4 2017/10/18 Keisuke Tatsumi ~iPhoneXରԠͷεεϝ~

Slide 2

Slide 2 text

Keisuke Tatsumi • iOS engineer at AbemaTV, Inc. • Github, Qiita : cokaholic • Twitter : @TK_u_nya • AppStore : Keisuke Tatsumi

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

ຊ೔ͷςʔϚ͸…

Slide 5

Slide 5 text

iPhoneXରԠ

Slide 6

Slide 6 text

Agenda • What’s iPhoneX • What’s Safe Area • How To “TRUE” Support iPhoneX • Summary

Slide 7

Slide 7 text

Agenda • What’s iPhoneX • What’s Safe Area • How To “TRUE” Support iPhoneX • Summary

Slide 8

Slide 8 text

What’s iPhoneX • 9݄12೔ʹ։࠵͞ΕͨApple Special Eventʹ ͯൃද͞Εͨ࠷৽ͷiPhone

Slide 9

Slide 9 text

One more thing…

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

৽ܕiPhoneΩλʔʂ

Slide 12

Slide 12 text

What’s iPhoneX • 9݄12೔ʹ։࠵͞ΕͨApple Special Eventʹ ͯൃද͞Εͨ࠷৽ͷiPhone

Slide 13

Slide 13 text

What’s iPhoneX • 9݄12೔ʹ։࠵͞ΕͨApple Special Eventʹ ͯൃද͞Εͨ࠷৽ͷiPhone • ϕθϧϨεσΟεϓϨΠ

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

͓Θ͔Γ͍͚ͨͩͨͩΖ͏͔ʁ

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

͑…͜Ε…ԜΈͷ෦෼ɺ΍͹͘Ͷʁ

Slide 18

Slide 18 text

ͦ͜Ͱొ৔͢Δͷ͕...

Slide 19

Slide 19 text

Safe Area

Slide 20

Slide 20 text

Agenda • What’s iPhoneX • What’s Safe Area • How To “TRUE” Support iPhoneX • Summary

Slide 21

Slide 21 text

What’s Safe Area API Roadmap • Apple͕iOS11͔Βಋೖͨ֓͠೦

Slide 22

Slide 22 text

What’s Safe Area API Roadmap • Apple͕iOS11͔Βಋೖͨ֓͠೦ • φϏήʔγϣϯόʔ΍εςʔλεόʔͳͲͷ֎ ଆͷUIʹඃΒͳ͍҆શͳྖҬΛऔಘͰ͖Δ

Slide 23

Slide 23 text

What’s Safe Area API Roadmap • Apple͕iOS11͔Βಋೖͨ֓͠೦ • φϏήʔγϣϯόʔ΍εςʔλεόʔͳͲͷ֎ ଆͷUIʹඃΒͳ͍҆શͳྖҬΛऔಘͰ͖Δ • iPhoneXͷΑ͏ͳԜΈΛؚΜͩը໘ʹ΋ରԠ Ͱ͖Δ

Slide 24

Slide 24 text

What’s Safe Area API Roadmap • Apple͕iOS11͔Βಋೖͨ֓͠೦ • φϏήʔγϣϯόʔ΍εςʔλεόʔͳͲͷ֎ଆͷ UIʹඃΒͳ͍҆શͳྖҬΛऔಘͰ͖Δ • iPhoneXͷΑ͏ͳԜΈΛؚΜͩը໘ʹ΋ରԠͰ͖Δ • Xcode9+ɺiOS11+ SDKΛ࢖༻͠ɺLaunch images Ͱ͸ͳ͘ɺLaunch Screen storyboard͕ඞਢ

Slide 25

Slide 25 text

What’s Safe Area API Roadmap • ηʔϑΤϦΞΛ༗ޮʹ͢Δ 1. StoryboardΛ։͘ 2. ӈଆʹ͋ΔInterface BuilderͷΠϯεϖ ΫλΛ։͘ 3. ʮUse Safe Area Layout Guidesʯͷ νΣοΫΛONʹ͢Δ 4. ࣗಈͰηʔϑΤϦΞ(UILayoutGuide) ͕ ௥Ճ͞ΕΔ

Slide 26

Slide 26 text

Safe Area Preview API Roadmap J1IPOF9 J1IPOF 1PSUSBJU -BOETDBQF എܠ৭෇͖ͷϥϕϧΛSafeAreaʹදࣔ͢ΔΑ͏ʹ੍໿Λ௥Ճ࣮ͯ͠ߦͨ͠৔߹

Slide 27

Slide 27 text

What’s Safe Area API Roadmap • ͍··ͰͷStoryboardͰηʔϑΤϦΞΛ༗ޮʹ͢Δͱɺ Top Layout Guide΍Bottom Layout Guideʹ઀ଓ͍ͯ͠ ͨϏϡʔ͸ࣗಈͰηʔϑΤϦΞͷTopɺBottomʹࠩ͠ସ ͑ͯ͘ΕΔ ηʔϑΤϦΞద༻લ ηʔϑΤϦΞద༻ޙ

Slide 28

Slide 28 text

ͭ·Γ

Slide 29

Slide 29 text

ԜΈΛ੾Δ͜ͱͰ

Slide 30

Slide 30 text

iPhoneXରԠ׬ྃʂ

Slide 31

Slide 31 text

ͱ͸͍͖·ͤΜ iPhoneXରԠ׬ྃʂ

Slide 32

Slide 32 text

Agenda • What’s iPhoneX • What’s Safe Area • How To “TRUE” Support iPhoneX • Summary

Slide 33

Slide 33 text

How To “TRUE” Support iPhoneX API Roadmap • ༨ന෦෼ͷഎܠʹؾΛ͚ͭΑ͏

Slide 34

Slide 34 text

API Roadmap Designing for iPhone X - Fall 2017 - Videos - Apple DeveloperΑΓ ηʔϑΤϦΞͰ੾ΓऔΔ͚ͩͷσβΠϯ͸ඇਪ঑

Slide 35

Slide 35 text

How To “TRUE” Support iPhoneX API Roadmap • ༨ന෦෼ͷഎܠʹؾΛ͚ͭΑ͏ • ඞཁͳՕॴͰclipsToBoundsʹͳ͍ͬͯΔ͔ؾ Λ͚ͭΑ͏

Slide 36

Slide 36 text

API Roadmap ※ը૾͸։ൃதͷ΋ͷͰ͢ɻରԠ൛Ͱ͸ى͖·ͤΜͷͰɺ҆͝৺͍ͩ͘͞ɻ clipsToBoundsΛ໌֬ʹࢦఆ͓͔ͯ͠ͳ͍ͱɺ ηʔϑΤϦΞ͕શવηʔϑʹͳΒͳ͘ͳΔ ແ೦ʹ΋͸Έग़ͯ͠͠·ͬͨ…

Slide 37

Slide 37 text

How To “TRUE” Support iPhoneX • ༨ന෦෼ͷഎܠʹؾΛ͚ͭΑ͏ • ඞཁͳՕॴͰclipsToBoundsʹͳ͍ͬͯΔ͔ؾ Λ͚ͭΑ͏ • ίʔυϕʔεͷϏϡʔʹؾΛ͚ͭΑ͏

Slide 38

Slide 38 text

• ίʔυϕʔεͰViewControllerͷViewͳͲʹ௥Ճ͠ ͍ͯΔViewʹ͸ࣗಈͰηʔϑΤϦΞ͸ద༻͞Εͳ͍ • iOS11͔Β͸UIViewͷϓϩύςΟʹsafeAreaInsets (UIEdgeInsets) ͕௥Ճ͞Ε͍ͯͯɺ͔ͦ͜Βηʔϑ ΤϦΞͷϚʔδϯΛऔಘͰ͖Δ • iOS11+͔͠࢖͑ͳ͍ϓϩύςΟͷͨΊɺ  #available(iOS 11, *) Ͱͷ෼ذ͕ඞཁ How To Get Safe Area

Slide 39

Slide 39 text

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Λऔಘ͢Δ

Slide 40

Slide 40 text

How To “TRUE” Support iPhoneX API Roadmap • ༨ന෦෼ͷഎܠʹؾΛ͚ͭΑ͏ • ඞཁͳՕॴͰclipsToBoundsʹͳ͍ͬͯΔ͔ؾ Λ͚ͭΑ͏ • ίʔυϕʔεͷϏϡʔʹؾΛ͚ͭΑ͏ • ϑϧεΫϦʔϯදࣔͰͷΞεϖΫτൺ͸कΖ͏

Slide 41

Slide 41 text

Designing for iPhone X - Fall 2017 - Videos - Apple DeveloperΑΓ ίϯςϯπΛϑϧεΫϦʔϯදࣔ͢Δࡍʹ͸ΞεϖΫτൺΛอͪ·͠ΐ͏ iPhone8 (16:9) Λج४ʹ͢Δ৔߹ ࠨӈΛ੾Γऔͬͯදࣔ ্ԼΛ੾Γऔͬͯදࣔ or

Slide 42

Slide 42 text

͔͠͠ɺ͜͜Ͱ໰୊͕

Slide 43

Slide 43 text

Safe Area Preview API Roadmap J1IPOF9 J1IPOF 1PSUSBJU -BOETDBQF എܠ৭෇͖ͷϥϕϧΛSafeAreaʹදࣔ͢ΔΑ͏ʹ੍໿Λ௥Ճ࣮ͯ͠ߦͨ͠৔߹

Slide 44

Slide 44 text

Safe Area Preview API Roadmap J1IPOF9 J1IPOF 1PSUSBJU -BOETDBQF എܠ৭෇͖ͷϥϕϧΛSafeAreaʹදࣔ͢ΔΑ͏ʹ੍໿Λ௥Ճ࣮ͯ͠ߦͨ͠৔߹

Slide 45

Slide 45 text

Safe Area Preview API Roadmap J1IPOF9 J1IPOF 1PSUSBJU -BOETDBQF എܠ৭෇͖ͷϥϕϧΛSafeAreaʹදࣔ͢ΔΑ͏ʹ੍໿Λ௥Ճ࣮ͯ͠ߦͨ͠৔߹ ఈ͕੾ΕͪΌͬͯΔΜͰ͚͢Ͳ…

Slide 46

Slide 46 text

How To Support Fullscreen API Roadmap • Bottomͷ੍໿Λ࣍ͷΑ͏ʹมߋ͠·͠ΐ͏ Portraitͷͱ͖

Slide 47

Slide 47 text

How To Support Fullscreen API Roadmap • Bottomͷ੍໿Λ࣍ͷΑ͏ʹมߋ͠·͠ΐ͏ Portraitͷͱ͖

Slide 48

Slide 48 text

How To Support Fullscreen API Roadmap • Bottomͷ੍໿Λ࣍ͷΑ͏ʹมߋ͠·͠ΐ͏ Landscapeͷͱ͖

Slide 49

Slide 49 text

How To Support Fullscreen API Roadmap • Bottomͷ੍໿Λ࣍ͷΑ͏ʹมߋ͠·͠ΐ͏ Landscapeͷͱ͖

Slide 50

Slide 50 text

How To Support Fullscreen ͜ΕͰແࣄʹϑϧεΫϦʔϯදࣔ׬ྃʂ

Slide 51

Slide 51 text

How To Support Fullscreen ͜ΕͰແࣄʹϑϧεΫϦʔϯදࣔ׬ྃʂ

Slide 52

Slide 52 text

How To Support Fullscreen Home Indicator ͕अຐͳΜͰ͚͢Ͳ…

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

How To Support Fullscreen ͜ΕͰຊ౰ʹϑϧεΫϦʔϯදࣔ׬ྃʂ!

Slide 55

Slide 55 text

How To “TRUE” Support iPhoneX API Roadmap • ༨ന෦෼ͷഎܠʹؾΛ͚ͭΑ͏ • ඞཁͳՕॴͰclipsToBoundsʹͳ͍ͬͯΔ͔ؾ Λ͚ͭΑ͏ • ίʔυϕʔεͷϏϡʔʹؾΛ͚ͭΑ͏ • ϑϧεΫϦʔϯදࣔͰͷΞεϖΫτൺ͸कΖ͏ etc.

Slide 56

Slide 56 text

Agenda • What’s iPhoneX • What’s Safe Area • How To “TRUE” Support iPhoneX • Summary

Slide 57

Slide 57 text

Summary • iPhoneXʹରԠ͢Δʹ͸ηʔϑΤϦΞͷ֓೦͕ ॏཁʹͳΔ • ηʔϑΤϦΞ಺Ͱ׬݁͢Δ͚ͩͰ͸iPhoneXର Ԡʹ͸ͳΒͳ͍ • ԜΈΛ੾Δ͚ͩͰͳ͘ɺԜΈΛ࢖ͬͯɺԜΈ Λ׆͔࣮ͨ͠૷͕ඞཁ

Slide 58

Slide 58 text

Thank youʂ

Slide 59

Slide 59 text

ࢀߟϦϯΫ • 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 