VCborn夏祭り with NodeCG

Transcript

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