Youtube生放送プラットフォームの各ライバーページを作っていく

ついに各ページの最深部となるライバーのページを作っていく

これまでYoutube生放送プラットフォームのトップページ、各ライバー選択ページを作ってきました。

そして次は最後の階層になる各ライバーの生放送選択画面を作っていきます。

前回までの画面でこのライバーを選択できる画面を作りました。

とりあえずにじさんじの方だけ実装しています。舞元さんの画像だけ手を隠したら履歴書に貼れそうです。

今回はこの中でも真ん中にいる笹木咲さんの個別ページを作っていこうと思います。

既にいくつかの動画の情報をFirebaseのCloud Firestoreにあげているのでそこからデータを取得していきます。

こんな感じになります。以下の情報が入っていますね。

• 各配信のサムネ
• 総コメント数
• 総スパチャ金額
• 生放送時刻

このあたりのデータはリアルタイムにYoutubeから取得している訳ではなく、以前書いた記事のとおりPythonプログラムで毎日サーバがYoutubeのデータを参照して事前にデータベースにあげてあります。

Youtube APIを使っていますが正直あまりYoutube APIをWEBアプリで稼働したくないですからね。

かなりFirestoreに工夫して入れているのでデータベースの使用回数には余裕があります。

ただ、ここから少し手を入れる必要があります。この時点でライバー(今回は笹木咲さん)の毎月のスパチャ金額とかコメント数とかをまとめたページを追加しておきます。

そうなるとMaterial UIのTabsの出番ですかね。

このようにページを簡単に表示変更できるようになっています。

今回のページでは各生放送のページと合わせてスパチャ金額を期間指定して表示できる機能をつけようと思っています。

とりあえずその点を踏まえてページを作るとこんな感じになります。

生放送ページはとりあえずこんな感じですね。ただこの記事からは分かりにくいかも知れませんがとにかく画質が荒い・・・。

Youtubeはこの辺の画質を下げる事で容量を節約してたのか・・・知らなかったよ・・・。

それじゃ次はスパチャ金額を表示する機能を実装していきましょうか。

どう表示しようかな・・・と悩みましたが指定期間の合計スーパーチャット金額とコメント数を一番上に表示し、その下に一覧をTableで作ろうかなと思います。

ださい！！！あまりのダサさにちょっと萎えました。ただあんまり初期サイト構成に時間をかけたくないので、この画面で採用します。せめて合計金額とコメント数は文字色変えようかな・・・。

あとはこのままだと期間の指定が出来ていないので期間指定を可能にしていきます。

ちょっとエラーが出るトラブルがありながらもとりあえず画面に実装しました。

右上に日付を指定する機能が付きました。ちょっと大きいかな？もう少し小さくしてもよさそうですが、とりあえず配置は完了です。

この期間を指定した場合はその期間内のデータしか表示しない仕組みにします。

3月20日から3月28日までを指定したらその期間のデータしか出てこない事を確認できました。

これでとりあえず特定のVTuber個人のページは完成ですね。

いよいよ次は各生放送のコメントについて見られるページを用意していきますが、それは次の記事にします。