はじめに

本演習の目的は，すでに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を書く:会津日新館細江図を題材に」でも使用した題材
GLAMtech Vol.8の講演スライド（中村)　(短縮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¹ 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 Presentation API での方法のみを紹介する。ICP（IIIF Curation Platform）のCuration APIでの方法については，ICPチュートリアル（鈴木ICP）³の第二回を参照してほしい。

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

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

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

Omekaにログインする
左メニューのIIIF Toolkit をクリックする
Import items の画面で以下の入力をする
- 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となる）
右メニューのCollections をクリックする
先ほど登録した画像が一覧に表示されるので，その画像のAnnotateをクリックする
画像が表示されるので，上部のRectangleをクリックする
注釈をつけたい画像の範囲をドラッグして指定する
注釈を入力するウインドウがポップアップするので，以下を入力する
- 注釈を入力する（例：「請求記号を二-48）
- タグを入力する（例：請求記号ラベル）。複数入れる場合は，間に半角のスペースを入れる
- Public? にチェックを入れる
- Save をクリックする
注釈を入力したところは，水色の四角が表示される
注釈を入力したところにマウスカーソルを持っていくと，先ほど入力した注釈が表示される
これで注釈が入力できた！
検索してみるために，右メニューの Item をクリックする
上部のSearch Items をクリックする
Search for Keywordsに検索キーワード（例：を二-48）を入力し，Search By TypeメニューからAnnotationを選び，Search for itemsをクリックする
入力した注釈テキストで検索でき，ヒットしたことがわかる。詳細をみるために，Annotation:... をクリックする
注釈テキストの詳細な情報が閲覧できる
下部にある Manifest URL (例： https://diyhistory.org/omk/oa/items/50/manifest.json ²) を見てみると，もともとの題材のIIIF マニフェスト（会津日新館細江図 https://www.dl.ndl.go.jp/api/iiif/2542527/manifest.json ）とほぼ同じであることがわかる。特に，以下のmetadataのSource（もともとのIIIFマニフェストのURL）とotherContent（実際の注釈が書いてあるJSONのURL）がポイント。

          "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"
            }
          ]

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
)を入力して，送信ボタンをクリックする
上部の四角をクリックする
注釈をつけたい画像の範囲をドラッグして指定する，注釈を入力するウインドウがポップアップする
注釈テキストを入力し（例：請求記号：を二-48），Saveボタンをクリックする
すると，黒線の四角が書かれる。マウスカーソルを合わせると，先ほど書いたテキスト注釈が表示される
画像の直下にある Show WebAnnot ボタンをクリックする
注釈のjsonが表示されるので，これをメモ帳か何かにコピーしておく

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

myjsonを使って注釈のJSON（仮）をウェブにアップロードしURLを取得する

http://myjson.com/ にアクセスする
以下のテンプレートをコピー&ペーストする

{
    "@context": "http://iiif.io/api/presentation/2/context.json", 
    "@id": "http://example.org/annolist.json",
    "@type": "sc:AnnotationList",
    "resources": "これを消してこの下にコピペする"    
}

"これを消してこの下にコピペする" の部分を消して，先ほどImage anotator でコピーしておいた注釈のJSONデータをコピー＆ペーストして，saveボタンをクリックする
URLが表示される
これで，注釈情報を表す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¹ http://momiji.mimoza.jp/myjson_update/ にアクセスする。
jsonファイルのURL（例： https://api.myjson.com/bins/v1wx1）を入力し，[Load...]ボタンをクリックする
指定したURLのJSONの内容が入力ボックスに入力された状態になるので，仮の@idである， http://example.org/annolist.json を， jsonファイルのURL(例： https://api.myjson.com/bins/v1wx1 ）に書き換え，Updateボタンをクリックする
ポップアップが出てくるので「OK」をクリックする。
これで，注釈の内容を表すjsonが公開できた。

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

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

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

          "otherContent": [
            {
              "@id": "ここに先ほどmyjsonで作ったURLを入れる",
              "@type": "sc:AnnotationList"
            }
          ],

ここに先ほどmyjsonで作ったURLを入れる にURLを入れる。以下は例

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

JSONエディターにアクセスする　JSON Editor online https://jsoneditoronline.org/
上部のメニューの Open を辿り Open URL をクリックする

-題材のURL（例：https://www.dl.ndl.go.jp/api/iiif/2542527/manifest.json ）を入力してOpenをクリックする
"canvases"を検索して場所を確認する
"canvases"の中に，先ほどメモ帳などで作成したテキストを挿入する。ここでは，62行目に挿入する
挿入後：
左のテキストをコピーする
myjsonにアクセスして，ペーストし，saveしてウエブに公開する。注釈情報が入ったIIIF マニフェスト（仮）を作成し，ウェブに公開され，URL（例： https://api.myjson.com/bins/160pvp ）がわかった　
「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を書く:会津日新館細江図を題材にの方を参照してほしい。

Mirador では，左の吹き出しをクリックすると注釈が表示される。注釈がある部分は緑色の線で囲まれているように表示されているので，マウスカーソルを持っていくと注釈テキストが表示される。

成果物

Omekaで作成したJSONファイル（IIIF マニフェスト）

https://diyhistory.org/omk/oa/items/50/manifest.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 ²

{
  "@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>"
            }
          }
        }
      ]
    }
  ]
}

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