うしブログ

GeoGebraの使い方、応用など

(ひとことコメント)「基本的な使い方」更新作業中(2018.7.7)

(パンくずリスト整備状況)011解答まで済(2018.5.29)

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

はじめに

f:id:usiblog:20180603035626p:plain

(グウィン・ショットウェル〔後掲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]で、英語を選択します。

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

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

 

f:id:usiblog:20180603040612g:plain

(グウィン・ショットウェル〔前掲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();