IIIF マニフェストのテキスト注釈を書いてみる

# はじめに

本演習の目的は，すでにIIIF Image APIで公開されている画像に対して，画像の一部部分へのテキスト注釈付与と公開をやってみることを通して，テキスト注釈のjsonがどのようになっているか，どのように公開されているかの概観をつかむことである。

この文書を使って，3時間ワークショップをする・自習しようと思えばできなくもないというイメージで執筆した。

これは，2019年6月15日に行われたGLAMtech Vol.8 https://glamtech008.peatix.com/ で体験した内容を元に筆者なりに復習も兼ねて整理したものである（とはいえ，かなり筆者のアレンジが入っている）。
私の理解した範囲で記述しているが，間違いがあるようなら知らせてもらえると幸いである。

# 関連リンク

演習で使う便利なツールや題材のリンクの備忘録として書いておく。

- 題材のIIIF マニフェスト 会津日新館細江図 https://www.dl.ndl.go.jp/api/iiif/2542527/manifest.json
  - 参考： [「IIIF Manifestを書く:会津日新館細江図を題材に」](https://qiita.com/yegusa/items/9ffbe130a475f1d1aec1#manifest-metadata-%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB%E3%81%AE%E7%99%BB%E9%8C%B2)でも使用した題材
- [GLAMtech Vol.8の講演スライド（中村)](https://docs.google.com/presentation/d/1Xv7gT3Y3rHyrsqkwkADu7JtVubvxZLcEDch9Byh8upk/edit#slide=id.p)　(短縮URL: http://bit.ly/31AoEMA)
- Image Annotator https://www.kanzaki.com/works/2016/pub/image-annotator
- Mirador https://projectmirador.org/demo/
- JSON 公開サービス: Myjson http://myjson.com/
    - JSONを簡単に公開できるサービス
    - Myjson update[^myjsonupdate] http://momiji.mimoza.jp/myjson_update/
        - Myjson に公開済みのjsonを更新できるサービス（筆者提供） 
- JSON エディター: JSON Editor online https://jsoneditoronline.org/
    - JSON をウェブブラウザ上で編集できるツール（折りたたみやGUIでの挿入が可能） 
- 例：注釈へのリンクがあるjson https://nakamura196.github.io/lire/annotation/2c1c1547580086f74d06457c7fd67447.json
- 例：実際のannotationlistのjson https://nakamura196.github.io/lire/annotation/anno_list/2c1c1547580086f74d06457c7fd67447_1.json
- 本演習の成果物
    - (IIIFマニフェスト) https://diyhistory.org/omk/oa/items/50/manifest.json [^omekademo]
    - https://diyhistory.org/omk/oa/items/50/annolist.json [^omekademo]
    - https://api.myjson.com/bins/v1wx1
    - (IIIFマニフェスト) https://api.myjson.com/bins/160pvp
    
# テキスト注釈をつけて公開する方法について

**画像の一部分に対する注釈をつけて公開する方法**として，大きく分けて二種類あるが，このドキュメントでは，**IIIF Presentation API での方法**のみを紹介する。**ICP（IIIF Curation Platform）のCuration APIでの方法**については，[ICPチュートリアル](http://www.ch-suzuki.com/icpt/)（鈴木ICP）[^suzuki]の第二回を参照してほしい。

- **IIIF Presentation API での方法**
  - **画像提供者**が作成，提供する方法
  - **IIIF マニフェストを修正するやり方**ともいえる。IIIFマニフェストは，画像提供者でなくても作成し提供しようと思えばできるが，普通は画像提供者がIIIFマニフェストを作成・提供する
  - 次の a), b) の演習を行う
  - a) Omeka IIIF toolkit を使って注釈をつける
  - b) Image Anotator やJSONエディターを使ってつける 
  - IIIFの注釈についての説明は文献（神崎2017）[^kanzaki]を参照のこと
