【VTuber】配信画面(OBS)にツイートを降らせる機能を作ったよ【2D】

配信画面に特定のハッシュタグでツイートされた文字列を降らせたり出来るプログラムをつくりました。物理演算もします。

配信画面にツイートを降らせるプログラムを作ったよ！！物理演算付き！！https://t.co/BUuo4Js5n6 pic.twitter.com/PKOI6pwNYv

— きりみんちゃん💮バーチャル男声幼女プログラマー(茶) (@kirimin_chan) January 16, 2020

3D空間上にツイートやコメントを降らせるのをやっているVTuberさんは時々見かけるけど、二次元でも同じようなことをやりたいなーと思って作りました。

実装

GitHubで公開しています。トークンとか見えちゃだめなものは外だししてるはず。。。

kirimin/DroppingTweetsOnStreaming

HTML上で実現してOBSの内蔵ブラウザで表示させている感じです。チャット欄の表示とかと同じ方法ですね。

全体の構成としてはフロントではmatter.jsという物理演算ライブラリを使ってCanvas上に文字列をオブジェクトとして投下させています。
文字列のソースとなるツイートの取得はTwitter Data APIを使っているのですが、フロントから直接WebAPIを叩こうとするとクロスドメインで弾かれてしまうため、Firebase Cloud FunctionsをバックエンドAPIとして挟み定期的にリクエストし、Cloud Functions上からTwitter Data APIのsearchを叩いていて結果を加工して返しています。

matter.jsで文字列を降らせる辺りの実装はこちらのエントリの開設とサンプルコードを参考というかベースにさせて頂きました。

絵文字😄で物理演算がしたい👌 - Qiita

今回matter.jsもCloud Functionsも初めて使ったのですが、どちらも便利でいろいろ応用できそうですね。