実践Dark Mode対応 / Implementing Dark Mode

NCMB Study #9「iOS13」で発表したスライドです。
Qiitaで記事にもしています
(https://qiita.com/hirothings/items/4834481d170332e173f5)

参考資料:

WWDC video
https://developer.apple.com/videos/play/wwdc2019/214/

Human Interface Guidelines
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/

sample code
https://developer.apple.com/documentation/uikit/appearance_customization/adopting_ios_dark_mode

Transcript

1. ࣮ફDark ModeରԠ @hirothings
2. ࣗݾ঺հ • @hirothings (Objective-ͻΖC) • ݩϥʔϝϯ԰ళ௕ϓϩάϥϚʔ • ৭ʑ͋ͬͯݱࡏiOSσϕϩούʔ
3. ৭ͷࢦఆʹ͍ͭͯ
4. μʔΫϞʔυରԠ࣌ͷ৭ઃܭʹ͍ͭͯ Human Interface GuidelinesΑΓ • ηϚϯςΟοΫΧϥʔΛ࢖༻͢Δ͜ͱ(label, separator, systemBackground..etc) • γεςϜఆٛͷ৭Λ࢖༻͢Δͱɺલܠͱഎܠͷίϯςϯπؒͷద੾ͳίϯ τϥετൺ͕อূ͞ΕΔ(ޙड़) • ΧελϜΧϥʔͷ৔߹ɺಛʹখ͍͞ςΩετͷ৔߹ɺίϯτϥετൺ7ɿ1 Λ໨ࢦ͢͜ͱ • μʔΫϞʔυͰίϯςϯπʹന͍എܠΛ࢖༻͢Δඞཁ͕͋Δ৔߹͸ɺपғ ͷ҉͍ίϯςϯπʹରͯ͠എܠ͕ޫΒͳ͍Α͏ʹɺগ͠҉͍നΛબ୒͢Δ ͜ͱ
5. Color SetΛ׆༻͢Δ
6. Color SetΛ׆༻͢Δ Light Dark Any
7. Color SetΛ׆༻͢Δ SwiftGenͳͲΛ࢖ͬͯɺίʔυ͔Βࢀর͢Δ࣌ʹλΠϓηʔϑʹͳΔΑ͏ରԠ͢Δͱ ͞Βʹศརɻ ը૾ͷAssetsͱ৭ͷAssets͸෼͚ͯ؅ཧ͢Δͱݟ΍͍͢
8. CONTRAST CHECKERͰίϯτϥετൺͷ֬ೝ͕Ͱ͖Δ https://contrastchecker.com/
9. ը૾ʹ͍ͭͯ
10. SF Symbols SF SymbolsΛ࢖͏ͱࣗಈͰ྆ϞʔυରԠͰ͖Δ
11. SF Symbols SF Symbolsʹ͍ͭͯิ଍ • 1500Ҏ্ͷΞΠίϯηοτ • 9ͭͷ΢ΣΠτ • iOS 13~ • SF Symbols appͰϓϨϏϡʔ͕Մೳ (લεϥΠυͷεΫγϣ΋͜Ε) • https://developer.apple.com/design/human-interface-guidelines/sf- symbols/overview/ • download the SF Symbols app. ͷ෦෼͔ΒDLͰ͖Δ..(෼͔ΓͮΒ͍)
12. Image Assets Color Setಉ༷ɺμʔΫɾϥΠτࢦఆ͕Մೳ
13. Background Colorʹ͍ͭͯ
14. γεςϜఆٛͷഎܠ৭ΛͳΔ΂͘࢖͏ γεςϜఆٛͷ৭Λ࢖༻͢ΔͱɺϑΥΞάϥ΢ϯυͱόοΫάϥ ΢ϯυͷίϯςϯπؒͷద੾ͳίϯτϥετൺ͕อূ͞ΕΔ “Using system-defined colors ensures a proper contrast ratio between your foreground and background content.” (HIG) .systemBackgroundColor .secondarySystemBackground .. etc
15. γεςϜఆٛͷഎܠ৭ΛͳΔ΂͘࢖͏ ϑΥΞάϥ΢ϯυ(Modal) όοΫάϥ΢ϯυ
16. γεςϜఆٛͷഎܠ৭ΛͳΔ΂͘࢖͏ ϑΥΞάϥ΢ϯυ(Modal) όοΫάϥ΢ϯυ Ϟʔμϧͷഎܠ৭ ͷํ͕શମతʹ ໌Δ͍
17. γεςϜఆٛͷഎܠ৭ΛͳΔ΂͘࢖͏ • γεςϜఆٛͷഎܠ৭Λ࢖͏ϝϦοτ • ࣗ਎ͷViewͷ֊૚ʹԠͯ͡ɺ৭߹͍ΛࣗಈͰௐ੔ͯ͘͠ΕΔ • .systemBackgroundColor ͳͲΛࢦఆ͢Δ͚ͩ • ͜ͷը໘͸Ϟʔμϧ͔ͩΒ..ͱҰͭҰͭΧελϜΧϥʔΛࢦ ఆ͢Δͷ͸ഁ୼͢Δ
18. γεςϜఆٛͷഎܠ৭ΛͳΔ΂͘࢖͏ • γεςϜఆٛͷഎܠ৭Λ࢖͏ฐ֐ • LightϞʔυ࣌ͷഎܠ৭ΛΧελϚΠζͰ͖ͳ͍ ͜͏͍͏୶͍τʔϯͷഎܠ৭ΛΞϓϦͷ τʔϯʹ߹Θͤͯࢦఆ͍ͨ࣌͠ͳͲ
19. ίʔυͰରԠ͢Δ
20. ίʔυͰରԠ͕ඞਢͷՕॴ CALayer • borderColor • shadowOpacity • shadowColor ..etc
21. ϢʔβʔͷDark / Light੾Γସ͑ʹϦΞϧλΠϜʹ ൓Ԡ͢ΔͨΊ UITraitCollectionΛ࢖͏ • OSͷΞϐΞϥϯε͕੾ΓସΘͬͨλΠϛϯάͰݺ͹ΕΔ ྫ͑͹Ϣʔβʔ͕μʔΫϞʔυʹ੾Γସ͑ͨλΠϛϯάͰ
 ΞΠίϯΛμʔΫϞʔυ࢓༷ʹ͢Δ͜ͱ΋Մೳ
22. ϢʔβʔͷDark / Light੾Γସ͑ʹϦΞϧλΠϜʹ ൓Ԡ͢ΔͨΊ https://developer.apple.com/videos/play/wwdc2019/214/ UITraitCollectionΛ࢖͏ • UIColorͷΫϩʔδϟΛ࢖ͬͨॳظԽ΋͋Γ
23. μʔΫϞʔυͷσόοάʹ͍ͭͯ
24. Storyboard, XibΛ࢖͏ͱ֬ೝ͕ϥΫ
25. Storyboard, XibΛ࢖͏ͱ֬ೝ͕ϥΫ ϥΠτɾμʔΫͷ؆қ֬ೝ͕ Ϗϧυͳ͠Ͱग़དྷΔ
26. γϛϡϨʔλͷLight / Dark੾Γସ͑΋ XcodeͰ΍ΔͱϥΫ Accessibilityͷઃఆ΋
27. ࣮ػͩͱίϯτϩʔϧηϯλʔͰαοͱม͑ΒΕΔ ઃఆ > ίϯτϩʔϧηϯλʔ > ίϯτϩʔϧηϯλʔΛΧελϚΠζ
28. UITraitCollectionͷΠϕϯτͷσόοά traitCollectionDidChange(_:) ΍ willTransition(to:with:)ͷ ϩΪϯά͕Մೳ(iOS13~) https://developer.apple.com/videos/play/wwdc2019/214/
29. ଞTIPS • ྫ͑εϓϥογϡ࣮૷͍ͯ͠ͳͯ͘΋ɺLaunchScreenͷμʔΫ ϞʔυରԠ͸ࡁ·ͤΔ͜ͱ • ΞϓϦىಈ࣌ɺҰॠന͍ը໘͕දࣔ͞ΕΔ • ๨Εͯͦͷ··ϦϦʔεͨ͠ • (SlackͷΞϓϦ΋ରԠ๨Εͯͨˠ) • μʔΫϞʔυରԠ͠ͳ͍৔߹͸ɺInfo-Plistʹ UIUserInterfaceStyle: LightΛࢦఆ͢Δ
30. μʔΫϞʔυରԠͷϋʔυϧʹ͍ͭͯ • ը໘਺͸ແ࿦ɺطଘΞϓϦͷ৭ͷ؅ཧঢ়ଶʹΑͬͯมΘΔ • Named ColorsΛఆٛ͢Δ͔͠ͳ͍ͷͰɺରԠ͢Δͱࣗવͱ৭ ͷ؅ཧ͕੔ཧ͞ΕΔ • ΞϓϦͷੑ࣭ʹΑΔ • ϢʔςΟϦςΟܥͷΞϓϦͩͱൺֱతָ͔ɻधཁ΋͋Γͦ͏ • ΠϥετΛ;ΜͩΜʹ࢖͍ͬͯΔΞϓϦͳͲμʔΫϞʔυͱ ͷ૬ੑ͕೉͍͠΋ͷ΋͋Δ
31. νʔϜ։ൃͰରԠ͢Δ৔߹ • ίϯϙʔωϯτϨϕϧͰͷμʔΫϞʔυͷݕূ͸ඞཁ • 1ը໘ͣͭμʔΫϞʔυ༻ͷը໘Λى͜͢ͷ͸ݶք͕͋Γͦ͏(५ ୔ʹσβΠφʔͷϦιʔε͕͋ΔͳΒ΍ΕΔ) • ίϯϙʔωϯτͷݕূΛࡁ·ͤͨΒɺ࣮ࡍʹը໘Λ࣮૷ͯ͠σβ Πφʔͱ౎౓֬ೝ͢ΔελΠϧ͕ݱ࣮ղ͔ͱࢥΘΕΔ • ϓϩμΫτͰ࣮૷͍ͯ͠ͳ͍ͷͰໝ૝Ϩϕϧ..