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

VCborn夏祭り with NodeCG

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
Ultra Ethernet (UEC) v1.0 仕様概説
Avatar for Masayuki Kobayashi markunet
3
230
EMからICへ、二周目人材としてAI全振りのプロダクト開発で見つけた武器
Avatar for Yuji Yamaguchi yug1224
5
490
DevOpsエージェントで実現する!！ AWS Well-Architected（W-A） を実現するシステム設計 / 20260307 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
3
340
マルチロールEMが実践する「組織のレジリエンス」を高めるための組織構造と人材配置戦略
Avatar for coconala_engineer coconala_engineer
3
640
マルチアカウント環境でSecurity Hubの運用！導入の苦労とポイント / JAWS DAYS 2026
Avatar for GENDA genda
0
170
バクラクのSREにおけるAgentic AIへの挑戦/Our Journey with Agentic AI
Avatar for SadayoshiTada taddy_919
2
1.1k
JAWS DAYS 2026 ExaWizards_20260307
Avatar for ExaWizards exawizards
0
350
AIエージェント・エコノミーの幕開け 〜 オープンプロトコルが変えるビジネスの未来 〜
Avatar for Shu Kobuchi shukob
0
110
Oracle Database@Azure：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
1.1k
8万デプロイ
Avatar for iwamot iwamot
PRO
2
200
Yahoo!ショッピングのレコメンデーション・システムにおけるML実践の一例 
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
160
[JAWS DAYS 2026]私の AWS DevOps Agent 推しポイント
Avatar for Toshihiro Furuno furuton
0
120

Featured

See All Featured
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
780
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
460
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.3k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
220
Visualization
Avatar for Eitan Lees eitanlees
150
17k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
150
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.7k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
9.7k

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