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

by Tatsuya Tanaka

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Slide 3

Slide 3 text

࠷ۙɺόʔνϟϧͳମΛखʹೖΕ·ͨ͠ Unite Tokyoͱ͍͏ΠϕϯτͰશ਎3DεΩϟϯͯ͠΋Β͍·ͨ͠  ॊೈͳମΛखʹೖΕΔͨΊʹϘʔϯΛೖΕΔ࡞ۀ͕େมͰͨ͠ˠ IUUQTUXJUUFSDPNUBOBLBTBOTUBUVT

Slide 4

Slide 4 text

৐׵Ҋ಺͸  iOS 13ϦϦʔεॳ೔ʹ  μʔΫϞʔυରԠ͠·ͨ͠ IUUQTUXJUUFSDPNUBOBLBTBOTUBUVT

Slide 5

Slide 5 text

ͭΒΈ͕ࢁ੝ΓͩͬͨͷͰ  ͦͷҰ෦Λ঺հ͠·͢

Slide 6

Slide 6 text

ಈ࡞֬ೝ؀ڥ • macOS Mojave 10.14.6 • Xcode 11.0 (11A420a) ؀ڥґଘͷՄೳੑ΋ߴ͍ͨΊɺࡌ͓͖ͤͯ·͢  CatalinaͳΒ௚ͬͯΔΑʂͳͲͷ஌ݟ͕͋Ε͹ڭ͑ͯԼ͍͞ʂ

Slide 7

Slide 7 text

iOS 11ͰColor Assetsͷ৭Λ  औಘͰ͖ͳ͍໰୊ (ݱࡏ͸मਖ਼͞Ε·ͨ͠)

Slide 8

Slide 8 text

Xcode 11 GM1ͰΧϥʔΞηοτ͕࢖͑ͳ͔ͬͨ (iOS 11) Xcode 11 GM1ͰϏϧυͨ͠ΞϓϦΛiOS 11Ͱಈ͔͢ͱ  UIColor(named:_) ͕ৗʹnilΛฦ͢໰୊ʹ೰·͞Ε·ͨ͠ iOS 13ϦϦʔε೔ͷ3೔લ·Ͱ͜ͷঢ়گͰ  ͔ͳΓযΓ·ͨ͠ (ॳ೔ϦϦʔεΛ໨ࢦ͍ͯͨͨ͠Ί) Xcode 11 GM2Ͱແࣄ௚Γ·ͨ͠…

Slide 9

Slide 9 text

iOS 12ҎԼͰμʔΫϞʔυͷ৭͕ දࣔ͞Εͯ͠·͏໰୊  (͜Ε͸ݱ࣌఺Ͱ΋ى͖͍ͯͯ  ͔ͳΓࠔ͍ͬͯ·͢) IUUQTHJUIVCDPNUBUUO8FJSE%BSL.PEFJ04 ࠶ݱϦϙδτϦ:

Slide 10

Slide 10 text

iOS 12ҎԼͰμʔΫϞʔυͷ৭͕දࣔ͞ΕΔ iOS 13Ͱಈ࡞֬ೝΛ͠ͳ͕Β։ൃΛਐΊɺ  ͋Δఔ౓ਐΜͩஈ֊ͰiOS 12ͷ୺຤Ͱ֬ೝΛ͢Δͱ  Կނ͔Ұ෦ͷ৭͕μʔΫϞʔυͰදࣔ͞Ε͍ͯ·ͨ͠

Slide 11

Slide 11 text

