Yahoo!乗換案内のダークモード対応

Bonfire iOS #7 (#yjbonfire) の発表資料です。
https://yj-meetup.connpass.com/event/157369/

ダークモード対応を効率化、Yahoo!乗換案内アプリの事例紹介
https://techblog.yahoo.co.jp/entry/20191212788765/

- https://github.com/tattn
- https://qiita.com/tattn
- https://twitter.com/tanakasan2525

Transcript

1. Yahoo!৐׵Ҋ಺ͷμʔΫϞʔυରԠ
   ాதୡ໵ (@tattn)
   #bonfire iOS #7
   Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
   

   View Slide

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

   View Slide

3. Yahoo! JAPAN Advent Calendar 2019
   Yahoo! JAPAN Tech Blogʹ
   μʔΫϞʔυʹؔ͢ΔهࣄΛॻ͍ͨͷͰͥͻݟͯΈ͍ͯͩ͘͞
   IUUQTUFDICMPHZBIPPDPKQFOUSZ
   

   View Slide

4. Qiita Advent Calendar 2019
   iOSͱSwiftͷAdvent Calendarʹ΋৭ʑॻ͖·ͨ͠
   ࢖͏ͱख์ͤͳ͘ͳΔ4XJGU&YUFOTJPOू 4XJGU൛
   
   IUUQTRJJUBDPNUBUUOJUFNT⒎FCDFDCF
   4XJGU6*ΞϓϦ։ൃ࣮ફϙΠϯτ
   IUUQTRJJUBDPNUBUUOJUFNTGFFGFBE
   

   View Slide

5. ৐׵Ҋ಺ΞϓϦ͸
   iOS 13ϦϦʔεॳ೔ʹ
   μʔΫϞʔυରԠ͠·ͨ͠
   IUUQTUXJUUFSDPNUBOBLBTBOTUBUVT
   

   View Slide

6. μʔΫϞʔυʹରԠͨ͠ཧ༝
   

   View Slide

7. μʔΫϞʔυʹରԠͨ͠ཧ༝
   WWDC19ʹࢀՃ͠ΩϟονΞοϓͨ͠தͰ
   Apple͕͔ͳΓྗΛೖΕ͍ͯΔػೳͩͱײͨ͡
   ৐׵Ҋ಺ΞϓϦ͸iOSͷ৽ػೳΛੵۃతʹऔΓೖΕ͍ͯ·͢ɻ
   App Storeʹಛू͞ΕΔνϟϯε
   iOS 12Ͱ͸SiriγϣʔτΧοτʹରԠ͠·ͨ͠ɻ
   

   View Slide

8. ਐΊํ
   

   View Slide

9. ޻਺ͷݟੵ΋Γ
   Ͳͷ͘Β͍ͰऴΘΔͷ͔෼͔Βͳ͚Ε͹ɺ
   ຊ֨తͳ࡞ۀʹ͸౿Έ੾Ε·ͤΜ
   (౰࣌ͷԾͷσβΠϯ)
   ͍͔ͭ͘ͷը໘ͷԾͷσβΠϯΛܾΊɺ
   ͦͷରԠʹͲΕ͘Β͍͔͔Δͷ͔Λܭଌ
   ը໘਺×ฏۉ࡞ۀ࣌ؒ+α (৭ඍௐ੔࣌ؒ౳)
   ͱ͍͏ͬ͘͟ΓܭࢉͰ޻਺Λࢉग़͠·ͨ͠
   

   View Slide

10. ࡞ۀ෼୲
    1ը໘1Storyboardߏ੒ͳͷͰը໘͝ͱʹ࡞ۀ෼୲ɻ
    ૉ๿ͳIssueͰλεΫ؅ཧɻ
    σβΠφʔ΋όϦόϦXcodeͰ
    ৭ઃఆΛ͍ͯ͠·͢ɻ
    ΤϯδχΞ͸ಈతͳ෦෼Λ༏ઌతʹରԠͨ͠Γɺ
    εΫϦϓτʹΑΔҰׅઃఆΛͨ͠Γ͠·ͨ͠ɻ
    

    View Slide

