ROIS-DS人文学オープンデータ共同利用センター(CODH)

IIIF Curation Viewerアノテーションビューモード

“IIIF Curation Viewer”は、IIIF (International Image Interoperability Framework)準拠の画像ビューワであり、ページ移動やズームといった一般的なビューワが持つ機能に加え、複数の資料から画像の一部を切り取り、収集し、任意の順序で閲覧できる独自の「キュレーション」機能を備えている。

IIIF Curation Viewer v1.7からは、キュレーションを閲覧する際、従来の表示方式（「キュレーションビューモード」という）に加え、資料画像上に文字やアイコン画像などのマーカーを表示可能な「アノテーションビューモード」が利用可能となっている。

この文書では、アノテーションビューモードで表示されるマーカーの指定方法について記述する。その他の情報については、以下の別資料を参照のこと。

目次

キュレーションの記述仕様

アノテーションとアノテーションビューモード

IIIF Presentation API v2.1では、アノテーション（oa:Annotation）を付与する場合、アノテーションのリストを外部ファイルに記述し、マニフェストファイルから当該外部ファイルを参照する形をとる。

これに対し、IIIF Curation Viewerでは、キュレーション内のキャンバスのメタデータに記述されたアノテーション情報（マーカー情報を含む）に基づいて、資料画像上にマーカーを表示することができる。この状態を「アノテーションビューモード」と呼んでいる。

メタデータによるアノテーション記述

アノテーション情報は、Curationに含まれるCanvasに付与されたmetadataプロパティの値（リスト）の一つとして、次に挙げるプロパティを持ったオブジェクトを記述することにより指定する。

項目名 値
label string
"Annotation"
value array
アノテーション（oa:Annotation）のリスト。
oa:Annotationのresourceに、markerオブジェクト（後述）を記載する。		 
{
  "@id": "http://example.org/iiif/book1/canvas/p1#xywh=100,150,500,25",
  "@type": "sc:Canvas",
  "label": "p. 1",
  "metadata": [
    {
      "label": "Annotation",
      "value": [
        {
          "@id": "http://example.org/iiif/book1/annotation/anno1",
          "@type": "oa:Annotation",
          "motivation": "sc:painting",
          "resource": {
            "@type": "cnt:ContentAsText",
            "chars": "Lorem ipsum",
            "format": "text/plain",
            "marker": {
              // ...
            }
          },
          "on": "http://example.org/iiif/book1/canvas/p1#xywh=100,150,500,25"
        }
      ]
    }
  ]
}

このオブジェクトの記載がないキュレーションにおいても、アノテーションビューモードでは、矩形枠線マーカー（後述）が設定されているものと見なして表示される。

マーカーの種類

markerオブジェクトに記載するプロパティにより、文字、画像、または矩形枠線のマーカーを指定できる。

文字マーカー

markerオブジェクトに次のプロパティを記載する。

項目名 値
text stringまたはarray
デフォルト値：なし
マーカーとして表示する文字を指定する。
言語ごとに異なる内容とする場合は、@languageと@valueを用いて記述する（詳細）。
color
（省略可）		 string
デフォルト値：#FF2800
マーカーとして表示する文字の色を指定する。

画像マーカー

markerオブジェクトに次のプロパティを記載する。

項目名 値
@id stringまたはarray
デフォルト値：なし
マーカーとして表示する画像ファイルのURLを指定する。
アノテーション対象領域の中央と、マーカー画像の左上が一致するように表示される。画像ファイルURLに#xyフラグメントを加えることで、合わせ位置をオフセットできる。
言語ごとに異なる内容とする場合は、@languageと@valueを用いて記述する（詳細）。
@type string
"dctypes:Image"

矩形枠線マーカー

markerオブジェクトに次のプロパティを記載する。

項目名 値
border-color
（省略可）		 string
デフォルト値：#00BFFF
マーカーとして表示する矩形枠線の色を指定する。
border-width
（省略可）		 number
デフォルト値：2
マーカーとして表示する矩形枠線の太さを指定する。

アノテーションメタデータの圧縮記法

以下に、これまで挙げた内容の記述例を示す。

