Gyazoの開発の進め方/devlove-kansai2018-10-29 #DevKan

Slide 1

Slide 1 text

Gyazoͷ։ൃͷਐΊํ Pasta-K pastak@notainc.com 2018/10/29(Mon) at DevLOVE Kansai

Slide 2

Slide 2 text

Pasta-K / @pastak

Slide 3

Slide 3 text

• ژ౎େֶ޻ֶ෦৘ใֶՊ ܭࢉػՊֶίʔε6ճੜ • KMC ݩ޿ใ • Nota Inc Gyazo։ൃνʔϜ ΞϧόΠτ • JavaScript / React / Ruby on Rails • Browser Extension • גࣜձࣾ͸ͯͳ ΞϧόΠτ • TypeScript

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Gyazo Browser Extension

Slide 6

Slide 6 text

Gyazo Browser Extension • Chrome • https://chrome.google.com/webstore/detail/gyazo/ffdaeeijbbijklfcpahbghahojgfgebo • Firefox • https://addons.mozilla.org/ﬁrefox/addon/gyazo-ofﬁcial/ • MS Edge • https://www.microsoft.com/ja-jp/p/gyazo-extension-for-edge/9nf31nnx69v1 • GitHub • https://github.com/gyazo/gyazo-browser-extension

Slide 7

Slide 7 text

NOTA Inc and me • 2013/08 ౰࣌ϦʔυΤϯδχΞΛ͍ͯͨ͠େֶͷઌഐʹ༠ΘΕͯன͝͸ ΜΛ৯΂ʹߦͬͨͱ͜ΖɺԿނ͔ͦͷ··؀ڥߏஙΛͯ͠ΞϧόΠτʹ • ౰࣌͸ϝϯόʔ͕૿͑࢝ΊΔલͰগͳ͔ͬͨ • ҎޙɺChrome Extension΍͓ֆ͔͖ػೳͷϦχϡʔΞϧͳͲॾʑΛ୲౰ • ࠷ۙ͸ओʹReactͳͲϑϩϯτΤϯυपΓΛ୲౰

Slide 8

Slide 8 text

Feature Works • Gyazoͷυϩʔػೳ • Gyazo for Linux ϝϯςφϯε • Scrapbox΁ͷ֤छม׵πʔϧ(OSS) • Ϗʔϧൃ஫ɾαʔόӡ༻

Slide 9

Slide 9 text

ఆظతʹϏʔϧൃ஫ɾαʔόӡ༻͍ͯ͠·͢

Slide 10

Slide 10 text

• 2018೥11݄9೔ɾ10೔ @ େࡕೆߓATC • OSSίϛϡχςΟ΍ΤϯδχΞίϛϡχςΟͳͲͷࡇయ • εςʔδاըͷ࢘ձ΍ΔͷͰྑ͚Ε͹͓ӽ͍ͩ͘͠͞ • https://www.k-of.jp/2018/

Slide 11

Slide 11 text

Pasta-K / @pastak

Slide 12

Slide 12 text

ΞδΣϯμ • Gyazoͷ։ൃ؀ڥʹ͍ͭͯ • GyazoͱυοάϑʔσΟϯά

Slide 13

Slide 13 text

࿩͢͜ͱͱ࿩͞ͳ͍͜ͱ • ࿩͢͜ͱ • Gyazoͷ։ൃ؀ڥ΍։ൃख๏ • Gyazoͷ։ൃνʔϜ಺ͰͷৼΔ෣͍ʹ͍ͭͯ • ࿩͞ͳ͍͜ͱ • ͜Ε·Ͱͷ։ൃͰಘͨࡉ΍͔ͳ஌ݟ • GyazoͷΞϓϦέʔγϣϯઃܭ͔Β׆͔ͤΔΞϓϦέʔγϣϯ։ൃςΫχοΫ

Slide 14

Slide 14 text

