🐙

Mirador 3のmirador-annotationsプラグインとSimpleAnnotationServerを試す

2023/08/18に公開

annotation

iiif

Mirador

tech

概要

mirador-annotationsはアノテーションの作成ツールを追加するMirador 3のプラグインです。

今回、以下のSimpleAnnotationServerとの組み合わせを試してみましたので、その備忘録です。

SimpleAnnotationServerの準備

以下のGetting Startedの通りに進めます。

https://github.com/glenrobson/SimpleAnnotationServer#getting-started

http://localhost:8888/index.html にアクセスすると、以下の画面が表示されます。

エンドポイントは http://localhost:8888/annotation/ のようで、登録済みのアノテーションの一覧（はじめは空）が表示されます。

このエンドポイントをMirador 3から利用することになります。

Mirador 3の準備

ソースコードから

以下のサイトからソースコードをクローンして立ち上げます。

git clone https://github.com/ProjectMirador/mirador-annotations
cd mirador-annotations
npm i # npm i --force が必要かもしれません
npm run start

http://localhost:3000/ にアクセスすると、以下の画面が表示されます。

アダプタの設定

demo/src/index.jsについて、SimpleAnnotationServerV2Adapterをインポートし、さらにエンドポイント（ここでは、endpointUrlV2）に先ほど起動したSimpleAnnotationServerを指定します。

demo/src/index.js

import mirador from 'mirador/dist/es/src/index';
import annotationPlugins from '../../src';
import LocalStorageAdapter from '../../src/LocalStorageAdapter';
import AnnototAdapter from '../../src/AnnototAdapter';

// 以下を追加
import SimpleAnnotationServerV2Adapter from '../../src/SimpleAnnotationServerV2Adapter';

const endpointUrl = 'http://127.0.0.1:3000/annotations';

// 以下を追加
const endpointUrlV2 = 'http://0.0.0.0:8888/annotation';

const config = {
  annotation: {
    // 以下をコメントアウト
    // adapter: (canvasId) => new LocalStorageAdapter(`localStorage://?canvasId=${canvasId}`),
    // adapter: (canvasId) => new AnnototAdapter(canvasId, endpointUrl),
    // 以下を追加
    adapter: (canvasId) => new SimpleAnnotationServerV2Adapter(canvasId, endpointUrlV2),
    exportLocalStorageAnnotations: false, // display annotation JSON export button
  },
  id: 'demo',
  window: {
    defaultSideBarPanel: 'annotations',
    sideBarOpenByDefault: true,
  },
  windows: [{
    loadedManifest: 'https://iiif.harvardartmuseums.org/manifests/object/299843',
  }],
};

mirador.viewer(config, [...annotationPlugins]);

アダプタの修正

以下のプルリクエストでも指摘されていますが、アダプタの一部修正が必要です。

createV2AnnoでCanvasのURIを指定する箇所で、.idを除く必要がありました。

src/SimpleAnnotationServerV2Adapter.js

...
/** Creates a V2 annotation from a V3 annotation */
  static createV2Anno(v3anno) {
    const v2anno = {
      '@context': 'http://iiif.io/api/presentation/2/context.json',
      '@type': 'oa:Annotation',
      motivation: 'oa:commenting',
      on: {
        '@type': 'oa:SpecificResource',
        full: v3anno.target.source, // .id, // ここを修正
      },
    };
    // copy id if it is SAS-generated
    ...
    return v2anno;
  }
  ...

結果

以下のようにアノテーションが登録されました。

SimpleAnnotationServerにも以下のように登録されていました。

{
     "@id": "http://0.0.0.0:8888/annotation/1692317172799",
     "@type": "oa:Annotation",
     "dcterms:created": "2023-08-18T09:06:12",
     "dcterms:modified": "2023-08-18T09:06:12",
     "resource": [
       {
         "@type": "dctypes:Text",
         "http://dev.llgc.org.uk/sas/full_text": "中村覚",
         "format": "text/html",
         "chars": "<p>中村覚</p>"
       }
     ],
     "on": [
       {
         "@type": "oa:SpecificResource",
         "within": {
           "@id": "https://iiif.harvardartmuseums.org/manifests/object/299843",
           "@type": "sc:Manifest"
         },
         "selector": {
           "@type": "oa:Choice",
           "default": {
             "@type": "oa:FragmentSelector",
             "value": "xywh=837,1705,382,343"
           },
           "item": {
             "@type": "oa:SvgSelector",
             "value": "<svg xmlns='http://www.w3.org/2000/svg'><path xmlns=\"http://www.w3.org/2000/svg\" d=\"M836.6688,1704.92666h190.98836v0h190.98836v171.69267v171.69267h-190.98836h-190.98836v-171.69267z\" 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_21042e1d-1663-4d00-b5f0-2fa6437fc8fb\" fill-opacity=\"0.00001\" 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>"
           }
         },
         "full": "https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-47174896"
       }
     ],
     "motivation": [
       "oa:commenting"
     ],
     "@context": "http://iiif.io/api/presentation/2/context.json"
   }

上記の結果は、以下のように、CanvasのURIを指定して取得できました。

http://0.0.0.0:8888/annotation/search?uri=https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-47174896

エンドポイントの説明は以下にありました。

まとめ

Mirador 3のmirador-annotationsプラグインとSimpleAnnotationServerを試しました。参考になりましたら幸いです。