IIIF画像の表示に Mirador ビューアを使用する方法について説明します。
参考実装#
埋め込み方式は、Stanford University Libraries の Stanford Digital Repository を参考にしています。書誌情報の上部にビューアを埋め込み、メタデータと画像を同一ページで閲覧できるようにしています。
ファイル構成#
URLパラメータ#
/mirador/index.html は以下のURLパラメータを受け付けます：
| パラメータ | 説明 | 例 |
|---|
manifest | IIIFマニフェストURL（必須）。セミコロン区切りで複数指定可能 | https://example.com/iiif/manifest.json |
embed | 埋め込みモード（trueで閉じるボタンと左側メニューを非表示） | true |
theme | テーマ（dark または light） | dark |
lang | 言語コード（デフォルト: ja） | ja, en |
canvas | 初期表示するキャンバスID | - |
annotationState | アノテーション表示モード（trueでサイドバー開く） | true |
使用例#
Mirador設定詳細#
index.html の構成#
URLパラメータの解析#
ウィンドウ設定#
ウィンドウ動作設定#
ワークスペースコントロールパネル#
左側のメニュー（マニフェスト追加、ワークスペース管理など）の表示制御：
- 通常モード:
true（表示） - 埋め込みモード:
false（非表示）
テーマ設定#
Miradorは light と dark の2つのテーマを提供しています：
カスタムテーマを追加する場合は themes オプションを使用します：
言語設定#
Miradorがサポートする言語：ar, de, en, fr, ja, lt, nl, pt-BR, vi, zh-CN, zh-TW など
完全な初期化コード#
0
React コンポーネント（MiradorViewer.tsx）#
ダークモード検出#
1
言語設定の取得#
2
URL生成#
3
iframe埋め込み#
全画面表示を許可するために allow="fullscreen" と allowFullScreen 属性を設定します：
4
環境変数#
| 変数名 | 説明 | デフォルト |
|---|
NEXT_PUBLIC_MIRADOR_PATH | Miradorのベースパス | /mirador/ |
開発環境と本番環境#
5
関連リンク#