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

VCborn夏祭り with NodeCG

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for wamo wamo
August 20, 2022
Technology
0
1.3k

VCborn夏祭り with NodeCG

Avatar for wamo

wamo

August 20, 2022
Tweet

Other Decks in Technology

See All in Technology
FlutterでPiP再生を実装した話
Avatar for 白井翔大 s9a17
0
150
Kiro Meetup #7 Kiro アップデート (2025/12/15〜2026/3/20)
Avatar for Katz Ueno katzueno
2
250
大規模ECサイトのあるバッチのパフォーマンスを改善するために僕たちのチームがしてきたこと
Avatar for panda_program panda_program
1
390
Embeddings : Symfony AI en pratique
Avatar for Grégoire Pineau lyrixx
0
210
スピンアウト講座05_実践活用事例
Avatar for overflow ,Inc overflowinc
0
1.1k
From Senior to Staff : To infinity and beyond !
Avatar for Thong Kuah kuahyeow
0
110
CloudFrontのHost Header転送設定でパケットの中身はどう変わるのか？
Avatar for nagisa_53 nagisa53
1
160
Phase03_ドキュメント管理
Avatar for overflow ,Inc overflowinc
0
2.4k
Blue/Green Deployment を用いた PostgreSQL のメジャーバージョンアップ
Avatar for Ken Kato kkato1
0
120
GitHub Copilot CLI で Azure Portal to Bicep
Avatar for Yuta Matsumura tsubakimoto_s
0
190
DDD×仕様駆動で回す高品質開発のプロセス設計
Avatar for Koichiro Matsuoka littlehands
6
2.4k
PostgreSQL 18のNOT ENFORCEDな制約とDEFERRABLEの関係
Avatar for Yasuo Honda yahonda
0
120

Featured

See All Featured
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
140
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
160
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.1k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
270
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
93
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
640
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
450
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.3k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
150
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
390

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