WebVTT字幕を単体のHTML文字起こしページに変換

WebVTT（.vtt）ファイルは、文字通りのWEBVTTヘッダーで始まり、続いてタイムコード範囲とそれに続く1〜2行のキャプションテキストというキューが並びます。これは、Zoom、Microsoft Teams、YouTubeの自動字幕など、ほとんどの会議プラットフォームが文字起こしをダウンロードする際に書き出す形式で、字幕を動画に同期させるために作られており、単体で読めるウェブページとして成立するようには作られていません。

SubToolDeskのVTT to HTML変換ツールは、あなたのブラウザ内でローカルにWEBVTTヘッダーとキューブロックを解析し、ヘッダー、タイムコード、話者タグをすべて取り除き、断片を自然な段落に再構成し、その結果を段落ごとに<p>タグを持つ最小限の有効なHTML文書として包み込みます。ブラウザで直接開くことも、サーバーでホスティングすることも、静的サイトに組み込むこともすぐにできます。

VTTをHTMLに変換する方法（手順ごとに解説）

• 上の変換ツールに.vttファイルをドラッグするか、「ファイルをアップロード」をクリックして選択します。
• 自動検出された形式バッジがVTTと表示されているか確認します。
• 流れるような文章にしたい場合は段落にまとめるをオンのままにし、1行ずつのキャプションのまま保持したい場合はオフにします。
• 会議の書き出しファイルが各行に名前を付けている場合（ZoomやTeamsでよくあります）は話者ラベルを削除をオンにします。
• ダウンロードを押して、単体の.htmlファイルを保存します。

なぜWebVTTをHTMLに変換するのか

.vttファイルは、単体のウェブページとして成立するためではなく、動画プレーヤーに字幕を同期させるために作られています。それをHTMLに変換する理由は、ほとんどの場合、その文字起こしが次に何をする必要があるかにかかっています。

• ZoomやTeamsの会議の文字起こしを社内ウィキのページとして公開する：チームが録画を開き直さずにリンクし、検索し、読めるようにします。
• トレーニングセッションのキャプションをドキュメントサイトに組み込む：余計なビルド工程なしに、単体のページとして配置します。
• 文字起こしを.vtt添付ファイルの代わりにリンクとして共有する：多くの人はそれを意味のある形で開く方法を知りません。
• 文字起こしを社内サイトやイントラネットに合わせてスタイル付けする：プレーンでセマンティックな<p>タグはスタイルシートを適用できますが、生のVTTにはそれができません。
• キャプション付き動画のコンテンツをクロール可能かつアクセス可能にする：見るより読む方を好む人のための、独立した読みやすいページとしてです。
• 会議の文字起こしをページとして保存する：録画自体が失われてしまった後も長く、どのブラウザでも正しく開ける状態を保ちます。

実際にHTMLファイルに含まれるもの

それは完全で最小限のHTML文書です。<!DOCTYPE html>宣言、UTF-8の文字セットとページタイトルを持つ<head>、そして段落ごとに1つの<p>要素を含む<body>です。WEBVTTヘッダーも、話者タグも、キュー設定も出力には一切残らず、そのまま開くことも、より大きなページに貼り付けて自分のCSSでスタイル付けすることもできる、セマンティックなマークアップだけが残ります。

変換前と変換後：実際の例

話者タグ、キュー設定、NOTEブロックまで含めた、Zoom形式の短い書き出しファイルを、段落にまとめる、話者ラベルを削除、書式タグを削除をすべてオンにして変換した例です（このページの既定の状態です）。

WEBVTT

NOTE
Transcript generated by Zoom

00:00:01.200 --> 00:00:03.900 align:start position:10%
<v ジョーダン>皆さん、本日はお電話にご参加いただきありがとうございます。

00:00:03.900 --> 00:00:06.450
<v プリヤ>もちろんです！早速始めましょう。

00:00:06.450 --> 00:00:09.800
<v ジョーダン>いいですね、では議題の最初はQ3のロードマップです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文字起こし</title>
</head>
<body>
<p>皆さん、本日はお電話にご参加いただきありがとうございます。もちろんです！早速始めましょう。いいですね、では議題の最初はQ3のロードマップです。</p>
</body>
</html>

WEBVTTヘッダー、NOTEブロック、すべてのタイムスタンプ行とキュー設定、2つの<v ジョーダン>話者タグはすべて消えています。残るのは有効で最小限のマークアップで、発言されたダイアログが1つの<p>要素に包まれ、どのブラウザでも開ける状態になっています。

なぜプレーンテキストではなくHTMLなのか