iOS 12ҎԼͰμʔΫϞʔυͷ৭͕දࣔ͞ΕΔ ৭ʑݕূ͍ͯ͘͠தͰҎԼͷ໰୊͕෼͔Γ·ͨ͠ • MacΛμʔΫϞʔυʹ͍ͯ͠Δͱɺxib/StoryboardʹຒΊࠐ·ΕΔ  ΧελϜ৭ͷRGB͕μʔΫϞʔυͷ৭ʹͳΔ • iOS 13Ͱ͸֎؍Ϟʔυʹ߹Θͤͨਖ਼͍͠৭͕දࣔ͞ΕΔ͕ɺ  iOS 12ҎԼͰ͸ຒΊࠐ·Εͨ৭͕දࣔ͞Εͯ͠·͏έʔε͕͋Δ • xib/StoryboardʹΧελϜ৭Λઃఆͨ͠ޙɺ  Asset CatalogͰͦͷ৭Λฤूͯ͠΋Viewଆͷ৭͕มΘΒͳ͍ (iOS 12ҎԼͷΈ) ※Asset CatalogͰ࡞੒ͨ͠৭ͷ͜ͱΛ͜͜Ͱ͸ΧελϜ৭ͱݺͿ͜ͱʹ͠·͢

Slide 12

Slide 12 text

MacΛμʔΫϞʔυʹ͍ͯ͠Δͱɺxib/StoryboardʹຒΊࠐ·ΕΔ  ΧελϜ৭ͷRGB͕μʔΫϞʔυͷ৭ʹͳΔ Mac͕ϥΠτϞʔυͷ࣌ Mac͕μʔΫϞʔυͷ࣌

Slide 13

Slide 13 text

MacΛμʔΫϞʔυʹ͍ͯ͠Δͱɺxib/StoryboardʹຒΊࠐ·ΕΔ  ΧελϜ৭ͷRGB͕μʔΫϞʔυͷ৭ʹͳΔ class View: UIView { @IBInspectable var ibBackgroundColor: UIColor = .white { didSet { backgroundColor = ibBackgroundColor } } } ←͜ͷΑ͏ͳViewΛ༻ҙ BackgroundͰ৭Λઃఆ IBInspectableͰ৭Λઃఆ MacΛμʔΫϞʔυ  ʹ͍ͯ͠·͢

Slide 14

Slide 14 text

MacΛμʔΫϞʔυʹ͍ͯ͠Δͱɺxib/StoryboardʹຒΊࠐ·ΕΔ  ΧελϜ৭ͷRGB͕μʔΫϞʔυͷ৭ʹͳΔ ←BackgroundͰઃఆͨ͠ΧελϜ৭ ←IBInspectableͰઃఆͨ͠ΧελϜ৭ OMG StoryboardʹຒΊࠐ·Εͨ৭͕ग़ͯ͠·͍ͬͯ·͢

Slide 15

Slide 15 text

MacΛμʔΫϞʔυʹ͍ͯ͠Δͱɺxib/StoryboardʹຒΊࠐ·ΕΔ  ΧελϜ৭ͷRGB͕μʔΫϞʔυͷ৭ʹͳΔ OMG iOS 12 iOS 13 iOS 13

Slide 16

Slide 16 text

iOS 12ҎԼͰμʔΫϞʔυͷ৭͕දࣔ͞ΕΔ શͯͷύλʔϯ͸೺ѲͰ͖͍ͯ·ͤΜ͕  IBInspectable (User Deﬁned Runtime Attributes) Ͱ  ઃఆͨ͠৭͸͜ͷݱ৅͕ى͖΍͍͢Ͱ͢ ͦΕҎ֎ͷͱ͖΋ൃੜ͢Δ͜ͱ͕͋ͬͨͨΊɺ  μʔΫϞʔυରԠ͸MacΛϥΠτϞʔυʹͯ͠  ࡞ۀ͢ΔͷΛ͓͢͢Ί͠·͢

Slide 17

Slide 17 text

Asset CatalogͰͦͷ৭Λฤूͯ͠΋Viewଆͷ৭͕มΘΒͳ͍   (iOS 12ҎԼͷΈ) iOS 12 iOS 13 iOS 12ͷIBInspectableͷํͷ  ৭͕มΘΒͳ͍… OMG

Slide 18

Slide 18 text

