きっかけ

#

にじさんじを筆頭とする vTuber（この場合はライバーですね）にどハマりしてしまいました。 供給が多いのは完全にアドバンテージなことがわかりますね。

さて，そんなライバーもにじさんじだけで80人超？全体にしたら9000人とかいるらしく，とてもじゃないけど全体を追うことはできません。

アーカイブから面白い動画を探して見ることになりますが，，，今のYouTubeだと再生回数か配信日でしかソートできないため探しづらいです。

そんなこんなで「高評価割合やコメント数でソートできたら便利じゃん！」って思ったので作りました。ほぼ自分用です。

使い方

#

https://ytsort.sun-yryr.com にアクセスします。

まずハマりたいライバーを検索します。

チャンネルを選ぶと動画リストが表示されるので，自分の好きな探し方で気になる動画を探します。

僕は「コメントの降順」と「高評価/全評価の昇順」がオススメですね。

カードをタッチするとYoutube公式が開きます。

良いvtuberライフを！

技術的なこととか

#

今回のコード

使用技術

#

• React　フロントエンド。フロントの開発経験が0だったので，やるならReactかな〜って選んだ。
  • Material UI　これがないと生きていけない。ヤバい
• Express　バックエンド。YoutubeAPIを叩いて動画情報を取得するのはここでやりました。
• Nginx　前から使ってるのが建ってるので。サブドメインにしたりssl通したりキャッシュをお願いしたりした。

どっちもjsですね。Reactは神だった……

詰まったこと

#

• Reduxを使ってないので，stateの管理を考えるのが大変だった。親のstateが変わったら子の書き換えが走るから，一番の親に持たせておけばいいってわけでもないんですよね。
• React-Routerでパス操作してることによるNginxの設定ミスがあった。どのパスでもindex.htmlを呼ぶ必要があるね。
• YouTubeAPIのリミット。これはどうしようもないのかな，アクセスしすぎると弾かれるようになる。
• Google Adsense。複垢判定を喰らう。（メインの垢でしか登録してないのに弾かれて悔しい）

まとめ

#

React天才すぎるのでヤバいです。Material-Uiもやばい。レスポンシブの実装が簡単すぎる。

adsenseはどうしようもないにしても，YouTubeAPIの制限は軽くしてもらえるように連絡してみます。

少しでも推し事が便利になればいいなと思います。