Cookpad TechConf 2019 Komerco Service Dev

6d74b5edd1571a5cf7ecfec9c694f26b?s=47 kenshir0f
February 27, 2019

Cookpad TechConf 2019 Komerco Service Dev

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

6d74b5edd1571a5cf7ecfec9c694f26b?s=128

kenshir0f

February 27, 2019
Tweet

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!