- **ICP（IIIF Curation Platform）のCuration APIでの方法**
  - **利用者**が提供する作成，方法
  - Curation APIとは，「利用者がキュレーションを行い、新たに情報を付加するためにCODH[^codh]が提案」(鈴木ICP)[^suzuki]している
  - Curation APIは，IIIFの公式APIではなく，拡張されたものであることに注意すること
  - 大変便利なツール群があるため，**画像提供者**がCuration APIやサービスを利用して画像の注釈を提供している例はある。



# Omeka IIIF toolkit を使って注釈をつける

講師の中村氏が用意してくれたIIIF Toolkitがインストール済みのOmeka[^omeka]を使って演習する。

- Omekaにログインする
- 左メニューのIIIF Toolkit をクリックする ![01-Dashboard · Omeka Demo · Omeka Admin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/dea36406-6d66-072e-f7cc-9f7dc2ae10eb.png)
- Import items の画面で以下の入力をする ![02-IIIF Toolkit · Omeka Demo · Omeka Admin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/67c883bd-9296-d89d-2674-bfcaed87cba6.png)
  - Type は Manifest を選ぶ
  - Source は From URL を選ぶ
  - URLが出現するので，IIIFマニフェストのURLを入力する　例： 会津日新館細江図https://www.dl.ndl.go.jp/api/iiif/2542527/manifest.json
  - Set as Public? にチェックを入れる
  - Import をクリックする 
- IIIF Toolkit の画面に繊維するので，インポートされたことがわかる（completedとなる） ![03-IIIF Toolkit · Omeka Demo · Omeka Admin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/a6e30fe6-d93e-1f50-95b7-c39b243fb92c.png)
- 右メニューのCollections をクリックする ![04-IIIF Toolkit · Omeka Demo · Omeka Admin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/7df2a949-5293-550b-27e8-66842fd962a1.png)
- 先ほど登録した画像が一覧に表示されるので，その画像のAnnotateをクリックする ![05-Browse Collections  8 total  · Omeka Demo · Omeka Admin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/b146ca26-dd81-8310-c780-50cc4e90f8e9.png)
- 画像が表示されるので，上部のRectangleをクリックする![06-Annotating   会津日新館細江図  · Omeka Demo · Omeka Admin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/4c26e837-5fac-a003-e9eb-be949d1ebeef.png)
- 注釈をつけたい画像の範囲をドラッグして指定する ![07-Annotating   会津日新館細江図  · Omeka Demo · Omeka Admin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/9bcc57b6-3580-fe76-d8fb-a85010297799.png)
- 注釈を入力するウインドウがポップアップするので，以下を入力する ![08-Annotating   会津日新館細江図  · Omeka Demo · Omeka Admin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/bded9c11-4b9c-de57-0675-eb9276fe2802.png)
  - 注釈を入力する（例：「請求記号 を二-48）
  - タグを入力する（例：請求記号 ラベル）。複数入れる場合は，間に半角のスペースを入れる
  - Public? にチェックを入れる
  - Save をクリックする
