ダークモード対応で注意すべきこと

#potatotips #65

バグの再現リポジトリ
https://github.com/tattn/WeirdDarkMode-iOS12

Qiitaにこの発表をテキスト化したものを投稿しました
https://qiita.com/tattn/items/c56b15ed8d1cea26a955

VRの体を手に入れました
https://twitter.com/tanakasan2525/status/1177736175894908928

Transcript

1. μʔΫϞʔυରԠͰ஫ҙ͢΂͖͜ͱ
   ాதୡ໵ (@tattn)
   #potatotips #65
   

   View Slide

2. ాத ୡ໵ / ͨͳͨͭ (@tattn)
   • Yahoo!৐׵Ҋ಺
   • iOSΞϓϦΤϯδχΞ
   @tattn
   @tanakasan2525
   @tattn
   Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
   

   View Slide

3. ࠷ۙɺόʔνϟϧͳମΛखʹೖΕ·ͨ͠
   Unite Tokyoͱ͍͏ΠϕϯτͰશ਎3DεΩϟϯͯ͠΋Β͍·ͨ͠

   ॊೈͳମΛखʹೖΕΔͨΊʹϘʔϯΛೖΕΔ࡞ۀ͕େมͰͨ͠ˠ
   IUUQTUXJUUFSDPNUBOBLBTBOTUBUVT
   

   View Slide

4. ৐׵Ҋ಺͸

   iOS 13ϦϦʔεॳ೔ʹ

   μʔΫϞʔυରԠ͠·ͨ͠
   IUUQTUXJUUFSDPNUBOBLBTBOTUBUVT
   

   View Slide

5. ͭΒΈ͕ࢁ੝ΓͩͬͨͷͰ

   ͦͷҰ෦Λ঺հ͠·͢
   

   View Slide

6. ಈ࡞֬ೝ؀ڥ
   • macOS Mojave 10.14.6
   • Xcode 11.0 (11A420a)
   ؀ڥґଘͷՄೳੑ΋ߴ͍ͨΊɺࡌ͓͖ͤͯ·͢

   CatalinaͳΒ௚ͬͯΔΑʂͳͲͷ஌ݟ͕͋Ε͹ڭ͑ͯԼ͍͞ʂ
   

   View Slide

7. iOS 11ͰColor Assetsͷ৭Λ

   औಘͰ͖ͳ͍໰୊
   (ݱࡏ͸मਖ਼͞Ε·ͨ͠)
   

   View Slide

8. Xcode 11 GM1ͰΧϥʔΞηοτ͕࢖͑ͳ͔ͬͨ (iOS 11)
   Xcode 11 GM1ͰϏϧυͨ͠ΞϓϦΛiOS 11Ͱಈ͔͢ͱ

   UIColor(named:_) ͕ৗʹnilΛฦ͢໰୊ʹ೰·͞Ε·ͨ͠
   iOS 13ϦϦʔε೔ͷ3೔લ·Ͱ͜ͷঢ়گͰ

   ͔ͳΓযΓ·ͨ͠ (ॳ೔ϦϦʔεΛ໨ࢦ͍ͯͨͨ͠Ί)
   Xcode 11 GM2Ͱແࣄ௚Γ·ͨ͠…
   

   View Slide

9. iOS 12ҎԼͰμʔΫϞʔυͷ৭͕
   දࣔ͞Εͯ͠·͏໰୊

   (͜Ε͸ݱ࣌఺Ͱ΋ى͖͍ͯͯ

   ͔ͳΓࠔ͍ͬͯ·͢)
   IUUQTHJUIVCDPNUBUUO8FJSE%BSL.PEFJ04
   ࠶ݱϦϙδτϦ:
   

   View Slide

10. iOS 12ҎԼͰμʔΫϞʔυͷ৭͕දࣔ͞ΕΔ
    iOS 13Ͱಈ࡞֬ೝΛ͠ͳ͕Β։ൃΛਐΊɺ

    ͋Δఔ౓ਐΜͩஈ֊ͰiOS 12ͷ୺຤Ͱ֬ೝΛ͢Δͱ

    Կނ͔Ұ෦ͷ৭͕μʔΫϞʔυͰදࣔ͞Ε͍ͯ·ͨ͠
    

    View Slide