։ൃࣗମʹಥͬࠐΜͩ࿩Λ஌Γ͍ͨਓ޲͚ • ReactͱCanvasͰ͓ֆ͔͖ػೳΛ࡞ͬͨ࿩ https://blog.pastak.net/entry/2016/08/ 21/165213 • ͓ֆ͔͖ମݧ޲্࡞ઓ https://blog.pastak.net/entry/2016/10/22/134648 • BrowserExtension࢛ํࢁ࿩ https://speakerdeck.com/pastak/browserextensionsi- fang-shan-hua-number-yapc8oji • ϒϥ΢β֦ுͷΫϩεϒϥ΢βରԠʹ͍ͭͯͲ͏޲͖߹͍ͬͯΔ͔ https:// speakerdeck.com/pastak/burauzakuo-zhang-falsekurosuburauzadui-ying- nituitedouxiang-kihe-tuteiruka-number-builderscon

Slide 15

Slide 15 text

Gyazoͷ։ൃ؀ڥʹ͍ͭͯ

Slide 16

Slide 16 text

ݱࡏͷGyazoͷ։ൃ؀ڥʹ͍ͭͯ • ΞϓϦέʔγϣϯ • Ruby on Rails • React /w ﬂow • Golang • GCP (GCE / Cloud Vision ...etc) • Cloud Flare

Slide 17

Slide 17 text

ݱࡏͷGyazoͷ։ൃ؀ڥʹ͍ͭͯ • ίϛϡχέʔγϣϯ • Slack • GitHub /w ZenHub • Gyazo • Scrapbox • Google Hangout

Slide 18

Slide 18 text

ݱࡏͷGyazoͷ։ൃ؀ڥʹ͍ͭͯ • جຊతʹશһ͕ϦϞʔτϫʔΫՄೳ • དྷि͸ࡳຈཱྀߦ͕͋ΔͷͰɺ๺ͷେ஍͔ΒϦϞʔτϫʔΫ༧ఆ • ϕτφϜ͔ΒϦϞʔτϫʔΫͨ͜͠ͱ΋͋Δ • PR͸GitHubɺٞ࿦͸Slack + ScrapboxɺԣஅతʹGyazo • ϖΞϓϩ΋VSCode Live Share΍Slack௨࿩Ͱ https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

Slide 19

Slide 19 text

Chat Ops /w GitHub Bot and CI • PR → commit͝ͱʹ staging؀ڥࣗಈੜ੒ɾߋ৽ → deployment APIͰ௨஌ • ninja: release ͱνϟοτʹଧͭͱrelease༻ͷPRͱ֬ೝ༻ ͷ؀ڥ͕ߏங͞ΕΔ • ࠷ۙ͸PR͕merge͞ΕΔͱࣗಈͰˢͷൃݴΛͯ͘͠ΕΔΑ͏ʹਐԽ • release༻ͷPR͕merge͞ΕΔͱdeploy։࢝ • جຊతʹ͸શͯͷϓϩδΣΫτͰಉ༷ͷΠϯλʔϑΣΠεΛར༻Ͱ͖Δ

Slide 20

Slide 20 text

Chat Ops /w GitHub Bot and CI

Slide 21

Slide 21 text

Chat Ops /w GitHub Bot and CI • ੲ͸ࣃΛ৯͍͠͹ͬͯखݩͰcapίϚϯυΛଧ͍ͬͯͨࠒ΋͋ͬͨ • Chat Opsͱݴ͏͚Ͳɺ࠷ۙ͸νϟοτͷίϚϯυݺͼग़͠΋ࣗಈԽ ͍ͯ͠ΔͷͰɺ࠷ૣνϟοτͰ͸ΦϖϨʔγϣϯͯ͠ͳ͍ʹ౳͍͠ • ศར

Slide 22

Slide 22 text

λεΫɾਐḿ؅ཧ • GitHub /w ZenHub + Scrapbox • ৄ͘͠͸VPoEͷ@akiroom͕࿩͍ͯ͠Δ͸ͣʁ

Slide 23

Slide 23 text

ͣͬͱมΘ͍ͬͯͳ͍͜ͱ • Ͳ͜Ͱ΋ಇ͚Δ • ͱݴͬͯ΋Ҏલ͸݁ߏΈΜͳΦϑΟεʹډΔن໛ײͩͬͨ • ࠷ۙ͸σϑΥϧτϦϞʔτϫʔΫͳਓ΍೔ʹΑͬͯ͸2,3ਓ͔͠Φ ϑΟεʹډͳ͍೔΋

