IIIF Implementation of "Oki-ezu" (Raised Picture Maps)

概要 「起絵図」の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のレイヤー機能を使ったアプリケーション作成の参考になりましたら幸いです。

August 14, 2020 · 1 min · Nakamura

IIIF Application Using Transmitted Light Images

概要 「透過光画像を使ったIIIFアプリケーション」を作成しました。東京大学総合図書館所蔵の「シェリー書簡」を対象にしています。 utda.github.io 作成したアプリケーション 本アプリケーションではIIIFの「代替資源の選択」を用いて、オリジナル画像と透過光画像を比較する環境を提供します。 4つの方法で比較環境を提供しており、「IMAGE COMPARISON WITH A SLIDER 」「MIRADOR」「IIIF CURATION VIEWER」「IMAGE ANNOTATOR」を用いています。 IMAGE COMPARISON WITH A SLIDER Digiratiが開発した画像比較ビューアを使用しています。画面中央のスライダーを動かして、画像を比較することができます。 MIRADOR Miradorのレイヤー機能を用いて比較します。画面左部のレイヤータブをクリックし、opacityを変更してみてください。 IIIF CURATION VIEWER CODH(Center for Open Data in the Humanities)が開発しているIIIF Curation Viewer Embeddedを用いて表示します。画面右上のラジオボックスで表示画像を切り替えることができます。 Image Annotator 神崎正英氏が開発しているビューアで表示します。画面右上のchoiceで表示内容を切り替えてください。…を行うと、アノテーションを付与している箇所のみ、透過光画像を表示することができます。 作成方法 Level 0 IIIF Image APIに準拠した画像の作成 Digirati社製のビューアについては、IIIFマニフェストは不要で、IIIF Image APIに準拠した画像が必要になります。そこで、今回はIIIF対応のImage Serverを必要としないIIIF Image APIのレベル0に準拠した画像生成を行いました。この利点として、Image Serverが不要となることで、GitHub PagesやAmazon S3といった静的ファイルのホスティングサービスのみでの画像公開が可能となり、運用コストやセキュリティリスクを軽減することができます。一方のデメリットとしては、事前に作成したタイル画像を配信するため、任意の範囲の画像切り出しに対応していない点があげられます。この点はカンバスに対して領域を指定するアノテーションやキュレーションでは問題になりませんが、その領域の切り出し画像そのものがほしいといったニーズには答えられないことが多いです。 今回は特定の領域の画像そのものが必要ではなかったため、IIIF Image APIのレベル0を採用することにしました。なお、Mirador等のビューアを使った画像比較では、IIIF Image APIを使用しない方法もあります。しかし、今回はDigirati製のビューアで本APIが必要だったため、Image APIのレベル0を使ったIIIFマニフェストファイルを作成することにしました。 IIIF Image APIのレベル0に対応した画像生成にはこちらのスクリプトを参考にしました。また、Excelファイルでまとめた情報を入力として、本スクリプトを実行可能な環境も用意しました。お役に立てば幸いです。 上記リポジトリの例にあるように、今回はGitHub Pagesでタイル画像を公開しました。 github.com IIIFマニフェストファイルの作成 IIIFの「代替資源の選択」を参考に、以下のようなIIIFマニフェストファイルを作成します。 代替資源を使ったIIIFマニフェストファイルの作成については、こちらの記事を参考にしてください。

August 14, 2020 · 1 min · Nakamura