[[2025-08-10]]にも多少探していたのだが（[[2025-08-10 VTTファイルを手軽に開くには?]]）、いいビューアは見つかってない。
持って手軽に[[The Web Video Text Tracks Fromat|WebVTT]]を動画と一緒に再生できないのかな？と思って検索してみる。
Premiere Proというのは思いつくんだけど，プロジェクトファイルを作るのがめんどい。
Webで調べた感じ、[[VLC]] が答えっぽい。
ただ，表示されてる字幕をコピーできない，やっぱり一覧表示がないのは辛いと感じる。
Adobe Premiere Proならまあいいのでは？と思ったら，実はVTTは開けなかった。SRTなら開けるみたいではあるが，直接メディアファイルに対して開くこともできず，シーケンスを作成するとこまでやらないといけないらしい。面倒臭い！！！
ということで、8/10時点の結論は、「現状では，MAXQDAで我慢して，MAXQDAで開くのが一番良さそう」だった。
MAXQDAで動画とトランスクリプトを同期して再生していたのだが、メディアの読み込み時に落ちるようになってしまった。もはやほぼ再現性100%でクラッシュする。
これではどうしようもないので、自作した。
40分前には「データインポートで毎回この画面が出るようになって、MAXQDA完全に無理になりました。これ以上ない自作の機運の高まりですが、自作する余裕は残念ながら今はない」と投稿していたが、あまりにもデータを確認できなすぎて、自作していた。華麗な手のひら返しだ。
余裕がないのは確かなので、できるだけ少ない手数で完成させることを目指した。そのために、まず SPEC.md を作ってから、使用をできるだけまとめてから claude に渡す。Copilotが有効なVSCodeの画面で書いていたら、自分で書かなくてもどんどん補完されて仕様が出てきた。仕様にもほとんどこだわりがなくて、とにかくVTTが見られれば十分なので、ほぼ補完通りで良かった。完成した仕様が以下。
VTTファイルを動画と同期して表示するwebアプリケーションを作成するための仕様書です。
# 1. 概要
このアプリケーションは、ユーザーがアップロードした動画ファイルとVTTファイルを同期して表示することを目的としています。VTTファイルは、動画の特定の時間に表示されるテキスト情報を含んでいます。
トランスクリプトを一覧表示する画面と、動画の脇に再生箇所に合わせて字幕として表示する画面の2つの画面を持ちます。
2つの画面は横に並べて表示され、動画の再生位置に応じてトランスクリプトがハイライトされるようにします。
トランスクリプト一覧表示例
# 2. 機能要件
## 2.1 ファイルアップロード
- ユーザーは動画ファイル（mp4, webmなど）とVTTファイルをアップロードできる。
- ローカルで動作すればいいので、サーバーサイドの実装は不要。
- アップロードされたファイルはブラウザのメモリ上で処理される。
- ファイルのアップロードはドラッグアンドドロップまたはファイル選択ダイアログで行う。
## 2.2 VTTファイルの解析
- アップロードされたVTTファイルを解析し、各セクションの開始時間、終了時間、テキストを抽出する。
- VTTファイルのフォーマットに準拠していることを確認する。
- 解析エラーが発生した場合、ユーザーにエラーメッセージを表示する。
## 2.3 動画再生
- アップロードされた動画ファイルをブラウザ上で再生できる。
- 動画の再生、停止、シーク、倍速再生が可能である。
- 動画の再生位置に応じて、VTTファイルの対応するテキストが表示される。
- 動画の再生位置に応じて、トランスクリプト一覧の該当セクションがハイライトされる。
- 動画の再生位置が変更された場合、トランスクリプト一覧のハイライトも更新される。
- トランスクリプト一覧のセクションをクリックすると、動画の再生位置がそのセクションの開始時間にジャンプする。
- トランスクリプト一覧は動画の再生位置に応じて自動的にスクロールされ、現在のセクションが常に表示されるようにする。
- トランスクリプト一覧のハイライトは、動画の再生位置に応じてリアルタイムで更新される。
## 2.4 トランスクリプト一覧表示
- VTTファイルから抽出したテキストをトランスクリプト一覧として表示する。
- 各セクションの開始時間、終了時間、テキストを表示する
- トランスクリプト一覧はスクロール可能である。
- トランスクリプト一覧のセクションをクリックすると、動画の再生位置がそのセクションの開始時間にジャンプする。
- トランスクリプト一覧は動画の再生位置に応じて自動的にスクロールされ、現在のセクションが常に表示されるようにする。
- [scrennshot1](./Screenshot%202025-08-28%20at%2014.01.36.png)を参考にする
# Techstack
- React
- TypeScript
- Next.js
- shadcn/ui
- Tailwind CSS2
ScreenshotにはMAXQDAの画面を入れた。
今回は手数4（4回のプロンプト入力）で完成した。自分的にはかなり快挙では。いつもこだわってしまうのでずっと直してるが、この日記を書いたり、ミーティング資料を編集している間に完成した。
出来上がったところで、同じ部屋にいた中條さんから、「それってNottaで文字起こしすれば良くないですか？」と言われた。確かに文字起こしツールは書き起こしと動画を同時再生するツールがついてる... Elevenlabs APIで書き起こしをしているのでUIを使うという発想がなかったが、確かにその通りである。付属のツールじゃないので（そしてインポートは普通しないので）、使えるツールがそこにあるという発想が完全に抜けてた。
ElevenlabsはAPI経由の方が安いという料金設定なので、API経由にしているのだが、その話はまたの機会に。
Discussion