11. Asset CatalogͰͷ৭ఆٛ
    Asset CatalogͰఆٛͨ͠৭Λ࢖͏ͨΊʹ͸
    αϙʔτόʔδϣϯΛiOS 11Ҏ্ʹ͢Δඞཁ͕͋Γ·͢ɻ
    StoryboardΛ׆༻͓ͯ͠Γɺ
    ͜Εͳ͠ʹ͸ରԠ͕͔ͳΓࠔ೉ͳͨΊɺ
    Ϣʔβʔൺ཰͕͔ͳΓগͳ͘ͳ͍ͬͯͨ
    iOS 10ͷαϙʔτΛ੾Γ·ͨ͠ɻ
    

    View Slide

12. ը૾͸ޙճ͠ʹͯ͠৭ઃఆΛਐΊΔ
    ৐׵Ҋ಺ʹ͸500छྨΛ௒͑Δը૾σʔλ͕͋Γ·͢…
    ͜ΕΒͷμʔΫϞʔυ൛ը૾Λ࡞Δͷ͸
    ࢸ೉ͷٕͳͷͰ৭ઃఆͱฒߦͯ͠
    ਐΊ͍͖ͯͨͩ·ͨ͠ɻ
    ѹ౗తײँ
    (ը૾ࠩ͠ସ͑લ)
    (΋ͪΖΜɺ͢΂ͯ࢖༻͍ͯ͠Δ΋ͷͰ͢)
    

    View Slide

13. ٧·ͬͨͱ͜Ζ
    IUUQTRJJUBDPNUBUUOJUFNTDCFEEDFBB
    ʮμʔΫϞʔυରԠͰࠓ஫ҙ͢΂͖͜ͱʯʹ΋Ұ෦ॻ͖·ͨ͠
    

    View Slide

14. iOS 12ҎԼͰϥϕϧ͕ਅͬࠇʹͳΔ໰୊
    ←ϚεΫॲཧ͞Ε͍ͯΔ͔ͷΑ͏ͳ
    ࠇ͍˙͕ݱΕ·ͨ͠… (iOS 12ҎԼͷΈ)
    UILabelͷisOpaque͕YESͰ
    എܠ৭ະઃఆʹͳ͍ͬͯΔͱ
    iOS 13ͷSDK͔ΒਅͬࠇʹͳΔΑ͏Ͱ͢ɻ
    ࠓճ͸NOʹઃఆ͠·ͨ͠ɻ
    

    View Slide

15. iOS 12ҎԼͰ৭͕มΘΒͳ͍
    Ұ൪ૣ͍/͍҆/ָͳ෦෼͕
    ΦϨϯδʹͳΔ࢓༷Ͱ͕͢
    iOS 12ҎԼͰ͸΄΅ΦϨϯδʹ
    ͳ͍ͬͯ·ͨ͠…
    ޡ ਖ਼
    

    View Slide

16. iOS 12ҎԼͰ৭͕มΘΒͳ͍
    iOS 12ҎԼͰ͸Xib/StoryboardͰ
    Asset Catalogͷ৭Λઃఆ͍ͯ͠Δͱ
    ίʔυͰઃఆͨ͠৭্͕ॻ͖͞Εɺ
    Xib/StoryboardͰͷ৭͕දࣔ͞ΕΔ
    έʔε͕͋Γ·͢ɻ
    ޡ ਖ਼
    XibΠϯελϯεԽ→ίʔυͰ৭ઃఆ→Xib಺Ͱઃఆͨ͠৭ͷ൓ө
    

    View Slide

17. iOS 12ҎԼͰ৭͕มΘΒͳ͍
    ɾXib/StoryboardͰAsset Catalogͷ৭Λࢦఆ͠ͳ͍
    ɾDispatchQueue.main.asyncͳͲͰ
    ɹ৭ઃఆΛ஗Ԇͤ͞Δ
    ରԠํ๏
    ೉қ౓ͷߴ͍ؒҧ͍୳͠ʹͳΔͷͰ
    iOS 12ҎԼͰ͸஫ҙਂ͘
    ৭ΛνΣοΫ͠·͠ΐ͏
    ޡ ਖ਼
    

    View Slide

