本記事は生成AIと共同で執筆しています。事実関係は可能な範囲で公式ドキュメント等と照合していますが、誤りが含まれている可能性があります。重要な判断を行う前にご自身でも一次情報をご確認ください。

対象：IIIF の動画資料に注釈を残したい研究者・図書館員・デジタルアーカイブ担当者。Mirador を組み込む節以外は、プログラミング知識は不要です。

Mirador Annotation Editor Video（以下 MAEV）は、IIIF 画像ビューア Mirador のバージョン 4 に、動画への注釈作成機能を追加するプラグインです。フランスの Tétras Libre SARL が、ライプツィヒ大学および国立土木学校（École nationale des ponts et chaussées）の協力のもとで開発しています。

MAEV は、画像向けの Mirador Annotation Editor（MAE）を拡張したものです。MAE が画像の領域（空間ターゲット）に注釈をつけるのに対し、MAEV はそれに加えて、動画の 開始・終了時刻（時間ターゲット） を扱えます。「この場面のこの領域に、この注釈」という、時間と空間の両方を指定した注釈を作れます。

本稿では、公式デモ環境を題材に、MAEV を初めて使う場合の操作を、動画注釈ならではの時間ターゲットの指定まで順に説明します。

1. MAEV の特徴

  1. 動画に時間ターゲットをつけられる MAE の空間ターゲット（矩形・円・線・フリーハンド）に加えて、注釈が表示される時間範囲を指定できます。動画の特定の場面にだけ現れる注釈を作れます。
  2. MAE と共通の操作体系 注釈作成のテンプレート（Note / Tag / Expert mode）、リッチテキスト、タグ、図形ツールは MAE と共通です。MAE を使ったことがあれば、追加で覚えるのは時間ターゲットの部分だけです。
  3. 標準形式での保存 注釈は IIIF / W3C Web Annotation 形式で保存され、adapter で保存先（ローカル、独自バックエンド、Mirador Multi User など）を選べます。描画には Konva を採用しています。

ライセンスは GPL v3 です（画像版の MAE は Apache 2.0）。

2. 前提知識（最小限）

IIIF と動画

IIIF（International Image Interoperability Framework）は画像配信の標準として知られますが、Presentation API 3.0 では動画や音声も同じマニフェスト構造で扱えます。MAEV に渡すのは、動画を含む Presentation Manifest の URL です。

空間ターゲットと時間ターゲット

動画への注釈には 2 つの「どこに」があります。

  • 空間ターゲット：動画フレームの中の領域（矩形などの図形）
  • 時間ターゲット：動画の中の時間範囲（開始時刻〜終了時刻）

MAEV はこの両方を 1 つの注釈に持たせられます。

3. デモを開く

MAEV には公式のデモ環境が用意されています。

デモを開くと、Mirador のウィンドウに「Clock video with annotation examples」という時刻表示のクロックビデオ（約30分）が読み込まれ、左サイドバーに注釈パネルが開いています。

MAEV デモの初期画面。時計の動画と、左に注釈パネル

4. 既存の注釈を見る

このデモには、テキスト・タグ・画像・描画など 9 件のサンプル注釈が入っています。注釈パネルでは次の操作ができます。

  • Filter...：本文の文字列で注釈を絞り込みます。
  • Tags filtering：タグで注釈を絞り込みます。
  • Create annotation：新しい注釈の作成を開始します。
  • Export local annotations for visible items：表示中の注釈を書き出します。

動画プレイヤーを再生すると、再生位置に対応する注釈が順に表示されます。これが時間ターゲットの効果です。

動画を再生中。再生位置に応じて注釈が切り替わる

5. 注釈を作る：テンプレートを選ぶ

注釈パネル上部の Create annotation ボタンを押すと、右側に「New annotation」パネルが開きます。テンプレートは MAE と共通で、Note / Tag / Expert mode の 3 種類です。

Create annotation 直後。Note / Tag / Expert mode の 3 テンプレート

テンプレート用途
Note対象つきのテキスト注釈。標準形
Tag対象つきのタグ注釈
Expert modeIIIF Annotation の JSON を直接編集する上級者向け

ここでは標準的な Note を選びます。

6. 空間ターゲットを描く

Target の Shapes から、動画フレームのどの領域に注釈を付けるかを図形で指定します。矩形・円・線が使えます。

矩形ツールを選び、動画の上をドラッグすると、その領域が注釈の空間ターゲットになります。

矩形と円で動画フレーム上に空間ターゲットを描いたところ

図形の色・線幅・塗りは STYLE から変更できます。ここまでは画像版の MAE と同じ操作です。

7. 時間ターゲットを指定する

ここが MAEV ならではの部分です。注釈フォームの下部に Time セクションがあり、注釈が表示される時間範囲を指定します。

操作の流れは次のとおりです。

  1. 動画プレイヤーを再生し、注釈を始めたい場面で一時停止します。
  2. Time セクションの Set current time を押すと、現在の再生位置が 開始時刻（Start） になります。
  3. さらに再生し、注釈を終わらせたい場面で、もう一方の Set current time を押すと 終了時刻（End） が設定されます。

開始・終了時刻は時・分・秒の数値入力でも直接編集できます。

Time セクション。Start と End に開始・終了時刻が設定されている

これで、その時間範囲のあいだだけ表示される注釈になります。空間ターゲット（場所）と時間ターゲット（時間）の両方を持つ注釈の完成です。

8. 本文・タグ・保存

本文は MAE と同じく Quill ベースのリッチテキストエディタで入力し、Tags にキーワードを付けられます。

本文とタグを入力した状態

フォーム下部の Save を押すと、時間と場所の両方を持つ注釈が注釈パネルの一覧に追加されます。Export local annotations for visible items で、IIIF / W3C Web Annotation 形式に書き出せます。

9. 自分のサイトに組み込む

MAEV は npm で公開されており、Mirador 4 ベースのビューアにプラグインとして組み込めます。

npm install mirador-annotation-editor-video

import mirador from 'mirador';
import { miradorAnnotationEditorVideoPlugins } from 'mirador-annotation-editor-video';

mirador.viewer(
  {
    id: 'mirador',
    annotation: {
      adapter: (canvasId) => new LocalStorageAdapter(`maev-${canvasId}`),
      allowTargetShapesStyling: true,
    },
    windows: [{ manifestId: 'https://example.com/video-manifest.json' }],
  },
  [...miradorAnnotationEditorVideoPlugins]
);

設定オプション（adapter / allowTargetShapesStyling / readonly / tagsSuggestions など）は MAE と共通です。実際の API は MAEV のバージョンによって異なるため、導入時はリポジトリの README とデモ設定を確認してください。画像注釈だけで足りる場合は、Apache 2.0 ライセンスの MAE を選ぶ判断もあります。

解説動画

本記事の操作の流れは、ずんだもんと四国めたんの掛け合いによる解説動画でも紹介しています。

まとめ

Mirador Annotation Editor Video を組み込むと、IIIF の動画に対して、空間ターゲット（フレーム内の領域）と時間ターゲット（時間範囲）の両方を指定した注釈を作れます。操作体系は画像版の MAE と共通で、追加で覚えるのは Time セクションの時間指定だけです。再生位置を Set current time で開始・終了時刻に取り込むだけで、特定の場面に結びついた注釈を、標準形式のデータとして残せます。

参考リンク