【コード無料配布】YouTubeを同時字幕で見る方法。MacSide AIで日本語＋英語を2段表示

YouTubeで英語を勉強していると、字幕を日本語にするか、英語にするかで迷います。

英語字幕なら、話している言葉とつづりがつながる。でも、知らない表現が続くと内容そのものが分からなくなる。日本語字幕にすると話は追いやすいけれど、今どの英語がどう訳されたのか見失いやすい。結局、同じ場面を戻して字幕を切り替えることになります。

それなら、2つを最初から一緒に出せばいい。

この記事では、YouTubeの標準字幕を見やすく下段へ出しながら、もう1言語を上に重ねる方法を紹介します。使うのはMacSide AIのメモとChrome拡張「MacSide – Browser Connector」。記事の後半にあるコードを丸ごとコピーして貼るだけで、自分用の同時字幕を作れます。

できあがるのは、こんな同時字幕です

この例では、英語の標準字幕を下、日本語の追加字幕を上に表示しています。位置は入れ替えられますし、文字サイズも再生中に変えられます。

単に字幕を2本並べるだけではありません。YouTubeの字幕は、句読点だけが次の字幕へ送られたり、短い言葉が細かく分かれたりすることがあります。このコードは、短時間に続く断片を読みやすくまとめ、日本語と英語の句読点も整えてから表示します。

使える機能は次の通りです。

• YouTubeで選んだ標準字幕を、読みやすい下段字幕として描画
• もう1言語を上部、または下段字幕のすぐ上へ追加
• 対象言語の字幕トラックがないときはYouTubeの自動翻訳を利用
• 日本語・英語の句読点と短い字幕断片を整形
• 文字サイズを16〜48pxで調整
• 字幕単位の前後移動と、秒数を指定した早戻し・早送り
• 全画面表示にも追従

用意するものは3つだけ

手順1：MacSide AIとChrome拡張を入れる

まずMacSide AIをダウンロードして起動します。

次に、ChromeウェブストアからMacSide – Browser Connectorを追加します。

インストールしたら、Chromeでユーザースクリプトの実行を許可します。

1. アドレスバーに chrome://extensions と入力する
2. 「MacSide – Browser Connector」の「詳細」を開く
3. 「ユーザー スクリプトを許可する」をオンにする

この時点では、まだYouTubeのサイト許可は行いません。先にMacSideへコードを登録すると、Browser Connectorが対象サイトを認識し、youtube.com の許可項目が表示されます。

「ユーザー スクリプトを許可する」が見つからないときは、Chromeを最新版へ更新してから拡張機能の詳細画面を開き直してください。

手順2：MacSideのメモへコードを貼る

MacSide AIのメモを開き、新しいメモを1つ作ります。本文で / を入力して、ブロック一覧から「HTML」を選びます。

この記事の下にある「コードをコピー」を押し、HTMLブロックへそのまま貼り付けてください。HTML、CSS、JavaScriptを分ける必要はありません。先頭から末尾まで、1つのHTMLブロックへ丸ごと入れます。

貼り付けると、「YouTube 追加字幕」という暗い色の設定パネルが表示されます。追加する言語、字幕の位置、文字サイズ、キー操作をここで選べます。

手順3：「登録／更新」を押す

設定パネルの「登録／更新」をクリックします。初回は、字幕を表示するスクリプトと設定を受け渡すスクリプトについて、確認が2回表示されます。内容を確認して許可してください。

この確認は、知らないメモを開いただけでWebサイトが勝手に書き換わらないためのものです。コードを変えたときも、もう一度「登録／更新」を押します。

登録できると、Browser ConnectorへYouTube用のスクリプト情報が同期されます。ここまで終えてから、YouTubeでの実行を許可します。

手順4：YouTubeのサイト許可を与える

Chromeのツールバーにある「MacSide – Browser Connector」アイコンを押し、「セットアップ」を開きます。「サイトごとの許可」に https://www.youtube.com/* が表示されたら、「選択中のサイトすべてを許可」を押してください。

YouTubeの項目は、前の手順でコードを登録してから表示されます。登録前に許可項目を探しても出てこないため、必ずこの順番で進めます。

許可できたら、すでに開いているYouTubeのタブを再読み込みします。

手順5：YouTubeの標準字幕をオンにする

