「起絵図」のIIIF実装

 

概要

「起絵図」のIIIF実装を行いました。東京大学駒場図書館所蔵「大日本海志編纂資料」に含まれる越絵図を対象にしています。

https://utda.github.io/kaishi/

 

以下の動画から概要をご確認ください。

 


「起絵図」のIIIF実装

 

作成したアプリケーション

東京国立博物館による「越絵図」の説明は以下です。

「起絵図(おこしえず)」は、平面図を描いた台紙に、壁面や天井の図を貼り付け、建物の立体的な構造を再現する折畳式の簡易模型です。とくに小さな空間に複雑な立体構造を持つ茶室の再現に適した図法として活用されました。(東京国立博物館 - 展示 日本美術(本館) 日本の博物学シリーズ 起絵図より

 

この越絵図の表現を、IIIFの「代替資源の選択」を用いて実装しました。また、ビューア「Mirador 2」をカスタマイズし、越絵図の動きをアニメーションで表現できるようにしました。ビューアを開き、画面上部の「Play」ボタンを押してください。

 

作成方法

IIIFマニフェストファイルの作成

IIIFの「代替資源の選択」を参考に、以下のようなIIIFマニフェストファイルを作成します。

https://github.com/utda/kaishi/blob/master/docs/iiif/7-2-47/manifest.json

 

itemの配列に対して、重ねて表示したい画像の情報を追加します。この時、onに指定するカンバスのURIについて、重ねたい画像の表示箇所を指定します。以下の例は、元の画像(重ねられる画像)のサイズで作成したカンバスに対して、開始位置(2560,512)から幅(3072,4096)までの範囲に画像を重ねるための記述です。

https://github.com/utda/kaishi/blob/master/docs/iiif/7-2-47/manifest.json#L111

 

この範囲の指定が最もコストがかかる部分ですが、今回は以下のように、重ねる画像の位置情報が記述されたxmlファイルがすでに存在しました。

https://github.com/utda/kaishi/blob/master/src/data/xmls_layered/7-2-47.xml

 

このxmlファイルに記載された情報から上記のitemsの配列を自動作成しました。

 

Mirador 2のカスタマイズ

Mirador 2のカスタマイズ方法はこちらに記載があります。この記載を参考に、以下のような記述を追加しました。

https://github.com/utda/kaishi/blob/master/docs/mirador/index.html#L95 

 

「Play」「Stop」「Check All」「Clear」ボタンを追加し、それぞれのボタンをクリックした際に実行される関数を追加しています。まず、Miradorのレイヤータブにあるチェックボックスの一覧を取得します。次にsetIntervalを使って、一定間隔毎にチェックボックスをクリックします。

 

まとめ

以上、起絵図をお楽しみいただくとともに、IIIFのレイヤー機能を使ったアプリケーション作成の参考になりましたら幸いです。