英語の勉強にYouTubeを使っています。
面白そうなチャンネルを英語で楽しみながら毎日勉強していますが、


字幕テキストを一式でダウンロードしておけたら
よりいっそう捗ると思うんです。

スクリーンショット_2021-02-04_22_36_30

以前、字幕を自動抽出するChrome拡張機能についてツイートしました。
今から紹介する方法は
Chromeさえあればできる簡単な方法となっています。

というわけで、さっそくご紹介していきます。

字幕を抽出する動画を開く

字幕を抽出したい動画を開きましょう。

今回は
日本の都市伝説を紹介している動画を例に説明していきます。


次に進む前に
字幕を事前にオフにしておきます。
スクリーンショット_2021-02-04_23_20_44

字幕ファイルのURLの取得

まずは字幕ファイルのURLを抽出するために
Chromeデベロッパーツールで操作をしていきます。

Chromeデベロッパーツールを開く

「画面を右クリック」→「検証」を進みます。
スクリーンショット_2021-02-04_23_05_07
こんな画面が開いたら次へ進みます。
スクリーンショット 2021-02-04 23.08.21

「Network」タブへ移動

メニューの「Network」をクリックします。
スクリーンショット_2021-02-04_23_08_21

字幕ファイルURLの検索

左上の「Filter」に「timedtext」と入力します。
DevTools_-_www_youtube_com_watch_v_saLcKOmPVlg2

画面の再読み込みと字幕の選択

この状態で画面を再読込します。
そして字幕を選択します。
_3__Top_10_Scary_British_Urban_Legends_-_YouTube
そうすると「timedtext?v=」から始まるURLが出て来ます
DevTools_-_www_youtube_com_watch_v_qERHIFVlZR0
これを「右クリック」→「Copy」→「Copy link address」の順に進みます。
スクリーンショット_2021-02-04_23_33_39
そうすることで字幕ファイルのURLが取得できました。
このURLにアクセスると字幕ファイルがテキストになっていますが、
必要なのは枠で囲ってあるテキストのみです。
スクリーンショット_2021-02-04_23_39_31
いちいちコピーするのも大変なので
次の手順からはこのテキストから
Javascriptを使って必要なテキストのみを抽出していきます。

字幕テキストの抽出

Javascriptを実行して必要な字幕のみ抽出します。

Javascriptの実行

Chromeディベロッパーツールの「Console」タブに移動します。
スクリーンショット 2021-02-04 23.48.31
この画面になっていることを確認したら次へいきます。
スクリーンショット 2021-02-04 23.58.43
ここに以下のコードを貼り付けます。
    /****************************/
    //「url」変数に取得したURLをペースト
    let url = ''
    /****************************/
    
    async function getSubtitleData(url) {
        let res = await fetch(url)
        return res.json()
    }
    getSubtitleData(url).then(d => {
        d.events.forEach(i => {
            let str = i.segs[0].utf8.replace(/\n/g, ' ')
            if (str.match(/[.?] *$/)) text += str + '\n\n'
            else text += str + ' '
        })
        console.log(text)
    })
    
DevTools_-_www_youtube_com_watch_v_OsNchQ3-HcY
URLをペーストイメージはこんな感じになります。
スクリーンショット_2021-02-05_0_04_40
そしたらEnterを押しましょう
すると字幕が一式表示されているので
コピーするなり何なんなりとお使いください
スクリーンショット 2021-02-05 0.04.54

Chrome拡張機能化

いちいちこんな作業をして酒幕抽出するのは面倒なので
Chrome拡張機能にしました。

字幕を選ぶと自動でクリップボードにコピーされます。

「字幕をクリック」→「ペースト」
の2ステップにまで簡素化
しています。


機会があればこのChrome拡張機能についても解説していきます。