Cookpad TechConf 2019 Komerco Service Dev

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

Transcript

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

   View Slide

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

   View Slide

3. View Slide

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

   View Slide

5. View Slide

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

   View Slide

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

   View Slide

8. KomercoͷαʔϏε։ൃ
   8
   

   View Slide

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

   View Slide

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

    View Slide

11. 11
    100%
    9%41 AM
    komerco
    ঎඼Λग़඼͢Δ
    
    γϣοϓ؅ཧ
    ϝοηʔδ
    ঎඼؅ཧ
    ஫จ؅ཧ
    
    
    
    
    
    ঎඼؅ཧ
    ग़඼தͷ঎඼͕͋Γ·ͤΜ
    100%
    9%41 AM
    komerco 100%
    9%41 AM
    komerco
    
    ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖
    ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖
    ܙൺण԰ෑ
    ࡏݿ͋Γ
    #͓ṟ #ແண৭ #αονʔω
    ঎඼ͷઆ໌
    ˇ1,200 ΧʔτʹೖΕΔ
    
    

    View Slide

12. 12
    100%
    9%41 AM
    komerco
    ঎඼Λग़඼͢Δ
    
    γϣοϓ؅ཧ
    ϝοηʔδ
    ঎඼؅ཧ
    ஫จ؅ཧ
    
    
    
    
    
    ঎඼؅ཧ
    ग़඼தͷ঎඼͕͋Γ·ͤΜ
    100%
    9%41 AM
    komerco 100%
    9%41 AM
    komerco
    
    ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖
    ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖
    ܙൺण԰ෑ
    ࡏݿ͋Γ
    #͓ṟ #ແண৭ #αονʔω
    ঎඼ͷઆ໌
    ˇ1,200 ΧʔτʹೖΕΔ
    
    ΫοΫύουͷϝΠϯΧϥʔ
    طଘͷΞΠίϯ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. 18
    σβΠϯπʔϧ
    Figma
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. View Slide

26. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

31. View Slide

32. View Slide

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

    View Slide

34. View Slide

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

    View Slide

36. View Slide

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

    View Slide

38. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. ίϯϙʔωϯτ
    47
    

    View Slide

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

    View Slide

49. View Slide

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

    View Slide

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

    View Slide

52. View Slide

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

    View Slide

54. View Slide

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

    View Slide

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

    View Slide

57. Thank you!
    

    View Slide