Annotorious

はじめに ある日、Vercelにデプロイした IIIF アノテーションエディタで、アノテーションが一切付与できなくなっていることに気づきました。ローカルの開発サーバーでは正常に動作するのに、本番環境でだけ描画モードに入れない。コンソールエラーも出ない。UIのボタンは正しく切り替わるのに、画像上でドラッグしても何も起きない——。 原因は、package.json のキャレット指定（^）による Annotorious の自動アップグレードと、v3.7.13 での状態管理ライブラリ移行が webpack の production build で引き起こす不具合でした。 この記事では、調査過程から根本原因の特定、そして得られた教訓までをまとめます。 環境 フレームワーク : Next.js 15 (App Router) 画像ビューア : OpenSeadragon 5 アノテーション : Annotorious v3 (@annotorious/react + @annotorious/openseadragon) バンドラ : webpack（Next.js 内蔵） デプロイ先 : Vercel 症状 本番環境（Vercel）で以下の症状が発生しました。 矩形・ポリゴンの描画ツールボタンをクリックすると、UIの状態は正しく切り替わる （React の state 更新は正常） しかし Annotorious が描画モードに入らない ——カーソルが crosshair に変わらず auto のまま 画像上でクリック＆ドラッグしてもアノテーションが作成されない コンソールにエラーは一切表示されない Annotorious のアノテーションレイヤー要素（a9s-gl-canvas）自体は DOM 上に正しく描画されている ローカルの next dev では完全に正常動作するため、再現が困難な状況でした。 調査過程 1. Playwright による自動テスト まず Playwright を使って、デプロイ済みサイトに対する自動テストを実施しました。 ...

概要 Annotorious v2のpolygonツールを使って、polylineを作成する方法の備忘録です。 背景 Annotorious v2のウェブサイトは以下です。 https://annotorious.github.io/getting-started/ 以下のように、polygonを記述することができます。 一方、同様の方法でpolylineを記述するツールは、以下のプラグインを含めて、提供されていないようでした。 https://github.com/annotorious/annotorious-v2-selector-pack カスタマイズ 以下のような多角形を作成した場合、 以下のようなJSONファイルが作成されます。 { } " " ] " } " " t b , t , @ i y o a c d p d r o " e y { } g " " } n : " " e s s t : : t o e e " " u l x # " [ " " " : r e " " t c A t v p c c t v " 4 n y a u { e t y a : 6 n p l r " o p l 9 o e u p : r e u " b t " e o " " e h 1 a : " s " : : " t a t : e h : t 3 i " " t { " p - o T " : t S " : 8 n e p p v < / 9 " x o " s g s / 0 , t l c : S v w 2 u y o / e g w - a g m / l > w 4 l o m w e < . 4 B n e w c p w 4 o " n w t o 3 3 d , t . o l . - y i e r y o 8 " n - " g r f , g c , o g 5 " o n / 4 d n - i p s 4 c o / 7 e i a d s n n f . t n 8 u s o b n = . b i \ j 8 f " s 7 r 3 o d . 3 n 7 c 8 l e h 3 d " / . " l 1 , o 2 r 1 i 3 s 3 / 7 g 8 a 9 u 0 / 6 g 2 a 5 u , - 1 F 2 r 9 a 0 g . m 1 e 3 n 7 t 4 / 5 g 1 a 1 u 7 - 1 F 8 r 7 a 5 g m 9 e 4 n 5 t . _ 1 f 3 r 5 a 4 g 9 0 8 0 0 1 4 a 6 . 8 j 7 p 5 2 , / 1 f 6 u 5 l 8 l . / 4 f 2 u 6 l 5 l 1 / 3 0 6 / 7 d 1 e 8 f 7 a 5 u l 8 t 8 / 5 j . p 9 g 6 " 9 , 6 6 5 5 2 7 3 4 3 8 , 3 0 0 3 . 3 5 2 2 9 4 9 2 1 8 7 5 2 5 0 8 . 5 4 1 5 0 3 9 0 6 2 5 , 3 3 4 8 . 4 2 4 0 7 2 2 6 5 6 2 5 3 4 8 5 . 0 2 1 4 8 4 3 7 5 , 2 7 2 4 . 3 5 7 9 1 0 1 5 6 2 5 2 1 7 0 . 8 1 1 7 6 7 5 7 8 1 2 5 , 2 1 0 7 . 6 3 3 7 8 9 0 6 2 5 \ " / s v g > " 上記に対して、autoCloseのような変数を用意し、これがfalseの場合、polygonという文字列をpolylineに変更する処理を加えました。 ...

