Mirador 3をNuxt.jsで使用する方法を紹介するリポジトリを作成しました。

概要

以下の記事で、Mirador 3をVueで使用する方法を紹介しました。

nakamura196.hatenablog.com

上記に続いて、今回は、Nuxt.jsでMirador 3を使用する方法を紹介するGitHub リポジトリを作成しました。

github.com

上記リポジトリにおいて、Miradorをページ全体に表示する例に加えて、ページ内の特定の領域に埋め込む例を用意しています。

f:id:nakamura196:20210807141757p:plain

https://nakamura196.github.io/nuxt-mirador/embedded

本記事では、上記ページに関する説明を行い、Miradorの使い方の一部について紹介します。

概要
詳細
まとめ

詳細

上記のページは、以下について説明することを意図しています。

Miradorを画面の一部に埋め込む
プログラムでカンバスを指定する
プログラムでZoomを行う

それぞれについて説明します。

なお、ソースコードは以下で確認できます。

https://github.com/nakamura196/nuxt-mirador/blob/master/pages/embedded.vue

Miradorを画面の一部に埋め込む

Miradorを画面に埋め込む際、Miradorを表示する要素のID（例：mirador）を指定します。この時、以下のようなCSSを与えることで画面の一部に埋め込むことができます。

#mirador {
  height: 600px;
  position: relative;
  width: 100%;
}

ポイントは、「position: relative;」です。これを与えないと、heightなどを指定しても全画面で表示されてしまいます。

また、以下のスタンフォード大学図書館のMirador 3の埋め込みを例として、Configを設定しました。

https://dlmenetwork.org/library/catalog/oai:N%2FA:Manchester~18~18~162~225617

const config = {
    id: "mirador",
    windows: [
        {
            id: 'known-window-id',
            manifestId: this.manifestId,
        },
    ],
    window: {
        allowClose: false,
        allowMaximize: false,
        allowFullscreen: true,
        hideWindowTitle: true,
    },
    workspaceControlPanel: {
        enabled: false,
    },
}