私は比較的YouTubeの動画をよく見るのですが、自分が好きな動画のジャンルがチャンネル問わずにトピックごとにまとめられていると便利だろうと常々考えていました。そこで、自分のフロントエンド技術向上も兼ねて、自分用にYouTubeの動画をキュレーションしてくれるWebアプリを作ってみました。
成果物
完成したWebアプリは、Herokuにデプロイして公開しています。(https://youtubecurator.herokuapp.com/)
モバイル向けのデザインにしていること、自分が好きなジャンル(筋トレと将棋)に限られているので一般向けではないことにご注意ください。また、手持ちのiPhoneでしか動作確認していませんので、Android等では不具合が生じるかもしれません。こちらもご了承ください。
また、本アプリのソースコードも公開していますので興味のある方はご覧ください。
(https://github.com/ufield/youtube-curator-open)
アプリの紹介
アプリは、トピックごとに動画を分類し、縦スクロールで切り替えられます。また、トピック内では横スクロールで動画を選ぶことができます。動画を選択すると上部のYouTube動画が切り替わります。実際に上部のYouTube動画をタップすると、動画が再生されます。
画面右上の検索ボタンをタップすると、検索オプションが表示されます。必要なトピックのみを選択できたり、検索期間の変更が可能です。
画面右上の右から2番目のボタンをタップすると、動画のジャンルを切り替えることができます。
システム全体の概説
今回作成したアプリの全体像を概説します。上で紹介した公開中のWebアプリは、下図中のYouTube Curator WebAppとなります。
YouTube Data APIによって目的のジャンル・チャンネルの動画を取得し、Firebase の Cloud Firestore にデータを蓄積します。この際、どのチャンネルをどのようなトピックでキュレーションするかの定義ファイルを作成しておき、それを使用することで Cloud Firestore では適切なデータ構造としておきます。(基本的に動画タイトルに基づいてトピックに紐付けを行います)
YouTube Curator WebApp は、Cloud Firestoreからデータを取得して上記の紹介のように表示を行います。
アノテーション用WebAppは、適切にトピック付けがなされていなかった場合に、手動で簡単にトピックを付け替えるための管理者用アプリです。下図のような管理画面から、各動画ごとのトピックを変更して、それを Cloud Firestore に反映させることができます。(管理向けのため公開はしていません)
今回は、YouTube Curator WebApp・アノテーション用WebApp ともに Nuxt.js + Vuetifyという組み合わせで作成したみました。初めて触ってみましたが、なかなか作りやすかったように思います。また、UI作成のデザインパターンとして、アトミックデザインを採用しています。アトミックデザインは様々なところで解説されていますが、具体例については、例えば過去の私の記事(OpenCV をビジュアルプログラミングできるアプリを Electron + Vue.js で作成)などを参考にしていただけると幸いです。
終わりに
今回は、Firebase, Nuxt.js, Vuetify などを初めて使用しましたが、それなりに動くものが作れてよかったです。完全に自分向けなので、動画のジャンルは管理者の決め打ちになってしまってますが、これをユーザーが各々カスタマイズできるようなアプリにしたら面白そうだ(けど、コストかかりそうだなあ...)とか思っています。仮にものすごい反響があれば考えてみたいと思います。