LoginSignup
5
4

More than 3 years have passed since last update.

@yegusa(Egusa Yuka)

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

Last updated at Posted at 2019-06-18

はじめに

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

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

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

関連リンク

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

テキスト注釈をつけて公開する方法について

画像の一部分に対する注釈をつけて公開する方法として，大きく分けて二種類あるが，このドキュメントでは，IIIF Presentation API での方法のみを紹介する。ICP（IIIF Curation Platform）のCuration APIでの方法については，ICPチュートリアル（鈴木ICP）3の第二回を参照してほしい。

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

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

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

  • Omekaにログインする
  • 左メニューのIIIF Toolkit をクリックする 01-Dashboard · Omeka Demo · Omeka Admin.png
  • Import items の画面で以下の入力をする 02-IIIF Toolkit · Omeka Demo · Omeka Admin.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
  • 右メニューのCollections をクリックする 04-IIIF Toolkit · Omeka Demo · Omeka Admin.png
  • 先ほど登録した画像が一覧に表示されるので，その画像のAnnotateをクリックする 05-Browse Collections 8 total · Omeka Demo · Omeka Admin.png
  • 画像が表示されるので，上部のRectangleをクリックする06-Annotating 会津日新館細江図 · Omeka Demo · Omeka Admin.png
  • 注釈をつけたい画像の範囲をドラッグして指定する 07-Annotating 会津日新館細江図 · Omeka Demo · Omeka Admin.png
  • 注釈を入力するウインドウがポップアップするので，以下を入力する 08-Annotating 会津日新館細江図 · Omeka Demo · Omeka Admin.png
    • 注釈を入力する（例：「請求記号 を二-48）
    • タグを入力する（例：請求記号 ラベル）。複数入れる場合は，間に半角のスペースを入れる
    • Public? にチェックを入れる
    • Save をクリックする
  • 注釈を入力したところは，水色の四角が表示される 09-Annotating 会津日新館細江図 · Omeka Demo · Omeka Admin.png
  • 注釈を入力したところにマウスカーソルを持っていくと，先ほど入力した注釈が表示される 10-Annotating 会津日新館細江図 · Omeka Demo · Omeka Admin.png
  • これで注釈が入力できた！
  • 検索してみるために，右メニューの Item をクリックする11-Annotating 会津日新館細江図 · Omeka Demo · Omeka Admin.png
  • 上部のSearch Items をクリックする12-Browse Items 40 total · Omeka Demo · Omeka Admin.png
  • Search for Keywordsに検索キーワード（例：を二-48）を入力し，Search By TypeメニューからAnnotationを選び，Search for itemsをクリックする 13-Search Items · Omeka Demo · Omeka Admin.png
  • 入力した注釈テキストで検索でき，ヒットしたことがわかる。詳細をみるために，Annotation:... をクリックする 14-Browse Items 1 total · Omeka Demo · Omeka Admin.png
  • 注釈テキストの詳細な情報が閲覧できる 15-1-Item 50 Annotation 請求記号 を二 48 · Omeka Demo · Omeka Admin.png 15-2-Item 50 Annotation 請求記号 を二 48 · Omeka Demo · Omeka Admin.png
  • 下部にある Manifest URL (例： https://diyhistory.org/omk/oa/items/50/manifest.json 2) を見てみると，もともとの題材の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 )を入力して，送信ボタンをクリックする b-01-Web AnnotationとIIIFマニフェストによる画像注釈 Image Annotator.png
  • 上部の四角をクリックする b-02-会津日新館細江図 Image Annotator.png
  • 注釈をつけたい画像の範囲をドラッグして指定する，注釈を入力するウインドウがポップアップするb-03-会津日新館細江図 Image Annotator.png
  • 注釈テキストを入力し（例：請求記号：を二-48），Saveボタンをクリックするb-04-会津日新館細江図 Image Annotator.png
  • すると，黒線の四角が書かれる。マウスカーソルを合わせると，先ほど書いたテキスト注釈が表示される b-05-会津日新館細江図 Image Annotator.png
  • 画像の直下にある Show WebAnnot ボタンをクリックするb-06-会津日新館細江図 Image Annotator.png
  • 注釈のjsonが表示されるので，これをメモ帳か何かにコピーしておく b-07-会津日新館細江図 Image Annotator.png

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": "これを消してこの下にコピペする"    
}

b-08-Myjson A simple json storage and hosting service.png

  • "これを消してこの下にコピペする" の部分を消して，先ほどImage anotator でコピーしておいた注釈のJSONデータをコピー＆ペーストして，saveボタンをクリックするb-09-Myjson A simple json storage and hosting service.png
  • URLが表示される b-10-Myjson context http iiif io api presentation 2 con .png
  • これで，注釈情報を表すjsonファイル（仮）ができた。ウェブにも公開でき，URLもできた（例：　https://api.myjson.com/bins/v1wx1 )

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

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 をクリックする b-11-JSON Editor Online view edit and format JSON online.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
  • "canvases"を検索して場所を確認する
  • "canvases"の中に，先ほどメモ帳などで作成したテキストを挿入する。ここでは，62行目に挿入する b-13-JSON Editor Online view edit and format JSON online.png
  • 挿入後： b-14-JSON Editor Online view edit and format JSON online.png
  • 左のテキストをコピーする
  • myjsonにアクセスして，ペーストし，saveしてウエブに公開する。注釈情報が入ったIIIF マニフェスト（仮）を作成し，ウェブに公開され，URL（例： https://api.myjson.com/bins/160pvp ）がわかった　b-15-Myjson context http iiif io api presentation 2 con .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 )をビューアでアクセスしてみよう。

でアクセスしてみよう。

Miradorの初歩的な使い方は，IIIF Manifestを書く:会津日新館細江図を題材にの方を参照してほしい。

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

成果物

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

https://diyhistory.org/omk/oa/items/50/manifest.json 2


{
  "@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 2

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

  1. 今回の演習のために筆者が用意（Javascript作成協力：高久雅生） ↩

  2. GLAMtech Vol.8イベントのために講師の中村氏が用意してくれたOmekaを使っているので，いつかこのURLでは見えなくなることに注意が必要 ↩

  3. (鈴木ICP)ICPチュートリアル http://www.ch-suzuki.com/icpt/ GLAMtech Vol8では，IIIFのCuration API　の演習では，この文書の第2回を実際にやった ↩

  4. (神崎2017) 神崎　正英. IIIFマニフェストと注釈，LOD Library, 2017/4/10　https://service.infocom.co.jp/das/loddiary/2017/04/20170410001609.html 特に「カンバスから外部注釈へのリンク」節，「注釈リストの記述」節，「カンバスの部分への注釈」節を参照のこと ↩

  5. CODH: ROIS-DS人文学オープンデータ共同利用センター（Center for Open Data in the Humanities / CODH） ↩

  6. IIIF Tooklkit 対応のOmekaをインストールする方法は，「Omeka 2.5.1、Neatline、IIIF Toolkit のインストール」（永崎研宣）を参照のこと。 ↩

5
4
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
4