Cookpad TechConf 2019 Komerco Service Dev

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

Transcript

1. ౻Ҫ ݠ࢜࿕ Komercoࣄۀ෦ ৽نαʔϏε։ൃΛ Ճ଎ͤ͞Δٕज़ͱσβΠϯ
2. ࣗݾ঺հ 2 ɾ౻Ҫ ݠ࢜࿕(;͚͡Μ) ɾKomercoࣄۀ෦ / σβΠφʔ ɾ2017೥৽ଔೖࣾ ɹ @kenshir0f
4. Komerco 4 ɾ2018೥6݄ʹϦϦʔε ɾྉཧָ͕͘͠ͳΔ৯ࡐ΍͏ͭΘɺྉཧಓ۩͕ങ͑ΔαʔϏε ɾݱࡏ͸iOSΞϓϦͷΈαʔϏεΛఏڙ
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 ɾλϒͰݟ΍͍͢ ɾͻͱͭͷΞϓϦͰ׬݁
27. ࣮૷εϐʔυʹ௥͍ͭͨ͘Ίʹม͑ͨ͜ͱ·ͱΊ 27 1. ࢖͍ͬͯΔσβΠϯπʔϧΛม͑Δ ɹɹ→։ൃεϐʔυ্͕͕ͬͨ 2. σβΠϯίϯϙʔωϯτΛମܥతʹ؅ཧ͢Δ ɹɹ→εϐʔυ͸্͕ͬͯਫ਼ਆతͳෛ୲΋ݮͬͨ ɹɹ→ߏஙʹ͕͔͔࣌ؒΔ
28. ͔͜͜Βߋʹ։ൃεϐʔυΛ ্͛ΔͨΊʹऔΓ૊Μͩ͜ͱ
29. UIΨΠυϥΠϯͷ࡞੒ 29
30. UIΨΠυϥΠϯ 30 ɾFigma্ʹશମͰڞ௨ͷϧʔϧΛ࡞੒ ɾ֬ೝͷίϛϡχέʔγϣϯΛݮΒ͓ͯ͠ޓ͍ͷ࡞ۀ࣌ؒΛ૿΍͢ ɾ݁Ռͱͯ͠։ൃεϐʔυ্͕͕Δ
33. ΞΠίϯϑΥϯτͷ࡞੒ 33
35. ΞΠίϯը૾ͷ໰୊ 35 ɾiOS͸@2x, @3xͱը૾͕ෳ਺ඞཁ ɹɹɾόʔδϣϯ͝ͱʹը૾Λอଘ͢Δͷ͸༰ྔͱ؅ཧ͕ݫ͍͠ ɾ؅ཧը໘(Web)΋։ൃ͍ͯͨ͠ͷͰڞ௨Ϧιʔεʹ͍ͨ͠
37. ΞΠίϯϑΥϯτͷ࡞੒ 37 ɾϑΥϯτʹͯ͠Ϧιʔε͸ͻͱͭʹ ɹɹ→WebͱiOSͰڞ௨Ͱ࢖ָ͑ͯ ɾมߋཤྺ͸GitHub EnterpriseͰ؅ཧ ɹɹ→GitHub PagesͰར༻ՄೳͳΞΠίϯ͕ݟΕΔ
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্Ͱ֬ೝͰ͖Δ ɹɹɾσβΠϯίϯϙʔωϯτΛ͙͢ʹ࣮૷Ͱ࢖͑Δ ɹɹɾࡉ͔͍࢓༷ΛίʔυͰ΋֬ೝͰ͖Δ
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>
53. σβΠϯΛίʔυԽ͢Δཧ༝ 53 ɾ࣮ࡍʹ࢖ΘΕΔ؀ڥͰಈ࡞֬ೝͰ͖Δ ɾσβΠϯมߋͷ࣮૷ΛͰ͖Δ͚ͩσβΠφʔ͕ෛ୲ ɹɹ→ΤϯδχΞ͸ػೳ։ൃ΍ମݧͷվળʹ࣌ؒΛׂ͚Δ ɾເ: ίϯϙʔωϯτΛͭͳ͙͚ͩͰ͍͍ײ͡ʹσβΠϯ͞ΕΔੈք
55. ٕज़Λศརʹ׆༻ͯ͠ ΤϯδχΞͷෛ୲ΛݮΒ͢
56. ·ͱΊ 56 ɾKomercoͷ։ൃεϐʔυΛ্͛ΔऔΓ૊Έʹ͍ͭͯͷ͓࿩Ͱͨ͠ɻ ɹɹɾσβΠϯ͚ͩͰͳٕ͘ज़Λ׆༻ͯ͠ΤϯδχΞΛαϙʔτ͢Δ ɹɹɾ݁Ռͱͯ͠νʔϜશମͷ։ൃͷεϐʔυ্͕͕Δ ɾશͯ͸ϢʔβʔʹՁ஋Λ͢͹΍͘ಧ͚ΔͨΊ
57. Thank you!