ͱʹ͔͘৭Λม͑ͨΒ࠶ઃఆ ৭Λޙ͔Βมߋͯ͠΋Ұ෦มΘΒͳ͍Օॴ͕͋ΔͨΊɺ  ࢀরઌͷxib/Storyboardͷ৭Λ࠶ઃఆͨ͠΄͏͕ྑͦ͞͏Ͱ͢ Ͳ͔͜ҰՕॴΛҰ୴ผͷ৭ʹ͠ɺ  ·ͨݩͷ৭ʹ໭͢ͱͦͷϑΝΠϧ಺ͷ ৭͸શ෦ਖ਼͍͠৭ʹߋ৽͞Ε·ͨ͠

Slide 19

Slide 19 text

εϓϥογϡεΫϦʔϯͷ  ը૾͕ߋ৽͞Εͳ͍໰୊

Slide 20

Slide 20 text

εϓϥογϡεΫϦʔϯͷը૾͕ߋ৽͞Εͳ͍ Launch Screen Image not Updating!!! IUUQTGPSVNTEFWFMPQFSBQQMFDPNUISFBE εϓϥογϡεΫϦʔϯͷը૾Λ  μʔΫϞʔυରԠͷͨΊʹࠩ͠ସ͑ͯ΋  ը૾͕ߋ৽͞Εͣɺݹ͍ը૾͕ग़ͯ͠·͏έʔε͕͋Γ·ͨ͠ ͜Ε͸ੲ͔Β͋Δ໰୊ͰɺLaunchScreenͷStoryboardʹ  xcassetsͷը૾Λઃఆ͍ͯ͠Δͱى͖ΔΑ͏Ͱ͢

Slide 21

Slide 21 text

ը૾͕μʔΫʹͳΒͳ͍໰୊

Slide 22

Slide 22 text

ը૾͕μʔΫʹͳΒͳ͍໰୊ IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJUVJJNBHFSFTJ[BCMFJNBHF resizableImage(withCapInsets:resizingMode:)౳Ͱ  ը૾Λ࡞Γ௚͢ͱͦͷ࣌ͷiOSͷ֎؍Ϟʔυ༻ͷը૾͚͔ͩ͠  ੜ੒ͯ͘͠Ε·ͤΜ →ΞϓϦىಈதʹϥΠτ→μʔΫʹͯ͠΋ը૾͕มΘΒͳ͍  ɹ໰୊͕ى͖·͢…

Slide 23

Slide 23 text

ը૾͕μʔΫʹͳΒͳ͍໰୊ resizableImage(withCapInsets:resizingMode:)͸  xcassetsͰͷεϥΠεͷઃఆʹஔ͖׵͑·͠ΐ͏ ଞʹͲ͏ͯ͠΋ը૾Λ࠶ੜ੒͢Δඞཁ͕͋Δ৔߹͸  ద੾ͳϝιουͰը૾Λߋ৽͢Δඞཁ͕͋Γ·͢ override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {

Slide 24

Slide 24 text

·ͱΊ

Slide 25

Slide 25 text

·ͱΊ • ࣗ෼͕ѱ͍ͷ͔ͦΕͱ΋…໰୊ʹ೰·͞Ε·ͨ͠ • μʔΫϞʔυରԠ࣌ʹiOS 12ҎԼ΋αϙʔτ͢Δ৔߹͸  ͦΕΒͷಈ࡞֬ೝΛ๨Εͣʹ • όάϨϙʔτΛ6ͭૹΓ·ͨ͠ (࠶ݱੑ͕ߴ͍΋ͷͷΈ)  ɾiOS 13΍Xcode 11ʹ͸·ͩ·ͩ՝୊͕͋ΔͷͰ  ɹͨ͘͞ΜϑΟʔυόοΫ͍͖ͯ͠·͠ΐ͏ • ibtoolͰ৭ΛҰׅߋ৽Ͱ͖ͦ͏ͳؾ΋͠·͢ (Ͱ͖ͨํ͍ͨΒڭ͑ͯ΄͍͠Ͱ͢)