IIIF画像に対して、多角形のアノテーションを付与するツールを作成しました。
概要
IIIF画像に対して、多角形のアノテーションを付与するツールを作成しました。
本記事では、このツールについて説明します。
使い方
以下がトップ画面です。IIIFマニフェストファイルのURLを入力します。「入力例を使用」からもお試しいただけます。『百鬼夜行図』(東京大学総合図書館所蔵)を使用しています。
以下のようなアノテーション登録画面が表示されます。
画面右上のログインボタンからログインできます。
アノテーション付与の方法は、以下の動画を参考にしてください。
開発した背景
以下の記事で説明したように、Mirador 3の mirador-annotations プラグイン向けに、Firestore用のアダプタを開発しました。
このmirador-annotations プラグインについて、多角形のアノテーション付与を行いづらいという意見がありました。
そこで、主に多角形のアノテーション付与を支援するために、本ツールを開発しました。また、アノテーション付与を実装するためのライブラリであるAnnotoriousについて、Reactライブラリが公開されていたので、この調査も兼ねて実装しました。
さらに、上記の記事で紹介したmirador-annotations プラグインのFirestore用のアダプタを流用することで、同じFirebaseのサービス（AuthenticationとFirestore）を使用するようにしました。
そのため、本ツールの右上のボタンに、Miradorへのリンクを付与しました。
これにより、本ツールで編集を行い、IIIFマニフェストファイルのメタデータを含む、情報の表示にはMiradorを使用する、といった使い方が可能になるかと思います。
多角形のアノテーションを付与するための既存ツール
IIIF画像に対してアノテーションを付与する機能を持つ既存ツールは数多く存在します。ここでは、IIIF画像に対して多角形のアノテーションを付与する機能を有するツールと、本ツールとの差分を紹介します。
ここでは、国立国会図書館で公開されている「和泉国絵図」を例とします。
Omeka Classic + IIIF Toolkit
以下の記事でセットアップ方法や使い方を紹介しています。
IIIF Toolkitでは、Mirador 2が使用されており、ポリゴンアノテーションが提供されています。
今回にニーズに対しては、多角形アノテーションではなくポリゴンアノテーションである点と、Omeka Classicのセットアップ（サーバの準備や維持）が必要になる点が課題として挙げられます。
Recogito
Recogitoでは傾斜したボックス形式のアノテーションを付与することはできましたが、多角形のアノテーション付与はできないようでした。
また、以下のように、pctを用いてIIIF画像にアクセスするようで、画像が表示できないケースが多くありました。
Glycerine: Image Annotation Workbench
本ツールが最も今回のニーズに合致していました。
おそらく本ツールと同じ「Annotorious（のver.2）」が使用されており、多角形によるアノテーションのほか、複数人による共同作業も可能でした。
唯一の課題として、登録したアノテーションの一括登録機能が提供されていませんでした。この点に対して、今回開発したツールでは、読み込んだIIIFマニフェストファイルに対して、ログインユーザが登録したユーザが付与したアノテーションを一括エクスポートする機能を設けました。
これにより、本ツールで付与したアノテーションを一括エクスポートし、他の可視化ツールで使用する、といった使い方が容易になります。
なお、以下の記事で紹介したように、Mirador 3の mirador-annotations プラグインにも付与したアノテーションをダウンロードする機能が提供されています。しかい、この機能はCanvasごとにダウンロードする仕様となっており、複数ページから構成される場合には、ページごとにダウンロードする必要がありました。
工夫点および開発メモ
本ツールの開発にあたり、工夫した点などを紹介します。
入力するIIIFマニフェストのv2およびv3対応
入力するIIIFマニフェストファイルはv2とv3、どちらでも対応できるようにしました。この実現にあたり、以下の記事で紹介した@iiif/parserを使用しました。
v2のIIIFマニフェストファイルが入力された場合、本ライブラリでv3のマニフェストファイルに変換することで、ツール内では、v3のマニフェストファイルを対象とした処理に統一しました。
IIIFの型
TypeScriptを用いた開発にあたり、以下を使用した。IIIFの型を利用することができ、便利に感じました。
AnnotriousのFormatAdapter
当初Annotriousを使用していた際、Annotrious独自のフォーマットでアノテーションが作成され、Mirador 3の mirador-annotations プラグインに対応したアノテーションへの変換にあたり、難しく感じる点が多かったです。
この点について、以下の記事にあるように、W3CImageFormatといったFormatAdapterを適用することで、アノテーションの記述形式を変更することができました。
このW3CImageFormatを用いることで、変換作業のコストが下がりました。一例として、以下のようにNext.jsから使用しました。
import dynamic from "next/dynamic";
import { W3CImageFormat } from "@annotorious/annotorious";
const DynamicOpenSeadragonAnnotator = dynamic(
() => import("@annotorious/react").then((mod) => mod.OpenSeadragonAnnotator),
{ ssr: false }
);
const DynamicOpenSeadragonViewer = dynamic(
() => import("@annotorious/react").then((mod) => mod.OpenSeadragonViewer),
{ ssr: false }
);
interface ViewerProps {
tool: "rectangle" | "polygon" | undefined;
options: OpenSeadragon.Options;
}
// infoUrls,
export function Viewer({ tool, options }: ViewerProps) {
return (
<div className="flex-1 relative">
<DynamicOpenSeadragonAnnotator
drawingEnabled={tool !== undefined}
tool={tool || "rectangle"}
adapter={W3CImageFormat("")}
>
<DynamicOpenSeadragonViewer
className="absolute inset-0"
options={options}
/>
</DynamicOpenSeadragonAnnotator>
</div>
);
}
まとめ
IIIF画像に対して、長方形のアノテーションを付与するツールは、よいものが数多く存在しますが、多角形については適切なものが見つからず、今回紹介したツールを開発しました。同様のツール開発の参考になりましたら幸いです。
なお、本ツールの提供期間は未定のため、もしご使用される際には、本記事でも紹介した「エクスポート」機能を使用し、付与したアノテーションをローカルに保存するようにしてください。
Discussion