Add dark mode to your apps in iOS 13 #wwdc19 #timers_meetup

Timersで開催されたTimers Meetup #2 WWDC After Partyで発表した内容です。
Dark Modeに対応する為に必要な知識を発表しました。

Transcript

1. "EEEBSLNPEFUPZPVSBQQT

   JOJ04
   
   5JNFST.FFUVQd88%$"GUFS1BSUZd
   *NQMFNFOUJOH%BSL.PEFPOJ04
   
   

   View Slide

2. 1SPpMF
   struct Profile {
   let name = "Kazuya Ueoka"
   let twitter = "@fromkk"
   let github = "fromkk"
   let qiita = "fromkk"
   let company = "Timers Inc."
   }
   •
   2
   

   View Slide

3. %BSLNPEF ❓
   

   View Slide

4. %BSLNPEF
   

   View Slide

5. View Slide

6. )PXUPJNQMFNFOUT
   

   View Slide

7. 04͕༻ҙͨ͠৭Λར༻
   open class var systemIndigo: UIColor { get }

   open class var systemGray2: UIColor { get }

   open class var systemGray3: UIColor { get }

   open class var systemGray4: UIColor { get }

   open class var systemGray5: UIColor { get }

   open class var systemGray6: UIColor { get }

   open class var label: UIColor { get }

   open class var secondaryLabel: UIColor { get }

   open class var tertiaryLabel: UIColor { get }

   open class var quaternaryLabel: UIColor { get }

   open class var link: UIColor { get }

   open class var placeholderText: UIColor { get }

   open class var separator: UIColor { get }

   open class var opaqueSeparator: UIColor { get }

   open class var systemBackground: UIColor { get }

   open class var secondarySystemBackground: UIColor { get }

   open class var tertiarySystemBackground: UIColor { get }

   open class var systemGroupedBackground: UIColor { get }

   open class var secondarySystemGroupedBackground: UIColor { get }

   open class var tertiarySystemGroupedBackground: UIColor { get }

   open class var systemFill: UIColor { get }

   open class var secondarySystemFill: UIColor { get }

   open class var tertiarySystemFill: UIColor { get }

   open class var quaternarySystemFill: UIColor { get }
   ˞J04Ͱ૿͑ͨ৭ͷҰཡͳͷͰશ͕ͯ%BSLNPEFରԠ͔Ͳ͏͔͸֬ೝ͍ͯ͠·ͤΜ
   

   View Slide

8. "TTFUT
   w $PMPS*NBHFBTTFUTʹ%BSL
   "QQFBSBODF͕௥Ճ /%"ʹ഑ྀͷҝࣗॗ
   

   View Slide

9. *#্Ͱը૾ͷ৭มߋ
   w *NBHF"TTFUͷ3FOEFS"TΛ5FNQMBUF
   *NBHFʹઃఆ
   w *#ଆͰը૾ͷ5JOUDPMPSΛઃఆ
   5JQT
   

   View Slide

10. *NQMFNFOUTXJUIDPEF
    w USBJU$PMMFDUJPOͷVTFS*OUFSGBDF4UZMFϓϩύςΟΛར༻
    public enum UIUserInterfaceStyle : Int {
    case unspecified
    case light
    case dark
    }
    w ΧελϜ%ZOBNJD$PMPSΛ࡞੒
    let dynamicColor = UIColor { traitCollection -> UIColor in
    switch traitCollection.userInterfaceStyle {
    case .dark:
    return .red
    default:
    return .blue
    }
    }

    

    etc…
    

    View Slide

11. *NQMFNFOUTXJUIDPEF
    w ໌ࣔతʹϋϯυϦϯά
    let dynamicColor = UIColor.systemBackground
    let traitCollection = view.traitCollection
    let resolvedColor = dynamicColor.resolvedColor(with: traitCollection)

    let resolvedImage = image.imageAsset?.image(with: traitCollection)
    w ΠϕϯτϋϯυϦϯά
    *NQMFNFOUJOH%BSL.PEFPOJ04
    ΑΓҾ༻
    

    View Slide

12. %BSLNPEFͷมߋํ๏
    var overrideUserInterfaceStyle: UIUserInterfaceStyle
    ը໘ຖʹઃఆ

    6*7JFX 6*7JFX$POUSPMMFS
    UIUserInterfaceStyle: Light or Dark
    ΞϓϦશମΛઃఆ

    *OGPQMJTU
    

    View Slide

13. ஫ҙࣄ߲
    w 6*"DUJWJUZ*OEJDBUPS4UZMFͷHSBZXIJUFXIJUF-BSHF͕EFQSFDBUFE

    NFEJVNͱMBSHF͕৽ઃ ৭͸DPMPSϓϩύςΟʹઃఆग़དྷΔ
    
    w 6*4UBUVT#BS΍εΫϩʔϧόʔͷ৭͕ϞʔυʹΑͬͯมߋ͞ΕΔࣄ͕͋Δ
    w Ө͕࢖͑ͳ͍ ͱ͍͏͔ҙຯΛͳ͞ͳ͍
    ͷͰ৭ͰϨΠϠʔΛදݱ͢Δඞཁ
    ͕͋Δ
    

    View Slide

14. ஍ࠈ͸͔͜͜Β
    

    View Slide

15. ຊ౰ͷ஍ࠈ
    

    View Slide

16. ຊ౰ͷ஍ࠈ
    

    View Slide

17. ຊ౰ͷ஍ࠈ
    *#Ͱ৭Λ௚઀ࢦఆ
    

    View Slide

18. ຊ౰ͷ஍ࠈ
    *#Ͱ৭Λ௚઀ࢦఆ
    view.backgroundColor = .white
    ίʔυͰ৭Λ௚઀ࢦఆ
    

    View Slide

19. ຊ౰ͷ஍ࠈ
    *#Ͱ৭Λ௚઀ࢦఆ
    view.backgroundColor = .white
    ίʔυͰ৭Λ௚઀ࢦఆ
    എܠ͕നΛલఏͱͨ͠ը૾ୡ
    

    View Slide

20. ·ͱΊ
    w ͳΔ΂͘%BSLNPEFʹ͸ରԠ͍͖͍ͯͨ͠ॴଘ
    w *#΍ίʔυͰ৭Λ௚઀ࢦఆ͍ͯ͠ΔՕॴ͕͋Ε͹ࠓͷ͏ͪʹ$PMPS"TTFU
    Խ͓͖͍ͯͨ͠
    w ໨΍όοςϦʔʹ༏͘͠ͳΖ͏
    

    View Slide

21. View Slide

22. • αʔόʔαΠυΤϯδχΞ (PHP, Golang, AWS)
    • AndroidΤϯδχΞ (Kotlin)
    • iOSΤϯδχΞ (Swift)
    TimersͰ͸ݱࡏΤϯδχΞશ৬छ࠾༻தʂ

    ৄ͘͠͸”Timers”Ͱݕࡧ
    

    View Slide

23. 5IBOLZPV&
    ϕʔλ൛ͷ಺༰ʹ͸มߋ͕ՃΘΔՄೳੑ͕͋Γ·͢ɻ

    ਖ਼֬ੑͷ୲อ͸ग़དྷͳ͍ࢫΛྃ͝ঝ͍ͩ͘͞ɻ
    

    View Slide