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

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

 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

Tatsuya Tanaka

January 07, 2020
Tweet

More Decks by Tatsuya Tanaka

Other Decks in Programming

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