見たい動画を再生し、YouTubeの字幕ボタン（CC）をオンにします。歯車の「字幕」から、下段へ表示したい元の言語を選びます。英語を下にしたいなら、ここでは英語を選びます。

次にMacSideのメモへ戻り、「追加字幕の言語」で日本語を選びます。動画へ戻ると、日本語と英語が2段で表示されます。

ここで大事なのは、YouTubeの標準字幕をオフにしないことです。このコードは標準字幕の通信を受け取って追加字幕を組み立てるため、CCがオフのままだと追加字幕も始まりません。元の字幕はコード側で見やすく描き直すので、画面上で二重になることはありません。

最初は次の設定から試すと見やすいと思います。

• 標準字幕：英語
• 追加字幕の言語：日本語
• 追加字幕の位置：上部
• 文字サイズ：36〜40px
• キーボード操作：オン

追加言語や位置、文字サイズは登録後もすぐ反映されます。設定を変えるたびに「登録／更新」を押す必要はありません。

キーボード操作で、聞き取れなかった一言だけ戻る

キーボード操作をオンにすると、YouTubeの再生画面で次のキーが使えます。

普通の巻き戻しだと、聞きたい文章の途中から再生されてしまうことがあります。n なら字幕の頭へ戻れるので、同じ一文をもう一度聞く操作がかなり楽になります。

コードをコピーして使う

下のボタンで、同時字幕の設定画面とYouTube側の処理を含むコードをすべてコピーできます。

表示されないときに確認すること

「未接続」や「未登録」のまま変わらない

MacSide AIが起動しているか、Browser ConnectorがChromeに入っているかを確認します。MacSide AIを終了すると、ブラウザ側のスクリプトも自動で止まります。

YouTubeだけ字幕が出ない

コードを登録したあと、Browser Connectorの「セットアップ」を開き、「サイトごとの許可」に表示される https://www.youtube.com/* を許可したか確認してください。許可したあと、YouTubeのタブを再読み込みします。

標準字幕だけ、または追加字幕だけ表示されない

YouTubeの字幕ボタン（CC）がオンか確認してください。元になる標準字幕が動き始めることで、追加字幕も読み込まれます。いったんCCをオフ・オンしてから動画を少し再生すると直る場合があります。

字幕のない動画で使えない

このコードには音声を聞き取って新しい字幕を作る機能はありません。動画の歯車メニューに「字幕」がなければ、その動画では利用できません。

追加字幕の翻訳が出ない、または少し遅い

追加言語の字幕トラックがない場合は、YouTubeの自動翻訳を利用します。言語や動画によって翻訳できないことがあり、直接用意された字幕より表示に時間がかかる場合もあります。別の言語へ切り替えてから戻すか、タブを再読み込みしてください。

動画を切り替えたら字幕がずれた

YouTubeはページ全体を読み込み直さず、次の動画へ移動することがあります。通常はコード側で追従しますが、ずれた場合はまずタブを再読み込みしてください。それでも直らなければ、MacSide側で「登録／更新」を押し直します。

メモが、自分用の拡張機能になる

MacSide AIのBrowser Connectorでは、メモに置いたコードそのものがブラウザ機能になります。

たとえば「上段の日本語を黄色にしたい」「ショートカットを別のキーにしたい」と思ったら、コードを自分用に変えられます。AIへ希望を伝えてコードを直し、もう一度「登録／更新」を押せば反映されます。

一方で、YouTube側の画面や字幕の仕組みが変わると、コードの更新が必要になることがあります。これはYouTube公式の機能ではなく、MacSide AIがYouTubeと提携して提供する機能でもありません。使うサイトとコードの内容を確認し、自分の環境で利用してください。

字幕を切り替える時間を、動画を見る時間へ

同時字幕は、勉強らしい作業を増やすためのものではありません。英語を聞き、英語字幕で確かめ、意味がつながらないときだけ日本語を見る。2つが同じ画面にあれば、その流れを止めずに済みます。

短い解説動画でも、長いインタビューでも、気になった一文だけ n で戻れるのが意外と便利です。MacSide AIをまだ使っていない方は、アプリをダウンロードして、このコードを試してみてください。慣れてきたら、字幕の位置や大きさ、キー操作も自分が見やすい形へ変えていけます。