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
非機能品質を作り込むための実践アーキテクチャ
knih
2
660
AWS re:Invent 2024 ふりかえり
kongmingstrap
0
130
How to be an AWS Community Builder | 君もAWS Community Builderになろう!〜2024 冬 CB募集直前対策編?!〜
coosuke
PRO
2
2.8k
Amazon VPC Lattice 最新アップデート紹介 - PrivateLink も似たようなアップデートあったけど違いとは
bigmuramura
0
190
ブラックフライデーで購入したPixel9で、Gemini Nanoを動かしてみた
marchin1989
1
510
Amazon SageMaker Unified Studio(Preview)、Lakehouse と Amazon S3 Tables
ishikawa_satoru
0
150
Password-less Journey - パスキーへの移行を見据えたユーザーの準備 @ AXIES 2024
ritou
3
1.4k
NilAway による静的解析で「10 億ドル」を節約する #kyotogo / Kyoto Go 56th
ytaka23
3
370
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
280
C++26 エラー性動作
faithandbrave
2
670
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
210
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
420
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Practical Orchestrator
shlominoach
186
10k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Six Lessons from altMBA
skipperchong
27
3.5k
Done Done
chrislema
181
16k
Designing Experiences People Love
moore
138
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
160
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
A Philosophy of Restraint
colly
203
16k
Optimizing for Happiness
mojombo
376
70k
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