Slide 24

Slide 24 text

ͣͬͱมΘ͍ͬͯͳ͍͜ͱ • Gyazo͕͋ΒΏΔίϛϡχέʔγϣϯͷத৺ʹ͋Δ • GitHub΍νϟοτʹ΋εΫγϣΛυϯυϯషΔ • Gyazo / Gyazo GIF • υϩʔػೳͰ໼ҹ΍จࣈɺғΈͳͲ • ػೳϨϏϡʔɺσβΠϯϨϏϡʔɺϢʔβʔαϙʔτଧͪฦ͠

Slide 25

Slide 25 text

Gyazo͕͋ΒΏΔίϛϡχέʔγϣϯͷத৺ʹ͋Δ • PRͷઆ໌΋Gyazo GIFͰBefore/After ΛࡌͤͯڍಈͷมߋΛΘ͔Γ΍͘͢ • ϨϏϡʔͷଧͪฦ͠ɺಛʹUIͷ͜ͱΛ ؚΉͱ͖΋Gyazo΍GIFͰ

Slide 26

Slide 26 text

গ͠มΘͬͨ͜ͱ • νϟοτπʔϧ • Scrapboxಋೖ • Sprint MTG։࢝ • AWS→GCP / CoffeeScript → ES2015 + React +ﬂow

Slide 27

Slide 27 text

গ͠มΘͬͨ͜ͱ • νϟοτπʔϧ • HipChatΛ࢖͍ͬͯͨ • ಛʹOGPରԠͱ͔ͳ͔ͬͨͷͰɺAddonఏڙ͍ͯͨ͠ • https://marketplace.atlassian.com/apps/1213139 • 2014/8ࠒ Slack΁Ҡߦ

Slide 28

Slide 28 text

গ͠มΘͬͨ͜ͱ • Scrapboxಋೖ • Qiita:TeamΛ࢖͍͕ͬͯͨɺ͋·Γ׆༻Ͱ͖͍ͯͳ͔ͬͨ • ૿Ҫ͞Μ͕࡞͍ͬͯͨgyazzͱ͍͏wikiͷಋೖ͕ܖػ • ౰ॳ͸͋Μ·ΓੵۃతͰ͸ͳ͔ͬͨ΋ͷͷ࢖͍࢝ΊΔͱྑ͕͞ਁಁࣾ͠಺ඪ४Խ • ίϯηϓτΛܧঝ͠ਐԽͤͯ͞Scrapbox΁ • 1೥΄Ͳࣾ಺ར༻͠βެ։ˠຊϦϦʔε

Slide 29

Slide 29 text

গ͠มΘͬͨ͜ͱ • Sprint MTGͷಋೖ • ͜͜΋ৄ͘͠͸@akiroom͕࿩͍ͯ͠Δ͸ͣʁ

Slide 30

Slide 30 text

গ͠มΘͬͨ͜ͱ • AWS→GCP / CoffeeScript → ES2015 + React + ﬂow • Gyazoࣗମ͸RailsͰॻ͔Ε͍ͯΔΞϓϦέʔγϣϯ • ن໛͸ͦΜͳʹେ͖͘ͳ͍ • ఆظతʹٕज़ελοΫ͸ݟ௚ͨ͠ΓೖΕସ͑ͨΓ͍ͯ͠Δ • ଞʹ΋PHPͩͬͨΞοϓϩʔυɾαϜωΠϧαʔόΛGoͰॻ͖௚ͨ͠Γ

Slide 31

Slide 31 text

ϑϩϯτΤϯυ؀ڥͷมભ • ଠݹʙ jQuery UI • 2014/03ʙ AngularJS • 2015/01ʙ React • 2015/02ʹ͸ओཁϖʔδͷશ͕ͯReactʹҠߦ

Slide 32

Slide 32 text