{
  "@context": [
    "http://iiif.io/api/presentation/2/context.json",
    "http://codh.rois.ac.jp/iiif/curation/1/context.json"
  ],
  "@type": "cr:Curation",
  "@id": "http://example.org/iiif/book1/curation",
  "label": "Curating list",
  "selections": [
    {
      "@id": "http://example.org/iiif/book1/range1",
      "@type": "sc:Range",
      "label": "Manual curation by IIIF Curation Viewer",
      "members": [
        {
          "@id": "http://codh.rois.ac.jp/pmjt/iiif/200014778/canvas/00023#xywh=4366,1742,102,108",
          "@type": "sc:Canvas",
          "label": "page 24",
          "metadata": [
            {
              "label": "Annotation",
              "value": [
                {
                  "@id": "http://example.org/iiif/book1/annot1",
                  "@type": "oa:Annotation",
                  "motivation": "sc:painting",
                  "resource": {
                    "@type": "cnt:ContentAsText",
                    "chars": "蛙の文字",
                    "format": "text/plain",
                    "marker": {
                      "text": "蛙"
                    }
                  },
                  "on": "http://codh.rois.ac.jp/pmjt/iiif/200014778/canvas/00023#xywh=4366,1742,102,108"
                }
              ]
            }
          ]
        },
        {
          "@id": "http://codh.rois.ac.jp/pmjt/iiif/200014778/canvas/00023#xywh=3464,2498,806,728",
          "@type": "sc:Canvas",
          "label": "page 24",
          "metadata": [
            {
              "label": "Annotation",
              "value": [
                {
                  "@id": "http://example.org/iiif/book1/annot2",
                  "@type": "oa:Annotation",
                  "motivation": "sc:painting",
                  "resource": {
                    "@type": "cnt:ContentAsText",
                    "chars": "蛙の絵",
                    "format": "text/plain",
                    "marker": {
                      "border-color": "#00FF00"
                    }
                  },
                  "on": "http://codh.rois.ac.jp/pmjt/iiif/200014778/canvas/00023#xywh=3464,2498,806,728"
                }
              ]
            }
          ]
        }
      ],
      "within": {
        "@id": "http://codh.rois.ac.jp/pmjt/book/200014778/manifest.json",
        "@type": "sc:Manifest",
        "label": "画本虫撰"
      }
    }
  ]
}

この例では、一つのキャンバスに対し、二つの部分領域をキュレーションとして選択し、Canvasと一対一対応する形でアノテーション情報を付与している。

この記述方法は、IIIF Curation Viewerを用いて作成したキュレーションJSONにアノテーション情報を書き加えていくことで作成でき、キュレーションビューモードに切り替えて表示した際には、個々のアノテーション対象部分領域がそれぞれ1コマとして表示される形となるので、対応関係が理解しやすい。

その反面で、例えば、一冊の図書を翻刻し、全ての文字を一文字ずつ文字マーカーとして表示するようなケースでは、キュレーションの記述が肥大化してしまう。

この点に対処するため、次の記法も可能としている。

{
  "@context": [
    "http://iiif.io/api/presentation/2/context.json",
    "http://codh.rois.ac.jp/iiif/curation/1/context.json"
  ],
  "@type": "cr:Curation",
  "@id": "http://example.org/iiif/book1/curation",
  "label": "Curating list",
  "selections": [
    {
      "@id": "http://codh.rois.ac.jp/pmjt/book/200014778/range/r1",
      "@type": "sc:Range",
      "label": "Manual curation by IIIF Curation Viewer",
      "members": [
        {
          "@id": "http://codh.rois.ac.jp/pmjt/iiif/200014778/canvas/00023",
          "@type": "sc:Canvas",
          "label": "page 24",
          "metadata": [
            {
              "label": "Annotation",
              "value": [
                {
                  "@id": "http://example.org/iiif/book1/annot1",
                  "@type": "oa:Annotation",
                  "motivation": "sc:painting",
                  "resource": {
                    "@type": "cnt:ContentAsText",
                    "chars": "蛙の文字",
                    "format": "text/plain",
                    "marker": {
                      "text": "蛙"
                    }
                  },
                  "on": "http://codh.rois.ac.jp/pmjt/iiif/200014778/canvas/00023#xywh=4366,1742,102,108"
                },
                {
                  "@id": "http://example.org/iiif/book1/annot2",
                  "@type": "oa:Annotation",
                  "motivation": "sc:painting",
                  "resource": {
                    "@type": "cnt:ContentAsText",
                    "chars": "蛙の絵",
                    "format": "text/plain",
                    "marker": {
                      "border-color": "#00FF00"
                    }
                  },
                  "on": "http://codh.rois.ac.jp/pmjt/iiif/200014778/canvas/00023#xywh=3464,2498,806,728"
                }
              ]
            }
          ]
        }
      ],
      "within": {
        "@id": "http://codh.rois.ac.jp/pmjt/book/200014778/manifest.json",
        "@type": "sc:Manifest",
        "label": "画本虫撰"
      }
    }
  ]
}

