Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

#potatotips #65

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

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

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

Tatsuya Tanaka

October 01, 2019
Tweet

More Decks by Tatsuya Tanaka

Other Decks in Programming

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