はじめに#
IIIF（International Image Interoperability Framework）ビューアとして広く使われているMiradorで、以下の要件を満たす実装を行いました：
- URLパラメータで指定したキャンバス（ページ）を初期表示する
- 指定したキャンバス内の検索語をハイライト表示する
本記事では、この要件を実現するためのアプローチと実装方法を共有します。
アプローチの検討#
defaultSearchQueryオプション#
Mirador 4では、ウィンドウ設定に defaultSearchQuery オプションを指定することで、初期化時に自動的に検索を実行できます：
このオプションは検索を自動実行する便利な機能ですが、今回の要件では以下の点を考慮する必要がありました：
- ページ遷移の制御 - 検索実行時、最初のヒットのページに自動遷移する仕様のため、
canvasId で指定したページに留まりたい場合は追加の制御が必要 - 検索完了タイミングの把握 - 非同期で検索が実行されるため、完了後に処理を行いたい場合はRedux状態の監視が必要
より直接的なアプローチ#
検討の結果、receiveSearch アクションを直接使用するアプローチを採用しました。このアプローチでは：
- Search APIを直接呼び出して、指定キャンバスに該当するヒットのみを取得
- IIIF Search API形式のレスポンスを構築
receiveSearch アクションで検索結果としてMiradorに登録
これにより、指定キャンバスの表示を維持しながら、Miradorの検索ハイライト機能をそのまま活用できます。
1. Search APIからヒットを取得する関数#
この実装では、manifestのserviceプロパティからIIIF Search APIのエンドポイントを動的に取得しています。これにより、任意のIIIF準拠サーバーで動作します。
2. Mirador初期化とハイライト登録#
ポイント#
1. Miradorのアクション関数へのアクセス#
Mirador 4では、アクション関数がグローバルオブジェクトから直接アクセスできます：
Mirador.actions ではなく、Mirador.receiveSearch のように直接アクセスする点に注意してください。
2. IIIF Search API形式のレスポンス#
receiveSearch に渡すJSONは、IIIF Search API 1.0の形式に準拠する必要があります：
3. CompanionWindowの配置#
検索パネルの配置は position パラメータで制御できます：
left: 左側（メタデータパネルと同じ位置）right: 右側
左側にメタデータ、右側に検索結果という配置が自然です。
receiveSearch アクションを直接呼び出すことで、以下のメリットが得られました：
- キャンバス表示の制御 - 指定したキャンバスを初期表示しながらハイライトを追加できる
- ハイライトの即時表示 - 検索結果を直接登録するため、ハイライトが即座に表示される
- パネル配置の制御 - 検索パネルの位置を自由に設定できる
この方法はMiradorのReduxストアの仕組みを活用しており、柔軟なカスタマイズが可能です。
参考リンク#