💡

Mirador 3でScroll Viewを使う

2024/07/06に公開

iiif

Mirador

tech

概要

Mirador 3でScroll Viewを使う方法についての備忘録です。

以下、「鹿児嶋征討記之内　高瀬口河通ノ戦争野津公聯隊旗を取返ス図（国立国会図書館所蔵）」を例としています。

このIIIFマニフェストは3つのキャンバス（画像）から構成されており、通常の表示方法（Single, 単一モード）では、画像ごとに表示されます。

これを3つ繋げて表示することを目指します。

デモ

以下からお試しいただけます。

IIIFマニフェストファイルについては、国立国会図書館で公開されているIIIFマニフェストファイルを一部変更しています。

変更前

https://dl.ndl.go.jp/api/iiif/1301543/manifest.json

変更後

https://nakamura196.github.io/mirador-multi-image/manifest.json

変更箇所として、今回の記事の目的であるScroll表示と直接関係がありませんが、画像が右から左に表示されるように、"viewingDirection": "right-to-left"を追加しています。

Miradorの設定

Mirador 2では事前設定なしにScroll Viewが使えましたが、Mirador 3のデフォルト設定では、Scroll Viewは無効化されているようでした。

https://projectmirador.org/embed/?iiif-content=https://nakamura196.github.io/mirador-multi-image/manifest.json

そこで、Mirador 3の初期設定を以下のように修正します。

  const config = {
    id: "mirador",
    windows: [
      {
        manifestId: "./manifest.json",
      },
    ],
    language: "ja",
    window: {
      sideBarOpenByDefault: true,
      defaultSideBarPanel: "info",
      defaultView: "scroll",
      views: [{ key: "single" }, { key: "gallery" }, { key: "scroll" }],
    },
  };

  Mirador.viewer(config);

ポイントは、views: [{ key: "single" }, { key: "gallery" }, { key: "scroll" }]です。ここで、Scroll Viewを追加することで、以下のように選択肢として表示されるようになりました。

参考

defaultView未指定時のバグ

デフォルト表示を未指定の場合、上記の例ではSingle（単一）表示が使用されますが、その状態からScroll Viewボタンを押すと、表示がうまく切り替わらないケースがありました。

この問題について、上記のように、defaultView: "scroll"を設定しておくことで回避できました。根本的な解決方法は改めて調査したいと思います。

国立国会図書館デジタルコレクションでのスクロール表示

今回対象とした資料の公開元である国立国会図書館デジタルコレクションが提供するビューアでも「連続して表示」モードが提供されています。

独自実装の例

当初、Mirador 3ではScroll Viewが未実装かと思い、Miradorのプラグインとして追加開発する予定でした。その事前調査として、OpenSeadragonでのプロトタイプを作成しました。今後、独自に実装される方がいれば、参考になりましたら幸いです。

デモ

https://github.com/nakamura196/openseadragon-multi-image

以下のページが参考になりました。

ソースコードは以下です。

const images = [
    "https://dl.ndl.go.jp/api/iiif/1301543/R0000001/info.json",
    "https://dl.ndl.go.jp/api/iiif/1301543/R0000002/info.json",
    "https://dl.ndl.go.jp/api/iiif/1301543/R0000003/info.json"
];

const viewer = OpenSeadragon({
    id: "viewer",
    prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/images/",
    tileSources: images
});

const direction = "right-to-left";

viewer.addHandler('open', function () {
    var count = viewer.world.getItemCount();

    for (let i = 0; i < count; i++) {
        const tiledImage = viewer.world.getItemAt(i);
        const positionIndex = direction === "right-to-left" ? count - i - 1 : i;
        const position = new OpenSeadragon.Point(positionIndex, 0);
        tiledImage.setPosition(position, true);
    }

    viewer.viewport.fitBounds(viewer.world.getHomeBounds(), true);
});

まとめ

Mirador 3でのScroll View（スクロール表示、連続して表示）の利用にあたり、参考になりましたら幸いです。

概要

デモ

Miradorの設定

参考

defaultView未指定時のバグ

国立国会図書館デジタルコレクションでのスクロール表示

独自実装の例

まとめ

Discussion