Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VCborn夏祭り with NodeCG

Avatar for wamo wamo
August 20, 2022
Technology
1.3k
0

VCborn夏祭り with NodeCG

Avatar for wamo

wamo

August 20, 2022

Other Decks in Technology

See All in Technology
データベース研修【MIXI 26新卒技術研修】
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
260
Vポイント分析基盤におけるデータモデリング20年史
Avatar for タロウ taromatsui_cccmkhd
4
770
GoでCコンパイラを作った話
Avatar for repunit11 repunit
0
160
キャリアLT会#3
Avatar for Beli beli68
2
270
クラウドを使う側から、作る側へ / 大吉祥寺.pm 2026前夜祭
Avatar for FUJIWARA Shunichiro fujiwara3
6
1.5k
「待ち時間」の消滅と「自我消耗」の加速：生成AI時代のエンジニアを救うメンタル・リソース管理
Avatar for フクイ poropinai1966
0
160
Playwright × AI Agent でE2Eテストはどう変わるか AI駆動テストの可能性と実用検証の結果
Avatar for Taiga Oyu taiga7543
2
880
データ活用研修 データマネジメント【MIXI 26新卒技術研修】
Avatar for MIXI ENGINEERS mixi_engineers
PRO
2
270
論語・武士道・産業革命から見る　かわるもの、かわらないもの
Avatar for nakamichi ichimichi
7
1.1k
どこまでAIに任せるか 〜確率論と決定論の境界決定〜
Avatar for Shu Kobuchi shukob
0
520
Claude CodeとAmazon Bedrock AgentCoreでつくる、自分だけのAIアシスタント
Avatar for y-mae ymae
0
110
データと地図で読む 大井町の「かわるもの、かわらないもの」
Avatar for じゅんじゅん yoshiyama_hana
0
310

Featured

See All Featured
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
360
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
660
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
230
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.5k

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