概要 2021年9月15日時点でOmeka Sのモジュールとして提供されているIIIF対応ビューアをまとめます。 ビューア一覧 Universal Viewer github.com Mirador github.com Diva IIIF Viewer github.com まとめ 以下のページで導入イメージをご確認いただけます。Omeka Sを用いたIIIF画像配信の参考になりましたら幸いです。 diyhistory.org
先日、以下の記事で、Nuxt.jsを用いて、Miradorをページ内の特定の領域に埋め込む方法を紹介しました。 nakamura196.hatenablog.com 今回は、Vue.jsなどのフレームワークを使わずに、Miradorを埋め込む方法について紹介します。 具体的には、以下のページのソースコードをご確認ください。 https://nakamura196.github.io/nuxt-mirador/embedded2 上記は単純なHTMLファイルです。 Miradorを画面に埋め込む際、Miradorを表示する要素のID（例：mirador）を指定します。この時、以下のようなCSSを与えることで画面の一部に埋め込むことができます。 #mirador { height: 600px; position: relative; width: 100%; } ポイントは、「position: relative;」です。これを与えないと、heightなどを指定しても全画面で表示されてしまいます。 Mirador 3の利用において、本記事がお役に立つことがあれば幸いです。
概要 以下の記事で、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にしている点ですが、必要に応じてカスタマイズしてください。 ...
Mirador 3をVueで使用する方法を紹介するリポジトリを作成しました。Vueを使ったアプリケーション開発の参考になれば幸いです。 github.com 本リポジトリの作成にあたっては、以下を参考にさせていただきました。 github.com なお、別のより簡単な方法として、UMD（Universal Module Definition）ビルドを利用する方法もあります。単純にMirador 3を利用したい場合には、以下の方法をおすすめします。 github.com 上記サイトでは、（今回紹介するリポジトリで示したように）「パッケージマネージャーを通じたインストールは、より柔軟なカスタマイズを可能とします。」と記載されています。 Installing through a package manager can give you more flexibility for customization.