デジタル源氏物語 動画字幕プロジェクト：IIIF v3マニフェストによる多言語字幕の公開

デジタル源氏物語の機能紹介動画に、日本語・英語の二言語字幕を付与し、IIIF v3マニフェストとして公開するプロジェクトを作成しました。

• Demo: https://nakamura196.github.io/genji-movie/
• GitHub: https://github.com/nakamura196/genji-movie

対象動画

以下の3本の機能紹介動画に字幕を付与しています。

多言語字幕

各動画に日本語・英語のWebVTT字幕ファイルを用意しています。字幕は1文単位で分割されており、読みやすさを重視しています。

VTTファイルはそのままYouTubeの字幕としてもアップロードできます。

IIIF v3マニフェスト

各動画にIIIF Presentation API 3.0準拠のマニフェストファイルを作成しています。動画はpaintingのAnnotation、字幕はsupplementingのAnnotationとして記述しています。

{
  "annotations": [{
    "type": "AnnotationPage",
    "items": [
      {
        "type": "Annotation",
        "motivation": "supplementing",
        "label": { "ja": ["日本語"] },
        "body": {
          "id": "https://example.com/ja.vtt",
          "type": "Text",
          "format": "text/vtt",
          "language": "ja"
        }
      },
      {
        "type": "Annotation",
        "motivation": "supplementing",
        "label": { "en": ["English"] },
        "body": {
          "id": "https://example.com/en.vtt",
          "type": "Text",
          "format": "text/vtt",
          "language": "en"
        }
      }
    ]
  }]
}

複数のIIIF対応ビューアで表示可能

IIIF v3マニフェストを採用しているため、以下のIIIF対応ビューアで直接表示できます。

各ビューアへのリンクは、デモページの各動画カードに用意されています。

RAMPビューアでの表示例

独自プレーヤーの機能

本プロジェクトのPlayerは、IIIF v3マニフェストを読み込んで動画と字幕を再生する独自のHTMLプレーヤーです。

• マニフェスト読み込み: URLパラメータ ?manifest=path/to/manifest.json で指定
• 日英字幕切替: ボタンまたはキーボード L で切り替え
• 音声読み上げ: Web Speech API（無料・ブラウザ内蔵）による自動読み上げ
• 字幕一覧パネル: 現在の字幕をハイライト＆自動スクロール
• クリックジャンプ: 字幕一覧をクリックしてその時間にジャンプ
• 再生速度: 0.5x〜2xの速度調整
• キーボード操作: Space（再生/停止）、←→（3秒スキップ）、T（読み上げ）、L（言語切替）

字幕の生成方法

字幕はClaude Codeを使って以下の手順で生成しました。詳細な手順は別記事をご覧ください。

1. シーンチェンジ検出: ffmpegで動画の画面切り替えタイミングを自動検出
2. フレーム抽出: シーンチェンジポイントのフレームを画像として抽出
3. 画像読み取り: Claude Codeのマルチモーダル機能で各フレームの内容を読み取り
4. VTT作成: タイムスタンプに合わせた1文単位のVTTファイルを日英で作成

YouTubeへの字幕アップロード

各動画のVTTファイルは、YouTubeの字幕としてそのままアップロードできます。

1. YouTube Studio → 動画を選択 → 字幕
2. 「字幕を追加」→「ファイルをアップロード」→「字幕あり」を選択
3. ja.vtt をアップロード → 言語を「日本語」に設定
4. 同様に en.vtt を「英語」でアップロード

関連リンク

• デジタル源氏物語
• IIIF Audio/Visual: 複数のVTTファイルの記述
• IIIF Presentation API 3.0