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
VCborn夏祭り with NodeCG
Search
wamo
August 20, 2022
Technology
0
1.2k
VCborn夏祭り with NodeCG
wamo
August 20, 2022
Tweet
Share
Other Decks in Technology
See All in Technology
Global Databaseで実現するマルチリージョン自動切替とBlue/Greenデプロイ
j2yano
0
220
プロダクト開発者目線での Entra ID 活用
sansantech
PRO
0
290
ライフステージの変化を乗り越える 探索型のキャリア選択
tenshoku_draft
2
470
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
10
1.4k
最近のラズピッピいじり / 20250308-rpijam-13th-birthday
akkiesoft
0
150
OSSの実装を参考にBedrockエージェントを作る
moritalous
2
400
事業を差別化する技術を生み出す技術
pyama86
4
1.2k
“常に進化する”開発現場へ! SHIFTが語るアジャイルQAの未来/20250306 Yuma Murase
shift_evolve
0
180
Postman AI Agent Builderで AI Agentic workflow のプロトタイピング / Prototyping AI Agentic Workflow with Postman AI Agent Builder
yokawasa
0
210
LangGraph × Bedrock による複数の Agentic Workflow を利用した Supervisor 型のマルチエージェントの実現/langgraph-bedrock-supervisor-agent
ren8k
4
460
Oracle Cloud Infrastructure IaaS 新機能アップデート 2024/12 - 2025/02
oracle4engineer
PRO
0
130
エンジニアの健康管理術 / Engineer Health Management Techniques
y_sone
8
6.8k
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
521
39k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Automating Front-end Workflow
addyosmani
1369
200k
Practical Orchestrator
shlominoach
186
10k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Unsuck your backbone
ammeep
669
57k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
101
18k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
RailsConf 2023
tenderlove
29
1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1.1k
Transcript
VCborn夏祭り with NodeCG NodeCGで作る配信レイアウト 1 1
そもそものきっかけ 2 2
TwitterのタイムラインとYouTubeの チャットを融合したい 3 3
OBS単体では無理 4 4
ただ一からシステムを作るのは面倒くさい 5 5
RTA in JapanやGDQではNodeCGなるもの を使っているらしい 6 6
って何だ? 7 7
8 8
9 9
NodeCGは 動的な配信レイアウトの作成ツール 10 10
値をリアルタイムで配信に 反映できる便利な奴 11 11
詳しいことは自分で調べてね 12 12
VCborn夏祭り向けに作る 13 13
記事を参考にReactやwebpackを導入 https://blog.livewing.net/nodecg-react 14 14
操作側の見た目をイイ感じにするためMUIを導入 15 15
配信側はカスタマイズ性を高めるため Tailwind CSSを入れた 16 16
チャットを作る 17 17
Twitter-liteでやろうとしたが... 更新されていない Stream APIが1.1のみ 18 18
Twitterにはtwitter-api-v2のStream APIを使う https://github.com/PLhery/node-twitter-api-v2 19 19
YouTubeにはyoutube-chatを使う googleapisでYouTubeチャットを拾う方法が分からなかった レート制限がないのでありがたい 20 20
メッセージを配列に追加する関数 21 21
何となくで作って完成 22 22
とここで問題発生 23 23
チャットデータは更新されているが 自動で反映されない 24 24
1秒ごとにStateを更新することで強引に対処 25 25
完成! 26 26
今あなたが見ている画面が完成物です 27 27
詳しい解説は後日ブログに投稿します 28 28
wamo https://wmsci.com 29 29