- 注釈を入力したところは，水色の四角が表示される ![09-Annotating   会津日新館細江図  · Omeka Demo · Omeka Admin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/f807341b-54da-611d-4da5-2b4f821d29b3.png)
- 注釈を入力したところにマウスカーソルを持っていくと，先ほど入力した注釈が表示される ![10-Annotating   会津日新館細江図  · Omeka Demo · Omeka Admin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/0737da6a-a13b-e093-9930-86fd2fe8017c.png)
- これで注釈が入力できた！
- 検索してみるために，右メニューの Item をクリックする![11-Annotating   会津日新館細江図  · Omeka Demo · Omeka Admin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/74a424ca-75ac-7dac-e98a-1021bd4ee133.png)
- 上部のSearch Items をクリックする![12-Browse Items  40 total  · Omeka Demo · Omeka Admin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/0305e04c-10cf-c51c-c230-a9d60c0dda27.png)
- Search for Keywordsに検索キーワード（例：を二-48）を入力し，Search By TypeメニューからAnnotationを選び，Search for itemsをクリックする ![13-Search Items · Omeka Demo · Omeka Admin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/5922fcdc-6af7-ddea-bff6-4cdf7f042cc3.png)
- 入力した注釈テキストで検索でき，ヒットしたことがわかる。詳細をみるために，Annotation:... をクリックする ![14-Browse Items  1 total  · Omeka Demo · Omeka Admin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/f8416f04-1dc9-8b60-ec6a-5fd00661d6d2.png)
- 注釈テキストの詳細な情報が閲覧できる ![15-1-Item  50   Annotation   請求記号 を二 48   · Omeka Demo · Omeka Admin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/55c1ca5b-13b8-3e42-3389-cb261fe2b213.png)
![15-2-Item  50   Annotation   請求記号 を二 48   · Omeka Demo · Omeka Admin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/ebccbdf5-8e3b-5a89-5e65-3e791f971504.png)
- 下部にある Manifest URL (例： https://diyhistory.org/omk/oa/items/50/manifest.json [^omekademo]) を見てみると，もともとの題材のIIIF マニフェスト（会津日新館細江図 https://www.dl.ndl.go.jp/api/iiif/2542527/manifest.json ）とほぼ同じであることがわかる。特に，以下のmetadataのSource（もともとのIIIFマニフェストのURL）とotherContent（実際の注釈が書いてあるJSONのURL）がポイント。

```json
          "metadata": [
            {
              "label": "Source",
              "value": "https://www.dl.ndl.go.jp/api/iiif/2542527/manifest.json"
            }
          ],
```

```json
          "otherContent": [
            {
              "@id": "https://diyhistory.org/omk/oa/items/50/annolist.json",
              "@type": "sc:AnnotationList"
            }
          ]
```
- otherContent にある @id の値で示すURL（例： https://diyhistory.org/omk/oa/items/50/annolist.json ） に実際に注釈の情報がある。IIIF マニフェストには，注釈の情報を直接書かず，別のファイルに書くようになっているのでこのようになっている。このページの最後に，作成されたjsonファイルを添付しておくので参照してほしい。

# Image Anotator やJSONエディターを使ってつける

- まず最初に，Image Annotatorで注釈情報を追加する
- その情報をウェブに公開する(myjsonサービスを利用する)
- JSONエディターを使って注釈JSONを参照するIIIFマニフェストを作成する

という3つの手順を踏みます。

## Image Annotatorで注釈情報を追加する

- Image Annotator https://www.kanzaki.com/works/2016/pub/image-annotator にアクセスする
- JSON-LD/Image URIに題材のIIIFマニフェストのURL(例： https://www.dl.ndl.go.jp/api/iiif/2542527/manifest.json
 )を入力して，送信ボタンをクリックする 
![b-01-Web AnnotationとIIIFマニフェストによる画像注釈   Image Annotator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/e35ac1b8-dc2c-7fb3-fab5-7be360131a65.png)
- 上部の四角をクリックする
![b-02-会津日新館細江図   Image Annotator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/12850fdf-0017-ecec-2b5e-80d435973aff.png)
- 注釈をつけたい画像の範囲をドラッグして指定する，注釈を入力するウインドウがポップアップする![b-03-会津日新館細江図   Image Annotator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/e2e6db6a-3ffd-9d74-dc18-a190ac39fdc4.png)
- 注釈テキストを入力し（例：請求記号：を二-48），Saveボタンをクリックする![b-04-会津日新館細江図   Image Annotator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/6f7a1064-a681-3434-6eba-307668bbd35d.png)
- すると，黒線の四角が書かれる。マウスカーソルを合わせると，先ほど書いたテキスト注釈が表示される ![b-05-会津日新館細江図   Image Annotator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/64430e90-1d68-1f1b-306c-0e46acbe452e.png)
- 画像の直下にある Show WebAnnot ボタンをクリックする![b-06-会津日新館細江図   Image Annotator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/4da8d49a-4de2-3997-d598-7341078d6f5f.png)
- 注釈のjsonが表示されるので，これをメモ帳か何かにコピーしておく ![b-07-会津日新館細江図   Image Annotator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/0f40bf9d-1ab9-33ca-94b1-285e9a6cde74.png)

## myjsonを使って注釈のJSONをウェブにアップロードする

### myjsonを使って注釈のJSON（仮）をウェブにアップロードしURLを取得する
 
- http://myjson.com/ にアクセスする
- 以下のテンプレートをコピー&ペーストする
 
```json
{
    "@context": "http://iiif.io/api/presentation/2/context.json", 
    "@id": "http://example.org/annolist.json",
    "@type": "sc:AnnotationList",
    "resources": "これを消してこの下にコピペする"    
}
```
![b-08-Myjson   A simple json storage and hosting service.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/9224e70d-b79d-9249-387d-e2086df08f47.png)

-  "これを消してこの下にコピペする" の部分を消して，先ほどImage anotator でコピーしておいた注釈のJSONデータをコピー＆ペーストして，saveボタンをクリックする![b-09-Myjson   A simple json storage and hosting service.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/346127e4-8619-3d2a-288a-494c82b4f310.png)
- URLが表示される ![b-10-Myjson      context    http   iiif io api presentation 2 con   .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/a0f59359-37dd-8f46-02c8-825d25e0d3fd.png)
- これで，注釈情報を表すjsonファイル（仮）ができた。ウェブにも公開でき，URLもできた（例：　https://api.myjson.com/bins/v1wx1 )

### Myjson update を使って仮のidを実際のものに修正する。

- 現在は，仮の@id http://example.org/annolist.json が入っているので，実際のURL（例： https://api.myjson.com/bins/v1wx1 ） に修正する
- Myjson update[^myjsonupdate] http://momiji.mimoza.jp/myjson_update/ にアクセスする。
- jsonファイルのURL（例： https://api.myjson.com/bins/v1wx1） を入力し，[Load...]ボタンをクリックする ![Myjson-update.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/a307b480-1661-8538-a70b-89ecb5f3ce17.png)
- 指定したURLのJSONの内容が入力ボックスに入力された状態になるので， 仮の@idである， http://example.org/annolist.json を， jsonファイルのURL(例： https://api.myjson.com/bins/v1wx1 ）に書き換え，Updateボタンをクリックする ![Myjson-update (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/96dbfc90-fd41-f7bf-4eda-7ce1eed2fb58.png)
- ポップアップが出てくるので「OK」をクリックする。![Myjson-update(2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/dde16837-57a9-067b-55c9-56b6b05874d6.png)
- これで，注釈の内容を表すjsonが公開できた。

## JSONエディターを使って注釈JSONを参照するIIIFマニフェストを作成する

題材のIIIFマニフェストをコピーして，注釈を入れたIIIFマニフェストとして再作成する。

- 準備として，以下の値をメモ帳などのテキストエディタにコピーする

```json
          "otherContent": [
            {
              "@id": "ここに先ほどmyjsonで作ったURLを入れる",
              "@type": "sc:AnnotationList"
            }
          ],
```
- **ここに先ほどmyjsonで作ったURLを入れる** にURLを入れる。以下は例

```json
          "otherContent": [
            {
              "@id": "https://api.myjson.com/bins/v1wx1",
              "@type": "sc:AnnotationList"
            }
          ],
```

- JSONエディターにアクセスする　JSON Editor online https://jsoneditoronline.org/
- 上部のメニューの Open を辿り Open URL をクリックする
![b-11-JSON Editor Online   view  edit and format JSON online.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/6d16ea58-0373-dc56-6138-3028db96ce7a.png)
-題材のURL（例：https://www.dl.ndl.go.jp/api/iiif/2542527/manifest.json ）を入力してOpenをクリックする ![b-12-JSON Editor Online   view  edit and format JSON online.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/a8315ac6-2e8d-f5e9-c1c7-4b9587eeca4a.png)
- "canvases"を検索して場所を確認する
- "canvases"の中に，先ほどメモ帳などで作成したテキストを挿入する。ここでは，62行目に挿入する ![b-13-JSON Editor Online   view  edit and format JSON online.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/646eb0b0-d0a6-03e4-b5f4-8fd69a461710.png)
- 挿入後： ![b-14-JSON Editor Online   view  edit and format JSON online.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/3e9392d8-e956-6b3f-8737-2fc16246563e.png)
- 左のテキストをコピーする
- myjsonにアクセスして，ペーストし，saveしてウエブに公開する。注釈情報が入ったIIIF マニフェスト（仮）を作成し，ウェブに公開され，URL（例： https://api.myjson.com/bins/160pvp ）がわかった　![b-15-Myjson      context    http   iiif io api presentation 2 con   .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/7aeded64-a281-de74-108c-5500a435fb25.png)
- 「Myjson update を使って仮のidを実際のものに修正する」節と同様にして， Myjson Updateにアクセスし， IIIF マニフェスト（仮）のURL(例： https://api.myjson.com/bins/160pvp )を入力し，「Load」ボタンをクリックして，IIIF マニフェスト中冒頭の @id (例： https://www.dl.ndl.go.jp/api/iiif/2542527/manifest.json) を https://api.myjson.com/bins/160pvp に書き換え，「Update」ボタンをクリックし，「OK」をクリックする
- これで，注釈情報が入ったIIIF マニフェストを作成し，Webに公開できた。

## 注釈の入ったIIIFマニフェストをビューアで確認してみよう

作成したJSON（例： https://api.myjson.com/bins/160pvp )をビューアでアクセスしてみよう。

- Image Annotator は省略
- Mirador https://projectmirador.org/demo/

でアクセスしてみよう。

Miradorの初歩的な使い方は，[IIIF Manifestを書く:会津日新館細江図を題材に](https://qiita.com/yegusa/items/9ffbe130a475f1d1aec1#manifest-metadata-%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB%E3%81%AE%E7%99%BB%E9%8C%B2)の方を参照してほしい。

- Mirador では，左の吹き出しをクリックすると注釈が表示される。注釈がある部分は緑色の線で囲まれているように表示されているので，マウスカーソルを持っていくと注釈テキストが表示される。![b-17-Mirador Viewer (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333119/a0eb06f7-bcea-959a-38d0-cfa4acec9911.png)

# 成果物

## Omekaで作成したJSONファイル（IIIF マニフェスト）
https://diyhistory.org/omk/oa/items/50/manifest.json [^omekademo]

```json

{
  "@context": "http://www.shared-canvas.org/ns/context.json",
  "@id": "https://diyhistory.org/omk/oa/items/50/manifest.json",
  "@type": "sc:Manifest",
  "label": "Annotation: \"請求記号:を二-48\"",
  "sequences": [
    {
      "@id": "https://diyhistory.org/omk/oa/items/50/sequence.json",
      "@type": "sc:Sequence",
      "label": "",
      "canvases": [
        {
          "@id": "https://www.dl.ndl.go.jp/api/iiif/2542527/canvas/1",
          "@type": "sc:Canvas",
          "label": "1",
          "width": 7051,
          "height": 6168,
          "thumbnail": {
            "@id": "https://www.dl.ndl.go.jp/api/iiif/2542527/F0000001/full/full/0/default.jpg",
            "@type": "dctypes:Image",
            "format": "image/jpeg"
          },
          "images": [
            {
              "@type": "oa:Annotation",
              "motivation": "sc:painting",
              "on": "https://www.dl.ndl.go.jp/api/iiif/2542527/canvas/1",
              "resource": {
                "@id": "https://www.dl.ndl.go.jp/api/iiif/2542527/R0000001/full/full/0/default.jpg",
                "@type": "dctypes:Image",
                "format": "image/jpeg",
                "width": 7051,
                "height": 6168,
                "service": {
                  "@context": "http://iiif.io/api/image/2/context.json",
                  "@id": "https://www.dl.ndl.go.jp/api/iiif/2542527/R0000001",
                  "profile": "http://iiif.io/api/image/2/level1.json"
                }
              }
            }
          ],
          "metadata": [
            {
              "label": "Source",
              "value": "https://www.dl.ndl.go.jp/api/iiif/2542527/manifest.json"
            }
          ],
          "otherContent": [
            {
              "@id": "https://diyhistory.org/omk/oa/items/50/annolist.json",
              "@type": "sc:AnnotationList"
            }
          ]
        }
      ]
    }
  ]
}
```

## Omekaで作成した注釈のJSON（AnnotationList）

https://diyhistory.org/omk/oa/items/50/annolist.json [^omekademo]

```json
{
  "@id": "https://diyhistory.org/omk/oa/items/50/annolist.json",
  "@context": "http://www.shared-canvas.org/ns/context.json",
  "@type": "sc:AnnotationList",
  "resources": [
    {
      "@context": "http://iiif.io/api/presentation/2/context.json",
      "@type": "oa:Annotation",
      "motivation": [
        "oa:tagging",
        "oa:commenting"
      ],
      "resource": [
        {
          "@type": "dctypes:Text",
          "format": "text/html",
          "chars": "<p>請求記号:を二-48</p>"
        },
        {
          "@type": "oa:Tag",
          "chars": "ラベル"
        },
        {
          "@type": "oa:Tag",
          "chars": "請求記号"
        }
      ],
      "@id": "https://diyhistory.org/omk/oa/items/50/anno.json",
      "on": [
        {
          "@type": "oa:SpecificResource",
          "full": "https://www.dl.ndl.go.jp/api/iiif/2542527/canvas/1",
          "selector": {
            "@type": "oa:Choice",
            "default": {
              "@type": "oa:FragmentSelector",
              "value": "xywh=4105,4381,484,583"
            },
            "item": {
              "@type": "oa:SvgSelector",
              "value": "<svg xmlns='http://www.w3.org/2000/svg'><path xmlns=\"http://www.w3.org/2000/svg\" d=\"M4104.91998,4380.91697h242.22744v0h242.22744v291.70999v291.70999h-242.22744h-242.22744v-291.70999z\" data-paper-data=\"{&quot;strokeWidth&quot;:1,&quot;rotation&quot;:0,&quot;deleteIcon&quot;:null,&quot;rotationIcon&quot;:null,&quot;group&quot;:null,&quot;editable&quot;:true,&quot;annotation&quot;:null}\" id=\"rectangle_240ac18e-6aa2-446a-b1d2-a82c589d4d19\" fill-opacity=\"0\" fill=\"#00bfff\" fill-rule=\"nonzero\" stroke=\"#00bfff\" stroke-width=\"1\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" stroke-miterlimit=\"10\" stroke-dasharray=\"\" stroke-dashoffset=\"0\" font-family=\"none\" font-weight=\"none\" font-size=\"none\" text-anchor=\"none\" style=\"mix-blend-mode: normal\"/></svg>"
            }
          }
        }
      ]
    }
  ]
}
```

[^codh]: CODH: ROIS-DS人文学オープンデータ共同利用センター（Center for Open Data in the Humanities / CODH）
[^omeka]: IIIF Tooklkit 対応のOmekaをインストールする方法は，[「Omeka 2.5.1、Neatline、IIIF Toolkit のインストール」（永崎研宣）](http://digital.culturalresources.jp/dp/omeka_install)を参照のこと。
[^omekademo]: GLAMtech Vol.8イベントのために講師の中村氏が用意してくれたOmekaを使っているので，いつかこのURLでは見えなくなることに注意が必要
[^kanzaki]: (神崎2017) 神崎　正英. IIIFマニフェストと注釈，LOD Library, 2017/4/10　https://service.infocom.co.jp/das/loddiary/2017/04/20170410001609.html 特に「カンバスから外部注釈へのリンク」節，「注釈リストの記述」節，「カンバスの部分への注釈」節を参照のこと
[^suzuki]: (鈴木ICP)ICPチュートリアル http://www.ch-suzuki.com/icpt/ GLAMtech Vol8では，IIIFのCuration API　の演習では，この文書の**第2回**を実際にやった
[^myjsonupdate]: 今回の演習のために筆者が用意（Javascript作成協力：高久雅生）