砂漠の旅人(たびと)

UNIX / MS-DOS 時代から電脳砂漠を旅しています

【C#】YouTube からビデオとオーディオをダウンロードするアプリを作ってみる - その3

こんにちは、たびとです。

前回は、マテリアルデザインを使っておしゃれな画面作りの話題でした。 最近は、ほぼデザイン作りに忙殺されています。 「最高のモノができた!」と思っても、 翌日になると、なんでこんなのが最高だと思ったのだろうと、 修正に修正を重ねる日々が続いています。

いやいや、デザインって本当に難しいですね。

最初は、本当に簡単なダウンロードするだけのアプリの予定でしたが、 色々と作っているうちに、あれこれと構想が大きくなってきました。

さて、今回は「お手軽 YouTube ダウンローダ TubeEater 」の特徴に関して、 一旦、整理してみたいと思います。

この記事の対象者

  • YouTube からビデオをダウンロードすることに興味のある方
  • .NET 6 の C# でアプリケーションを作ってみたい方
  • お手軽 YouTube ダウンローダー TubeEater 開発の裏側を知りたい方

前回までのおさらい

TubeEater 開発は、久しぶりにアプリケーションを開発したいと思っていると、 「YouTube から手軽にビデオや音楽をダウンロードしたいよね」という要望を 聞いたことがきっかけで、「面白そうだから、C# で作れそうか調べてみよう。」と 軽いノリから始まっています。

そこで「その1」では YouTube をダウンロードするための基幹部分を調査しました。

sabakunotabito.hatenablog.com

次に、今風のデザインに仕立て上げるため、WPFマテリアルデザインを使う方法を調査しました。

sabakunotabito.hatenablog.com

それぞれ、使える手応えがありました。 これが無理と判断された場合、やっぱダメでしたブログになるところでした。

そろそろ TubeEater とは、どんなアプリなのか特徴を整理してみたいと思います。 頭の中には、ふんわりとした構想があったのですが、それを書き出してみましょう。

TubeEater の特徴

やはり「 全てにおいてシンプルであること 」でしょう。 個人的な好みかも知れませんが、仕事でも特にシンプルさは重視しています。

このシンプルであることを軸として、今回 TubeEater を作るに当たって、 実装すべき(したい)項目について、順番に列挙していきます。

自動化

これは必須項目です。これが TubeEater で必ず実装する機能です。

自動ダウンロード・自動ファイル保存により、ダウンロード予約を可能にします。

つまり、以下のように画面を行ったり来たりすることがなくなります。

  1. ブラウザを起動し、YouTube の URL をコピーする。
  2. ダウンローダーの画面に切替えて、URL をペーストする。
  3. また、ブラウザの画面に切替えて、URL をコピーする。
  4. また、ダウンローダーの画面に切替えて、URL をペーストする。

自動ダウンロードのスイッチをオンにすると、 後はブラウザで YouTube の好きなコンテンツを探すことに集中できます。 気に入ったコンテンツがあれば、URL をコピーするだけです。

  1. TubeEater を起動し、自動ダウンロードのスイッチをオンにする。
  2. ブラウザを起動し、YouTube の URL をコピーする。
  3. そのまま、次々に URL をコピーする。

コピーすると、ダウンロード予約されて、予約キューから順番に実行されます。 ダウンロードが終了すると、タイトルを使ったファイルが自動で保存されます。

自動ダウンロード

スイッチで手動と自動を切り替えることができるようにします。

自動ダウンロードのスイッチをオンにすると、クリップボードを監視して、 YouTube の URL が入力されると、自動的にダウンロードを開始するようにします。

手動は URL をコピー&ペーストする方法です。 このペーストのひと手間を自動化によって削ります。

ダウンロードは予約キューに入れて、ダウンロードの順番を管理できるようにします。

自動ファイル保存

YouTube のタイトルからファイル名を作り、ダウンロードが完了すると自動で保存します。

保存する場所は、ビデオは「ビデオ」、オーディオは「ミュージック」配下に保存します。 また、著者のフォルダを作成後、そこに保存できるようにします。 このとき、フォルダの変更は考慮しないものとします (YouTube のコンテンツは著作権があり、個人利用が前提になることを考慮)。

ここで、MP3 は YouTube からはダウンロードできないため、AAC ファイルからコンバートできるようにします。 このとき、コンバートした MP3 には情報がないため、YouTube のタイトル情報を MP3 に埋め込むようにします。

ダウンロード予約

ダウンロード予約に制限は設けないようにします。 予約は実行前であれば、キャンセルできるようにします。 また、TubeEater 終了時に予約があれば、次回にダウンロードを再開できるようにします。

ダウンロード予約の残りはデータベース (SQLite) に格納できるようにします。

ファイル種別

