IIIF Curation Viewer Embedded

"IIIF Curation Viewer Embedded"は、IIIF Curation Viewerをベースとした、Webページ埋め込み型のIIIFビューワである。

埋め込み利用に特化して、IIIF Curation Viewerの持つ一部の機能は省略し、いくつかの固有の機能を追加している。

省略されている機能
- キュレーション作成機能
- サムネイル一覧機能など
追加されている機能
- 指定した<div>内にビューワを展開する埋め込み機能
- マニフェスト内の代替画像選択記述に対応した画像切り替え機能

この文章では、本ビューワ固有の内容を中心に記述する。

動作デモ/活用例

華北交通アーカイブ
江戸マップβ版
edomi
武鑑全集
写真でつなぐシルクロード(ディジタル・シルクロード)
電子展示『捃拾帖』(東京大学総合図書館)
正保琉球国絵図デジタルアーカイブ(東京大学史料編纂所)
籌海図編デジタルアーカイブ(東京大学史料編纂所)
『ヒエラティック古書体学』データベース(JSPS科研費18K00525)
地震史料集テキストデータベース(東京大学地震火山史料連携研究機構)

使い方

代替画像の選択

表示するマニフェストにおいて、oa:Choice(IIIF Presentation API 2.1)またはChoice(IIIF Presentation API 3.0)によって代替画像が提供されている場合、ビューワ上に画像切り替えラジオボタンが表示され、画像を切り替えられる。

2024年11月現在、IIIF Curation Viewerは代替画像選択記述に未対応であり、当機能は埋め込み版固有の機能である。

前後コマ移動

表示するマニフェスト/キュレーションが複数のコマからなる場合、ビューワの左右両端に前後コマ移動用ボタンが表示される(一定時間でフェードアウトする)。IIIF Curation Viewerと同様に、左右矢印キー等のキーボードショートカットも利用できる。

URLによる動作指定

埋め込み先ページのURLに対し、閲覧者がGETパラメータposやフラグメント識別子#xywh=を付加することにより、初期表示コマと拡大表示する領域を指定できる。これらの指定は、埋め込み時の設定(後述)より優先される。

例:http://codh.rois.ac.jp/north-china-railway/photograph/3603-006687-0.html?pos=1#xywh=920,610,1300,940

埋め込み時の設定

IIIF Curation Viewer Embedded埋め込み時のオプション指定により、埋め込みビューワの挙動をカスタマイズできる。IIIF Curation Viewerと異なり、閲覧対象のマニフェスト/キュレーションは、埋め込み時に指定する。

注意点

`viewport`設定

モバイルブラウザでの動作を適切なものとするため、埋め込み先のページには、headセクション内に次のようなviewportの設定が必要である(参考)。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

設定がなされていない場合、ビューワ画像に継ぎ目が表示されることがある。

外部ビューワへのリンク

IIIF Curation Viewer Embeddedは、埋め込みページ内での簡易的な閲覧に適したものとして、サムネイル一覧機能など一部の機能が省略されている。埋め込みに当たっては、資料をより深く利用するユーザのために、十分な機能を有したIIIFビューワで表示するリンクを別途提供することが望ましい。

外部ビューワとしてIIIF Curation Viewerを採用する場合、埋め込み先サイトで用意したものがあればそちらを利用し、用意がなければ人文学オープンデータ共同利用センターが提供するデモ設置を利用できる。

複数埋め込み

IIIF Curation Viewer Embeddedは、同一ページへの複数埋め込みも可能である。

ただし、GETパラメータposやフラグメント識別子#xywh=による初期表示状態指定や、キーボードショートカットによる操作を、埋め込みビューワごとに独立して適用することはできない。

また、同一ページに複数埋め込む場合、JavaScriptファイルの読み込み指定を重複して行ってはならない点に留意されたい。

オプション指定

オプション指定は、次に挙げるプロパティを持ったオブジェクトをIIIFCurationViewerEmbeddedの引数に与えることによって行う。

id:デフォルト値'image_canvas'
data
- manifest:デフォルト値''
- canvas:デフォルト値''
- curation:デフォルト値''
- pos:デフォルト値undefined
- lang:デフォルト値'ja'
controls
- enableAutoHide:デフォルト値true
- fullscreenOptions:デフォルト値{}
- layersOptions:デフォルト値{}

`id`

ビューワの埋め込み先となる<div>のIDを指定する。埋め込み先要素にはheight(またはmin-height)が設定されていなければならない。未設定の場合、埋め込みビューワの高さは0になり、利用者はビューワに気付くことができない。

`data`

manifestは、埋め込みビューワで表示するマニフェストのURIを指定する。

