Mirador 4で、初期読み込み時に、画像の回転や範囲指定を行う
概要
Mirador 4で、初期読み込み時に、画像の回転や範囲指定を行う方法を紹介します。
背景
2025年3月現在、Mirador 4の開発が進められています。alpha版を以下で確認することができます。
おそらくMirador 4からの機能かと思いますが、以下のFAQで初期設定の方法が記述されています。
具体的には、以下のように、initialViewerConfigを用いることで、初期設定ができました。
export default {
id: 'mirador',
windows: [{
canvasId: 'https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-47174892',
initialViewerConfig: {
thumbnailNavigationPosition: 'far-bottom',
x: 934,
y: 782,
// you need to specify zoom for this to look good
zoom: 0.0007,
},
manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843',
}],
};
応用
上記を応用して、以下のような初期設定を行ってみました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>Mirador - Table of contents</title>
<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 type="module">
import Mirador from '../../../src';
// import config from './mirador-configs/initial-viewer-config.js';
const xywh = '9554.0,8213.0,1000,1000';
const spl = xywh.split(',');
// Box to zoom to
const boxToZoom = {
height: Number(spl[3]),
width: Number(spl[2]),
x: Number(spl[0]),
y: Number(spl[1])
};
const zoomCenter = {
x: boxToZoom.x + boxToZoom.width / 2,
y: boxToZoom.y + boxToZoom.height / 2
};
const config = {
id: 'mirador',
windows: [{
canvasId: "https://iiif.dl.itc.u-tokyo.ac.jp/repo/iiif/187cc82d-11e6-9912-9dd4-b4cca9b10970/canvas/p2",
initialViewerConfig: {
rotation: 180,
x: zoomCenter.x,
y: zoomCenter.y,
zoom: 1 / Math.max(boxToZoom.width, boxToZoom.height)
},
// manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
manifestId: "https://iiif.dl.itc.u-tokyo.ac.jp/repo/iiif/187cc82d-11e6-9912-9dd4-b4cca9b10970/manifest",
}],
};
Mirador.viewer(config);
</script>
</body>
</html>
これにより、わかりにくいですが、以下のように、180度回転しつつ、xywhにフォーカスした形で初期読み込みできました。
なお、「東京帝國大學本部構内及農學部建物鳥瞰圖（東京大学農学生命科学研究科・農学部）」をサンプルデータとして利用しています。
この設定を用いることで、IIIF Content State APIなどにも対応可能かと思います。
初期設定については、Universal ViewerやCuration Viewerではすでに実装されているものです。一方、私の知る限りにおいて、Mirador 3では初期設定が行いにくかったと思います。（例えば、回転させた状態での初期設定はできなかった？）
上記で紹介した方法を用いることで、Miradorの利便性が向上するかと思います。
フォーク
しかし、初期設定でrotationを指定すると、アニメーションが発生することがわかりました。この原因は、以下で示すように、viewport.setRotation(viewerConfig.rotation);となっていることでした。
そのため、immediately: trueを加えたものをフォークしたリポジトリで公開しています。
上記を使用することで、初期ロード時でも、アニメーションが発生せず、指定した角度で回転および領域にフォーカスした形で、画像を表示することができるようになりました。
まとめ
Mirador 4の利用にあたり、参考になりましたら幸いです。これまで開発したプラグインについても、Mirador 4への対応を進める予定です。
Discussion