3 種類のファイル形式をダウンロードできるようにします。

  • ビデオ (MP4)
  • オーディオ (AAC)
  • オーディオ (MP3)

この 3 種類があれば問題ないでしょう。

ダウンロード履歴の管理

データベース (SQLite) にダウンロードした情報を記録します。

  • YouTube のコンテンツ情報とダウンロードした日時などを記録する。
  • タイトル・著書で検索ができるようにする。
  • 一覧から YouTube のオリジナルをブラウザから開けるようにする。
  • 一覧から保存ファイルの格納場所をエクスプローラーで開けるようにする。
  • 一覧からダウンロード情報を削除できるようにする。

デザイン

Googleマテリアルデザインとは厳密には異なると思いますが、 できるだけマテリアルデザイン風に仕上げるようにします。

  • 画面に配置するコントロールは色・形共に統一感を重視する。
  • MahApps を使いますが、MahApps の利用は最低限にする。
  • 基本的に MaterialDesign Xaml Toolkit を使って画面を作る。
  • ライト & ダーク モードに対応します。また、どちらも文字が見えるようにする。
  • ライト & ダーク モードは、Windows のモードと同期できるようにする。
  • テーマ・カラーをカスタマイズできるようにする。

使い勝手

誰もが使い易いように、以下のことを考慮します。

  • 直感的な操作で実現できるようにする。
  • 目に見える場所は、入力テキスト・ボタンなどは必要最低限の配置とする。
  • 左メニューには全体的な項目を配置する。
  • 右メニューには現画面で実施するオプションを配置する。

性能

これが実際には一番苦労する箇所でしょう。

ダウンロード処理やファイル書き込みは重たいため、 非同期処理によりサクサク動作できるようにします。

グローバル

言語をカスタマイズできるようにします。 日本語・英語など、好きな言語にカスタマイズできる機能を用意します。

言語ファイルを用意し、起動時に取り込むようにします。 取り込んだ言語情報はデータベースに保存します。 このとき、取り込んだ日付を言語ファイルの拡張子に変更します。

インストーラ

当初は、ZIPファイルで配布する予定でしたが、 ライブラリのファイルが多過ぎて、現在 80MB 以上のサイズになっています。

流石に ZIP で配布すると特に初心者の方にトラブルが多発しそうなので、 インストーラを作成することにしました。

TubeEater メイン画面

現在、ほぼ完成形となる TubeEater のメイン画面です。上部の検索ボックスの横にある丸い黄緑のボタンが、 自動ダウンロードのスイッチです。 これをオンにして「米津玄師 - POP SONG」をコピーして自動ダウンロードを実施した結果です。

この辺りのベーシックな動作は、無茶な操作をしなければ正常に動作するレベルまで仕上がりました。

TubeEater メイン画面の画像
TubeEater メイン画面

次に全体の項目を配置する左メニューです。設定項目が少ないので、ここに押し込んでいます。 ダウンロード履歴は別ウィンドウが開いて、両画面を比較したりできるようになっています。

カラー変更もできるようになっています。 MahApps と MaterialDesign Xaml Toolkit で用意された色に変更できるようになっています。

言語は開発中で、現在メッセージを「Key=Value」のセットにして、キーを元に取り出すように変更中です。

TubeEater メイン画面の左メニューの画像
TubeEater メイン画面の左メニュー

最後にダウンロードのオプションとなる右メニューです。 保存するファイル形式を「MP4・AAC・MP3」から選択します。当然ながら全部選択することもできるようになっています。

「保存先を開く」ボタンはダウンロードしたファイルの場所をエクスプローラーで開くようになっています。 このとき、上部のチェックボックスによって、開く場所が変化します。 ビデオはビデオの場所が、オーディオはミュージックの場所が開くようになっています。 両方チェックした場合、両方の場所をエクスプローラー (× 2) で開きます。

TubeEater メイン画面の右メニュー画像
TubeEater メイン画面の右メニュー

まとめ

さて、今回は技術的な内容というより、要件の整理といった内容になってしまいました。 本当は、作りたいことを先に整理するべきですが、今回は作りながら整理していきました。 ソロだと何も気にすることなく、好きにやれるからいいですね。

最初は、もっと簡単なアプリのはずだったのに、何かの機能を作って、テストしてるうちに、 「こんな機能も欲しい、あんな機能も欲しい」と、どんどん追加していった結果、 今回のように整理しないと忘れそうなぐらいに膨れ上がってしまいました。

ほぼ連日、仕事終わりと休日を返上して、TubeEater 開発に没頭しています。 やっぱり、どうせ作るなら最高のモノを作りたいという欲求が原動力になっています。 完成後は無料公開するので、ぜひとも多くの人に使ってもらいたいものです。

では、皆さん、よい旅を。

次回へのリンクはこちら。

sabakunotabito.hatenablog.com