この例では、一つのキャンバス全体をキュレーションとして選択し、Canvasと一対多対応する形でアノテーション情報を付与している。

この記述方法は、記述量を抑えられる反面、キュレーションビューモードに切り替えて表示した際には、個々のアノテーション対象部分領域が画面上で明示されることはなく、対応関係が理解しにくいものとなるので、キュレーションの作成プロセスや目的等に応じて、記法を使い分けられたい。

アノテーションビューモード専用キュレーション指定

CurationのviewingHintプロパティの設定値として、"annotation"を指定することにより、アノテーションビューモード専用のキュレーションとすることができる。このとき、キュレーションビューモードでの表示は行われず、常にアノテーションビューモードでの表示となる。

凡例リンク指定

Curationのrelatedプロパティの設定値として、次に挙げるプロパティを持ったオブジェクトを記述することにより、マーカ表示を調整する画面上にリンクを表示できる。このリンク表示は、マーカーの凡例を挙げたページへのリンクとして利用できる。

項目名 値
@id stringまたはarray
デフォルト値：なし
リンク先URLを指定する。
言語ごとに異なる内容とする場合は、@languageと@valueを用いて記述する（詳細）。
@type string
"cr:MarkerLegend"
label
（省略可）		 stringまたはarray
デフォルト値：'Legend'または'凡例'
リンク文字列を指定する。
言語ごとに異なる内容とする場合は、@languageと@valueを用いて記述する（詳細）。

記述例

{
  "@context": [
    "http://iiif.io/api/presentation/2/context.json",
    "http://codh.rois.ac.jp/iiif/curation/1/context.json"
  ],
  "@id": "http://codh.rois.ac.jp/edo-maps/owariya/02/1849/ndl",
  "@type": "cr:Curation",
  "label": "Marker List",
  "viewingHint": "annotation",
  "related": {
    "@id": "http://codh.rois.ac.jp/edo-maps/about/#legend",
    "@type": "cr:MarkerLegend"
  },
  "selections": [
    {
      "@id": "http://codh.rois.ac.jp/edo-maps/owariya/02/1849/ndl/all",
      "@type": "sc:Range",
      "label": "Markers",
      "members": [
        {
          "@id": "https://www.dl.ndl.go.jp/api/iiif/1286660/canvas/1#xywh=1674,484,212,76",
          "@type": "sc:Canvas",
          "label": "Marker 1",
          "metadata": [
            {
              "label": "Annotation",
              "value": [
                {
                  "@id": "http://codh.rois.ac.jp/edo-maps/owariya/02/1849/ndl/2-001",
                  "@type": "oa:Annotation",
                  "motivation": "sc:painting",
                  "resource": {
                    "@type": "cnt:ContentAsText",
                    "chars": "[2-001]<br/> 幸橋御門（幸橋御門）<br/>施設",
                    "format": "text/html",
                    "marker": {
                      "@id": "http://codh.rois.ac.jp/edo-maps/icons/tokiwa.png#xy=11,27",
                      "@type": "dctypes:Image"
                    }
                  },
                  "on": "https://www.dl.ndl.go.jp/api/iiif/1286660/canvas/1#xywh=1674,484,212,76"
                }
              ]
            }
          ]
        },
        {
          "@id": "https://www.dl.ndl.go.jp/api/iiif/1286660/canvas/1#xywh=1982,481,177,46",
          "@type": "sc:Canvas",
          "label": "Marker 2",
          "metadata": [
            {
              "label": "Annotation",
              "value": [
                {
                  "@id": "http://codh.rois.ac.jp/edo-maps/owariya/02/1849/ndl/2-002",
                  "@type": "oa:Annotation",
                  "motivation": "sc:painting",
                  "resource": {
                    "@type": "cnt:ContentAsText",
                    "chars": "[2-002]<br/> 山下御門（山下御門）<br/>施設",
                    "format": "text/html",
                    "marker": {
                      "@id": "http://codh.rois.ac.jp/edo-maps/icons/tokiwa.png#xy=11,27",
                      "@type": "dctypes:Image"
                    }
                  },
                  "on": "https://www.dl.ndl.go.jp/api/iiif/1286660/canvas/1#xywh=1982,481,177,46"
                }
              ]
            }
          ]
        },
        {
          "@id": "https://www.dl.ndl.go.jp/api/iiif/1286660/canvas/1#xywh=2469,504,88,211",
          "@type": "sc:Canvas",
          "label": "Marker 3",
          "metadata": [
            {
              "label": "Annotation",
              "value": [
                {
                  "@id": "http://codh.rois.ac.jp/edo-maps/owariya/02/1849/ndl/2-003",
                  "@type": "oa:Annotation",
                  "motivation": "sc:painting",
                  "resource": {
                    "@type": "cnt:ContentAsText",
                    "chars": "[2-003]<br/> 数寄屋橋御門（数寄屋橋御門）<br/>施設",
                    "format": "text/html",
                    "marker": {
                      "@id": "http://codh.rois.ac.jp/edo-maps/icons/tokiwa.png#xy=11,27",
                      "@type": "dctypes:Image"
                    }
                  },
                  "on": "https://www.dl.ndl.go.jp/api/iiif/1286660/canvas/1#xywh=2469,504,88,211"
                }
              ]
            }
          ]
        }
      ],
      "within": {
        "@id": "https://www.dl.ndl.go.jp/api/iiif/1286660/manifest.json",
        "@type": "sc:Manifest",
        "label": "〔江戸切絵図〕. 築地八町堀日本橋南絵図"
      }
    }
  ]
}

