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

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

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

Mirador は IIIF 画像を「見る」ためのビューアですが、標準では注釈を「作る」機能を持ちません。MAE を組み込むと、画像の好きな領域に図形を描き、本文・タグ・メタデータを付けて、W3C / IIIF 標準の注釈として保存・書き出しできるようになります。

本稿では、公式デモ環境を題材に、MAE を初めて使う場合の操作を、注釈を 1 つ作って書き出すところまで順に説明します。

1. MAE の特徴

IIIF 注釈に関わるツールは複数あります。たとえば IMMARKUS はローカルファーストの独立した注釈アプリ、Annotorious は注釈用の JavaScript ライブラリです。そのなかで MAE の位置づけは、次の点にあります。

  1. Mirador 4 にそのまま組み込める 既存の Mirador ベースのビューアに、プラグインとして注釈作成機能を後付けできます。閲覧用に構築済みのサイトを、注釈作成もできるサイトへ拡張できます。
  2. 多彩な注釈ターゲット 矩形・円・線・フリーハンドの図形による空間ターゲットに対応します。動画への時間ターゲットは、姉妹版の MAEV（後述）が担当します。
  3. 標準形式での保存 注釈は IIIF / W3C Web Annotation 形式で保存され、adapter を差し替えることで保存先（ローカル、独自バックエンド、Mirador Multi User など）を選べます。

ライセンスは Apache License 2.0 です。

2. 前提知識（最小限）

IIIF マニフェスト

IIIF（International Image Interoperability Framework）は、世界中の図書館・博物館が採用する画像配信の標準です。MAE に渡すのは Presentation Manifest と呼ばれる JSON の URL で、これは画像の集合とメタデータを束ねたものです。

Web Annotation

「あるリソースの、ある領域に対して、ある内容をひもづける」構造をモデル化した W3C 勧告です。MAE が書き出す注釈も、target（どこに）と body（何を）を持つこの形式に従います。

3. デモを開く

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

ランディングページからは、安定版（demo ブランチ）・最新版（main ブランチ）・テスト版（testing ブランチ）の 3 つのデモへ移動できます。本稿では安定版（stable/）を使います。

デモを開くと、Mirador のウィンドウにゴッホの「ポール・ゴーギャンに捧げる自画像」の IIIF マニフェストが表示され、左サイドバーに注釈パネルが開いています。

MAE デモの初期画面。ゴッホの自画像と、左に注釈パネル

4. 既存の注釈を見る

このデモ画像には、あらかじめ 12 件の注釈が付与されています（AWS Rekognition で自動生成されたサンプル）。注釈パネル上部のツールバーから、注釈の表示を操作できます。

  • Highlight all：すべての注釈の対象領域を画像上にハイライト表示します。
  • Create annotation：新しい注釈の作成を開始します。
  • Export local annotations for visible items：表示中の注釈を書き出します。

Highlight all を押すと、どの注釈が画像のどこを指しているかが一目で分かります。

Highlight all で 12 件の注釈領域を可視化したところ

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

注釈パネル上部の Create annotation ボタンを押すと、右側に「New annotation」パネルが開きます。MAE はテンプレートベースの作成方式を採っており、まず 3 つのテンプレートから 1 つを選びます。

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

テンプレート用途
Note対象つきのテキスト注釈。図形・本文・タグをひととおり扱う標準形
Tag対象つきのタグ注釈。分類タグだけを手早く付けたいとき
Expert mode生成される IIIF Annotation の JSON を直接編集する上級者向け

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

Note テンプレートの注釈フォーム

フォームは上から、リッチテキストエディタ、Tags、Target（図形）の順に並びます。

6. 図形ターゲットを描く

Target の Shapes から、注釈をどの領域に付けるかを図形で指定します。ツールは矩形・円・線が用意されています。

矩形ツールを選び、画像の上をドラッグすると、その領域が注釈の対象（空間ターゲット）になります。複数の図形を組み合わせることもできます。

矩形と円で空間ターゲットを描いたところ

図形の見た目は STYLE から変更できます。枠線の色（Border color）、線幅（Line weight）、塗りの色（Fill color）を指定でき、画像の色味に合わせて見やすく調整できます。

7. 本文とタグ

リッチテキストの本文

注釈の本文は、Quill ベースのリッチテキストエディタで入力します。太字・斜体・下線・打ち消し線、引用、番号付き／箇条書きリスト、インデント、リンク、画像挿入が使えます。

タグ

Tags の欄にキーワードを入力すると、注釈にタグが付きます。プラグインの設定で tagsSuggestions を渡しておくと、入力候補の自動補完が効きます。

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

本文とタグに加えて、Dublin Core ベースのメタデータを付与することもできます。

8. 保存とエクスポート

フォーム下部の Save を押すと、作成した注釈が左の注釈パネルの一覧に追加されます。

書き出すときは、注釈パネルのツールバーにある Export local annotations for visible items を押します。表示中の注釈が IIIF / W3C Web Annotation 形式で書き出され、Mirador や Universal Viewer など、他の IIIF 互換ビューアでも再現できる研究データになります。

注釈の実際の保存先は、プラグインに渡す adapter で決まります。デモではブラウザのローカルストレージに保存されますが、独自のバックエンドや、複数人で同時編集できる Mirador Multi User に切り替えることもできます。

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

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

npm install mirador-annotation-editor

import mirador from 'mirador';
import { miradorAnnotationEditorPlugins } from 'mirador-annotation-editor';

mirador.viewer(
  {
    id: 'mirador',
    annotation: {
      // adapter: 注釈の保存先を実装で差し替える
      adapter: (canvasId) => new LocalStorageAdapter(`mae-${canvasId}`),
      // 図形のスタイル変更を許可
      allowTargetShapesStyling: true,
      // タグの入力候補
      tagsSuggestions: ['portrait', 'landscape', 'still life'],
    },
    windows: [{ manifestId: 'https://example.com/manifest.json' }],
  },
  [...miradorAnnotationEditorPlugins]
);

主な設定オプションは次のとおりです。

オプション役割
adapter注釈の永続化先（ローカル / 独自バックエンド / MMU）
allowTargetShapesStyling図形の色・線幅などのスタイル変更を許可するか
commentTemplatesあらかじめ用意した定型文テンプレート
readonly注釈の作成・編集を無効化し、閲覧専用にする
tagsSuggestionsタグ入力の自動補完候補
quillConfigリッチテキストエディタのカスタマイズ

実際の API は MAE のバージョンによって異なります。導入時はリポジトリの README とデモ設定を確認してください。

10. 動画にも注釈をつけたいとき：MAEV

MAE が扱うのは画像です。動画に注釈をつけたい場合は、姉妹版の Mirador Annotation Editor Video（MAEV） を使います。MAEV は MAE を拡張し、動画フレームへの空間ターゲットに加えて、開始・終了時刻を指定する時間ターゲットを扱えます。

MAEV については別記事「IIIF動画に注釈をつける — Mirador Annotation Editor Video ハンズオン」で解説しています。

解説動画

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

まとめ

Mirador Annotation Editor を組み込むと、IIIF 画像を「見る」だけだった Mirador が、注釈を「作る」ビューアになります。Create annotation でテンプレートを選び、図形で領域を指定し、本文とタグを書いて保存する——この一連の操作で、注釈は他の IIIF ビューアでも再現できる標準形式のデータになります。閲覧用に構築済みの Mirador サイトを、後付けで注釈作成に対応させられる点が、MAE を使う主な利点です。

参考リンク