（PC専用）TEDの字幕を、2つ（2言語）同時に表示する方法

はじめに

(グウィン・ショットウェル〔後掲TED Talks〕より引用)

上掲の画像のように、TEDの字幕を2言語同時に表示する方法を紹介します。

（ごちゅうい）かなりアドホックな方法ですので、TEDのHPの仕様変更によって、いつ無効になるか分かりません。また、動作確認済ブラウザは、PC版Chromeのみです。

あくまで自己責任で実行してください。

準備

ブックマークレットを用いたJavaScript擬似プロトコルを利用します。利用方法は、下記リンク先を参照してください。

ブラウザのアドレスバーからJavaScriptのコードを実行する方法 (JavaScript疑似プロトコル)

ブックマークの内容として、下記文字列を設定します。

javascript:function nowText(){ var element = document.getElementsByClassName('t-d:n hover/bg:gray-l.5'); var spanTag = document.getElementsByClassName('bg:black.3 c:white f:1@md p-y:1 p-x:2 m-x:1 f:3@md p-y:2@md p-x:5@md m-x:2@md b-r:.1 t-a:c ')[0]; if (spanTag !== undefined){ spanTag = spanTag.firstChild; for (var i = 0; i < element.length; i++) { if (element[i].style.backgroundColor !== "") { if (spanTag.innerText.indexOf(element[i].innerText) == -1) { spanTag.insertAdjacentHTML('beforeend', '<br>' + element[i].innerText); } } } } window.requestAnimationFrame(nowText);}nowText();

実行

TED Talksのページを開きます。

ここでは例として、以下のコンテンツで試してみます。

グウィン・ショットウェル: 30分で地球を半周するSpaceXの旅行プラン | TED Talk

デフォルトの字幕（ここでは日本語に設定しているものとします）の下段に、英語の字幕を追加したい場合には、動画下段の[Transcript]で、英語を選択します。

その状態で、上記ブックマークレットを実行します。

すると、字幕の下段に、英語の字幕が表示されるようになります。

(グウィン・ショットウェル〔前掲TED Talks〕より引用)

字幕の言語の変更

字幕の上段の言語を変更するには、動画再生画面内の[Subtitles]を変更してください。

字幕の下段の言語を変更するには、[Transcript]の言語を変更してください。

補足

なお、コンソールで下記スクリプトを実行することでも、同様の結果を得られます。

スクリプトにコメントを付してありますので、仕組みが気になる方は、ご参照ください。

//デフォルトの字幕の下に、Transcriptで色付表示されている文字列を追加する関数
function nowText(){
  var element = document.getElementsByClassName('t-d:n hover/bg:gray-l.5');  //Transcriptが格納された配列
  var spanTag = document.getElementsByClassName('bg:black.3 c:white f:1@md p-y:1 p-x:2 m-x:1 f:3@md p-y:2@md p-x:5@md m-x:2@md b-r:.1 t-a:c ')[0];  //画面に表示される字幕に係るspanタグを子要素に有する要素
  if (spanTag !== undefined){
    spanTag = spanTag.firstChild;  //たまにspanTagがundefinedになる場合があるので、その場合には何もしない。
    for (var i = 0; i < element.length; i++) {
      //Transcriptのうち、現在色付表示されている文字列を特定
      if (element[i].style.backgroundColor !== "") {
        //いちど字幕の下に文字列を追加したら、同じ文字列は再度追加しないように実行回避。
        if (spanTag.innerText.indexOf(element[i].innerText) == -1) {
        spanTag.insertAdjacentHTML('beforeend', '<br>' + element[i].innerText);  //字幕の下に文字列を追加
        }
      } 
    }
  }
  window.requestAnimationFrame(nowText);  //およそ60fpsでこの関数を実行
}
nowText();