Mirador 3をNuxt.jsで使用する方法を紹介するリポジトリを作成しました。
概要 以下の記事で、Mirador 3をVueで使用する方法を紹介しました。
nakamura196.hatenablog.com
上記に続いて、今回は、Nuxt.jsでMirador 3を使用する方法を紹介するGitHubリポジトリを作成しました。
github.com
上記リポジトリにおいて、Miradorをページ全体に表示する例に加えて、ページ内の特定の領域に埋め込む例を用意しています。
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, }, } ポイントは、「workspaceControlPanel」を「enabled: false」にしている点や、「allowClose」「allowMaximize」をfalseにしている点ですが、必要に応じてカスタマイズしてください。
...
2021年8月7日 · 1 分 · Nakamura
