Cookpad TechConf 2019 Komerco Service Dev

by kenshir0f

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

KomercoͷαʔϏε։ൃ 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

13 ؆୯ͳશମͷಈઢͷਤ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

18 σβΠϯπʔϧ Figma

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

UIΨΠυϥΠϯͷ࡞੒ 29

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Ξχϝʔγϣϯͷಋೖ 39

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

ίϯϙʔωϯτ 47

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Slide 55

Slide 55 text

ٕज़Λศརʹ׆༻ͯ͠ ΤϯδχΞͷෛ୲ΛݮΒ͢

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Thank you!