⛳

URLの引数で指定したIIIFマニフェストに対して、Mirador 3のannotationsプラグインを試す

2024/07/07に公開

Node.js

概要

URLの引数で指定したIIIFマニフェストに対して、Mirador 3のannotationsプラグインを試すことができるデモページを用意しました。

https://mirador-annotations.vercel.app/

iiif-contentまたはmanifest引数を使用することで、指定したIIIFマニフェストを対象にすることができます。

https://mirador-annotations.vercel.app/?iiif-content=https://dl.ndl.go.jp/api/iiif/1301543/manifest.json

本記事は、このデモページの作成に関する備忘録です。

背景

Mirador 3向けのアノテーション付与プラグインとして、mirador-annotationsがあります。

以下の記事で使い方の例を紹介しています。

そして、以下のデモページがすでに用意されていますが、URLの引数にIIIFマニフェストファイルを指定する機能は提供されていません。

https://mirador-annotations.netlify.app/

フォークと修正

URLの引数にIIIFマニフェストファイルを指定する機能の追加にあたり、上記のリポジトリをクローンしました。

そして、以下の修正を加えました。

特に、以下の修正を加えています。

demo/src/index.js

...
var params = new URL(document.location).searchParams;
var manifest = params.get('iiif-content') || params.get('manifest') || 'https://iiif.harvardartmuseums.org/manifests/object/299843'
var windows = [];
if (manifest) {
  windows.push({ manifestId: manifest });
}
...

これは、以下の実装を参考にしています。iiif-contentまたはmanifest引数でIIIFマニフェストファイルを参照するようでした。

Vercelへのデプロイ設定

フォークしたリポジトリのソースコードをビルドした結果を、Vercelにデプロイしています。

デプロイにあたり、以下のような修正を加えました。

Output Directory、Install CommandおよびNode.jsのVersionを16.xに変更しています。

まとめ

Mirador 3の利用にあたり、参考になりましたら幸いです。

概要

背景

フォークと修正

Vercelへのデプロイ設定

まとめ

Discussion