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.9k
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
LT: JavaScript / HTML カルトクイズ
pastak
0
75
「夏フェス」をヒントに新しいカンファレンスを考えてみた at 函館市電LT
pastak
3
460
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。
pastak
2
130
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。 〜LTバージョン〜
pastak
1
850
【2024年最新】「エンジニアお茶会」という取り組みについて
pastak
1
430
UserAgentに依存した分岐を捨てられるか (または何故捨てられていないのか)
pastak
4
4.2k
開発組織外の他業種も巻き込んでアクセシビリティに関する機運を高めつつある話
pastak
0
710
手を動かして始めるアクセシビリティ改善
pastak
3
1.7k
ウェブアプリケーションがオフラインでも動作できるようにやっていった話 / ServiceWorker for Offline WebApp in MANGA Viewer
pastak
0
1.2k
Featured
See All Featured
Optimizing for Happiness
mojombo
377
70k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Designing for Performance
lara
606
69k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Building Applications with DynamoDB
mza
94
6.3k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.7k
A Tale of Four Properties
chriscoyier
158
23k
Six Lessons from altMBA
skipperchong
27
3.7k
GitHub's CSS Performance
jonrohan
1030
460k
Writing Fast Ruby
sferik
628
61k
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Ͱ͜ΕΒΛϢϧ͘ཧ͞Ε͍ͯ·͢ ·ͱΊ