Cookpad TechConf 2019 Komerco Service Dev

Transcript

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

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

3. 3

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

5. 5

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

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

8. KomercoͷαʔϏε։ൃ 8

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

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

11. 11 100% 9%41 AM komerco ঎඼Λग़඼͢Δ
    γϣοϓ؅ཧ ϝοηʔδ ঎඼؅ཧ

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

12. 12 100% 9%41 AM komerco ঎඼Λग़඼͢Δ
    γϣοϓ؅ཧ ϝοηʔδ ঎඼؅ཧ

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

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

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

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

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

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

18. 18 σβΠϯπʔϧ Figma

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

    ߋ৽ָ͕ ɾ ͸ศར ɾ ͸࠷ߴ

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

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

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

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

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

25. 25

26. 26

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

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

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

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

31. 31

32. 32

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

34. 34

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

36. 36

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

38. 38

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

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

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

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

43. Lottieͷಋೖ 43 ɾjsonϑΝΠϧ͔ΒΞχϝʔγϣϯΛ࣮ߦͰ͖Δɻ ɹɹ→AfterEffects͔Β࡞੒Մೳ → 1. ࡞੒ίετ͸௿͍ ɾiOSͱwebͰ࢖͍ճ͔ͤͯͭܰྔ → 3.ಉҰͷΠϯλϥΫγϣϯΛ࠶ݱՄೳ

    ɾखݩͰ؆୯ͳϓϩδΣΫτΛ࡞ͬͯݕূͰ͖ͨΒಋೖ͍͚ͦ͏ʁ

44. iOS (Swift) 44 import Lottie private let likeAnimationView = LOTAnimationView(name:

    "add_like.json") likeAnimationView.play { [weak self] finished in self?.update() }

45. Web (React, Typescript) 45 import Lottie from ‘react-lottie’ const option

    = { loop: true, autoplay: true, animationData: require(‘./loading.json’) } <Lottie options={ option } width={ 100 } height={ 100 } />

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

47. ίϯϙʔωϯτ 47

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

49. 49

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

51. Button.mdx 51 import Button from './../components/Button' import { Playground, PropsTable

    } from ‘docz’ # Button <PropsTable of={ Button } /> <Playground> <Button color={ 'primary' }>Primary Button</Button> </Playground>

52. 52

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

54. 54

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

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

57. Thank you!