canvasは、manifestで指定したマニフェストのうち、初期状態で表示するキャンバスの@idを指定する。フラグメント識別子#xywh=(https://iiif.io/api/presentation/2.1/#segments)を用いた領域指定を後置することで、当該領域を拡大して初期表示することができる。

curationは、埋め込みビューワで表示するキュレーションのURIまたはオブジェクトを指定する。

posは、curationで指定したキュレーション(またはmanifestで指定したマニフェスト)のうち、初期状態で表示するコマ番号(1から始まる通し番号)を指定する。canvasと同時に指定された場合は、posの設定値が優先される。

langは、埋め込みビューワで表示する言語('ja'または'en'など)を設定する。

`controls`

enableAutoHideは、ズームイン/ズームアウトボタン、フルページ表示ボタンについて、自動的に隠す機能を設定する。trueの場合、これらのボタンは、一定時間でフェードアウトし、マウスオーバーまたはタッチにより再び表示される。falseの場合、これらのボタンは常に表示される。

fullscreenOptionsは、Leaflet.fullscreenのオプション項目(詳細)を指定する。フルスクリーン切り替え時の挙動(全画面表示となるか、ブラウザ画面内でのフルページ表示となるか)などの設定が行える。

layersOptionsは、Control.Layersのオプション項目(詳細)を指定する。代替画像が提供されている際、画像を選択するラジオボタンを常時表示するのではなく、マウスホバーまたはタッチされるまで、アイコン形式に畳んでおくか否かなどの設定が行える。

設定例

埋め込みビューワとして実際に動作するデモを挙げる。

初期表示状態指定例

IIIF Curation Viewerで開く

<div id="image_canvas" style="height: 500px;"></div>
<link rel="stylesheet" href="iiif-curation-viewer-embedded/icviewer-embedded.bundle.css">
<script src="iiif-curation-viewer-embedded/icviewer-embedded.bundle.min.js"></script>
<script>
 (function() {
 IIIFCurationViewerEmbedded({
 id: 'image_canvas',
 data: {
 manifest: 'https://codh.rois.ac.jp/pmjt/book/200014778/manifest.json',
 canvas: 'http://codh.rois.ac.jp/pmjt/iiif/200014778/canvas/00023#xywh=3430,2460,870,760'
 }
 });
 })();
</script>
<a href="https://codh.rois.ac.jp/software/iiif-curation-viewer/demo/?manifest=https://codh.rois.ac.jp/pmjt/book/200014778/manifest.json&canvas=http://codh.rois.ac.jp/pmjt/iiif/200014778/canvas/00023&xywh=3430,2460,870,760" target="_blank">IIIF Curation Viewerで開く</a>

canvas(フラグメント識別子#xywh=を含む)によって、初期状態で表示するキャンバスと拡大領域を指定している。

代替画像の選択例

IIIF Curation Viewerで開く

<div id="image_canvas2" style="height: 600px;"></div>
<script>
 (function() {
 IIIFCurationViewerEmbedded({
 id: 'image_canvas2',
 data: {
 manifest: 'https://codh.rois.ac.jp/north-china-railway/manifest/3603-006687-0.json'
 }
 });
 })();
</script>
<a href="https://codh.rois.ac.jp/software/iiif-curation-viewer/demo/?manifest=https://codh.rois.ac.jp/north-china-railway/manifest/3603-006687-0.json" target="_blank">IIIF Curation Viewerで開く</a>

oa:Choiceによる複数画像が提供されているマニフェストを表示する例。

このページでの2回目の埋め込みなので、1回目の埋め込みとは異なりJavaScriptファイルとCSSファイルの読み込み指定を記述していない点、1回目とは埋め込み先IDを変更している点に注意のこと。

ライセンス

IIIF Curation Viewer Embedded v2.0
http://codh.rois.ac.jp/software/iiif-curation-viewer-embedded/
Copyright 2019 Center for Open Data in the Humanities, Research Organization of Information and Systems
Released under the MIT license
Core contributor: Jun HOMMA (@2SC1815J)
Licenses of open source libraries, see acknowledgements.txt

開発履歴

バージョン2.0 (2024年11月11日)

IIIF Image API非対応リソースの表示に対応。

バージョン1.4 (2024年08月27日)

IIIF Presentation API 3.0のマニフェスト表示に対応。

バージョン1.3 (2022年07月11日)

ページ移動に関する表示方法を改善。
他のツールと共存しやすいようにバンドル版コードを改善。

バージョン1.2 (2021年05月14日)

Curation JSONの埋め込みに対応。

バージョン1.1 (2019年06月20日)

デフォルト表示言語にブラウザの言語設定を反映させる機能に対応。

バージョン1.0 (2019年02月11日)

最初のバージョンを公開。

目次