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.2k

VCborn夏祭り with NodeCG

Avatar for wamo

wamo

August 20, 2022
Tweet

Other Decks in Technology

See All in Technology
「O(n log(n))のパフォーマンス」の意味がわかるようになろう
Avatar for dhirabayashi dhirabayashi
0
140
はじめての OSS コントリビューション 〜小さな PR が世界を変える〜
Avatar for Chihiro Ito chiroito
4
310
内部品質・フロー効率・コミュニケーションコストを悪化させ現場を苦しめかねない16の組織設計アンチパターン［超簡易版］ / 16 Organization Design Anti-Patterns for Software Development
Avatar for mtx2s mtx2s
2
800
“それなりに”安全なWebアプリケーションの作り方
Avatar for Ryusei Ishikawa xryuseix
0
370
フライトコントローラPX4の中身（制御器）を覗いてみた
Avatar for ざきまつ santana_hammer
1
140
米軍Platform One / Black Pearlに学ぶ 極限環境DevSecOps
Avatar for jyoshise jyoshise
1
210
クレジットカードの不正を防止する技術
Avatar for Yuta Horii yutadayo
16
7.4k
マイクロリブート ~ACEマインドセットで実現するアジャイル~
Avatar for ソニー株式会社 sony
1
350
What's the recommended Flutter architecture
Avatar for AAkira aakira
3
1.6k
Spring Boot利用を前提としたJavaライブラリ開発方法の提案
Avatar for Koki Hoshihara kokihoshihara
PRO
2
210
CloudFormationコンソールから、 実際に作られたリソースを辿れるようになろう！
Avatar for amixedcolor amixedcolor
1
190
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.9k

Featured

See All Featured
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
380
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
960

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