ϑϩϯτΤϯυ؀ڥͷมભ • Rails͕CoffeeScript͕ͩͬͨɺ2015೥4݄຤ʹBabelಋೖ • 2014/12ʹ asset-pipeline ͸୤ग़ࡁΈͩͬͨ • 2015೥11݄ʹCoffeeScriptΛґଘ͔Β࡟আ • ͜ͷࠒ͸ReactΛ࢖͍ͭͭ΋ɺCS, ES5, ES6͕͍ࠞͬͯͨ͟͸ͣ • https://scrapbox.io/pastak-pub/GyazoͷϑϩϯτΤϯυ͔Β൥೰ΛऔΓ෷͍͑ͯ Δͷ͔

Slide 33

Slide 33 text

Gyazoͷ։ൃ؀ڥʹ͍ͭͯ • جຊతͳϑΟϩιϑΟʔ͸Ұ؏͍ͯ͠Δ • ϦϞʔτͰ΋ඇಉظͰ΋ಇ͚Δɻ • Gyazo΍Scrapboxɺࣗ෼ͨͪͷπʔϧ͕ಇ͖ํͷίΞʹ͋Δɻ • ۃྗ৭Μͳ͜ͱΛαϘΕΔΑ͏ʹɻChat Ops͔ΒChatཁૉ͑͞΋ࣺͯΔɻ • ΞϓϦέʔγϣϯελοΫ͸ͲΜͲΜมߋ͢Δ • ୭Ͱ΋มߋՄೳ • ͜ͷล͸࣍ͷষͰ΋࿩͠·͢

Slide 34

Slide 34 text

GyazoͱυοάϑʔσΟϯά

Slide 35

Slide 35 text

Gyazoͷ৽ػೳͷੜ·Εํ • Ϗδωεతͳཁ๬ • VPoEͱ͔͔Βཔ·ΕͯSprintͷλεΫʹ૊Έࠐ·ΕΔ • υοάϑʔσΟϯά͔Βͷൃੜ • ͬͪ͜ͷ࿩Λ͠·͢

Slide 36

Slide 36 text

υοάϑʔσΟϯά υοάϑʔσΟϯάͱ͸ɺγεςϜ΍αʔϏεΛ։ൃऀࣗ਎͕ੵۃ తʹར༻ͯ͠ɺ໰୊఺΍վળ͢΂͖఺ΛࣗΒൃݟ͍ͯ͘͠ɺͱ͍͏ औΓ૊Έͷ͜ͱͰ͋Δɻਖ਼ࣜϦϦʔεલͷαʔϏεΛݕূ͢Δख๏ ͱͯ͠ݴٴ͞ΕΔ͜ͱ΋͋Ε͹ɺϦϦʔεޙͷαʔϏεΛ೔ৗతʹ ༻͍ͯվળ఺Λݟग़͢ӦΈΛࢦ͢ޠͱͯ͠ݴٴ͞ΕΔ͜ͱ΋͋Δɻ from https://www.weblio.jp/content/υοάϑʔσΟϯά

Slide 37

Slide 37 text

Gyazo։ൃνʔϜͷ߹ݴ༿ • Move Fast and Break Things • ݩ͸FacebookͷϞοτʔ • ʰૉૣ͘ߦಈ͠ഁյͤΑʱ • ҊͣΔΑΓ࢈Ή͕қ͠ • ΞϓϦέʔγϣϯΛͲΜͲΜഁյతʹมԽ͍ͤͯ͘͜͞ͱΛڪΕͳ͍

Slide 38

Slide 38 text

Gyazo։ൃνʔϜͷ߹ݴ༿ • ͱʹ͔͘σϞϑΝʔετ • σϞΛେࣄʹ͍ͯ͠Δ • ΞΠσΞΛٞ࿦͢Δͱ͖΋݁ہ͸࡞ͬͯΈͳ͍ͱ෼͔Βͳ͍ • ࢥͬͨΑΓ΋ྑ͍ / ࢥͬͨΑΓ΋ѱ͍(͚ͲΑ͘Ͱ͖ͦ͏) • উखʹ໘ന৽ػೳΛ࡞ͬͯσϞͯ͠ɺϦϦʔε΋೔ৗ஡൧ࣄ

Slide 39

Slide 39 text

