Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Gyazoの開発の進め方/devlove-kansai2018-10-29 #DevKan
Search
pastak
October 29, 2018
1
1.7k
Gyazoの開発の進め方/devlove-kansai2018-10-29 #DevKan
Talked on
https://devlove-kansai.doorkeeper.jp/events/80459
pastak
October 29, 2018
Tweet
Share
More Decks by pastak
See All by pastak
UserAgentに依存した分岐を捨てられるか (または何故捨てられていないのか)
pastak
4
2.2k
開発組織外の他業種も巻き込んでアクセシビリティに関する機運を高めつつある話
pastak
0
530
手を動かして始めるアクセシビリティ改善
pastak
3
1.4k
ウェブアプリケーションがオフラインでも動作できるようにやっていった話 / ServiceWorker for Offline WebApp in MANGA Viewer
pastak
0
1k
コミュニティが持続可能であるために考えておきたいこと/How to kill your community
pastak
0
2.8k
2018年の”JavaScript” 再入門/re-learning-about-js-in-2018
pastak
31
12k
ブラウザ拡張のクロスブラウザ対応についてどう向き合っているか #builderscon
pastak
3
3.6k
150人のOB会の主催をやった話 #yapcfukuoka #yapcjapan
pastak
0
2.4k
Webアプリケーションで 60fpsを(極力)目指す
pastak
19
9.9k
Featured
See All Featured
Being A Developer After 40
akosma
67
580k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
9
3.6k
GitHub's CSS Performance
jonrohan
1025
450k
Ruby is Unlike a Banana
tanoku
96
10k
Infographics Made Easy
chrislema
238
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Designing for humans not robots
tammielis
247
25k
Fontdeck: Realign not Redesign
paulrobertlloyd
77
5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
86
45k
What's in a price? How to price your products and services
michaelherold
238
11k
Design by the Numbers
sachag
274
18k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Transcript
Gyazoͷ։ൃͷਐΊํ Pasta-K
[email protected]
2018/10/29(Mon) at DevLOVE Kansai
Pasta-K / @pastak
• ژେֶֶ෦ใֶՊ ܭࢉػՊֶίʔε6ճੜ • KMC ݩใ • Nota Inc Gyazo։ൃνʔϜ
ΞϧόΠτ • JavaScript / React / Ruby on Rails • Browser Extension • גࣜձࣾͯͳ ΞϧόΠτ • TypeScript
• ژେֶֶ෦ใֶՊ ܭࢉػՊֶίʔε6ճੜ • KMC ݩใ • Nota Inc Gyazo։ൃνʔϜ
ΞϧόΠτ • JavaScript / React / Ruby on Rails • Browser Extension • גࣜձࣾͯͳ ΞϧόΠτ • TypeScript
Gyazo Browser Extension
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
NOTA Inc and me • 2013/08 ࣌ϦʔυΤϯδχΞΛ͍ͯͨ͠େֶͷઌഐʹ༠ΘΕͯன͝ ΜΛ৯ʹߦͬͨͱ͜ΖɺԿނ͔ͦͷ··ڥߏஙΛͯ͠ΞϧόΠτʹ • ࣌ϝϯόʔ͕૿͑࢝ΊΔલͰগͳ͔ͬͨ
• ҎޙɺChrome Extension͓ֆ͔͖ػೳͷϦχϡʔΞϧͳͲॾʑΛ୲ • ࠷ۙओʹReactͳͲϑϩϯτΤϯυपΓΛ୲
Feature Works • Gyazoͷυϩʔػೳ • Gyazo for Linux ϝϯςφϯε •
Scrapboxͷ֤छมπʔϧ(OSS) • Ϗʔϧൃɾαʔόӡ༻
ఆظతʹϏʔϧൃɾαʔόӡ༻͍ͯ͠·͢
• 201811݄9ɾ10 @ େࡕೆߓATC • OSSίϛϡχςΟΤϯδχΞίϛϡχςΟͳͲͷࡇయ • εςʔδاըͷ࢘ձΔͷͰྑ͚Ε͓ӽ͍ͩ͘͠͞ • https://www.k-of.jp/2018/
Pasta-K / @pastak
ΞδΣϯμ • Gyazoͷ։ൃڥʹ͍ͭͯ • GyazoͱυοάϑʔσΟϯά
͢͜ͱͱ͞ͳ͍͜ͱ • ͢͜ͱ • Gyazoͷ։ൃڥ։ൃख๏ • Gyazoͷ։ൃνʔϜͰͷৼΔ͍ʹ͍ͭͯ • ͞ͳ͍͜ͱ •
͜Ε·Ͱͷ։ൃͰಘͨࡉ͔ͳݟ • GyazoͷΞϓϦέʔγϣϯઃܭ͔Β׆͔ͤΔΞϓϦέʔγϣϯ։ൃςΫχοΫ
։ൃࣗମʹಥͬࠐΜͩΛΓ͍ͨਓ͚ • 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
Gyazoͷ։ൃڥʹ͍ͭͯ
ݱࡏͷGyazoͷ։ൃڥʹ͍ͭͯ • ΞϓϦέʔγϣϯ • Ruby on Rails • React /w
flow • Golang • GCP (GCE / Cloud Vision ...etc) • Cloud Flare
ݱࡏͷGyazoͷ։ൃڥʹ͍ͭͯ • ίϛϡχέʔγϣϯ • Slack • GitHub /w ZenHub •
Gyazo • Scrapbox • Google Hangout
ݱࡏͷGyazoͷ։ൃڥʹ͍ͭͯ • جຊతʹશһ͕ϦϞʔτϫʔΫՄೳ • དྷिࡳຈཱྀߦ͕͋ΔͷͰɺͷେ͔ΒϦϞʔτϫʔΫ༧ఆ • ϕτφϜ͔ΒϦϞʔτϫʔΫͨ͜͠ͱ͋Δ • PRGitHubɺٞSlack +
ScrapboxɺԣஅతʹGyazo • ϖΞϓϩVSCode Live ShareSlack௨Ͱ https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
Chat Ops /w GitHub Bot and CI • PR →
commit͝ͱʹ stagingڥࣗಈੜɾߋ৽ → deployment APIͰ௨ • ninja: release <REPO_NAME> ͱνϟοτʹଧͭͱrelease༻ͷPRͱ֬ೝ༻ ͷڥ͕ߏங͞ΕΔ • ࠷ۙPR͕merge͞ΕΔͱࣗಈͰˢͷൃݴΛͯ͘͠ΕΔΑ͏ʹਐԽ • release༻ͷPR͕merge͞ΕΔͱdeploy։࢝ • جຊతʹશͯͷϓϩδΣΫτͰಉ༷ͷΠϯλʔϑΣΠεΛར༻Ͱ͖Δ
Chat Ops /w GitHub Bot and CI
Chat Ops /w GitHub Bot and CI • ੲࣃΛ৯͍ͬͯ͠खݩͰcapίϚϯυΛଧ͍ͬͯͨࠒ͋ͬͨ •
Chat Opsͱݴ͏͚Ͳɺ࠷ۙνϟοτͷίϚϯυݺͼग़ࣗ͠ಈԽ ͍ͯ͠ΔͷͰɺ࠷ૣνϟοτͰΦϖϨʔγϣϯͯ͠ͳ͍ʹ͍͠ • ศར
λεΫɾਐḿཧ • GitHub /w ZenHub + Scrapbox • ৄ͘͠VPoEͷ@akiroom͕͍ͯ͠Δͣʁ
ͣͬͱมΘ͍ͬͯͳ͍͜ͱ • Ͳ͜Ͱಇ͚Δ • ͱݴͬͯҎલ݁ߏΈΜͳΦϑΟεʹډΔنײͩͬͨ • ࠷ۙσϑΥϧτϦϞʔτϫʔΫͳਓʹΑͬͯ2,3ਓ͔͠Φ ϑΟεʹډͳ͍
ͣͬͱมΘ͍ͬͯͳ͍͜ͱ • Gyazo͕͋ΒΏΔίϛϡχέʔγϣϯͷத৺ʹ͋Δ • GitHubνϟοτʹεΫγϣΛυϯυϯషΔ • Gyazo / Gyazo GIF
• υϩʔػೳͰҹจࣈɺғΈͳͲ • ػೳϨϏϡʔɺσβΠϯϨϏϡʔɺϢʔβʔαϙʔτଧͪฦ͠
Gyazo͕͋ΒΏΔίϛϡχέʔγϣϯͷத৺ʹ͋Δ • PRͷઆ໌Gyazo GIFͰBefore/After ΛࡌͤͯڍಈͷมߋΛΘ͔Γ͘͢ • ϨϏϡʔͷଧͪฦ͠ɺಛʹUIͷ͜ͱΛ ؚΉͱ͖GyazoGIFͰ
গ͠มΘͬͨ͜ͱ • νϟοτπʔϧ • Scrapboxಋೖ • Sprint MTG։࢝ • AWS→GCP
/ CoffeeScript → ES2015 + React +flow
গ͠มΘͬͨ͜ͱ • νϟοτπʔϧ • HipChatΛ͍ͬͯͨ • ಛʹOGPରԠͱ͔ͳ͔ͬͨͷͰɺAddonఏڙ͍ͯͨ͠ • https://marketplace.atlassian.com/apps/1213139 •
2014/8ࠒ SlackҠߦ
গ͠มΘͬͨ͜ͱ • Scrapboxಋೖ • Qiita:TeamΛ͍͕ͬͯͨɺ͋·Γ׆༻Ͱ͖͍ͯͳ͔ͬͨ • ૿Ҫ͞Μ͕࡞͍ͬͯͨgyazzͱ͍͏wikiͷಋೖ͕ܖػ • ॳ͋Μ·ΓੵۃతͰͳ͔ͬͨͷͷ͍࢝ΊΔͱྑ͕͞ਁಁࣾ͠ඪ४Խ •
ίϯηϓτΛܧঝ͠ਐԽͤͯ͞Scrapbox • 1΄Ͳࣾར༻͠βެ։ˠຊϦϦʔε
গ͠มΘͬͨ͜ͱ • Sprint MTGͷಋೖ • ͜͜ৄ͘͠@akiroom͕͍ͯ͠Δͣʁ
গ͠มΘͬͨ͜ͱ • AWS→GCP / CoffeeScript → ES2015 + React +
flow • GyazoࣗମRailsͰॻ͔Ε͍ͯΔΞϓϦέʔγϣϯ • نͦΜͳʹେ͖͘ͳ͍ • ఆظతʹٕज़ελοΫݟͨ͠ΓೖΕସ͑ͨΓ͍ͯ͠Δ • ଞʹPHPͩͬͨΞοϓϩʔυɾαϜωΠϧαʔόΛGoͰॻ͖ͨ͠Γ
ϑϩϯτΤϯυڥͷมભ • ଠݹʙ jQuery UI • 2014/03ʙ AngularJS • 2015/01ʙ
React • 2015/02ʹओཁϖʔδͷશ͕ͯReactʹҠߦ
ϑϩϯτΤϯυڥͷมભ • Rails͕CoffeeScript͕ͩͬͨɺ20154݄ʹBabelಋೖ • 2014/12ʹ asset-pipeline ग़ࡁΈͩͬͨ • 201511݄ʹCoffeeScriptΛґଘ͔Βআ •
͜ͷࠒReactΛ͍ͭͭɺCS, ES5, ES6͕͍ࠞͬͯͨͣ͟ • https://scrapbox.io/pastak-pub/GyazoͷϑϩϯτΤϯυ͔ΒΛऔΓ͍͑ͯ Δͷ͔
Gyazoͷ։ൃڥʹ͍ͭͯ • جຊతͳϑΟϩιϑΟʔҰ؏͍ͯ͠Δ • ϦϞʔτͰඇಉظͰಇ͚Δɻ • GyazoScrapboxɺࣗͨͪͷπʔϧ͕ಇ͖ํͷίΞʹ͋Δɻ • ۃྗ৭Μͳ͜ͱΛαϘΕΔΑ͏ʹɻChat Ops͔ΒChatཁૉࣺ͑ͯ͞Δɻ
• ΞϓϦέʔγϣϯελοΫͲΜͲΜมߋ͢Δ • ୭ͰมߋՄೳ • ͜ͷล࣍ͷষͰ͠·͢
GyazoͱυοάϑʔσΟϯά
Gyazoͷ৽ػೳͷੜ·Εํ • Ϗδωεతͳཁ • VPoEͱ͔͔Βཔ·ΕͯSprintͷλεΫʹΈࠐ·ΕΔ • υοάϑʔσΟϯά͔Βͷൃੜ • ͬͪ͜ͷΛ͠·͢
υοάϑʔσΟϯά υοάϑʔσΟϯάͱɺγεςϜαʔϏεΛ։ൃऀ͕ࣗੵۃ తʹར༻ͯ͠ɺվળ͖͢ΛࣗΒൃݟ͍ͯ͘͠ɺͱ͍͏ औΓΈͷ͜ͱͰ͋Δɻਖ਼ࣜϦϦʔεલͷαʔϏεΛݕূ͢Δख๏ ͱͯ͠ݴٴ͞ΕΔ͜ͱ͋ΕɺϦϦʔεޙͷαʔϏεΛৗతʹ ༻͍ͯվળΛݟग़͢ӦΈΛࢦ͢ޠͱͯ͠ݴٴ͞ΕΔ͜ͱ͋Δɻ from https://www.weblio.jp/content/υοάϑʔσΟϯά
Gyazo։ൃνʔϜͷ߹ݴ༿ • Move Fast and Break Things • ݩFacebookͷϞοτʔ •
ʰૉૣ͘ߦಈ͠ഁյͤΑʱ • ҊͣΔΑΓ࢈Ή͕қ͠ • ΞϓϦέʔγϣϯΛͲΜͲΜഁյతʹมԽ͍ͤͯ͘͜͞ͱΛڪΕͳ͍
Gyazo։ൃνʔϜͷ߹ݴ༿ • ͱʹ͔͘σϞϑΝʔετ • σϞΛେࣄʹ͍ͯ͠Δ • ΞΠσΞΛٞ͢Δͱ͖݁ہ࡞ͬͯΈͳ͍ͱ͔Βͳ͍ • ࢥͬͨΑΓྑ͍ /
ࢥͬͨΑΓѱ͍(͚ͲΑ͘Ͱ͖ͦ͏) • উखʹ໘ന৽ػೳΛ࡞ͬͯσϞͯ͠ɺϦϦʔεৗ൧ࣄ
υϩʔػೳͷ৽ػೳσϞϑΝʔετ • GyazoͷProϓϥϯ͚ػೳͱͯ͠υϩʔ(͓ֆඳ͖)ػೳ͕͋Δ • ॳظͷػೳ: ࢛֯Ͱғ͏ɺઢΛҾ͘ɺҹΛ͢ɺจࣈೖΕ
υϩʔػೳͷ৽ػೳσϞϑΝʔετ • GyazoͷProϓϥϯ͚ػೳͱͯ͠υϩʔ(͓ֆඳ͖)ػೳ͕͋Δ • ॳظͷػೳ: ࢛֯Ͱғ͏ɺઢΛҾ͘ɺҹΛ͢ɺจࣈೖΕ • ݱߦͷػೳ: ϖϯπʔϧɺ࢛֯ͰృΓͭͿ͠ɺελϯϓɺϞβΠΫ •
ͦΕΒͷ࠶ฤूॏͶ߹ΘͤॱΓସ͑ɺ৭ಁ໌ͷࣗ༝બ
υϩʔػೳͷ৽ػೳσϞϑΝʔετ • GyazoͷProϓϥϯ͚ػೳͱͯ͠υϩʔ(͓ֆඳ͖)ػೳ͕͋Δ • ॳظͷػೳ: ࢛֯Ͱғ͏ɺઢΛҾ͘ɺҹΛ͢ɺจࣈೖΕ • ݱߦͷػೳ: ϖϯπʔϧɺ࢛֯ͰృΓͭͿ͠ɺελϯϓɺϞβΠΫ •
ͦΕΒͷ࠶ฤूॏͶ߹ΘͤॱΓସ͑ɺ৭ಁ໌ͷࣗ༝બ ͜͜࡞ઓΛ࿅ͬͯ࠶ઃܭͨ͠͠
υϩʔػೳͷ৽ػೳσϞϑΝʔετ • GyazoͷProϓϥϯ͚ػೳͱͯ͠υϩʔ(͓ֆඳ͖)ػೳ͕͋Δ • ॳظͷػೳ: ࢛֯Ͱғ͏ɺઢΛҾ͘ɺҹΛ͢ɺจࣈೖΕ • ݱߦͷػೳ: ϖϯπʔϧɺ࢛֯ͰృΓͭͿ͠ɺελϯϓɺϞβΠΫ •
ͦΕΒͷ࠶ฤूॏͶ߹ΘͤॱΓସ͑ɺ৭ಁ໌ͷࣗ༝બ ීஈͷ༻ࡶஊͷத͔Βศརͦ͏ͳ ΞΠσΞΛউखʹ࣮ͯ͠PR stagingͰσϞΛͯ͠ྑ͍ײ৮ͩͬͨ ͷͰͦͷ··͑ͯϦϦʔε
ͲΜͲΜσϞ͢Δ • ୭ͰGyazoʹؔΘΔશͯͷίʔυΛ(PRΛհͯ͠)มߋͰ͖Δ • ͳΜ͔ཉ͍͠ػೳɺʑͷจ͕۟͋ΕPRͰઓ͏ • ʮͳΜ͔γϡοͱࢼͨ͠ΒΕͦ͏ͩͳʯͱࢥͬͨΒ·͊ͬͯΈΔ • ΊͬͪΌ͔͔࣌ؒΔͳΒ૬ஊɺͦ͏͡Όͳ͔ͬͨΒγϨοͱΔ •
ͦͷลSprint MTGͰԹײΛڞ༗
γϡοͱͬͨΒग़དྷͨྫ • Browser ExtensionͷHTMLཁૉͷBoxʹ߹ΘͤͯͷΓऔΓ • ඞཁͩͱࢥͬͯͳ͔͚ͬͨͲɺࣾͷҰ෦͔Βͷͳཁ • ృΓͭͿ͠ػೳ • ʮ࢛֯ඳ͍ͯΔ͔ͩΒதΛృΔ͚ͩ͡ΌΜʁʯ
• ϞβΠΫػೳ • ʮ࢛֯ͷྖҬऔಘ͢Δํ๏͋ΔͳΒྲྀ༻ͯ͠ൣғΛϞβΠΫॲཧ͢Ε͍͍͡ΌΜʯ
γϡοͱͬͨΒྑ͔ͬͨͷͰߟʹೖͬͨྫ • HipChat / Slack BotͬͨΒศརͱ͍͏͜ͱ͕໌֬ʹ͔͍ͬͯͨͷ Ͱɺ༻ײΛࢼͨ͢ΊͷࡶͳϓϩτλΠϓͰ࣮ફͯ͠Έ͔ͯΒɺͪΌΜ ͱॻ͖ͨ͠ • υϩʔػೳͷϦϓϨΠεͦΕ·Ͱʹͳ͔ͬͨר͖͠ʢཤྺʣػೳ
ཁૉͷೖΕସ͑ɾ࠶ฤूΛ࡞ͬͨͷͰɺUI/UXؚΊ͔ͯͳΓͷ͕ٞ͋ͬ ͨɻઃܭReactΛͬͯ࠶ઃܭ͍ͯͨ͠ • ͜Ε࠷ॳͷσϞௗऔͰϦϞʔτϫʔΫ͠Α͏ͱߦͬͨͱ͖ʹॻ͍ͨ
A/Bςετ • A/BςετΛ͍͕ͬͯͨ࣌͋ͬͨࠓ΄΅͍ͬͯͳ͍ • ͲΜͲΜdeployͨ͠Γrollbackग़དྷΔΈ͕͋ΔͷͰɺΤΠϠ ͱग़ͯ͠վળΛॏͶ͍ͯ͘ελΠϧ • υϩʔػೳͷվળग़͔ͯ͠Βඍमਖ਼Λ͢Δ͜ͱଟʑ͋Δ
ελοϑ͚ػೳ
ελοϑ͚ػೳ • A/BςετͷΘΓʹελοϑ͚ػೳΛ؆୯ʹ࣮Ͱ͖ΔΑ͏ʹ ΈΛ༻ҙ͍ͯ͠Δ • ྫ͑৽σβΠϯυϩʔػೳͷϦϓϨΠεͳͲӨڹ͕େ͖͍ ͷ࡞Γͳ͕ΒελοϑڥͰʑυοάϑʔσΟϯά͍ͯ͠Δ • PR͕େ͖͘ͳΓ͗͢Δ͜ͱΛ͙෭࡞༻͋Δ
• Gyazoͷ։ൃڥʹ͍ͭͯ͠·ͨ͠ • GyazoScrapboxͳͲΛͬͯϦϞʔτͰշదʹա͍ͯ͝͠·͢ • υοάϑʔσΟϯάΛߴʹ৯ΔͨΊʹͱʹ͔͘σϞΛେࣄʹ͍ͯ͠ ·͢ • ͦΕΛ׆͔ͨ͢ΊʹͲΜͲΜϦϦʔε͍ͯ͘͠ͱ͍͏࡞ઓʹͳ͍ͬͯ·͢ •
Sprint MTGͰ͜ΕΒΛϢϧ͘ཧ͞Ε͍ͯ·͢ ·ͱΊ