YouTubeのチャプター(目次)を簡単に入力できるChrome拡張機能を作りました

お知らせ
YouTube Studioの仕様変更のため、通常の利用方法では動作しない場合があります。
この拡張機能を有効にするためには、以下のページにアクセスして動画情報を編集する必要があります。こちらは以前の動画情報の編集ページになります。
「https://studio.youtube.com/video/動画のID/edit」
ご迷惑をおかけしますが、修正版の公開まで今しばらくお待ちください。

YouTubeでチャプター(目次)付きの動画を投稿したことがある方はご存知かと思いますが、このチャプター情報の入力ってすごく面倒ですよね。

そこで効率的にチャプター情報が作成できるGoogle Chromeの拡張機能『YouTube Chapter Editor』を作りました。

YouTube Chapter Editor

YouTubeでチャプターを有効にする方法

まず、基本的なYouTubeでのチャプターの有効化の方法です。

動画説明欄に上記のように入力していきます。
その際に以下の条件を満たさないと有効にはなりません。

動画のチャプターを有効にするには、リストの最初のタイムスタンプが 00:00 で始まるようにしてください。動画には 3 つ以上のタイムスタンプを昇順でリストする必要があります。動画のチャプターの最短の長さは 10 秒です。

詳しくは公式のヘルプをご覧ください。

難しくはないのですが、時間を「00:00」のように文字として記載していくのは骨が折れますし、動画を再生しながら区切りのタイミングでその時間を覚えて説明欄に時間を書き、調整するときは時間を書き換えて・・・みたいなことをやっていると日が暮れてしまいます。

世のYouTuberのみなさんがこんな面倒なことをやっているのかと思うと、エンジニアとして拱手しているわけにもいかず専用のツールを作ってみました。

どんな拡張機能か

動画情報の編集ページには右上に小さいプレイヤーがありますが、この拡張機能を有効にすると、そのプレイヤーの下に動画と連動した編集ツールが埋め込まれます。
動画を再生しながらリアルタイムで時間を追加していくことができます。
生成されたチャプター情報はコピーして動画説明欄の任意の場所に貼り付けてください。

この拡張機能でできること

● 5秒, 10秒, 60秒単位でのスキップ
● 上下ボタンで時間の1秒単位の調整
● 各チャプターの左にある再生ボタンで開始時間へジャンプ
● チャプターの削除
● 条件を満たしていない場合のエラー表示

おすすめの使い方は、動画を再生しながら時間だけを追加していって、あとでゆっくりタイトルをつけていくという方法です。

条件を満たしていない場合のエラー表示

YouTubeで指定されている条件を満たしていない場合、エラーが出るようにしています。

技術について

技術についてはQiitaのほうで書いていますのでよろしければご覧ください。

Vue3でYouTubeの動画を操作するChrome拡張機能を開発する - Qiita

最後に

やっぱりチャプター情報はあると動画も見やすいです。個人的にも多くの動画にチャプターが付いてほしいなと思っています。
いずれYouTubeが正式なインターフェースを設けてくれて、この拡張機能の出番がなくなってくれたらいいんですけどね。

それまでの間、よかったら使ってみてください。

YouTube Chapter Editor

あと、こちらは僕が普段やっているPodcastでこの拡張機能について話した回です。よかったら聴いてください。

その他、Apple PodcastやSpotifyなどでも配信していますので、こちらもご興味あれば聴いていただけると嬉しいです。