11. iOS 12ҎԼͰμʔΫϞʔυͷ৭͕දࣔ͞ΕΔ
    ৭ʑݕূ͍ͯ͘͠தͰҎԼͷ໰୊͕෼͔Γ·ͨ͠
    • MacΛμʔΫϞʔυʹ͍ͯ͠Δͱɺxib/StoryboardʹຒΊࠐ·ΕΔ

    ΧελϜ৭ͷRGB͕μʔΫϞʔυͷ৭ʹͳΔ
    • iOS 13Ͱ͸֎؍Ϟʔυʹ߹Θͤͨਖ਼͍͠৭͕දࣔ͞ΕΔ͕ɺ

    iOS 12ҎԼͰ͸ຒΊࠐ·Εͨ৭͕දࣔ͞Εͯ͠·͏έʔε͕͋Δ
    • xib/StoryboardʹΧελϜ৭Λઃఆͨ͠ޙɺ

    Asset CatalogͰͦͷ৭Λฤूͯ͠΋Viewଆͷ৭͕มΘΒͳ͍ (iOS 12ҎԼͷΈ)
    ※Asset CatalogͰ࡞੒ͨ͠৭ͷ͜ͱΛ͜͜Ͱ͸ΧελϜ৭ͱݺͿ͜ͱʹ͠·͢
    

    View Slide

12. MacΛμʔΫϞʔυʹ͍ͯ͠Δͱɺxib/StoryboardʹຒΊࠐ·ΕΔ

    ΧελϜ৭ͷRGB͕μʔΫϞʔυͷ৭ʹͳΔ
    Mac͕ϥΠτϞʔυͷ࣌
    
    
    
    
    
    
    
    
    
    
    Mac͕μʔΫϞʔυͷ࣌
    

    View Slide

13. MacΛμʔΫϞʔυʹ͍ͯ͠Δͱɺxib/StoryboardʹຒΊࠐ·ΕΔ

    ΧελϜ৭ͷRGB͕μʔΫϞʔυͷ৭ʹͳΔ
    class View: UIView {
    @IBInspectable var ibBackgroundColor: UIColor = .white {
    didSet {
    backgroundColor = ibBackgroundColor
    }
    }
    }
    ←͜ͷΑ͏ͳViewΛ༻ҙ
    BackgroundͰ৭Λઃఆ IBInspectableͰ৭Λઃఆ
    MacΛμʔΫϞʔυ

    ʹ͍ͯ͠·͢
    

    View Slide

14. MacΛμʔΫϞʔυʹ͍ͯ͠Δͱɺxib/StoryboardʹຒΊࠐ·ΕΔ

    ΧελϜ৭ͷRGB͕μʔΫϞʔυͷ৭ʹͳΔ
    ←BackgroundͰઃఆͨ͠ΧελϜ৭
    ←IBInspectableͰઃఆͨ͠ΧελϜ৭
    OMG
    StoryboardʹຒΊࠐ·Εͨ৭͕ग़ͯ͠·͍ͬͯ·͢
    

    View Slide

15. MacΛμʔΫϞʔυʹ͍ͯ͠Δͱɺxib/StoryboardʹຒΊࠐ·ΕΔ

    ΧελϜ৭ͷRGB͕μʔΫϞʔυͷ৭ʹͳΔ
    OMG
    iOS 12 iOS 13 iOS 13
    

    View Slide

16. iOS 12ҎԼͰμʔΫϞʔυͷ৭͕දࣔ͞ΕΔ
    શͯͷύλʔϯ͸೺ѲͰ͖͍ͯ·ͤΜ͕

    IBInspectable (User Defined Runtime Attributes) Ͱ

    ઃఆͨ͠৭͸͜ͷݱ৅͕ى͖΍͍͢Ͱ͢
    ͦΕҎ֎ͷͱ͖΋ൃੜ͢Δ͜ͱ͕͋ͬͨͨΊɺ

    μʔΫϞʔυରԠ͸MacΛϥΠτϞʔυʹͯ͠

    ࡞ۀ͢ΔͷΛ͓͢͢Ί͠·͢
    

    View Slide

17. Asset CatalogͰͦͷ৭Λฤूͯ͠΋Viewଆͷ৭͕มΘΒͳ͍ 

    (iOS 12ҎԼͷΈ)
    iOS 12 iOS 13
    iOS 12ͷIBInspectableͷํͷ

    ৭͕มΘΒͳ͍…
    OMG
    

    View Slide

