🐕

IIIF Curation Viewerのアノテーションの色を変更する

2023/03/28に公開

概要

IIIF Curation Viewerで付与したアノテーションの色を変更したい、というご要望をいただいたので、その方法の一例を紹介します。

アノテーションのマーカーの種類に関する説明は以下などにまとめられています。

http://codh.rois.ac.jp/software/iiif-curation-viewer/annotation.html#マーカーの種類

JSONデータを手動または機械的に修正して実現することも可能ですが、今回はGUIを使った変更方法をご紹介します。

動画

作業の流れを動画にしました。参考にしてください。『百鬼夜行図』(東京大学総合図書館所蔵)を使用しています。

https://www.youtube.com/watch?v=fbfdQVxHTgs

作業内容

IIIF Curation Viewerでアノテーションを付与する

この部分までは、以下の記事などを参考に進めてください。

https://zenn.dev/nakamura196/books/f4f87f9730e12e

結果、以下のように、青色の矩形でアノテーションが表示されます。この矩形の色を変更してみます。

独自ツールを用いた編集

矩形の色の変更にあたり、独自のツールを作成しました。以下のURLから編集画面にアクセスできます。

https://ndl-ocr.vercel.app/icv

Curation URIを入力すると、以下のような編集画面に遷移します。

https://ndl-ocr.vercel.app/icv/editor?curation=https://mp.ex.nii.ac.jp/api/curation/json/bfb7d80e-4e51-44fb-97d2-94e7c5acb2fd

まず、「1. ダウンロード」を押して、編集前のデータをローカルにダウンロードしてください。念の為、以後の作業前のデータをバックアップしておきます。

次に、動画を参考に、以下のように、ColorやCharsを編集します。

そして、「3. コピー」を押して、編集内容のjsonデータをコピーします。

あとは、動画を参考に、IIIF Curation Editorを開き、JSONデータを更新し、IIIF Curation Viewerのアノテーションモードで変更内容を確認します。以下のように、矩形に色が付き、charsに指定した文字列が合わせて表示されます。

まとめ

IIIF Curation Viewerのアノテーションモードにおいて、矩形の色などを変更されたい場合の参考になりましたら幸いです。

Discussion