プレーンテキストファイルを意味のある形で開くには別のものが必要ですが、HTMLファイルはどのブラウザでも直接開き、すでに適切な段落間隔が整った状態になります。これは会議やインタビューの文字起こしをウェブ上に置く必要がある場合、例えば社内ウィキやドキュメントサイトに公開したり、添付ファイルではなくリンクとして共有したりする場合に重要になります。

ポリシーではなく、構造によるプライバシー

会議の文字起こしは、しばしばその場で最も機密性の高いファイルです。VTTの解析とHTMLファイルの構築は、いずれもあなたのブラウザタブ内で動作するJavaScriptによって行われます。この機能にはアップロード先のエンドポイントそのものが存在しません。

VTT to HTMLのよくある使用例

• 社内ウィキのページ：ZoomやTeamsの会議の文字起こしを、チームが元の録画を開かずにリンクし、検索し、読めるページとして公開します。
• ドキュメントサイト：録画されたトレーニングセッションのキャプションを、静的サイトジェネレーターのコンテンツフォルダにそのまま組み込める単体のHTMLページに変換します。
• 公開文字起こしアーカイブ：SEOとアクセシビリティのために、公開された動画と並べて、読みやすくクロール可能なHTMLの文字起こしを提供します。
• 手早くローカルで確認する：サーバーなしに、ダウンロードしたファイルをファイルシステムから直接どのブラウザでも開けます。

パーサーが対応するエッジケース

パーサーはWEBVTTヘッダーを取り除き、一部の書き出しファイルに含まれるNOTE、STYLE、REGIONのメタデータブロックをスキップします。クリーンアップされたダイアログテキストに残っている&、<、>のような、有効なHTMLを壊してしまう文字は自動的にエスケープされるため、出力は常に有効なマークアップになります。

この変換ツールが保持するものと削除するもの

保持されるもの：

• 発言されたダイアログテキストのすべての単語を、元の順序と句読点のまま保持します。
• 段落構造を、今度は実際の<p>要素として保持します。元の1キュー1段落のまま、または段落にまとめるがオンの場合は文単位の段落になります。
• 有効で完全なHTML文書、doctype、UTF-8のhead、bodyを保持し、ファイルがどのブラウザでも正しく開けるようにします。

削除されるもの：

• WEBVTTヘッダー行、およびNOTE、STYLE、REGIONのメタデータブロック。
• キュー識別子の行、すべてのタイムスタンプ範囲、align:start position:10%のようなキュー設定。
• 書式タグを削除がオンの場合、<v Speaker Name>のような話者タグ。
• 話者ラベルを削除がオンの場合、ジョーダン：のようなプレーンテキストの話者接頭辞。
• CSS、スクリプト、スタイルの類。これらは追加されることも、元のファイルから引き継がれることもありません。

よくある問題とその解決方法

• ダウンロードしたファイルがタイムスタンプや-->の矢印を表示したまま開かれる場合：変換ツール上部の形式バッジがUnknownではなくVTTと表示されているか確認してください。大幅に途中で切れた貼り付けはキューの検出を妨げることがあります。
• <v Speaker Name>タグが段落の中にまだ見える場合：書式タグを削除をオンにしてください。これは変更しない限り既定でオフになっています。
• ジョーダン：のようなプレーンテキストの名前がHTML内の行の先頭にまだ付いている場合：これは別のトグルです。上記の話者タグの削除とは異なるパターンを検出する話者ラベルを削除も合わせてオンにしてください。
• 文字起こし全体が1つの段落として表示されてしまう場合：多くの短く頻繁なキューが結合された結果として想定される動作です。代わりに元のキューごとに1つの<p>にしたい場合は段落にまとめるをオフにしてください。
• アクセント付きの文字や英語以外のテキストがéのような文字化けとして表示される場合：元の.vttがUTF-8で保存されていません。UTF-8として再書き出しまたは再保存してから、再度アップロードしてください。
• 文字起こしを自分のサイトの見た目に合わせたい場合：この変換ツールは意図的にCSSを追加しません。<head>内に自分のスタイルシートへの<link>を追加するか、<p>の段落を既存のページに貼り付けてください。

このツールが意図的に行わないこと

このツールはCSSのスタイル付け、レイアウトテンプレート、ブランディングを追加しません。出力は意図的に最小限にとどめられているため、すでにお持ちのどんなサイトやスタイルシートにもそのまま組み込めます。また、元のキャプションファイルにすでに存在する文字起こしの誤りを修正することもありません。すでにそこにあるものを整形して包むだけで、内容を書き換えることはありません。