ホーム 記事一覧 ブック DH週間トピックス 検索 このサイトについて
English
Claude Codeを使って動画に多言語字幕を自動生成し、IIIF v3マニフェストで公開する

Claude Codeを使って動画に多言語字幕を自動生成し、IIIF v3マニフェストで公開する

動画コンテンツに字幕をつける作業は手間がかかります。本記事では、Claude Code(CLI版Claude)を使い、動画のフレーム分析から多言語字幕(VTT)の生成、IIIF v3マニフェストの作成までを効率的に行う方法を紹介します。 実際のプロジェクトについてはこちらの記事をご覧ください。 全体の流れ 1. 動画ファイル(mp4)を用意する 2. ffmpegでシーンチェンジを検出 3. シーンチェンジポイントのフレームを抽出 4. Claude Codeでフレーム画像を読み取り、内容を把握 5. シーンチェンジのタイムスタンプに基づいてVTTファイルを作成 6. 英語字幕も同様に作成 7. IIIF v3マニフェストを作成 8. HTMLプレーヤーで動画・字幕・読み上げを同期 前提条件 Claude Code(CLI版) ffmpeg / ffprobe 字幕をつけたい動画ファイル(mp4) # macOSの場合 brew install ffmpeg Step 1: シーンチェンジの検出 動画の画面が切り替わるタイミングを自動検出します。これが字幕のタイムスタンプの基準になります。 ffmpeg -i "video.mp4" \ -vf "select='gt(scene,0.15)',showinfo" \ -vsync vfr -f null - 2>&1 \ | grep "pts_time" \ | sed 's/.*pts_time:\([0-9.]*\).*/\1/' 出力例: 3.033333 8.066667 20.066667 25.066667 32.100000 ... なぜシーンチェンジ検出が重要か 最初は3秒間隔でフレームを抽出していましたが、実際の画面切り替えとずれが生じました。シーンチェンジ検出を使うことで、実際に画面が変わるタイミングに基づいた正確な字幕タイミングが得られます。 Step 2: シーンチェンジポイントのフレーム抽出 mkdir -p scenes ffmpeg -i "video.mp4" \ -vf "select='gt(scene,0.15)'" \ -vsync vfr -q:v 2 \ scenes/scene_%03d.jpg Step 3: Claude Codeでフレーム画像の内容を読み取る Claude Codeのマルチモーダル機能で、抽出したフレーム画像の内容を読み取ります。 ...

Claude Codeで6件のGitHub Issueを並行対応:worktreeとagentの活用

Claude Codeで6件のGitHub Issueを並行対応:worktreeとagentの活用

はじめに TEI/XMLで構造化された歴史史料をWeb上で閲覧できるビューアを、Nuxt 2 + Vue 2 + Vuetifyで開発しています。このプロジェクトに報告された6件のGitHub Issueに対して、Claude Codeのworktree機能とagentを活用して並行対応した記録を紹介します。 対応したIssue一覧 グループ Issue数 内容 優先度 A 3件 テキストビューワの入れ子要素の表示不具合 高 B 1件 凡例ページのインデント未反映 中 C 1件 分析ページのリンク切れ 高 D 1件 キーワード検索のクラッシュ 高 アプローチ:worktree × 並行agent Claude Codeには、git worktreeを使って独立した作業環境で複数のagentを並行実行する機能があります。今回は上記4グループに対して、4つのagentを同時に起動しました。 各agentがworktreeで独立して作業するため、互いに干渉せず並行して修正を進められます。 Agent 1: fix/nested-tags → グループA(3件、同一の根本原因) Agent 2: fix/legend-indent → グループB Agent 3: fix/analytics-links → グループC Agent 4: fix/keyword-search → グループD 各Issueの修正内容 グループD:検索プラグインのクラッシュ 原因: 検索プラグイン内で、環境変数から読み込む設定値がundefinedのため、検索実行時にTypeErrorでクラッシュしていました。 修正: 1行のnullガード追加で解決しました。最もシンプルな修正でしたが、agentが原因を正確に特定してくれました。 グループA:入れ子要素の表示不具合 3件のIssueは一見別々の問題に見えましたが、すべて共通の根本原因を持っていました。 原因: TEI XMLの前処理スクリプトが、入れ子構造の要素を正しく変換していませんでした。具体的には、テキスト範囲を示すアンカーペアを要素に変換する処理で、入れ子になった内側の要素がフィルタリングで除外されていたため、テキストやクリック可能な注釈が失われていました。 修正: 前処理スクリプトに3つの変更を加えました。 ...

Claude Codeの並列エージェントで882本のブログ記事から解説動画を自動生成した話

Claude Codeの並列エージェントで882本のブログ記事から解説動画を自動生成した話

はじめに 筆者は技術ブログを882本(日英バイリンガル)運営しています。これらの記事をYouTube動画として展開するため、Claude Codeの並列エージェント機能とVOICEVOX音声合成を組み合わせた自動動画生成パイプラインを構築しました。 結果として、Claude Codeの週間利用制限(全ユーザーの上位2%が該当)に到達するという珍しい体験をしたので、パイプラインの構成と実績を共有します。 パイプラインの全体像 ブログ記事 (.md) ↓ Claude Code 並列エージェント (10本同時) 対話台本 (sections.json) ↓ VOICEVOX × 3並列ワーカー 解説動画 (video.mp4) ↓ YouTube API YouTube公開 1. 台本生成(Claude Code) 各記事を読み込み、2キャラクターの掛け合い形式の台本(sections.json)を生成します。Claude CodeのAgentツールを使い、10本のエージェントを同時に起動して並列処理します。 [ { "section_title": "セクション名", "slide_points": ["スライドに表示するポイント1", "ポイント2"], "lines": [ {"speaker": "usagi", "text": "カタカナヨミアゲテキスト", "display_text": "画面表示テキスト"}, {"speaker": "sora", "text": "カタカナヨミアゲテキスト", "display_text": "画面表示テキスト"} ] } ] text: VOICEVOX読み上げ用(英語技術用語はカタカナ表記) display_text: 画面表示用(英語技術用語はそのまま) 1記事あたり6〜10セクション、各セクション6〜8セリフ 2. キャラクターペアシステム 4組のVOICEVOXキャラクターペアを用意し、記事ごとにローテーションで割り当てます。 ペアID 質問役 解説役 スタイル zundamon_metan ずんだもん 四国めたん 素朴×丁寧 tsumugi_kiritan 春日部つむぎ 冥鳴ひまり ギャル×クール usagi_sora 中国うさぎ 九州そら 控えめ×おっとり hau_whitecul 雨晴はう WhiteCUL 元気×知的 立ち絵素材は坂本アヒルさんの素材を使用しています。 ...