本記事は生成AIと共同で執筆しています。事実関係は可能な範囲で公式ドキュメント等と照合していますが、誤りが含まれている可能性があります。重要な判断を行う前にご自身でも一次情報をご確認ください。
IIIF（International Image Interoperability Framework）ビューア Mirador 向けのプラグイン mirador-layer-slideshow を、Mirador 4 に対応させました。このプラグインは、1つのcanvasに複数の画像レイヤーが重なっている資料を、レイヤーを1枚ずつ順に重ねながら表示する機能を追加します。
- GitHub: https://github.com/nakamura196/mirador-layer-slideshow-plugin
- デモ: https://nakamura196.github.io/mirador-layer-slideshow-plugin/
このプラグインは、もともと Mirador3プラグイン開発: レイヤーのスライドショーを行う で Mirador 3 向けに公開していたものです。Mirador 4 のリリースに伴ってビルド構成や依存ライブラリが変わったため、改修を行いました。
デモ
デモページで実際の動作を確認できます。
?manifest= パラメータで任意のIIIFマニフェストを読み込めます。
https://nakamura196.github.io/mirador-layer-slideshow-plugin/?manifest=https://example.com/manifest.json
レイヤースライドショーとは
IIIFのマニフェストでは、1つのcanvasに複数の画像（painting annotation）を重ねて配置できます。たとえば起絵図（きえず）のように、台紙の上に折り込みの図が貼り重ねられた資料は、台紙とそれぞれの折り込みを別々の画像レイヤーとして表現できます。
このプラグインは、それらのレイヤーを下から順に重ねて表示していくことで、資料の構成を段階的に見せる機能を提供します。
デモでは東京大学駒場図書館が公開する「泰平丸起絵図」を使用しています。1つのcanvasに、台紙画像1枚と折り込み15枚の計16レイヤーが配置されています。
表示の流れ
ビューア右上のパネルにある開始ボタンを押すと、スライドショーが始まります。台紙（先頭のレイヤー）を表示したまま、折り込みのレイヤーが1枚ずつ順に重なっていきます。
台紙は常に表示されたままなので、全体像を見失うことなく、どのレイヤーがどの位置に重なっているかを確認できます。
ツールバー
パネルには開始/停止ボタンと、進捗を示すカウンターがあります。カウンターは「現在のレイヤー数 / 全レイヤー数」の形式で表示されます。
Mirador 3 版では進捗をスライダー（バー）で表示していましたが、数値の方が現在位置が分かりやすいため、現在 / 全体 のテキスト表示に変更しました。
メニューからの表示切り替え
ウィンドウ上部のプラグインメニューから、パネルの表示/非表示を切り替えられます。
ウィンドウの設定 layerSlideshowEnabled でも初期表示を制御できます。
ビューポートの追従
スライドショーが進むと、新しく表示されたレイヤーの領域へビューポートがパンします。各レイヤーには配置領域（on の xywh）が指定されているため、その領域を画面の中心に移動させています。
Mirador 3 から 4 への変更点
Mirador 4 ではビルド構成と依存ライブラリが変わっているため、プラグイン側もそれに合わせて改修しました。主な変更は次のとおりです。
| 項目 | Mirador 3 版 | Mirador 4 版 |
|---|---|---|
| ビルドツール | nwb | Vite |
| UIライブラリ | Material-UI v4（@material-ui/*） | MUI v7（@mui/*） |
| Mirador本体の参照 | mirador/dist/es/src/...（内部パス） | mirador パッケージの名前付きエクスポート |
| コンポーネント | クラスコンポーネント + HOC | 関数コンポーネント + フック |
| React | 16 | 18 |
Mirador 3 版では、Mirador本体の内部ファイルパスを直接 import していました。Mirador 4 では mirador パッケージが必要なものを名前付きエクスポートとして公開しているため、import 文がシンプルになりました。
// Mirador 3 版（内部パスを直接 import）
import { MiradorMenuButton } from 'mirador/dist/es/src/components/MiradorMenuButton';
import * as actions from 'mirador/dist/es/src/state/actions';
// Mirador 4 版（パッケージの名前付きエクスポート）
import { MiradorMenuButton } from 'mirador';
import { updateWindow, updateViewport, updateLayers, getWindowConfig, getViewer } from 'mirador';
UIまわりでは、Material-UI v4 で使われていた HOC（higher-order component）の withStyles / withWidth / withTheme が MUI v7 では廃止されています。これに合わせて、クラスコンポーネントを関数コンポーネントに書き換え、useTheme / useMediaQuery / useTranslation といったフックを使う形にしました。
一方で、プラグインの登録方法（add モードで対象コンポーネントに追加する形式、mapStateToProps / reducers / config.translations など）は Mirador 3 と 4 で概ね共通でした。プラグインの構造自体を大きく変える必要はありませんでした。
使い方
npm install mirador-layer-slideshow
import Mirador from 'mirador';
import miradorLayerSlideshowPlugin from 'mirador-layer-slideshow';
Mirador.viewer(
{
id: 'demo',
windows: [
{
layerSlideshowEnabled: true,
manifestId: 'https://example.com/manifest.json',
},
],
},
miradorLayerSlideshowPlugin
);
layerSlideshowEnabled を true にしたウィンドウで、レイヤースライドショーのパネルが表示されます。
マニフェストのレイヤー構造
このプラグインは、IIIF Presentation API 2.x の sequences / canvases / images 構造を読み取り、1つのcanvasに複数配置された画像をレイヤーとして扱います。デモで使用している起絵図のマニフェストでは、canvasの images に16枚の画像が並んでおり、それぞれが on で canvas 上の配置領域を指定しています。
{
"@type": "sc:Canvas",
"width": 13824,
"height": 7680,
"images": [
{
"@type": "oa:Annotation",
"motivation": "sc:painting",
"resource": { "@id": ".../7-2-24_bs.tif/full/full/0/default.jpg" },
"on": ".../canvas/p1"
},
{
"@type": "oa:Annotation",
"motivation": "sc:painting",
"resource": { "@id": ".../7-2-24_001_1.tif/full/full/0/default.jpg" },
"on": ".../canvas/p1#xywh=0,1536,5632,4608,0"
}
]
}
先頭の画像（台紙）は canvas 全体を on に指定し、以降の折り込みはそれぞれの配置領域を xywh で指定しています。プラグインはこの並び順でレイヤーを1枚ずつ表示していきます。
Mirador 4 向けの実寸ルーラープラグインについては Mirador 4向け実寸ルーラープラグインの開発 でも紹介しています。
コメント
…