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ブラウザで...
Search
堀家隆宏
July 02, 2016
Programming
3
4.5k
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
730
auth0-meetup.pdf
horike37
1
260
What’s happening with Serverless Framework, and it lives with AWS SAM.
horike37
0
110
What is Serverless. Why is Serverless.
horike37
1
80
aws-with-functional-saas
horike37
2
180
serverless-with-oss
horike37
0
130
slsconftokyo
horike37
0
5.5k
slsconfworkshop
horike37
3
2.7k
Test Driven Development For Lambda
horike37
2
350
Other Decks in Programming
See All in Programming
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
230
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
9.7k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
760
リッチエディターを安全に開発・運用するために
unachang113
1
320
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
380
iOS開発スターターキットの作り方
akidon0000
0
230
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
140
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
300
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
5
1.7k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
490
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Invisible Side of Design
smashingmag
301
51k
Visualization
eitanlees
146
16k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
A better future with KSS
kneath
238
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Why Our Code Smells
bkeepers
PRO
337
57k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
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