IIIF画像の表示に Mirador ビューアを使用する方法について説明します。

参考実装

埋め込み方式は、Stanford University Libraries の Stanford Digital Repository を参考にしています。書誌情報の上部にビューアを埋め込み、メタデータと画像を同一ページで閲覧できるようにしています。

ファイル構成

apps/web/
├── public/mirador/
│   └── index.html          # Mirador ビューア本体
├── src/components/item/
│   └── MiradorViewer.tsx   # 埋め込みコンポーネント
└── .env.local              # 環境変数設定

URLパラメータ

/mirador/index.html は以下のURLパラメータを受け付けます：

パラメータ説明例
manifestIIIFマニフェスト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?manifest=https://example.com/iiif/manifest.json&embed=true&theme=dark&lang=ja

Mirador設定詳細

index.html の構成

DOCTYPE html>
html lang="ja">
  head>
    meta charset="utf-8" />
    meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    title>Miradortitle>
    link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
  head>
  body>
    div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0">div>
    script src="https://unpkg.com/mirador@latest/dist/mirador.min.js">script>
    script>
      // 設定スクリプト
    script>
  body>
html>

URLパラメータの解析

var vars = {};
var param = location.search.substring(1).split("&");
for (var i = 0; i  param.length; i++) {
  var keySearch = param[i].search(/=/);
  var key = "";
  if (keySearch != -1) key = param[i].slice(0, keySearch);
  var val = param[i].slice(param[i].indexOf("=", 0) + 1);
  if (key != "") vars[key] = decodeURI(val);
}

ウィンドウ設定

var windows = [];

if (vars["manifest"]) {
  var manifests = vars["manifest"];
  var array = manifests.split(";");  // セミコロンで複数マニフェストを分割

  for (var i = 0; i  array.length; i++) {
    var manifest = decodeURIComponent(array[i]);
    var obj = {
      manifestId: manifest,
      thumbnailNavigationPosition: "far-right",  // サムネイルを右端に表示
    };
    if (vars["canvas"]) {
      obj.canvasId = vars["canvas"];  // 初期表示キャンバス
    }
    windows.push(obj);
  }
}

ウィンドウ動作設定

var windowSettings = {
  allowClose: true,        // 閉じるボタン表示
  allowFullscreen: true,   // 全画面ボタン表示
}

// アノテーションモード
if (vars["annotationState"]) {
  windowSettings.highlightAllAnnotations = true;
  windowSettings.sideBarOpen = true;
  windowSettings.defaultSideBarPanel = 'annotations';
}

// 埋め込みモード: UIを簡素化
if (vars["embed"] === "true") {
  windowSettings.allowClose = false;
  windowSettings.allowMaximize = false;
}

ワークスペースコントロールパネル

左側のメニュー（マニフェスト追加、ワークスペース管理など）の表示制御：

var workspaceControlPanelEnabled = vars["embed"] !== "true";
  • 通常モード: true（表示）
  • 埋め込みモード: false（非表示）

テーマ設定

Miradorは light と dark の2つのテーマを提供しています：

var isDarkMode = vars["theme"] === "dark";

Mirador.viewer({
  selectedTheme: isDarkMode ? "dark" : "light",
  // ...
});

カスタムテーマを追加する場合は themes オプションを使用します：

Mirador.viewer({
  selectedTheme: 'custom',
  themes: {
    custom: {
      palette: {
        type: 'dark',
        primary: {
          main: '#80104E',
        },
      },
    },
  },
});

言語設定

var language = vars["lang"] || "ja";  // デフォルト: 日本語

Mirador.viewer({
  language: language,
  // ...
});

Miradorがサポートする言語：ar, de, en, fr, ja, lt, nl, pt-BR, vi, zh-CN, zh-TW など

完全な初期化コード

var miradorInstance = Mirador.viewer({
  id: "mirador",                              // マウント先のDOM ID
  language: language,                         // 言語
  selectedTheme: isDarkMode ? "dark" : "light", // テーマ
  window: windowSettings,                     // ウィンドウ設定
  windows: windows,                           // 初期表示するウィンドウ
  workspaceControlPanel: {
    enabled: workspaceControlPanelEnabled,    // 左側メニューの表示
  },
});

React コンポーネント（MiradorViewer.tsx）

ダークモード検出

const [isDarkMode, setIsDarkMode] = useState(false)

useEffect(() => {
  const checkDarkMode = () => {
    setIsDarkMode(document.documentElement.classList.contains('dark'))
  }
  checkDarkMode()

  // クラス変更を監視
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.attributeName === 'class') {
        checkDarkMode()
      }
    })
  })
  observer.observe(document.documentElement, { attributes: true })

  return () => observer.disconnect()
}, [])

言語設定の取得

import { useLocale } from 'next-intl'

const locale = useLocale()  // 'ja' または 'en'

URL生成

const miradorBasePath = process.env.NEXT_PUBLIC_MIRADOR_PATH || '/mirador/'
const miradorEmbedUrl = `${miradorBasePath}?manifest=${encodeURIComponent(manifestUrl)}&embed=true&lang=${locale}${isDarkMode ? '&theme=dark' : ''}`

iframe埋め込み

全画面表示を許可するために allow="fullscreen" と allowFullScreen 属性を設定します：

iframe
  src={miradorEmbedUrl}
  className="w-full h-full border-0"
  title="IIIF Viewer"
  allow="fullscreen"
  allowFullScreen
/>

環境変数

変数名説明デフォルト
NEXT_PUBLIC_MIRADOR_PATHMiradorのベースパス/mirador/

開発環境と本番環境

# 開発環境 (.env.local)
NEXT_PUBLIC_MIRADOR_PATH=/mirador/index.html

# 本番環境（デフォルト）
# NEXT_PUBLIC_MIRADOR_PATH=/mirador/

関連リンク