概要 IIIF画像に対して、多角形のアノテーションを付与するツールを作成しました。 https://next-fb-anno.vercel.app/ 本記事では、このツールについて説明します。 使い方 以下がトップ画面です。IIIFマニフェストファイルのURLを入力します。「入力例を使用」からもお試しいただけます。『百鬼夜行図』(東京大学総合図書館所蔵)を使用しています。 以下のようなアノテーション登録画面が表示されます。 画面右上のログインボタンからログインできます。 アノテーション付与の方法は、以下の動画を参考にしてください。 https://youtu.be/9RMqaXTaOzE 開発した背景 以下の記事で説明したように、Mirador 3の mirador-annotations プラグイン向けに、Firestore用のアダプタを開発しました。 このmirador-annotations プラグインについて、多角形のアノテーション付与を行いづらいという意見がありました。 そこで、主に多角形のアノテーション付与を支援するために、本ツールを開発しました。また、アノテーション付与を実装するためのライブラリであるAnnotoriousについて、Reactライブラリが公開されていたので、この調査も兼ねて実装しました。 https://annotorious.dev/react/openseadragon-iiif/ さらに、上記の記事で紹介したmirador-annotations プラグインのFirestore用のアダプタを流用することで、同じFirebaseのサービス（AuthenticationとFirestore）を使用するようにしました。 そのため、本ツールの右上のボタンに、Miradorへのリンクを付与しました。 これにより、本ツールで編集を行い、IIIFマニフェストファイルのメタデータを含む、情報の表示にはMiradorを使用する、といった使い方が可能になるかと思います。 多角形のアノテーションを付与するための既存ツール IIIF画像に対してアノテーションを付与する機能を持つ既存ツールは数多く存在します。ここでは、IIIF画像に対して多角形のアノテーションを付与する機能を有するツールと、本ツールとの差分を紹介します。 ここでは、国立国会図書館で公開されている「和泉国絵図」を例とします。 Omeka Classic + IIIF Toolkit 以下の記事でセットアップ方法や使い方を紹介しています。 https://zenn.dev/nakamura196/books/2a0aa162dcd0eb IIIF Toolkitでは、Mirador 2が使用されており、ポリゴンアノテーションが提供されています。 今回にニーズに対しては、多角形アノテーションではなくポリゴンアノテーションである点と、Omeka Classicのセットアップ（サーバの準備や維持）が必要になる点が課題として挙げられます。 Recogito Recogitoでは傾斜したボックス形式のアノテーションを付与することはできましたが、多角形のアノテーション付与はできないようでした。 また、以下のように、pctを用いてIIIF画像にアクセスするようで、画像が表示できないケースが多くありました。 Glycerine: Image Annotation Workbench 本ツールが最も今回のニーズに合致していました。 https://glycerine.io/ おそらく本ツールと同じ「Annotorious（のver.2）」が使用されており、多角形によるアノテーションのほか、複数人による共同作業も可能でした。 唯一の課題として、登録したアノテーションの一括登録機能が提供されていませんでした。この点に対して、今回開発したツールでは、読み込んだIIIFマニフェストファイルに対して、ログインユーザが登録したユーザが付与したアノテーションを一括エクスポートする機能を設けました。 これにより、本ツールで付与したアノテーションを一括エクスポートし、他の可視化ツールで使用する、といった使い方が容易になります。 なお、以下の記事で紹介したように、Mirador 3の mirador-annotations プラグインにも付与したアノテーションをダウンロードする機能が提供されています。しかい、この機能はCanvasごとにダウンロードする仕様となっており、複数ページから構成される場合には、ページごとにダウンロードする必要がありました。 工夫点および開発メモ 本ツールの開発にあたり、工夫した点などを紹介します。 入力するIIIFマニフェストのv2およびv3対応 入力するIIIFマニフェストファイルはv2とv3、どちらでも対応できるようにしました。この実現にあたり、以下の記事で紹介した@iiif/parserを使用しました。 ...

概要 Annotorious OpenSeadragon Pluginを使って、IIIFマニフェストファイルからロードした複数画像に対するアノテーション付与を行うサンプルプログラムを作成しました。以下からお試しいただけます。 https://nakamura196.github.io/nuxt3-demo/annotorious ソースコード 以下を参考にしてください。 https://github.com/nakamura196/nuxt3-demo/blob/main/pages/annotorious/index.vue ポイント npm install –force ライブラリ@recogito/annotorious-openseadragonはopenseadragonのv5に非対応のようで、強制的にインストールする必要がありました。 n n n n p p p p m m m m e e e e r r r r r r r r o o o o r r r r C p n o e o u e d @ l r e r d _ e o m c n p o o o e d g t n u i s l t r e e o e a s s d a o r @ n l a r n v g e o e o c t n o o d @ g r e " i i p ^ t o e 3 o u n . / s d 0 a - e . n o n 0 n p c o e y t n : s r e ^ i a 4 o d . u r 0 s a . - g 0 o o " p n e @ f n " r s ^ o e 2 m a . d 7 @ r . r a 1 e g 8 c o " o n g f i r t o o m / a t n h n e o t r o o r o i t o u p s r - o o j p e e c n t s e a d r a g o n @ 2 . 7 . 1 8 plugins プラグインとして、Annotoriousを読み込みました。 ...