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

Cookpad TechConf 2019 Komerco Service Dev

kenshir0f
February 27, 2019

Cookpad TechConf 2019 Komerco Service Dev

Cookpad TechConf 2019にて「新規サービス開発を加速させる技術とデザイン」というタイトルでお話したスライドです。
https://techconf.cookpad.com/2019/

kenshir0f

February 27, 2019
Tweet

More Decks by kenshir0f

Other Decks in Design

Transcript

  1. ౻Ҫ ݠ࢜࿕
    Komercoࣄۀ෦
    ৽نαʔϏε։ൃΛ
    Ճ଎ͤ͞Δٕज़ͱσβΠϯ

    View full-size slide

  2. ࣗݾ঺հ
    2
    ɾ౻Ҫ ݠ࢜࿕(;͚͡Μ)
    ɾKomercoࣄۀ෦ / σβΠφʔ
    ɾ2017೥৽ଔೖࣾ
    ɹ @kenshir0f

    View full-size slide

  3. Komerco
    4
    ɾ2018೥6݄ʹϦϦʔε
    ɾྉཧָ͕͘͠ͳΔ৯ࡐ΍͏ͭΘɺྉཧಓ۩͕ങ͑ΔαʔϏε
    ɾݱࡏ͸iOSΞϓϦͷΈαʔϏεΛఏڙ

    View full-size slide

  4. Komercoͱ͍͏৽نࣄۀͷ
    σβΠφʔͷऔΓ૊Έ

    View full-size slide

  5. ΞδΣϯμ
    7
    ্ཱͪ͛ ։ൃ ϦϦʔε
    ։ൃ࣌ͷऔΓ૊ΈΛ࿩͠·͢

    View full-size slide

  6. KomercoͷαʔϏε։ൃ
    8

    View full-size slide

  7. ౰࣌ͷ։ൃମ੍
    9
    ɾiOSΤϯδχΞ 4
    ɾσβΠφʔ 1
    ɾσΟϨΫλʔ 1
    ɾόοΫΤϯυ͸Firebase

    View full-size slide

  8. ٻΊΒΕΔ͜ͱ͸εϐʔυ
    10
    ɾ࢓༷͸શମͷମݧ͔Βܾ·Δ͜ͱ΋͋Δ
    ɹɹɾσβΠϯ͕ͳ͍ͱ࢓༷͕ܾΊΒΕͳ͍
    ɹɹɾ͖Ε͍ͳUI͸͋ͱ
    ɹɹɾࠓ͋ΔϦιʔεͰ͢͹΍͘࡞Δ

    View full-size slide

  9. 11
    100%
    9%41 AM
    komerco
    ঎඼Λग़඼͢Δ

    γϣοϓ؅ཧ
    ϝοηʔδ
    ঎඼؅ཧ
    ஫จ؅ཧ





    ঎඼؅ཧ
    ग़඼தͷ঎඼͕͋Γ·ͤΜ
    100%
    9%41 AM
    komerco 100%
    9%41 AM
    komerco

    ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖
    ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖
    ܙൺण԰ෑ
    ࡏݿ͋Γ
    #͓ṟ #ແண৭ #αονʔω
    ঎඼ͷઆ໌
    ˇ1,200 ΧʔτʹೖΕΔ

    View full-size slide

  10. 12
    100%
    9%41 AM
    komerco
    ঎඼Λग़඼͢Δ

    γϣοϓ؅ཧ
    ϝοηʔδ
    ঎඼؅ཧ
    ஫จ؅ཧ





    ঎඼؅ཧ
    ग़඼தͷ঎඼͕͋Γ·ͤΜ
    100%
    9%41 AM
    komerco 100%
    9%41 AM
    komerco

    ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖
    ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖
    ܙൺण԰ෑ
    ࡏݿ͋Γ
    #͓ṟ #ແண৭ #αονʔω
    ঎඼ͷઆ໌
    ˇ1,200 ΧʔτʹೖΕΔ

    ΫοΫύουͷϝΠϯΧϥʔ
    طଘͷΞΠίϯ

    View full-size slide

  11. 13
    ؆୯ͳશମͷಈઢͷਤ

    View full-size slide

  12. UIσβΠϯͷ՝୊
    14
    ɾUI࡞੒ޙͷΤϯδχΞͱͷڞ༗͕େม
    ɹɹɾσβΠϯͷཤྺΛ࢒ͭͭ͠ɺ
    ɹɹɾϓϩτλΠϓ΋ߋ৽ͯ͠ɺ
    ɹɹɾมߋՕॴΛڞ༗͢Δඞཁ͕͋ͬͨ
    ɹɹɾσβΠϯ͢Δ͕࣌ؒͲΜͲΜݮΔ…

    View full-size slide

  13. σβΠϯ͕࣮૷εϐʔυʹ
    ؒʹ߹͓ͬͯΒΜ…

    View full-size slide

  14. ࣮૷εϐʔυʹ௥͍ͭͨ͘Ίʹม͑ͨ͜ͱ
    16
    1. ࢖͍ͬͯΔσβΠϯπʔϧΛม͑Δ
    2. σβΠϯίϯϙʔωϯτΛମܥతʹ؅ཧ͢Δ

    View full-size slide

  15. 1. σβΠϯπʔϧΛม͑Δ
    17
    Sketch Abstract Zeplin Marvel
    ؅ཧ ڞ༗ ϓϩτλΠϓ

    View full-size slide

  16. 18
    σβΠϯπʔϧ
    Figma

    View full-size slide

  17. Figma͕ศར͗͢Δ
    19
    ɾΦϯϥΠϯ্Ͱಉ࣌ฤू͕Ͱ͖Δ → ڞ༗ָ͕
    ɾσβΠϯมߋͷཤྺ΋ḷΕΔ → ؅ཧָ͕
    ɾϓϩτλΠϓ΋࡞ΕΔ → ߋ৽ָ͕
    ɾ ͸ศར
    ɾ ͸࠷ߴ

    View full-size slide

  18. 2. σβΠϯίϯϙʔωϯτΛମܥతʹ؅ཧ͢Δ
    20
    ɾAtomicDesignΛಋೖ

    View full-size slide

  19. AtomicDesignͱ͸ʁ
    21
    ɾίϯϙʔωϯτΛ࠷খ୯Ґʹ۠੾ͬͯ࠶ར༻ੑΛ্͛ͨ΍ͭ
    ɾ؅ཧ͠΍͘͢ɺϝϯς͠΍͍͢
    ɹɹ→҆৺͠ͳ͕ΒίϯϙʔωϯτΛ͍͡ΕΔ
    ɾFigmaʹҠߦͯ͠΍Γ΍͘͢ͳͬͨ

    View full-size slide

  20. SketchͰऔΓ૊Μͩͱ͖
    22
    ɾϑΝΠϧ͕େ͖͍
    ɾॏ͍

    View full-size slide

  21. SketchͰऔΓ૊Μͩͱ͖
    23
    ɾϑΝΠϧ͕େ͖͍
    ɾॏ͍
    ɾશମͷϑΝΠϧ؅ཧ͕େม
    ɾ൓өʹ͕͔͔࣌ؒΔ
    Atoms Molecules Organisms

    View full-size slide

  22. FigmaͰऔΓ૊Μͩͱ͖
    24
    Atoms Molecules Organisms ɾλϒͰݟ΍͍͢
    ɾͻͱͭͷΞϓϦͰ׬݁

    View full-size slide

  23. ࣮૷εϐʔυʹ௥͍ͭͨ͘Ίʹม͑ͨ͜ͱ·ͱΊ
    27
    1. ࢖͍ͬͯΔσβΠϯπʔϧΛม͑Δ
    ɹɹ→։ൃεϐʔυ্͕͕ͬͨ
    2. σβΠϯίϯϙʔωϯτΛମܥతʹ؅ཧ͢Δ
    ɹɹ→εϐʔυ͸্͕ͬͯਫ਼ਆతͳෛ୲΋ݮͬͨ
    ɹɹ→ߏஙʹ͕͔͔࣌ؒΔ

    View full-size slide

  24. ͔͜͜Βߋʹ։ൃεϐʔυΛ
    ্͛ΔͨΊʹऔΓ૊Μͩ͜ͱ

    View full-size slide

  25. UIΨΠυϥΠϯͷ࡞੒
    29

    View full-size slide

  26. UIΨΠυϥΠϯ
    30
    ɾFigma্ʹશମͰڞ௨ͷϧʔϧΛ࡞੒
    ɾ֬ೝͷίϛϡχέʔγϣϯΛݮΒ͓ͯ͠ޓ͍ͷ࡞ۀ࣌ؒΛ૿΍͢
    ɾ݁Ռͱͯ͠։ൃεϐʔυ্͕͕Δ

    View full-size slide

  27. ΞΠίϯϑΥϯτͷ࡞੒
    33

    View full-size slide

  28. ΞΠίϯը૾ͷ໰୊
    35
    ɾiOS͸@2x, @3xͱը૾͕ෳ਺ඞཁ
    ɹɹɾόʔδϣϯ͝ͱʹը૾Λอଘ͢Δͷ͸༰ྔͱ؅ཧ͕ݫ͍͠
    ɾ؅ཧը໘(Web)΋։ൃ͍ͯͨ͠ͷͰڞ௨Ϧιʔεʹ͍ͨ͠

    View full-size slide

  29. ΞΠίϯϑΥϯτͷ࡞੒
    37
    ɾϑΥϯτʹͯ͠Ϧιʔε͸ͻͱͭʹ
    ɹɹ→WebͱiOSͰڞ௨Ͱ࢖ָ͑ͯ
    ɾมߋཤྺ͸GitHub EnterpriseͰ؅ཧ
    ɹɹ→GitHub PagesͰར༻ՄೳͳΞΠίϯ͕ݟΕΔ

    View full-size slide

  30. Ξχϝʔγϣϯͷಋೖ
    39

    View full-size slide

  31. ϦονͳମݧΛ௥ٻ͢Δ
    40
    ɾؾ࣋ͪͷ͍͍ΠϯλϥΫγϣϯͱ
    ɹ։ൃ޻਺͸τϨʔυΦϑ
    ɾͦͷͨΊʹ͸࣮ݱՄೳੑ΋ߟྀ
    ɾௐࠪΛؚΊͯͲ͜·Ͱ࣮ݱͰ͖Δ͔
    ɹݕূ

    View full-size slide

  32. Ξχϝʔγϣϯಋೖ·ͰͷྲྀΕ
    41
    1. Ξχϝʔγϣϯͷ࡞੒ίετ͕௿͍͔ʁ
    2. ؆୯ʹಋೖͰ͖Δ͔ʁ
    3. iOSɺwebͰ΋ಉҰͷΠϯλϥΫγϣϯΛ࠶ݱͰ͖Δ͔ʁ

    View full-size slide

  33. Ξχϝʔγϣϯಋೖ·ͰͷྲྀΕ
    42
    1. Ξχϝʔγϣϯͷ࡞੒ίετ͕௿͍͔ʁ
    2. ؆୯ʹಋೖͰ͖Δ͔ʁ
    3. iOSɺwebͰ΋ಉҰͷΠϯλϥΫγϣϯΛ࠶ݱͰ͖Δ͔ʁ
    ɹɹ→ Lottieͷಋೖ

    View full-size slide

  34. Lottieͷಋೖ
    43
    ɾjsonϑΝΠϧ͔ΒΞχϝʔγϣϯΛ࣮ߦͰ͖Δɻ
    ɹɹ→AfterEffects͔Β࡞੒Մೳ → 1. ࡞੒ίετ͸௿͍
    ɾiOSͱwebͰ࢖͍ճ͔ͤͯͭܰྔ → 3.ಉҰͷΠϯλϥΫγϣϯΛ࠶ݱՄೳ
    ɾखݩͰ؆୯ͳϓϩδΣΫτΛ࡞ͬͯݕূͰ͖ͨΒಋೖ͍͚ͦ͏ʁ

    View full-size slide

  35. iOS (Swift)
    44
    import Lottie
    private let likeAnimationView = LOTAnimationView(name: "add_like.json")
    likeAnimationView.play { [weak self] finished in
    self?.update()
    }

    View full-size slide

  36. Web (React, Typescript)
    45
    import Lottie from ‘react-lottie’
    const option = {
    loop: true,
    autoplay: true,
    animationData: require(‘./loading.json’)
    }

    View full-size slide

  37. ݕূͰ͖ͨͷͰ࣮૷͢Δ
    46
    ɾ͋ͱ͸ΤϯδχΞͱ૬ஊͯ͠ॲཧΛॻ͍͍͚ͯͩ͘
    ɹɹ→ࠓޙ͸ΤϯδχΞ͸ίʔυϨϏϡʔͱ࣮ߦ݁Ռͷ֬ೝͷΈʹͳΔ
    ɹɹ→σβΠϯ͔Β࣮૷·ͰσβΠφʔͰ׬݁Ͱ͖Δ࢓૊ΈΛ༻ҙ

    View full-size slide

  38. ίϯϙʔωϯτ
    47

    View full-size slide

  39. σβΠϯίϯϙʔωϯτΛίʔυʹม͑Δ
    48
    ɾσβΠϯσʔλΛReactComponentԽ
    ɹɹɾλοϓ࣌ͷڍಈͳͲΛ࣮ࡍʹweb্Ͱ֬ೝͰ͖Δ
    ɹɹɾσβΠϯίϯϙʔωϯτΛ͙͢ʹ࣮૷Ͱ࢖͑Δ
    ɹɹɾࡉ͔͍࢓༷ΛίʔυͰ΋֬ೝͰ͖Δ

    View full-size slide

  40. ίϯϙʔωϯτ࢓༷ॻͷ࡞੒
    50
    ɾDoczΛར༻
    ɾmdxϑΝΠϧΛͭ͘Δ͚ͩͭ͘ΕΔ
    ɹɹ→ϝϯςφϯείετ͕௿͍
    ɹɹ→ͲͷpropsΛड͚औΕΔ͔ͳͲ࢓༷΋֬ೝͰ͖Δ

    View full-size slide

  41. Button.mdx
    51
    import Button from './../components/Button'
    import { Playground, PropsTable } from ‘docz’
    # Button


    Primary Button

    View full-size slide

  42. σβΠϯΛίʔυԽ͢Δཧ༝
    53
    ɾ࣮ࡍʹ࢖ΘΕΔ؀ڥͰಈ࡞֬ೝͰ͖Δ
    ɾσβΠϯมߋͷ࣮૷ΛͰ͖Δ͚ͩσβΠφʔ͕ෛ୲
    ɹɹ→ΤϯδχΞ͸ػೳ։ൃ΍ମݧͷվળʹ࣌ؒΛׂ͚Δ
    ɾເ: ίϯϙʔωϯτΛͭͳ͙͚ͩͰ͍͍ײ͡ʹσβΠϯ͞ΕΔੈք

    View full-size slide

  43. ٕज़Λศརʹ׆༻ͯ͠
    ΤϯδχΞͷෛ୲ΛݮΒ͢

    View full-size slide

  44. ·ͱΊ
    56
    ɾKomercoͷ։ൃεϐʔυΛ্͛ΔऔΓ૊Έʹ͍ͭͯͷ͓࿩Ͱͨ͠ɻ
    ɹɹɾσβΠϯ͚ͩͰͳٕ͘ज़Λ׆༻ͯ͠ΤϯδχΞΛαϙʔτ͢Δ
    ɹɹɾ݁Ռͱͯ͠νʔϜશମͷ։ൃͷεϐʔυ্͕͕Δ
    ɾશͯ͸ϢʔβʔʹՁ஋Λ͢͹΍͘ಧ͚ΔͨΊ

    View full-size slide