圧縮記法による表現

{
  "@context": [
    "http://iiif.io/api/presentation/2/context.json",
    "http://codh.rois.ac.jp/iiif/curation/1/context.json"
  ],
  "@id": "http://codh.rois.ac.jp/edo-maps/owariya/02/1849/ndl",
  "@type": "cr:Curation",
  "label": "Marker List",
  "viewingHint": "annotation",
  "related": {
    "@id": "http://codh.rois.ac.jp/edo-maps/about/#legend",
    "@type": "cr:MarkerLegend"
  },
  "selections": [
    {
      "@id": "http://codh.rois.ac.jp/edo-maps/owariya/02/1849/ndl/all",
      "@type": "sc:Range",
      "label": "Markers",
      "members": [
        {
          "@id": "https://www.dl.ndl.go.jp/api/iiif/1286660/canvas/1",
          "@type": "sc:Canvas",
          "label": "Markers",
          "metadata": [
            {
              "label": "Annotation",
              "value": [
                {
                  "@id": "http://codh.rois.ac.jp/edo-maps/owariya/02/1849/ndl/2-001",
                  "@type": "oa:Annotation",
                  "motivation": "sc:painting",
                  "resource": {
                    "@type": "cnt:ContentAsText",
                    "chars": "[2-001]<br/> 幸橋御門（幸橋御門）<br/>施設",
                    "format": "text/html",
                    "marker": {
                      "@id": "http://codh.rois.ac.jp/edo-maps/icons/tokiwa.png#xy=11,27",
                      "@type": "dctypes:Image"
                    }
                  },
                  "on": "https://www.dl.ndl.go.jp/api/iiif/1286660/canvas/1#xywh=1674,484,212,76"
                },
                {
                  "@id": "http://codh.rois.ac.jp/edo-maps/owariya/02/1849/ndl/2-002",
                  "@type": "oa:Annotation",
                  "motivation": "sc:painting",
                  "resource": {
                    "@type": "cnt:ContentAsText",
                    "chars": "[2-002]<br/> 山下御門（山下御門）<br/>施設",
                    "format": "text/html",
                    "marker": {
                      "@id": "http://codh.rois.ac.jp/edo-maps/icons/tokiwa.png#xy=11,27",
                      "@type": "dctypes:Image"
                    }
                  },
                  "on": "https://www.dl.ndl.go.jp/api/iiif/1286660/canvas/1#xywh=1982,481,177,46"
                },
                {
                  "@id": "http://codh.rois.ac.jp/edo-maps/owariya/02/1849/ndl/2-003",
                  "@type": "oa:Annotation",
                  "motivation": "sc:painting",
                  "resource": {
                    "@type": "cnt:ContentAsText",
                    "chars": "[2-003]<br/> 数寄屋橋御門（数寄屋橋御門）<br/>施設",
                    "format": "text/html",
                    "marker": {
                      "@id": "http://codh.rois.ac.jp/edo-maps/icons/tokiwa.png#xy=11,27",
                      "@type": "dctypes:Image"
                    }
                  },
                  "on": "https://www.dl.ndl.go.jp/api/iiif/1286660/canvas/1#xywh=2469,504,88,211"
                }
              ]
            }
          ]
        }
      ],
      "within": {
        "@id": "https://www.dl.ndl.go.jp/api/iiif/1286660/manifest.json",
        "@type": "sc:Manifest",
        "label": "〔江戸切絵図〕. 築地八町堀日本橋南絵図"
      }
    }
  ]
}