概要
最近、YouTube上のプログラミングチュートリアル動画をよく視聴している。
ただ動画を見ているだけだと理解が浅くなりがちなので、効率的にメモを取りながら学習を進められるWebアプリケーションを自作することにした。
そのアプリケーションで字幕データを活用するために、まずは第一歩として、字幕ファイル形式の一つであるSRT形式を、より汎用性の高いJSON形式に変換するためのWebサイトを開発した。
作成したサイト
こちらが完成したサイト。
使い方
- SRTファイルを入手する: DownSubのようなサイトを使い、YouTube動画からSRT形式の字幕ファイルをダウンロードする。
- サイトでJSONに変換する: 作成したサイトにアクセスし、ダウンロードしたSRTファイルをアップロード（またはドラッグ＆ドロップ）する。
- フォーマットを定義する: 必要に応じて、出力したいJSONの形式をテンプレートとして自由に編集する。
- 変換とダウンロード: 「変換」ボタンを押すと、プレビュー画面に結果が表示される。内容を確認し、問題がなければダウンロードする。
主な機能
単なる変換だけでなく、開発を進める中で便利な機能をいくつか追加した。
- SRT → JSON 変換: 中核となる変換機能。
- カスタムフォーマット: ユーザーがJSONの出力形式をテンプレートで自由に定義できる。これにより、様々なアプリケーションの要件に合わせたデータを作成可能。
- 多言語対応: ブラウザの言語設定を検知し、日本語と英語の表示を自動で切り替える。
- 便利なUI: ドラッグ＆ドロップでのファイルアップロード、変換結果のクリップボードへのコピー、入力内容のクリア機能などを実装し、使いやすさを向上させた。
開発の経緯と感想
今回の開発は、AI（Gemini）との対話形式で進めた。
最初に「SRTをJSONに変換するツールが欲しい」という大まかな要望を伝えたところ、わずか数分で基本的な機能を持つPoCを作ることができた。
さらに「こんな機能も欲しい」とアイデアを伝えるたびに、AIがコードを修正・拡張してくれる。
- 「結果をコピーできるようにして」→ クリップボードコピー機能を追加
- 「ファイルをドラッグでも入れたい」→ ドラッグ＆ドロップ機能を実装
- 「JSONの形を自分で変えたいんだけど…」→ カスタムテンプレート機能という高度な機能を追加
- 「海外のユーザーも使えるようにしたい」→ 自動言語検出と多言語対応を実装
このように、アイデアを次々と形にしていく過程はかなりスムーズだった。最終的に、当初の想定をはるかに超える多機能なサイトが、デプロイまで含めても1時間とかからずに完成した。
AIとの共同開発は、単に時間を短縮するだけでなく、自分のアイデアを壁打ちし、より良いものへと昇華させていくクリエイティブな体験だと感じたが、同時に"I don’t know what I am doing right now"という気持ちは頭の中を渦巻いていた。
やはり自力でできる作業を代替していけるのがAIの本当の強みであり、自分が今やっていることの危うさも実感する機会になった。
とはいえこのサイトは良くできていると我ながらに思うので、十分に活用して本命である動画学習サイトの開発も頑張っていこうと考えている。