υϩʔػೳͷ৽ػೳ͸σϞϑΝʔετ • GyazoͷProϓϥϯ޲͚ػೳͱͯ͠υϩʔ(͓ֆඳ͖)ػೳ͕͋Δ • ॳظͷػೳ: ࢛֯Ͱғ͏ɺ௚ઢΛҾ͘ɺ໼ҹΛ଍͢ɺจࣈೖΕ

Slide 40

Slide 40 text

υϩʔػೳͷ৽ػೳ͸σϞϑΝʔετ • GyazoͷProϓϥϯ޲͚ػೳͱͯ͠υϩʔ(͓ֆඳ͖)ػೳ͕͋Δ • ॳظͷػೳ: ࢛֯Ͱғ͏ɺ௚ઢΛҾ͘ɺ໼ҹΛ଍͢ɺจࣈೖΕ • ݱߦͷػೳ: ϖϯπʔϧɺ࢛֯ͰృΓͭͿ͠ɺελϯϓɺϞβΠΫ • ͦΕΒͷ࠶ฤू΍ॏͶ߹Θͤॱ੾Γସ͑ɺ৭΍ಁ໌౓ͷࣗ༝બ୒

Slide 41

Slide 41 text

υϩʔػೳͷ৽ػೳ͸σϞϑΝʔετ • GyazoͷProϓϥϯ޲͚ػೳͱͯ͠υϩʔ(͓ֆඳ͖)ػೳ͕͋Δ • ॳظͷػೳ: ࢛֯Ͱғ͏ɺ௚ઢΛҾ͘ɺ໼ҹΛ଍͢ɺจࣈೖΕ • ݱߦͷػೳ: ϖϯπʔϧɺ࢛֯ͰృΓͭͿ͠ɺελϯϓɺϞβΠΫ • ͦΕΒͷ࠶ฤू΍ॏͶ߹Θͤॱ੾Γସ͑ɺ৭΍ಁ໌౓ͷࣗ༝બ୒ ͜͜͸࡞ઓΛ࿅ͬͯ࠶ઃܭ͠௚ͨ͠

Slide 42

Slide 42 text

υϩʔػೳͷ৽ػೳ͸σϞϑΝʔετ • GyazoͷProϓϥϯ޲͚ػೳͱͯ͠υϩʔ(͓ֆඳ͖)ػೳ͕͋Δ • ॳظͷػೳ: ࢛֯Ͱғ͏ɺ௚ઢΛҾ͘ɺ໼ҹΛ଍͢ɺจࣈೖΕ • ݱߦͷػೳ: ϖϯπʔϧɺ࢛֯ͰృΓͭͿ͠ɺελϯϓɺϞβΠΫ • ͦΕΒͷ࠶ฤू΍ॏͶ߹Θͤॱ੾Γସ͑ɺ৭΍ಁ໌౓ͷࣗ༝બ୒ ීஈͷ࢖༻΍ࡶஊͷத͔Βศརͦ͏ͳ ΞΠσΞΛউखʹ࣮૷ͯ͠PR stagingͰσϞΛͯ͠ྑ͍ײ৮ͩͬͨ ͷͰͦͷ··੔͑ͯϦϦʔε

Slide 43

Slide 43 text

ͲΜͲΜσϞ͢Δ • ୭Ͱ΋GyazoʹؔΘΔશͯͷίʔυΛ(PRΛհͯ͠)มߋͰ͖Δ • ͳΜ͔ཉ͍͠ػೳɺ೔ʑͷจ͕۟͋Ε͹PRͰઓ͏ • ʮͳΜ͔γϡοͱࢼͨ͠Β΍Εͦ͏ͩͳʯͱࢥͬͨΒ·͊΍ͬͯΈΔ • ΊͬͪΌ͔͔࣌ؒΔͳΒ૬ஊɺͦ͏͡Όͳ͔ͬͨΒγϨοͱ΍Δ • ͦͷล΋Sprint MTGͰԹ౓ײΛڞ༗

Slide 44

Slide 44 text

