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

B81a8fa35a79d31881ca3d348f3e894a?s=47 pastak
October 29, 2018
1k

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

B81a8fa35a79d31881ca3d348f3e894a?s=128

pastak

October 29, 2018
Tweet

Transcript

  1. 3.

    • ژ౎େֶ޻ֶ෦৘ใֶՊ ܭࢉػՊֶίʔε6ճੜ • KMC ݩ޿ใ • Nota Inc Gyazo։ൃνʔϜ

    ΞϧόΠτ • JavaScript / React / Ruby on Rails • Browser Extension • גࣜձࣾ͸ͯͳ ΞϧόΠτ • TypeScript
  2. 4.

    • ژ౎େֶ޻ֶ෦৘ใֶՊ ܭࢉػՊֶίʔε6ճੜ • KMC ݩ޿ใ • Nota Inc Gyazo։ൃνʔϜ

    ΞϧόΠτ • JavaScript / React / Ruby on Rails • Browser Extension • גࣜձࣾ͸ͯͳ ΞϧόΠτ • TypeScript
  3. 6.

    Gyazo Browser Extension • Chrome • https://chrome.google.com/webstore/detail/gyazo/ffdaeeijbbijklfcpahbghahojgfgebo • Firefox •

    https://addons.mozilla.org/firefox/addon/gyazo-official/ • MS Edge • https://www.microsoft.com/ja-jp/p/gyazo-extension-for-edge/9nf31nnx69v1 • GitHub • https://github.com/gyazo/gyazo-browser-extension
  4. 8.

    Feature Works • Gyazoͷυϩʔػೳ • Gyazo for Linux ϝϯςφϯε •

    Scrapbox΁ͷ֤छม׵πʔϧ(OSS) • Ϗʔϧൃ஫ɾαʔόӡ༻
  5. 13.

    ࿩͢͜ͱͱ࿩͞ͳ͍͜ͱ • ࿩͢͜ͱ • Gyazoͷ։ൃ؀ڥ΍։ൃख๏ • Gyazoͷ։ൃνʔϜ಺ͰͷৼΔ෣͍ʹ͍ͭͯ • ࿩͞ͳ͍͜ͱ •

    ͜Ε·Ͱͷ։ൃͰಘͨࡉ΍͔ͳ஌ݟ • GyazoͷΞϓϦέʔγϣϯઃܭ͔Β׆͔ͤΔΞϓϦέʔγϣϯ։ൃςΫχοΫ
  6. 14.

    ։ൃࣗମʹಥͬࠐΜͩ࿩Λ஌Γ͍ͨਓ޲͚ • 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
  7. 16.

    ݱࡏͷGyazoͷ։ൃ؀ڥʹ͍ͭͯ • ΞϓϦέʔγϣϯ • Ruby on Rails • React /w

    flow • Golang • GCP (GCE / Cloud Vision ...etc) • Cloud Flare
  8. 18.

    ݱࡏͷGyazoͷ։ൃ؀ڥʹ͍ͭͯ • جຊతʹશһ͕ϦϞʔτϫʔΫՄೳ • དྷि͸ࡳຈཱྀߦ͕͋ΔͷͰɺ๺ͷେ஍͔ΒϦϞʔτϫʔΫ༧ఆ • ϕτφϜ͔ΒϦϞʔτϫʔΫͨ͜͠ͱ΋͋Δ • PR͸GitHubɺٞ࿦͸Slack +

    ScrapboxɺԣஅతʹGyazo • ϖΞϓϩ΋VSCode Live Share΍Slack௨࿩Ͱ https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
  9. 19.

    Chat Ops /w GitHub Bot and CI • PR →

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

    Chat Ops /w GitHub Bot and CI • ੲ͸ࣃΛ৯͍͠͹ͬͯखݩͰcapίϚϯυΛଧ͍ͬͯͨࠒ΋͋ͬͨ •

    Chat Opsͱݴ͏͚Ͳɺ࠷ۙ͸νϟοτͷίϚϯυݺͼग़͠΋ࣗಈԽ ͍ͯ͠ΔͷͰɺ࠷ૣνϟοτͰ͸ΦϖϨʔγϣϯͯ͠ͳ͍ʹ౳͍͠ • ศར
  11. 24.

    ͣͬͱมΘ͍ͬͯͳ͍͜ͱ • Gyazo͕͋ΒΏΔίϛϡχέʔγϣϯͷத৺ʹ͋Δ • GitHub΍νϟοτʹ΋εΫγϣΛυϯυϯషΔ • Gyazo / Gyazo GIF

    • υϩʔػೳͰ໼ҹ΍จࣈɺғΈͳͲ • ػೳϨϏϡʔɺσβΠϯϨϏϡʔɺϢʔβʔαϙʔτଧͪฦ͠
  12. 30.

    গ͠มΘͬͨ͜ͱ • AWS→GCP / CoffeeScript → ES2015 + React +

    flow • Gyazoࣗମ͸RailsͰॻ͔Ε͍ͯΔΞϓϦέʔγϣϯ • ن໛͸ͦΜͳʹେ͖͘ͳ͍ • ఆظతʹٕज़ελοΫ͸ݟ௚ͨ͠ΓೖΕସ͑ͨΓ͍ͯ͠Δ • ଞʹ΋PHPͩͬͨΞοϓϩʔυɾαϜωΠϧαʔόΛGoͰॻ͖௚ͨ͠Γ
  13. 31.
  14. 32.

    ϑϩϯτΤϯυ؀ڥͷมભ • Rails͕CoffeeScript͕ͩͬͨɺ2015೥4݄຤ʹBabelಋೖ • 2014/12ʹ asset-pipeline ͸୤ग़ࡁΈͩͬͨ • 2015೥11݄ʹCoffeeScriptΛґଘ͔Β࡟আ •

    ͜ͷࠒ͸ReactΛ࢖͍ͭͭ΋ɺCS, ES5, ES6͕͍ࠞͬͯͨ͟͸ͣ • https://scrapbox.io/pastak-pub/GyazoͷϑϩϯτΤϯυ͔Β൥೰ΛऔΓ෷͍͑ͯ Δͷ͔
  15. 37.

    Gyazo։ൃνʔϜͷ߹ݴ༿ • Move Fast and Break Things • ݩ͸FacebookͷϞοτʔ •

    ʰૉૣ͘ߦಈ͠ഁյͤΑʱ • ҊͣΔΑΓ࢈Ή͕қ͠ • ΞϓϦέʔγϣϯΛͲΜͲΜഁյతʹมԽ͍ͤͯ͘͜͞ͱΛڪΕͳ͍
  16. 38.
  17. 42.

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

    ͦΕΒͷ࠶ฤू΍ॏͶ߹Θͤॱ੾Γସ͑ɺ৭΍ಁ໌౓ͷࣗ༝બ୒ ීஈͷ࢖༻΍ࡶஊͷத͔Βศརͦ͏ͳ ΞΠσΞΛউखʹ࣮૷ͯ͠PR stagingͰσϞΛͯ͠ྑ͍ײ৮ͩͬͨ ͷͰͦͷ··੔͑ͯϦϦʔε
  18. 45.

    γϡοͱ΍ͬͨΒྑ͔ͬͨͷͰ௕ߟʹೖͬͨྫ • HipChat / Slack Bot͸΍ͬͨΒศརͱ͍͏͜ͱ͕໌֬ʹ෼͔͍ͬͯͨͷ Ͱɺ࢖༻ײΛࢼͨ͢ΊͷࡶͳϓϩτλΠϓͰ࣮ફͯ͠Έ͔ͯΒɺͪΌΜ ͱॻ͖௚ͨ͠ • υϩʔػೳͷϦϓϨΠε͸ͦΕ·Ͱʹͳ͔ͬͨר͖໭͠ʢཤྺʣػೳ΍

    ཁૉͷೖΕସ͑ɾ࠶ฤूΛ࡞ͬͨͷͰɺUI/UXؚΊ͔ͯͳΓͷٞ࿦͕͋ͬ ͨɻઃܭ΋ReactΛ࢖ͬͯ࠶ઃܭ͍ͯͨ͠ • ͜Ε΋࠷ॳͷσϞ͸ௗऔͰϦϞʔτϫʔΫ͠Α͏ͱߦͬͨͱ͖ʹॻ͍ͨ