18. υοάϑʔσΟϯά͠΍͍͢ঢ়ଶΛ࡞Δ
    

    View Slide

19. υοάϑʔσΟϯά
    UIͷ໰୊ͳͲΛUIςετͰݕग़͢Δ͜ͱ΋େ੾Ͱ͕͢
    தͷਓ͕೔ৗతʹϑΟʔυόοΫͰ͖Δঢ়ଶʹ͢Δ͜ͱ΋େࣄͰ͢ɻ
    IUUQTHJUIVCDPNZBIPPKBQBO"QQ'FFECBDLJPT
    ࣾ಺൛ͷΞϓϦͷΈ
    ಛผͳϑΟʔυόοΫػೳΛ͚ͭͯ
    ͍ͭͰ΋ؾܰʹؾʹͳΔ఺Λ࢒ͤΔΑ͏ʹ͍ͯ͠·͢
    ͪ͜Β͸OSSͰ͢ɻૢ࡞Λಈըʹͯ͠SlackʹPostͰ͖ͨΓ͠·͢ɻ
    (Android൛΋͋Γ·͢)
    

    View Slide

20. ࠷ޙʹ
    

    View Slide

21. ΤϯδχΞ͕৽ػೳಋೖΛϦʔυ͢΂͖
    WWDCͷΩϟονΞοϓΛͨ͠ΓϦϑΝϨϯεΛݟ͍ͯΔ
    ΤϯδχΞ͕iOSͷ৽ػೳʹҰ൪ৄ͍͠͸ͣʂ
    

    View Slide

22. ΤϯδχΞ͕৽ػೳಋೖΛϦʔυ͢΂͖
    ࣗ෼͸ͻͨ͢Β৽ػೳͷαϯϓϧΛ৮ΓɺίʔυΛॻ͍ͯ·͢ɻ
    ಈ࡞ͷ࿥ըΛSlackʹྲྀͨ͠Γɺ࡞ͬͨΞϓϦΛ഑෍ͨ͠Γͯ͠ɺ
    ٕज़ϝϯόʔҎ֎ʹ΋ػೳΛ঺հ͠ɺಋೖΛਪਐ͍ͯ͠·͢ɻ
    ͦΕͰUX͕޲্͢Ε͹Ϣʔβʔ͕૿͑ͯྑ͠ɺ
    ΤϯδχΞతʹ΋৽ػೳ͕৮Εָ͍ͯ͠Win-Winઓུ
    

    View Slide

23. ΤϯδχΞ͕৽ػೳಋೖΛϦʔυ͢΂͖
    ৽ػೳ/৽ٕज़ʹૉૣ͘औΓ૊ΉจԽ͕ͳ͍νʔϜʹډΔਓ͸
    ϓϩδΣΫτͷϝϯόʔ΍εέδϡʔϧΛ؅ཧ͍ͯ͠Δਓʹ
    ࣄલʹ৽ػೳಋೖ΍ٕज़తνϟϨϯδͷେ੾͞Λ఻͑ɺ
    ࣌ؒΛ֬อ͢Δ͜ͱ͕·ͣ͸େࣄ
    

    View Slide

24. ·ͱΊ
    • μʔΫϞʔυରԠʹ͸νʔϜશһͷڠྗ͕ඞཁ
    • μʔΫϞʔυରԠ࣌ʹiOS 12ҎԼ΋αϙʔτ͢Δ৔߹͸
    ͦΕΒͷಈ࡞֬ೝΛ๨Εͣʹ
    • υοάϑʔσΟϯά͠΍͍͢؀ڥΛ࡞ͬͯ
    தͷਓ͕୭Ͱ΋ϑΟʔυόοΫͰ͖Δঢ়ଶʹ͢Δͷ͕େࣄ
    

    View Slide