top
技術

Image

はじめに

YouTube の再生とダウンロードができる専用プレイヤーを .NET の MAUI Blazor で作ってみました✨

動画の連続再生やダウンロードの複数登録、マイリスト機能や履歴検索を行うこともできます。

本題

きっかけ

前回の記事で MAUI でラジオを視聴できる 「Radio Downloader」 というアプリを作ったことを紹介しました。

その時の MAUI での開発体験が良かったことや、思いのほかデザインの良いアプリが作れたことから、もう少しデザインの凝ったアプリも作ってみたいなと思いました。

題材が何かないかなと考えてみたところ、そういえば Discord で Watch Together (Discord 上で YouTube が試聴できる機能) を使ったとき、使い勝手やデザインが良かったことを思い出しました。

また、普段ブラウザで YouTube の動画を聞き流して作業することが多いのですが、調べ物のために検索し続けると次第にタブが入り乱れて YouTube のタブが埋もれてしまうことがよくあります。

タブのグルーピングを利用したり、YouTube 用にブラウザを分割して運用するでも良いのですが、せっかくなので、これを機に自分専用の YouTube プレイヤーを作ってみるのも良いかなと思いました。

作ってみた

という訳で題材も決まって作ってみたのが、この記事の最初にも貼った、こんな感じの見た目の YouTube 再生 & ダウンロードアプリです。

Image

アプリの名称はシンプルに 「Youtube Player」 しました。

作る上でこだわった点としては、やはりデザインです。

UI フレームワークは Radio Downloader 同様に Radzen を使用したのですが、UI の見た目を良い感じのダークテーマにするために、自分でカスタマイズする必要がありました。

これが地味に面倒でしたね・・・

Radzen は無料版と有料版があって、無料版でも一応のダークテーマはあります。

ただ、一種類しかパターンがないこと & あまりしっくりこなかったことから、自分で Blazor の UI を調査して、色調や挙動をカスタマイズして上記の画像のような見た目にしました。

頑張った甲斐あって、満足のいく出来になったと思います😊

また、肝心の YouTube の動画情報の取得には Youtube Explode を使用しました。

開発者はウクライナ人🇺🇦の方で、Youtube Explode の GitHub 公式ページにはライブラリの使用ライセンスに関して、他では見ることがないだろう独特な記述がされています。日本人🇯🇵として深く感じ入るところです。

興味のある方は、ぜひ一読してみてください。

おわりに

今回作ったアプリはポートフォリオページに掲載しました。

もし良ければ、他の作品もあわせて御覧になってくださいね✨