γϡοͱ΍ͬͨΒग़དྷͨྫ • Browser ExtensionͷHTMLཁૉͷBoxʹ߹Θͤͯͷ੾ΓऔΓ • ඞཁͩͱࢥͬͯͳ͔͚ͬͨͲɺࣾ಺ͷҰ෦͔Βͷ೤྽ͳཁ๬ • ృΓͭͿ͠ػೳ • ʮ࢛֯ඳ͍ͯΔ͔ͩΒதΛృΔ͚ͩ͡ΌΜʁʯ • ϞβΠΫػೳ • ʮ࢛֯ͷྖҬऔಘ͢Δํ๏͋ΔͳΒྲྀ༻ͯ͠ൣғΛϞβΠΫॲཧ͢Ε͹͍͍͡ΌΜʯ

Slide 45

Slide 45 text

γϡοͱ΍ͬͨΒྑ͔ͬͨͷͰ௕ߟʹೖͬͨྫ • HipChat / Slack Bot͸΍ͬͨΒศརͱ͍͏͜ͱ͕໌֬ʹ෼͔͍ͬͯͨͷ Ͱɺ࢖༻ײΛࢼͨ͢ΊͷࡶͳϓϩτλΠϓͰ࣮ફͯ͠Έ͔ͯΒɺͪΌΜ ͱॻ͖௚ͨ͠ • υϩʔػೳͷϦϓϨΠε͸ͦΕ·Ͱʹͳ͔ͬͨר͖໭͠ʢཤྺʣػೳ΍ ཁૉͷೖΕସ͑ɾ࠶ฤूΛ࡞ͬͨͷͰɺUI/UXؚΊ͔ͯͳΓͷٞ࿦͕͋ͬ ͨɻઃܭ΋ReactΛ࢖ͬͯ࠶ઃܭ͍ͯͨ͠ • ͜Ε΋࠷ॳͷσϞ͸ௗऔͰϦϞʔτϫʔΫ͠Α͏ͱߦͬͨͱ͖ʹॻ͍ͨ

Slide 46

Slide 46 text

A/Bςετ • A/BςετΛ΍͍ͬͯͨ࣌୅΋͕͋ͬͨࠓ͸΄΅΍͍ͬͯͳ͍ • ͲΜͲΜdeployͨ͠Γrollbackग़དྷΔ࢓૊Έ͕͋ΔͷͰɺΤΠϠ ͱग़ͯ͠վળΛॏͶ͍ͯ͘ελΠϧ • υϩʔػೳͷվળ΋ग़͔ͯ͠Βඍमਖ਼Λ͢Δ͜ͱ΋ଟʑ͋Δ

Slide 47

Slide 47 text

ελοϑ޲͚ػೳ

Slide 48

Slide 48 text

ελοϑ޲͚ػೳ • A/Bςετͷ୅ΘΓʹελοϑ޲͚ػೳΛ؆୯ʹ࣮૷Ͱ͖ΔΑ͏ʹ ͸࢓૊ΈΛ༻ҙ͍ͯ͠Δ • ྫ͑͹৽σβΠϯ΍υϩʔػೳͷϦϓϨΠεͳͲӨڹ͕େ͖͍΋ ͷ͸࡞Γͳ͕Βελοϑ؀ڥͰ೔ʑυοάϑʔσΟϯά͍ͯ͠Δ • PR͕େ͖͘ͳΓ͗͢Δ͜ͱΛ๷͙෭࡞༻΋͋Δ

Slide 49

Slide 49 text

• Gyazoͷ։ൃ؀ڥʹ͍ͭͯ࿩͠·ͨ͠ • Gyazo΍ScrapboxͳͲΛ࢖ͬͯϦϞʔτͰ΋շదʹա͍ͯ͝͠·͢ • υοάϑʔσΟϯάΛߴ଎ʹ৯΂ΔͨΊʹͱʹ͔͘σϞΛେࣄʹ͍ͯ͠ ·͢ • ͦΕΛ׆͔ͨ͢ΊʹͲΜͲΜϦϦʔε͍ͯ͘͠ͱ͍͏࡞ઓʹͳ͍ͬͯ·͢ • Sprint MTGͰ͜ΕΒΛϢϧ͘؅ཧ͞Ε͍ͯ·͢ ·ͱΊ