Mirador 4 で外部マニフェストのウィンドウタイトルだけを差し替える

背景

Mirador は IIIF 対応の画像ビューアで、複数の IIIF マニフェストを並べて比較閲覧できる。複数機関が公開するマニフェストを一画面に並べて表示する際、各ウィンドウのタイトルにはマニフェストの label がそのまま表示される。

しかし、自プロジェクト独自の名称をウィンドウタイトルとして表示したいケースがある。例えば、マニフェストの label が個別の冊次情報を含む長い文字列であるのに対し、資料群を示す短い名称で表示したい場合などである。

他機関が公開している IIIF マニフェストを読み込んで表示する以上、その中身を改変して表示することは避けたい。fetch のインターセプトや Mirador 内部状態の書き換えでマニフェスト JSON の label を差し替える方法もあるが、これは実質的にマニフェストの改変にあたる。

変更すべきは Mirador が画面上に描画したウィンドウのタイトル表示（DOM）だけ であり、マニフェストのデータ自体はオリジナルのまま保持したい。

結果：動作しない。 unpkg から配信される Mirador 4 の UMD ビルドでは Mirador.actions が undefined であり、この API は利用できなかった。

結果：動作するが、マニフェストの中身を改変していることになる。 Mirador が受け取る JSON 自体が書き換わるため、情報パネル等でも改変後の label が表示される。他機関のマニフェストを改変して表示することへの懸念から不採用。

結果：影響範囲が広すぎる。 ウィンドウタイトルだけでなく、マニフェスト情報パネルのメタデータ表示など、同じ label テキストが出現するあらゆる箇所が書き換わってしまう。

Mirador 4 のウィンドウ上部バーは以下の DOM 構造を持つ：

この h2 要素だけを対象に差し替えれば、マニフェストの中身もメタデータ表示も一切変更せず、ウィンドウのタイトル表示だけを制御できる。

URLパラメータに titles を追加し、セミコロン区切りで各マニフェストに対応するカスタムタイトルを指定する。

manifest パラメータと同じ順序・同じ数で titles を指定する。マニフェスト URL をキー、カスタムタイトルを値とするマップを構築する。

ポイントは以下の3点：

store.subscribe — Mirador の Redux store を監視し、マニフェストの読み込み完了を検知する。store からオリジナルの label を取得し、差し替え対象を特定する。
MutationObserver — Mirador が React で再描画するたびに DOM が更新されるため、変更を検知して再度タイトルを差し替える。
observer.disconnect() / observer.observe() — 自身の DOM 変更で MutationObserver が再発火して無限ループになることを防ぐため、差し替え処理中はオブザーバーを一時停止する。

外部機関が公開する IIIF マニフェストを尊重しつつ、自プロジェクトの文脈に合わせた表示名をユーザーに提示できる。Mirador のプラグイン機構を使わず、標準の DOM API だけで実現できるシンプルな手法である。