Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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
Kiro を用いたペアプロのススメ
Avatar for Taiki Sugawara taikis
1
500
子育てで想像してなかった「見えないダメージ」 / Unforeseen "hidden burdens" of raising children.
Avatar for Pauli pauli
2
300
今年のデータ・ML系アップデートと気になるアプデのご紹介
Avatar for Nayuta S. nayuts
1
540
ハッカソンから社内プロダクトへ AIエージェント「ko☆shi」開発で学んだ4つの重要要素
Avatar for そのだ sonoda_mj
5
500
「図面」から「法則」へ 〜メタ視点で読み解く現代のソフトウェアアーキテクチャ〜
Avatar for Satoshi Kobayashi scova0731
0
370
AI時代のワークフロー設計〜Durable Functions / Step Functions / Strands Agents を添えて〜
Avatar for やくも yakumo
3
910
ウェルネス SaaS × AI、1,000万ユーザーを支える 業界特化 AI プロダクト開発への道のり
Avatar for hacomono Inc. hacomono
PRO
0
160
Bedrock AgentCore Memoryの新機能 (Episode) を試してみた / try Bedrock AgentCore Memory Episodic functionarity
Avatar for hoshi7_n hoshi7_n
1
500
Sansanが実践する Platform EngineeringとSREの協創
Avatar for SansanTech sansantech
PRO
2
940
年間40件以上の登壇を続けて見えた「本当の発信力」/ 20251213 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
140
.NET 10の概要
Avatar for tomokusaba tomokusaba
0
120
初めてのDatabricks AI/BI Genie
Avatar for Takaaki Yayoi taka_aki
0
210

Featured

See All Featured
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
0
370
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
120
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
190
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Navigating Team Friction
Avatar for Lara Hogan lara
191
16k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
60
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
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