Mirador 4向け実寸ルーラープラグインの開発
IIIFビューア Mirador のバージョン4向けに、物理寸法のルーラーを表示するプラグイン mirador-physical-ruler を開発しました。 GitHub: https://github.com/nakamura196/mirador-physical-ruler デモ: https://nakamura196.github.io/mirador-physical-ruler/ 背景 デジタルアーカイブで公開されている史料画像を閲覧する際、実物の大きさが直感的にわかりにくいという問題があります。IIIFの仕様には Physical Dimensions service が定義されており、マニフェストのcanvasに物理スケール情報を埋め込むことができます。 Mirador 2向けには dbmdz/mirador-plugins の physicalRuler や、Mirador 3向けには mirador-ruler-plugin が存在しますが、Mirador 4対応のものは確認できませんでした。そこで新たに開発しました。 全体表示 左が海東諸国紀（21.2×32.6cm）、右が正保琉球国悪鬼納島絵図写（621.6×353.7cm）です。サイズが大きく異なる史料でも、それぞれの実寸に応じたルーラーが表示されます。 ルーラーの表示 canvasにphysdim serviceが設定されていれば、上端と左端にスケールルーラーがSVGで描画されます。海東諸国紀（横21.2cm）では0〜20cmの目盛りが表示されています。 琉球絵図（横621.6cm）のような大型史料では、目盛りの単位が自動的に調整され、100cm刻みで表示されます。 ズーム時の自動調整 ズームインすると目盛り間隔が細かくなり、より詳細な寸法を確認できます。 設定パネル 左上の歯車ボタンから以下を変更できます。 フォントサイズ ルーラー幅 目盛りサイズ（大・小） 表示単位（mm / cm / in） 色 背景の透明度 外部マニフェストの読み込み デモページでは ?manifest= パラメータで任意のマニフェストURLを指定できます。 https://nakamura196.github.io/mirador-physical-ruler/?manifest=https://example.com/manifest.json 使い方 npm install mirador-physical-ruler import Mirador from 'mirador'; import { createPlugin } from 'mirador-physical-ruler'; const plugin = createPlugin({ color: '#ffffff', thickness: 34, }); Mirador.viewer( { id: 'mirador', windows: [{ manifestId: 'https://example.com/manifest.json' }], }, plugin ); マニフェストへのphysdim serviceの追加 canvasの service に以下のように記述します。 ...