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.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
710
auth0-meetup.pdf
horike37
1
250
What’s happening with Serverless Framework, and it lives with AWS SAM.
horike37
0
88
What is Serverless. Why is Serverless.
horike37
1
65
aws-with-functional-saas
horike37
2
160
serverless-with-oss
horike37
0
110
slsconftokyo
horike37
0
5.4k
slsconfworkshop
horike37
3
2.6k
Test Driven Development For Lambda
horike37
2
310
Other Decks in Programming
See All in Programming
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.7k
CloudNativePGを布教したい
nnaka2992
0
120
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
220
Datadog Workflow Automation で圧倒的価値提供
showwin
1
270
Amazon Bedrockマルチエージェントコラボレーションを諦めてLangGraphに入門してみた
akihisaikeda
1
140
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
160
TCAを用いたAmebaのリアーキテクチャ
dazy
0
210
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
130
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
自力でTTSモデルを作った話
zgock999
0
110
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Automating Front-end Workflow
addyosmani
1369
200k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Building an army of robots
kneath
303
45k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Thoughts on Productivity
jonyablonski
69
4.5k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Adopting Sorbet at Scale
ufuk
75
9.2k
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