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