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
Amazon Kinesis + socket.io + D3.jsを使った webブラウザで行うリアルタイム可視化の仕組み/inovationegg-8
Search
堀家隆宏
July 02, 2016
Programming
3
4k
Amazon Kinesis + socket.io + D3.jsを使った webブラウザで行うリアルタイム可視化の仕組み/inovationegg-8
堀家隆宏
July 02, 2016
Tweet
Share
More Decks by 堀家隆宏
See All by 堀家隆宏
オープンソースコミュニティで加速するサーバーレスの未来/serverless will be
horike37
4
570
auth0-meetup.pdf
horike37
1
230
What’s happening with Serverless Framework, and it lives with AWS SAM.
horike37
0
67
What is Serverless. Why is Serverless.
horike37
1
52
aws-with-functional-saas
horike37
2
150
serverless-with-oss
horike37
0
94
slsconftokyo
horike37
0
5.2k
slsconfworkshop
horike37
3
2.3k
Test Driven Development For Lambda
horike37
2
260
Other Decks in Programming
See All in Programming
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
180
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.2k
Ruby Pattern Matching
bkuhlmann
0
920
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
3
360
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
Code Reviews
bkuhlmann
4
880
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
[SF Ruby, March 2024] Rails on Wasm
palkan
0
380
Git Rebase
bkuhlmann
11
1.6k
ONE WEDGE_company_guide
1wedge_one
0
380
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
A Modern Web Designer's Workflow
chriscoyier
688
190k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Clear Off the Table
cherdarchuk
83
310k
Facilitating Awesome Meetings
lara
41
5.6k
Product Roadmaps are Hard
iamctodd
43
9.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
Transcript
Amazon Kinesis + socket.io + D3.jsΛͬͨ webϒϥβͰߦ͏ϦΞϧλΠϜՄࢹԽͷΈ @Amimoto_Ami amimoto-ami.com
ࣗݾհ • ໊લɿງՈོ • ॴଐɿAMIMOTO TEAM • Githubɿhttps://github.com/horike37 • Qiitaɿhttp://qiita.com/horike37
• ಘҙͳ͜ͱɿAWS, WordPress
https://ja.amimoto-ami.com/ AMIMOTO
Qiita http://qiita.com/horike37
https://github.com/horike37/ Github
ࠓ͢͜ͱ
AWSͰՄࢹԽΞʔΩςΫνϟΛ࡞Δٕज़
ࠓ͞ͳ͍͜ͱ
ՄࢹԽͷతɺ֓೦ɺֶ
ΞδΣϯμ
• TweetՄࢹԽπʔϧʮSocial Stream MonitorʯͷσϞ • Social Stream MonitorΞʔΩςΫνϟͷ • ϦΞϧλΠϜՄࢹԽ+σʔλͷӬଓԽ
Social Straem Monitor
Social Straem Monitorͱ TwitterͷετϦʔϛϯάσʔλΛ ϦΞϧλΠϜʹՄࢹԽ͢Δπʔϧ
https://github.com/megumiteam/social-stream-monitor Github
·ͣɺσϞ
ΞʔΩςΫνϟ
Amazon Kinesis ϦΞϧλΠϜ ετϦʔϛϯάॲཧ
ΞʔΩςΫνϟ ετϦʔϛϯά σʔλΛॲཧ
Amazon Kinesisͱ • ϑϧϚωʔδυͳϦΞϧλΠϜσʔλॲ ཧαʔϏε • େྔͷετϦʔϛϯάσʔλΛγϟʔ υʹอଘɻόοΫΤϯυͷΞϓϦέʔ γϣϯͰऔΓग़ͯ͠ॲཧ
Amazon Kinesis͕ແ͍ͱ͖ ετϦʔϛϯάσʔλ σʔλॲཧܥ
Amazon Kinesis͕͋Δ࣌ ετϦʔϛϯάσʔλ σʔλॲཧܥ ॲཧܥ͕ѻ͍͍͢Α͏ʹσʔλΛอଘ
Social Stream Metor্ͷׂ • TwitterͷετϦʔϛϯάσʔλΛҰ࣌ తʹอଘͯ͠ΞϓϦέʔγϣϯ͔Βσʔ λͱͯ͠ॲཧ͘͢͢͠Δ
Lambda ίʔυͷ࣮ߦ
ΞʔΩςΫνϟ Kinesis͔Βड͚ औͬͨσʔλΛ SNSʹ͢
Lambdaͱ • AWS ΠϯϑϥετϥΫνϟΛ༻ͯ͠ ίʔυͷ࣮ߦΛߦ͢ΔίϯϐϡʔςΟ ϯάαʔϏε • ΠϕϯτυϦϒϯͳॲཧ͕Մೳ
SNS http endpointσʔλΛ͢ σʔλϨίʔυΛSNSʹpublish
Social Stream Metor্ͷׂ • webϒϥβͰදࣔ͢ΔͨΊʹhttpϓϩ τίϧͰσʔλΛྲྀ͢ඞཁ͕͋Δ • ͦͷͨΊͷSNS http push௨σʔλ
Λ͢
ΞʔΩςΫνϟ HTTPΤϯυϙΠϯ τσʔλΛpush
SNS HTTP notification HTTPΤϯυϙΠϯτ PUSH௨
SNS HTTP notificationͱ • Amazon SNS Λ༻ͯ͠ɺ1 ͭҎ্ͷ HTTPΤϯυϙΠϯτʹ௨ϝοηʔδ Λૹ৴
• HTTP POST ϦΫΤετΛૹ৴͠ɺ௨ ͷ༰Λड৴ొͨ͠ΤϯυϙΠϯ τʹ৴
SNS HTTP notificationͱ Topicʹड৴ొ͞ΕͨΤϯυϙΠϯτʹσʔλΛPOST
Social Stream Metor্ͷׂ • webϒϥβͰදࣔ͢ΔͨΊʹhttpϓϩτίϧͰ σʔλΛྲྀ͢ඞཁ͕͋Δ • websocketͰϒϥβʹσʔλΛૹ৴͢ΔͨΊͷ socket.ioαʔόʹσʔλΛpush͢Δ
socket.io ϦΞϧλΠϜͳ WebΞϓϦ
ΞʔΩςΫνϟ WebSocketͰϒϥ βʹσʔλૹ৴
socket.io • ͯ͢ͷϒϥβɾϞόΠϧσόΠεͰ ϦΞϧλΠϜ௨৴ΛՄೳͱ͢Δ͜ͱΛ తʹ࡞ΒΕͨJavaScriptϥΠϒϥϦ • WebSocketʹΑΔϒϥβͱαʔόͷ ํ௨৴
Social Stream Metor্ͷׂ • SNS͔ΒૹΒΕ͖ͯͨTweetΛWebSocketΛ͍ ϒϥβϦΞϧλΠϜʹૹ৴
SNS͔ΒૹΒΕ͖ͯͨσʔλΛड৴ https://github.com/megumiteam/social-stream-monitor/blob/master/app.js
ϒϥβσʔλΛૹ৴ https://github.com/megumiteam/social-stream-monitor/blob/master/app.js
D3.js σʔλɾυϦϒϯɾ υΩϡϝϯτ
ΞʔΩςΫνϟ D3.jsʹΑΔඳը
D3.jsͱ • javascriptͷσʔλϏδϡΞϥΠθʔ γϣϯΤϯδϯ • σʔλΛجʹDOMΛૢ࡞ • άϥϑඳըϥΠϒϥϦͰͳ͍ɻD3Λ ϕʔεʹͨ͠άϥϑඳըϥΠϒϥϦଟ ଘࡏ
ϦΞϧλΠϜνϟʔτ
Real-time Charting Library http://epochjs.github.io/epoch/
εϐʔυϝʔλʔ
http://iop.io/iopctrl Speedometer
͜͜·ͰͷྲྀΕΛཧ͢Δͱ • KinesisʹΑΓTweetσʔλΛऩू • LambdaʹΑΓKinesis͔ΒσʔλΛऔಘ ͯ͠SNS Topicʹσʔλૹ৴ • SNS HTTP
notification pushʹΑΓ socket.ioαʔόʹσʔλૹ৴ • socket.ioαʔό͔Βϒϥβ͔Βૹ৴ ͞ΕͨσʔλΛD3.jsͰՄࢹԽ
σʔλͷӬଓԽ
՝ • ϦΞϧλΠϜͳՄࢹԽʹ߹ΘͤͯɺσʔλΛੵͯ͠ੳΛߦ͍͍ͨ
DynamoDB Stream σʔλϕʔεͷ σʔλΩϟϓνϟ
DynamoDB Streamͱ • DynamoDB ςʔϒϧʹอଘ͞Ε߲ͨͷมߋΛɺม ߋͷൃੜ࣌ʹΩϟϓνϟͰ͖Δ Ϣʔεέʔε • ৽͍͠ը૾ΛΞοϓϩʔυ͢Δͱ͙͢ʹɺάϧʔϓ ͷͯ͢ͷ༑ਓͷϞόΠϧσόΠεʹ௨Λࣗಈૹ৴
• Ϣʔβొ͕͋ΕɺΑ͏ͦ͜ϝʔϧΛૹ৴͢Δ
ΞʔΩςΫνϟ
ΞʔΩςΫνϟ σʔλͷӬଓԽ+ ετϦʔϛϯάσʔλ৴
ΞʔΩςΫνϟ τϦΨʔΛ༗ޮԽͯ͠ DynamoDB Streamͷ σʔλॲཧ
σʔλͷӬଓԽ
LambdaϑΝϯΫγϣϯͷτϦΨʔ༗ޮԽ
τϦΨʔϑΝϯΫγϣϯ SNS Topicʹσʔλૹ৴ DynamoDBϨίʔυऔಘ
ӬଓԽ͞ΕͨσʔλΛޙ͔ΒऔΓग़͢ DymanoDB Lambda API Gateway
͜͜·ͰͷྲྀΕΛཧ͢Δͱ • DynamoDBΛΈࠐΉ͜ͱͰΓσʔλ ͷӬଓԽ͕Մೳ • ӬଓԽͤͨ͞σʔλɺϨϙʔτσʔ λͱͯ͠ޙ͔ΒऔΓग़͢͜ͱ͕ग़དྷΔ
CloudFormation ͰߏΛݻΊΔ
՝ • ͜͜·ͰෳࡶͳߏΛຖճ࡞Δͷݱ࣮తͰͳ͍
CloudFormation ΞʔΩςΫνϟΛ ΞʔΧΠϒ
CloudFormation https://github.com/megumiteam/social-stream-monitor/blob/master/ social_stream_processing.template
CloudFormationϝϦοτ • ಉ͡ߏΛ͍ͭ͘Ͱ্ཱͪ͛ΒΕΔ • ࣅͨΑ͏ͳՄࢹԽߏΛͭ͘ΔͷͰ͋Ε ϑΥʔΫͯ͠վม͢ΕޮΑ͘ΞʔΩςΫ νϟ͕ΊΔ
·ͱΊ • ࠓճհͨ͠ߏΛϕʔεʹ͢ΕTwitterҎ֎ͷՄࢹԽՄೳ • AWS IoTʹMQTT over WebSocketͱ͍͏Έ͕͋Δͷ ͰηϯαʔσʔλͷϒϥβՄࢹԽͬͱΓ͍͢ •
࡞ͬͨߏCloudFormationͰݻΊͯ࠶ར༻Մೳʹ͢Δͷ ͕Φεεϝ • ࠓճհͨ͠ߏͰϦΞϧλΠϜՄࢹԽ+σʔλͷӬଓԽ͕Մೳ
·ͱΊ http://qiita.com/horike37 ࠓհͨ͠ΞʔΩςΫνϟͷৄࡉQiitaͷํʹιʔείʔυؚΊͯॻ͍͍ͯ·͢ ڵຯ͋Δํੋඇͷ͍ͧͯΈ͍ͯͩ͘͞
@Amimoto_Ami amimoto-ami.com THANK YOU! Amazon Kinesis + socket.io + D3.jsΛͬͨ
webϒϥβͰߦ͏ϦΞϧλΠϜՄࢹԽͷΈ
None