Image Annotator plus IIIF Viewer

Web Annotation JSON-LDで記述した画像アノテーション、もしくはIIIFプレゼンテーションAPIによるマニフェストJSON-LDを読み込んで画像と注釈を表示します。その画像の部分に対する注釈(Web Annotation)を追加することもできます。

Will display image(s) and annotations described with Web Annotation JSON-LD, or images listed in a IIIF presentation API manifest JSON-LD. You can add Web Annotations on those images.

このページの一部の例リンクは、外部JSONを取得する時に混合コンテンツ問題が生じないよう、意図的にhttpスキームを用いています。

画像URI(拡張子.jpgなどで判定、もしくはforce as imageをチェック)を与えると、注釈作成ツールとして機能します。追加・作成した注釈は「Show JSON-LD」ボタンで表示して、適宜保存してください。auパラメータ(additonal uri)で注釈JSON-LDを与えると、最初のURI(uパラメータ)で取得した画像に注釈を追加し多重化できます(dual panelなら左右表示)。注釈はフォームから与えることも可能です。なおこのツールは当サイト専用ではなく、スクリプトなどをコピーしてどのサイトでも利用できます。

Note some of example links in this page intentionally use http scheme so as not to cause Mixed Content problem to fetch external JSON.

If the URI is for an image (extension jpg, png, etc. or check 'force as image'), then this will be your annotation tool (New annotations can be displayed by "Show JSON-LD" button. Save them by yourself). With au (additonal uri) parameter, more annotations from different source can be added to the images obtained by the u parameter. Annotation form also available. Note this tool is not specific to this site, but can be used in any site.

Annotation Examples

presents multiple images with annotation layer tips with Web Annotations

IIIF Manifests with Annotations

IIIF Manifests with 3D

IIIF Manifest Collections (no annotation)

Other formats as Web Annotation

また、2004年頃に実験していたImage Regions語彙によるRDF/XMLも処理できるようにしています(当時の議論メモ)。

Also, RDF/XML of Image Description Experiment in 2004 can be processed, which uses Image Regions vocabulary. See also a discussion memo.

For example, two 'Sharaku' images from different institutes can be displayed side by side.

2つの画像(の注釈)を並べて比較できるようにしました。

Now you can compare 2 images (with annotations) side by side.

対応するApplicable Web Annotation

  • Web Annotationのコンテクストを@contextで示し、画像/注釈が複数ある時は@graphプロパティの配列としてください。
  • 対象(target)の値もしくはidに画像URLを用いた場合は、画像全体を注釈対象とみなして注釈本文(body)を下部に示します。画像を表示させるだけならtargetのみでも構いません。
  • 対象の値、あるいはtarget.idもしくはtarget.selector.valueがxywh型メディアフラグメント識別子を持つ場合は、注釈本文をその領域に対するアノテーションとして扱います。
  • 注釈本文はテキスト型のみサポートしています。bodyValueに記述する場合は、Markdown方式によるリンクも記述できます。body内にvalueを置くときは、フォーマットにかかわらずテキストをそのままアノテーションにセットします(※(注記)Web AnnotationのWDではbodyText、textだったプロパティは、CRでそれぞれbodyValue、valueに置き換えられました)。
  • 1つの注釈での複数本文/対象にも対応しました。
  • Set @context to Web Annotation context URI. If you have multiple images/annotations, put them as an array value of @graph.
  • When the value of target or id is an image URL (no fragment), then the annotation target is to be the entire image. In this case, annotation (body) will be displayed below the image. If you just want to display an image (to add annotation), you can omit body property.
  • When the value of target, target.id or target.selector.value has "xywh" media fragment id, the body will be regarded as the annotation to the region.
  • Only textual annotation (embedded textual body or string body) is supported. In case you use bodyValue, Markdown style link will work. If you use body.value structure, the text of value will be set to annotation regardless format.
  • This tool supports multiple bodies/targets in one annotation.

データの先頭が@prefixで始まる場合はTurtleとみなして処理します(内部的にいったんJSON-LDに変換してから処理するので、このツールにおいては効率は良くないです)。画像URIを改行区切りで列挙すると(IIIFマニフェストで読み込んだのと似た形で)注釈可能な画像として表示します。

If the text in the above form starts with @prefix, the tool will consider it as Turtle (not very efficient in this case, because the tool converts Turtle to JSON-LD internally). List of image URIs (CR separeted) will be displayed tiled images on which you can make annotations.

やっていることHow things work (technical)

  • OpenSeadragonを用いて画像を取得、(タイル)表示し、Annotoriousで注釈ツールを付与しています。
  • Web AnnotationのJSON-LDをAnnotoriousの内部注釈表現と相互に変換して、アノテーションを画像に重ねて表示したり、追加した注釈をWeb Annotation化したりしています。スクリプトが取得するリソースはCORSが有効になっていなければなりません。
  • IIIF Embedded Contentほかのフォーマットによる注釈も、いったん内部的にWeb Annotationに変換して扱っています。JSON-LDのデータはクライアント側のJavaScriptで処理しますが、RDFのものはサーバーでWeb Annotationに変換した上でscript要素に記述しています。
  • OpenSeadragon takes care of fetching and displaying images. Annotorious provides annotation tools.
  • This application converts Web Annotation JSON-LD to/from Annotorious's internal expression vice versa, so that loaded annotations will be displayed over the image, and user added notes will be merged to Web Annotation JSON-LD. Resources (except RDF data) need to be CORS enabled.
  • Annotations by other formats e.g. IIIF Embedded Content are converted to Web Annotation internally. JSON-LD is processed by local JavaScript, while RDF data is converted to Web Annotation serverside, and put in a script element.