はじめに#
IIIFビューアのMiradorには検索機能があり、IIIF Search APIに対応したマニフェストでは検索結果をハイライト表示できます。しかし、Search APIに非対応のマニフェストでも、任意の領域をハイライト表示したいケースがあります。
本記事では、Miradorの内部APIを利用して、外部データソースからのアノテーション情報を基にハイライト表示を実現する方法を紹介します。
ユースケース#
- 独自のOCRシステムで抽出したテキスト領域のハイライト
- 機械学習で検出したオブジェクトの領域表示
- 外部データベースに保存されたアノテーションの可視化
- Search API非対応のIIIFサーバーでの検索結果表示
実装方法#
基本的な仕組み#
Miradorは内部でReduxを使用しており、receiveSearchアクションを通じて検索結果を登録できます。このアクションにIIIF Search API形式のJSONを渡すことで、任意のデータソースからのハイライトを表示できます。
必要な情報#
ハイライトを表示するために必要な情報は以下の3つです：
- キャンバスURI - ハイライトを表示するページのURI
- 座標（xywh） - ハイライト領域の位置とサイズ（x, y, width, height）
- テキスト - ハイライトに関連付けるテキスト（検索パネルに表示される）
サンプルコード#
以下は、国立国会図書館デジタルコレクションの源氏物語で「いつれの御時にか…」の冒頭部分をハイライト表示するサンプルです。
コードの解説#
1. 設定パラメータ#
manifestUrl: IIIFマニフェストのURLcanvasId: ハイライトを表示するキャンバスのURIhighlights: ハイライト情報の配列。複数のハイライトを追加可能
2. IIIF Search API形式のレスポンス構築#
ポイントは on プロパティで、キャンバスURI#xywh=x,y,width,height の形式でハイライト領域を指定します。
3. マニフェスト読み込み完了の検知#
MiradorはReduxを使用しているため、store.subscribe()でステート変更を監視できます。マニフェストのisFetchingがfalseになり、jsonが存在する状態になったタイミングでハイライトを追加します。
これにより、setTimeoutを使用するよりも確実にマニフェスト読み込み完了後にハイライトを追加できます。
4. Miradorへの登録#
receiveSearchアクションを使用して、構築したレスポンスをMiradorに登録します。
応用例#
複数のハイライト#
APIからデータを取得#
URLパラメータから動的に生成#
このリポジトリのviewer.htmlでは、URLパラメータからハイライト情報を受け取り、動的にビューアを生成しています。
座標の取得方法#
ハイライト領域の座標（xywh）を取得するには、以下の方法があります：
- IIIF Image APIのRegion指定 - 画像編集ソフトで座標を計測
- OCRエンジンの出力 - Tesseract等のOCR結果に含まれる座標情報
- アノテーションツール - IIIF対応のアノテーション作成ツールを使用
- 機械学習モデルの出力 - 物体検出モデルのバウンディングボックス
まとめ#
MiradorのreceiveSearchアクションを活用することで、IIIF Search APIに非対応のマニフェストでも任意の領域をハイライト表示できます。この方法は：
- データソースに依存しない - API、ファイル、データベース等から取得したデータを利用可能
- Search APIと同じUI - Miradorの標準的な検索結果表示機能を活用
- 複数ハイライト対応 - 配列で複数の領域を一度に登録可能
- 確実なタイミング制御 -
store.subscribe()によりマニフェスト読み込み完了を検知
ファイル構成#
参考リンク#