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
The Making of AI Chips
Avatar for Preferred Networks pfn
PRO
0
610
障害対応のRunbookは作った、でも本当に動くの？ AWS FIS で EKS の AZ 障害を再現してみた
Avatar for Hiroki Takatsuka tk3fftk
0
120
Purview Endpoint DLP 動かしてみた
Avatar for kozakigh kozakigh
1
460
Slack MCPでインシデント対応とFAQ生成を加速する：社内ワークショップの実践
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
110
Fラン学生が考える、AI時代のデザインに執着した突破口
Avatar for husensan husengs7
1
230
【2026年版】プロジェクトマネジメント実践論｜現役エンジニアが語る！～チームでモノづくりをする時のコツとは？～
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
120
はじめてのAI-DLC
Avatar for 吉田真吾 yoshidashingo
1
300
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.5k
TSKaigi 2026 - 型プラグインシステムの実装に使われるテクニック
Avatar for teamLab teamlab
PRO
1
120
Claude Code / Codex / Kiro に AWS 権限を 渡すとき、何を設計すべきか
Avatar for Kazuki Adachi k_adachi_01
6
1.9k
Personal knowledge bases using LLM
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
120
Orchestration Development Workshopを半期実施して
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
120

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.1k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
230
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
12k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
190
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.9k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
590
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
290
Done Done
Avatar for chrislema chrislema
186
16k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.1k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.9k

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