18. ͱʹ͔͘৭Λม͑ͨΒ࠶ઃఆ
    ৭Λޙ͔Βมߋͯ͠΋Ұ෦มΘΒͳ͍Օॴ͕͋ΔͨΊɺ

    ࢀরઌͷxib/Storyboardͷ৭Λ࠶ઃఆͨ͠΄͏͕ྑͦ͞͏Ͱ͢
    Ͳ͔͜ҰՕॴΛҰ୴ผͷ৭ʹ͠ɺ

    ·ͨݩͷ৭ʹ໭͢ͱͦͷϑΝΠϧ಺ͷ
    ৭͸શ෦ਖ਼͍͠৭ʹߋ৽͞Ε·ͨ͠
    

    View Slide

19. εϓϥογϡεΫϦʔϯͷ

    ը૾͕ߋ৽͞Εͳ͍໰୊
    

    View Slide

20. εϓϥογϡεΫϦʔϯͷը૾͕ߋ৽͞Εͳ͍
    Launch Screen Image not Updating!!!
    IUUQTGPSVNTEFWFMPQFSBQQMFDPNUISFBE
    εϓϥογϡεΫϦʔϯͷը૾Λ

    μʔΫϞʔυରԠͷͨΊʹࠩ͠ସ͑ͯ΋

    ը૾͕ߋ৽͞Εͣɺݹ͍ը૾͕ग़ͯ͠·͏έʔε͕͋Γ·ͨ͠
    ͜Ε͸ੲ͔Β͋Δ໰୊ͰɺLaunchScreenͷStoryboardʹ

    xcassetsͷը૾Λઃఆ͍ͯ͠Δͱى͖ΔΑ͏Ͱ͢
    

    View Slide

21. ը૾͕μʔΫʹͳΒͳ͍໰୊
    

    View Slide

22. ը૾͕μʔΫʹͳΒͳ͍໰୊
    IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJUVJJNBHFSFTJ[BCMFJNBHF
    resizableImage(withCapInsets:resizingMode:)౳Ͱ

    ը૾Λ࡞Γ௚͢ͱͦͷ࣌ͷiOSͷ֎؍Ϟʔυ༻ͷը૾͚͔ͩ͠

    ੜ੒ͯ͘͠Ε·ͤΜ
    →ΞϓϦىಈதʹϥΠτ→μʔΫʹͯ͠΋ը૾͕มΘΒͳ͍

    ɹ໰୊͕ى͖·͢…
    

    View Slide

23. ը૾͕μʔΫʹͳΒͳ͍໰୊
    resizableImage(withCapInsets:resizingMode:)͸

    xcassetsͰͷεϥΠεͷઃఆʹஔ͖׵͑·͠ΐ͏
    ଞʹͲ͏ͯ͠΋ը૾Λ࠶ੜ੒͢Δඞཁ͕͋Δ৔߹͸

    ద੾ͳϝιουͰը૾Λߋ৽͢Δඞཁ͕͋Γ·͢
    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    

    View Slide

24. ·ͱΊ
    

    View Slide

25. ·ͱΊ
    • ࣗ෼͕ѱ͍ͷ͔ͦΕͱ΋…໰୊ʹ೰·͞Ε·ͨ͠
    • μʔΫϞʔυରԠ࣌ʹiOS 12ҎԼ΋αϙʔτ͢Δ৔߹͸

    ͦΕΒͷಈ࡞֬ೝΛ๨Εͣʹ
    • όάϨϙʔτΛ6ͭૹΓ·ͨ͠ (࠶ݱੑ͕ߴ͍΋ͷͷΈ)

    ɾiOS 13΍Xcode 11ʹ͸·ͩ·ͩ՝୊͕͋ΔͷͰ

    ɹͨ͘͞ΜϑΟʔυόοΫ͍͖ͯ͠·͠ΐ͏
    • ibtoolͰ৭ΛҰׅߋ৽Ͱ͖ͦ͏ͳؾ΋͠·͢ (Ͱ͖ͨํ͍ͨΒڭ͑ͯ΄͍͠Ͱ͢)
    

    View Slide