YouTubeを見ていると、動画全体ではなく、特定の場面だけを繰り返し見返したくなることがあります。
YouTubeのプレイリストは動画単位なので、再生するたびに目的の位置までシークしなければなりません。タイムスタンプをメモしても、複数の動画から好きな場面だけを並べて連続再生する用途には向いていません。
そこで、YouTube URLと開始・終了時刻からクリップを作り、好きな順に再生できるWebアプリ「yt-clipList」を作りました。主目的は、YouTube動画の任意区間を保存し、クリップ単位のローカルプレイリストにまとめて見返すことです。
私自身はラップバトルの好きなバースをまとめる用途で使っています。この記事では、どのようなアプリを作り、どんな機能を載せ、実際にどう使っているかを画面と一緒に紹介します。
yt-clipListの基本操作
基本操作は次のとおりです。
- YouTube URLを貼る
- 残したい区間の開始時刻と終了時刻を指定する
- 動画または音声として保存する
- プレイリストへ追加する
- 複数動画のクリップを好きな順番で連続再生する
保存後は、プレイリスト、タグ、お気に入り、再生キューで整理します。再生回数や最終再生日時も記録するため、最近見た場面や繰り返し再生しているクリップへ戻りやすくなります。
1本の動画から複数の区間を作り、別の動画やチャンネルから作ったクリップと同じリストへ並べられます。これが動画単位の管理との違いです。
YouTube動画からクリップを登録する
今回は私の使用例として、次のラップバトル動画を使いました。
- 動画：Red Eye vs Novel Core / BATTLE SUMMITⅡ 2024.08.14
- 投稿者：凱旋MCbattle
- URL：
https://www.youtube.com/watch?v=hHcHYwNOlzY&list=RDhHcHYwNOlzY&start_radio=1 - 保存区間：1:10〜1:25
- 保存形式：音声のみ
「新規クリップ」を押すと登録画面が開きます。まだURLを読み込んでいない段階では、プレビューや区間編集は無効になっています。
URLを読み込むと、yt-dlpからタイトル、投稿者、動画時間、サムネイル、利用可能な画質などを取得します。時間指定付きURLの場合は、その位置を開始時刻へ反映します。
区間はタイムラインのハンドル、時刻入力、1秒・10秒単位のボタンで調整します。「短め」「標準」「長め」のプリセットも用意しました。今回は15秒を選び、「Red Eye vs Novel Core｜お気に入りのバース」という名前で音声のみの保存ジョブを登録しました。
登録すると処理一覧へ追加されます。画面を移動しても処理は続き、ダウンロード、区間の切り出し、再生準備の進み具合をまとめて確認できます。
撮影時には1件がエラーになりましたが、同じ画面から詳細の確認と再試行ができます。正常に完了したクリップは、そのままプレイリストへ追加されます。
動画ではなく「区間」をプレイリストへ並べる
完成したクリップは、元動画が違っても同じプレイリストへ追加できます。画面にはクリップ名、元動画、元動画内の区間、タグ、処理状態を表示します。
プレイリストには次の再生機能を持たせました。
- 先頭から再生
- ドラッグ＆ドロップによる並べ替え
- シャッフル
- 1クリップまたはプレイリスト全体のリピート
- 「次に再生」と通常キューの管理
- 再生中でも画面下に残るプレイヤーバー
検索対象はクリップ名だけではありません。元動画のタイトル、投稿者、タグ、メモも含めて絞り込めます。
タグの使い方は自由です。私の場合は、MC名、大会名、年代に加えて、「パンチライン」「アンサー」「フロー」のような観点で分類しています。講義なら科目や難易度、ゲーム動画ならタイトルやシーン種別といった分け方も可能です。
再生しながらメモと時刻を残す
再生画面は、左側を動画、右側をメモにしました。再生中に別画面へ移動しても、下部のプレイヤーバーから停止、前後移動、シーク、音量、シャッフル、リピートを操作できます。
通常メモには、クリップ全体の感想や後で確認したい点をMarkdownで残します。画面例では、ラップバトルのバースについて記録しています。
時刻メモでは、クリップ内の位置と文章をセットで保存します。再生位置からタイムスタンプを挿入でき、メモを押すと該当位置へ移動します。長いクリップでも、確認したい場面へ直接戻れます。
時刻付きテキストは、Markdown、LRC、SRT、VTT、JSONで書き出せます。歌詞表示だけでなく、字幕制作や別ツールへの受け渡しにも使えます。
Google StitchでUIの原型を作りました
UIをゼロからCSSで探りながら作るのではなく、最初にGoogle Stitchで主要画面の原型を生成しました。
作成したのは、ホーム、プレイリスト詳細、再生・編集、ダウンロード管理、URLからの追加という5画面です。Stitchから得たHTMLと画面画像は、完成品としてそのまま使うのではなく、情報設計と視覚的な方向性を決める資料にしました。
Stitchで定めたデザインシステムは「Kinetic Dark」です。暗い背景、緑系アクセント、固定サイドバー、画面下部のプレイヤー、密度の高いプレイリスト行を基本にしました。
ただし、実装段階ではアクセントカラーをシアン寄りに調整し、登録画面の区間編集、状態表示、アクセシビリティ用ラベル、レスポンシブ時の挙動を追加しました。Stitchは完成コードの代替ではなく、複数画面に共通するレイアウトとデザイン判断を早期に固定するために使いました。
個人用でも長く使えるようにした機能
クリップを増やしていくと、再生機能だけでなく、データを整理して残すための機能も必要になります。そのため、設定画面には次の項目をまとめました。
- ライブラリ情報だけを保存するJSONバックアップ
- メディアを含めたバックアップと復元
- yt-dlpとFFmpegの動作確認
- 同時に処理する件数の調整
- タグとプレイリストフォルダの管理
- 元動画キャッシュの整理
- 音量と時刻メモの追従設定
使っている技術
画面はVue 3とPinia、サーバーはFastify、データ保存はSQLiteで作っています。YouTube動画の情報取得にはyt-dlp、区間の切り出しや音量調整にはFFmpegを使っています。
アプリ全体はPodman Composeで動かしています。ホスト環境へNode.js、yt-dlp、FFmpegを個別に入れず、アプリと保存データをまとめて管理できる形にしました。
自分の見たいクリップを手元で整理し、普段使いすることを優先した個人用アプリです。
私の使用例：ラップバトルの好きなバースをまとめる
私の場合、以前は好きなバースを聴くたびに元動画を開き、記憶を頼りにシークしていました。yt-clipListでは、その区間自体がライブラリの項目になります。
MCや大会を横断したプレイリスト、アンサーだけを集めたリスト、繰り返し確認したいフローのリストを作れます。時刻メモを併用すれば、なぜその区間を残したのかも後から分かります。
YouTubeのプレイリストが動画をまとめるものなら、yt-clipListは動画内の好きな瞬間をまとめるものです。私の使用例はラップバトルですが、用途を限定したアプリではありません。ライブ、講義、インタビュー、ゲーム配信など、長いYouTube動画から見返したい区間を保存し、テーマ別のプレイリストへまとめられます。