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
Git in Team
kawaguti
PRO
3
380
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
1
240
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
10
4.9k
ビズリーチ求職者検索におけるPLMとLLMの活用 / Search Engineering MEET UP_2-1
visional_engineering_and_design
1
140
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
180
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing Hiroshima 2025 Edition
tomzoh
0
140
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
870
incident_commander_demaecan__1_.pdf
demaecan
0
160
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
210
React19.2のuseEffectEventを追う
maguroalternative
1
400
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
990
Featured
See All Featured
Done Done
chrislema
185
16k
Documentation Writing (for coders)
carmenintech
75
5.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
The Cult of Friendly URLs
andyhume
79
6.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Speed Design
sergeychernyshev
32
1.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
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