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

VCborn夏祭り with NodeCG

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
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
1
480
20260204_Midosuji_Tech
Avatar for Takuya Yonezawa takuyay0ne
1
160
AIエージェントを開発しよう！-AgentCore活用の勘所-
Avatar for YukiOgawa yukiogawa
0
180
We Built for Predictability; The Workloads Didn’t Care
Avatar for Michael Stahnke stahnma
0
140
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
68k
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
Avatar for kekke-n kekke_n
1
500
22nd ACRi Webinar - NTT Kawahara-san's slide
Avatar for Nao Sumikawa nao_sumikawa
0
100
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
190
AIエージェントに必要なのはデータではなく文脈だった/ai-agent-context-graph-mybest
Avatar for Jun Naito jonnojun
1
210
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
5
1.6k
Ruby版 JSXのRuxが気になる
Avatar for SansanTech sansantech
PRO
0
160
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
Avatar for Rocket Martue rocketmartue
1
310

Featured

See All Featured
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
350
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
270
Visualization
Avatar for Eitan Lees eitanlees
150
17k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
3.9k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
450
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
74
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k

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