🍭
ホロライブ動画見どころ分析サイトを作るときにやったこと(フロントエンド周り)
"ホロリスの推し活を手助けするホロライブ動画見どころ分析サイト"を公開しました↓
こんな感じで動画を分析して動画の見どころをグラフから探せるようにして見ました。
公開までにフロントエンド周りで手がかかったことや気にしたことを書いて見ました。
やったこと
デザインはお任せ
フロントエンドはReact(TypeScript)で作成しました。デザインにはあまり時間をかけないで、とはいえスマホからも見れることを意識しつつ、まずは機能を作ってしまいたかったので、基本的に にお任せしてそこそこそれっぽくなればいいやくらいで作りました。
重さ対策
こんな感じで、一覧画面から選んでいく作りなんですが、
画面にいっぺんにYoutubeの動画が読み込まれると結構重くなってしまいました。そのため動画のサムネイルを表示するようにして、サムネイル上の再生ボタンを押した動画だけ読み込むようにしました。また、無限スクロールを実装してそもそも全ての動画がいっぺんに読み込まれないようにしました。
また、Youtubeから取得するサムネイルなど画像のURLもjpgではなくwebpのものを使うような対策もしています。
Youtubeの同時再生をできなくする
Youtubeを埋め込めるタイプのサイトでは同じ画面で複数の動画を同時再生するのは禁止されているようです。ただ、普通に一覧で表示すると同時再生できてしまうので対策が必要でした。
対策としては動画再生部分のComponent間でuseContextを使って再生中の動画を共有し、動画の再生イベントに反応して再生中の動画を止めるような作りにしました。
Discussion