(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]の言語を変更してください。
補足
なお、コンソールで下記スクリプトを実行することでも、同様の結果を得られます。
スクリプトにコメントを付してありますので、仕組みが気になる方は、ご参照ください。
万華鏡_JavaScript版
以前作成した万華鏡(下記リンク参照)は、IntersectionPaths コマンドを用いたものでした。そのため、多角形以外のオブジェクトを万華鏡的鏡映の対象にすることはできませんでした。
今回のアプレットは、JavaScriptでCanvasを制御して万華鏡を再現する機構なので、画像、点など、あらゆるオブジェクトを万華鏡的鏡映の対象にできるようになりました。