IIIF Kasane

構造・共有・埋め込み

本のような資料の構造（目次・見開き・Collection）の表示、URL での共有、他のサイトへの埋め込みについての説明です。どの例も、そのまま開いて試せます。

構造

マニフェストに書かれた構造を、そのまま画面に反映します。

目次（Range）

マニフェストの structures に書かれた目次を、「目次」タブに入れ子のまま表示します。項目を選ぶと、その頁が開きます。

例: IIIF Cookbook 0024（目次のある本）

ビューアで開く →

見開き（behavior: paged）

behavior が paged の資料は、表紙を 1 枚で、その後を左右 2 頁の見開きで表示します。viewingDirection が right-to-left なら、右から左へめくります。

例: Wellcome Collection『Wunder der Vererbung』

ビューアで開く →

Collection

Collection を開くと、中のマニフェスト（ここでは 2 巻）がサムネイルで並びます。選ぶとその巻を開きます。

例: Wellcome Collection、Richard Owen の化石爬虫類の論考（全 2 巻）

ビューアで開く →

URL での共有

ビューアの URL に次の引数を付けると、開く資料・頁・タブを指定できます。この URL を送れば、相手も同じ状態で開けます。

引数意味試す
iiif-content=<manifest URL>開く資料（マニフェストか Collection の URL）。ビューアで開く
canvas=<n>何枚目から開くか（1 から数える）。Canvas の URI も書けます。ビューアで開く
tab=<id>右側で最初に開くタブ（metadata・structure・annotations・inference など）。ビューアで開く
pos=<n>キュレーション（IIIF Curation Viewer の形式）の何件目を開くか（1 から数える）。ビューアで開く
iiif-content=<content state>IIIF Content State API の注釈（base64url）。頁と、その中の領域まで指せます。開くと領域に枠が出ます。ビューアで開く

引数は & でつなげて組み合わせられます。例: 6 枚目を、資料情報のタブを開いた状態で。

https://kasane.ldas.jp/ja/viewer/?iiif-content=https%3A%2F%2Fiiif.wellcomecollection.org%2Fpresentation%2Fv3%2Fb18035723&canvas=6&tab=metadata

頁の中の領域まで指すときは、IIIF Content State API の注釈を使います。上の表の最後の例は、次の注釈を base64url にして iiif-content に渡しています。

{
  "@context": "http://iiif.io/api/presentation/3/context.json",
  "type": "Annotation",
  "motivation": [
    "contentState"
  ],
  "target": {
    "type": "SpecificResource",
    "source": {
      "id": "https://iiif.wellcomecollection.org/presentation/b18035723/canvases/b18035723_0008.JP2",
      "type": "Canvas",
      "partOf": [
        {
          "id": "https://iiif.wellcomecollection.org/presentation/v3/b18035723",
          "type": "Manifest"
        }
      ]
    },
    "selector": {
      "type": "FragmentSelector",
      "value": "xywh=883,82,1064,849"
    }
  }
}

IIIF Content State API 1.0

他のサイトへの埋め込み

iiif-viewer タグを使うと、Kasane のビューアを自分のサイトのページに埋め込めます。下のコードを HTML に貼るだけで動きます。サーバ側の準備は要りません。

上の枠の中は、下のコードをそのまま貼った HTML です。

コピー用のコード

<script type="module" src="https://kasane.ldas.jp/element/v0.1.0/iiif-viewer.js"></script>

<iiif-viewer
  iiif-content="https://kasane.ldas.jp/manifests/sample-manifest.json"
  locale="ja"
  theme="auto"
  style="display: block; height: 32rem"
></iiif-viewer>

指定できる属性

iiif-content
マニフェストの URL、または Content State。Content State を渡しても、今は資料を開くだけで、頁や領域の指定は効きません。
locale
表示の言語（ja / en）。
theme
色（light / dark / auto）。
options
JSON。今は最初に開くタブだけ指定できます（例: '{"tab":"metadata"}'。metadata か annotations）。
  • タグは与えた高さいっぱいに広がります。高さは CSS で指定してください（指定しないと 36rem）。
  • 色は --iiif-viewer-primary などの CSS 変数で、外から変えられます。
  • 表示する資料のサーバが、他のサイトからの読み込みを許可している（CORS）必要があります。
  • 読み込む URL の v0.1.0 は、タグの版です。