VCborn夏祭り with NodeCG
by
wamo
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
VCborn夏祭り with NodeCG NodeCGで作る配信レイアウト 1 1
Slide 2
Slide 2 text
そもそものきっかけ 2 2
Slide 3
Slide 3 text
TwitterのタイムラインとYouTubeの チャットを融合したい 3 3
Slide 4
Slide 4 text
OBS単体では無理 4 4
Slide 5
Slide 5 text
ただ一からシステムを作るのは面倒くさい 5 5
Slide 6
Slide 6 text
RTA in JapanやGDQではNodeCGなるもの を使っているらしい 6 6
Slide 7
Slide 7 text
って何だ? 7 7
Slide 8
Slide 8 text
8 8
Slide 9
Slide 9 text
9 9
Slide 10
Slide 10 text
NodeCGは 動的な配信レイアウトの作成ツール 10 10
Slide 11
Slide 11 text
値をリアルタイムで配信に 反映できる便利な奴 11 11
Slide 12
Slide 12 text
詳しいことは自分で調べてね 12 12
Slide 13
Slide 13 text
VCborn夏祭り向けに作る 13 13
Slide 14
Slide 14 text
記事を参考にReactやwebpackを導入 https://blog.livewing.net/nodecg-react 14 14
Slide 15
Slide 15 text
操作側の見た目をイイ感じにするためMUIを導入 15 15
Slide 16
Slide 16 text
配信側はカスタマイズ性を高めるため Tailwind CSSを入れた 16 16
Slide 17
Slide 17 text
チャットを作る 17 17
Slide 18
Slide 18 text
Twitter-liteでやろうとしたが... 更新されていない Stream APIが1.1のみ 18 18
Slide 19
Slide 19 text
Twitterにはtwitter-api-v2のStream APIを使う https://github.com/PLhery/node-twitter-api-v2 19 19
Slide 20
Slide 20 text
YouTubeにはyoutube-chatを使う googleapisでYouTubeチャットを拾う方法が分からなかった レート制限がないのでありがたい 20 20
Slide 21
Slide 21 text
メッセージを配列に追加する関数 21 21
Slide 22
Slide 22 text
何となくで作って完成 22 22
Slide 23
Slide 23 text
とここで問題発生 23 23
Slide 24
Slide 24 text
チャットデータは更新されているが 自動で反映されない 24 24
Slide 25
Slide 25 text
1秒ごとにStateを更新することで強引に対処 25 25
Slide 26
Slide 26 text
完成! 26 26
Slide 27
Slide 27 text
今あなたが見ている画面が完成物です 27 27
Slide 28
Slide 28 text
詳しい解説は後日ブログに投稿します 28 28
Slide 29
Slide 29 text
wamo https://wmsci.com 29 29