タイトル通り、生放送でのコメントが画面に流れるようにしました（こんな感じ↓）
デバッグ
12/30 20:00 からこれを使った生放送をやろうと思います（1時間くらい）。
お時間ある方はぜひコメントいただけると嬉しいです。
仕組み
画面上に、 透明 で クリックできない 画面を 常に最前面 に出しています。
YouTubeの Live Streaming APIで定期的にコメントを取得し、新しいコメントがあればそれを表示するようにしています。
コメントはアニメーションで右から左に流しています。
コメントが流れ終わると、上から詰めてコメントが表示されるようになってます。
使った技術
- electron
- React(TypeScript)
- YouTube Live Streaming API
- anime.js
Electron
Webの技術でデスクトップアプリを作れる技術。
https://www.electronjs.org/
ものすごく簡単にデスクトップアプリが作れます。
今回は、 electron forge という配布、インストール、アップデートなどを良い感じに面倒見てくれるものを使っています。
https://www.electronforge.io/
BrowserWindow の設定項目を見れば、簡単に透明化や常に最前面などを設定することができます。
始め方も
yarn create electron-app my-app
とめちゃくちゃ簡単に始められます。
React(TypeScript)
electron は簡単に TypeScript , React を使うことができます。
https://www.electronforge.io/guides/framework-integration/react-with-typescript
超お手軽。
YouTube Live Streaming API
生放送の情報は下記API
https://developers.google.com/youtube/v3/live/docs/liveBroadcasts
コメントの情報は下記API
https://developers.google.com/youtube/v3/live/docs/liveChatMessages
で取得可能。残念ながらリアルタイムにコメントをくれるAPIはない。
また、コメント取得のAPIがなんと order パラメータがないので、並び替えられない（衝撃）。
一度に2000件までデータ取得できるけど、人気YouTuberだと辛い。
また、生放送の情報を取得するには OAuth が必要なのも面倒(Service AccountやAPI Keyでは取得できない)。
https://developers.google.com/youtube/v3/live/registering_an_application
なお、APIのクオータは、ここを参照と書いてあるが、リソースにLiveStreamingのリソースが存在しない…
https://developers.google.com/youtube/v3/determine_quota_cost
おそらく無料だと1万回までリクエスト可能。やっすんのような弱々YouTuberなら余裕だが、人気YouTuberだとあまりもたないかも。
anime.js
JSでアニメーションを簡単に実装できるライブラリ。
今回は、CSSでのアニメーションだとうまく動かず（Reactのリストの追加、削除に引きずられる）、Anime.jsをラップしているという react-anime も動かなかった。
https://github.com/hyperfuse/react-anime
仕方なく自分で anime.js を使ってコンポーネントを作成しました。
最後に
YouTubeの生放送で、コーディングしているとコメントに気づきにくいという問題を良い感じに解決できないかと思っていましたが、作ってみたらすごく良いものになりました。
今はまだ配布できる状況じゃないですが、配布できる状況になったら他のYouTuberさんたちが利用できるようにしたいと思います。
OSSにもしたいなと思ってます。