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
Web Annotations
- Image Annotation Gallery 2004 （古い画像注釈を変換converted from old experiments of image descriptions）
- Codex Buranus - オルフが用いたカルミナ・ブラーナのテキスト（写本）texts that Carl Orff used for his Carmina Burana （Bayerische Staatsbibliothek München）
- ブラームス交響曲第1番第4楽章自筆譜Brahms's Symphony No1, 4th movement autograph （The Morgan Library & Museum）
- モーツァルト交響曲第35番第1楽章自筆譜Mozart's Symphony No.35, 1st movement autograph （The Morgan Library & Museum）
- Artaria 204 Part 1 - ベートーベン第九交響曲第4楽章自筆譜Beethoven's Symphony No.9, 4thmovement autograph （冒頭240小節, Staatsbibliothek zu Berlin）
- ノリントンのエロイカ第2楽章 Beethoven's Eroica, 2nd Movement, by Norrington （Youtube動画への注釈 video annotation）
IIIF Manifests with Annotations
- 国文研データセットNational Institute of Japanese Literature dataset：画本虫撰 Picture book - Mushierami （IIIF manifest + Web Annotation）
- 日本古典籍データセットCenter for Open Data in the Humanities：江戸料理レシピ『万宝料理秘密箱』 Recipe book from Edo era （
IIIF manifest + Web Annotation）レシピ概要、クックパッド江戸ご飯リンク付き - 校異源氏物語 卷一：NDL次世代デジタルライブラリーTale of Genji proofreading and annotation Vol.1: NDL Next Digital Lib. （OCR results as IIIF v3)
- SAT大正蔵画像DB Taishōzō Image Database：大正新脩大藏經図像部第1巻 （IIIF manifest with its "otherContent" links）
- Sleep Stories quilt 注釈を順にズームと回転を用いて表示し、物語をannotations make a story with zoom and rotation
- お茶、新芽の成長 Growing tea sprout （動画への注釈 video annotation w/ IIIF v3）
- 百人一首：ひさかたの Reading from Japanese 100 poems （音声への注釈 audio annotation w/ IIIF v3）
- ゴルトベルク変奏曲 Goldberg Variations （演奏動画と楽譜を同期 sync performing video and musical score w/ IIIF v3）
IIIF Manifests with 3D
- Bust of Queen Nefertiti 3Dオブジェクトにテキスト注釈 3D object rendering with text annotations
- 3Ds on a map of lower Egypt 地図画像に3Dオブジェクトを注釈として A single canvas contains one image (map) and two media objects (3D models).
- 3Ds on a map of lower Egypt (sub-canvas) 3Dオブジェクトをサブカンバスとして。移動可能 3D objects are treated as sub-canvases. Can be moved or resized.
IIIF Manifest Collections (no annotation)
- 日本古典籍データセットリストJapanese Classical Literature dataset （国文学研究資料館蔵）
- 日本語史研究資料Research Sources for History of Japanese Language (国立国語研究所蔵)
- 国立国会図書館デジタルコレクションから (National Diet Library Digital Collection)
- 慶應義塾大学メディアセンター デジタルコレクションDigital Collections of Keio University Libraries
- 京都大学貴重資料デジタルアーカイブKyoto University Rare Materials Digital Archive
- 田中芳男・博物学コレクションTanaka Yoshio Collection - Natural History Notebook (東京大学図書館General Library in the University of Tokyo)
- 味の素食の文化センター 江戸の図書（料理）Ajinomoto Collection of Edo recipe books (新日本古典籍総合データベース)
- Twitterミュージアム Museum 2020年COVID-19で休館した美術館からのハッシュタグ付ツイート集Hashtag tweets from Museums closed in 2020 due to COVID-19
- Bodleian's Polonsky Collection Favorites
- Boston College Japanese prints collection
- Collection of Test Cases 各種テスト集の説明付きコレクション
Other formats as Web Annotation
- View of the Salon Carré at the Louvre from Wikidata P2677 (relative position within image)
- It's year of the Cock from Flickr notes
- Rembrandt's Night Watch at Rijksmuseum in DZI format (no 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.
- Stage rehearsal at Sumida-triphony (2003年の実験注釈RDF)
- Video Snapshot of max, dave, tim (2004, via Flickr2RDF)
2つの画像（の注釈）を並べて比較できるようにしました。
Now you can compare 2 images (with annotations) side by side.
- 2つの写楽 Two Sharaku Ukiyoes - メトロポリタン美術館と東京国立博物館Metropolitan Museum of Art and Tokyo National Museum
- Vor Gott - ベートーベン第九交響曲第4楽章のフェルマータFermata, in Beethoven's Symphony No.9, 4thmovement （印刷譜と自筆譜の比較）
- 2つの錬金術手稿から Two manifests on Alchemy （エリクシルの黒→白→赤を選択比較。Curation API利用）
対応する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
@contextto Web Annotation context URI. If you have multiple images/annotations, put them as an array value of@graph. - When the value of
targetoridis 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 omitbodyproperty. - When the value of
target,target.idortarget.selector.valuehas"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 usebody.valuestructure, the text ofvaluewill be set to annotation regardlessformat. - 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.