IIIF Curation Viewerプラグイン

“IIIF Curation Viewer”は、IIIF (International Image Interoperability Framework)準拠の画像ビューワであり、ページ移動やズームといった一般的なビューワが持つ機能に加え、複数の資料から画像の一部を切り取り、収集し、任意の順序で閲覧できる独自の「キュレーション」機能を備えている。

IIIF Curation Viewer v1.4からは、本ビューワにプラグインを導入することで、利用者のニーズに応じた機能拡張が可能となっている。

この文書では、IIIF Curation Viewerのデモンストレーションに導入されているプラグインについて記述する。その他の情報については、以下の別資料を参照のこと。

目次

認証関係

Firebase認証プラグイン

IIIF Curation Viewerにユーザ認証機能を付加する。認証には、別途セットアップしたFirebaseを用いる。

ただし、Web storageが利用できないブラウザ環境では、本プラグインの機能は利用できない(詳細)。

本プラグインの導入により、ビューワヘッダにログイン用リンクが追加される。

Firebase認証プラグインによるログイン表示

導入方法

IIIF Curation Viewerをロードした後、次のようにJavaScriptとCSSをインクルードする。

<script src="https://www.gstatic.com/firebasejs/5.5.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.2/firebase-auth.js"></script>
<link rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.4.1/firebaseui.css">
<script src="https://cdn.firebase.com/libs/firebaseui/3.4.1/firebaseui.js"></script>
<link rel="stylesheet" href="iiif-curation-viewer-plugins/icv.authFirebase.css">
<script src="iiif-curation-viewer-plugins/icv.authFirebase.js"></script>
<script src="authFirebase.js"></script>

設定

ICVAuthFirebase(firebaseConfig, uiConfig, uiHeaderConfig)

項目名 説明
firebaseConfig object
Firebaseの設定(詳細)を指定する。
uiConfig object
FirebaseUIの設定(詳細)を指定する。

uiHeaderConfigは次に挙げるプロパティを持ったオブジェクト:

項目名 説明
linkParentSelector string
デフォルト値:'#navbar_lang_ul'
ログイン用リンクの追加先となる親セレクタを指定する。

設定例

authFirebase.js

var icvAuthFirebase = (function() {
    var firebaseConfig = {
        apiKey: '<API_KEY>',
        authDomain: '<PROJECT_ID>.firebaseapp.com',
        databaseURL: 'https://<DATABASE_NAME>.firebaseio.com',
        projectId: '<PROJECT_ID>',
        storageBucket: '<BUCKET>.appspot.com',
        messagingSenderId: '<SENDER_ID>'
    };
    var uiConfig = {
        signInOptions: [
            firebase.auth.GoogleAuthProvider.PROVIDER_ID,
            firebase.auth.FacebookAuthProvider.PROVIDER_ID,
            firebase.auth.TwitterAuthProvider.PROVIDER_ID,
            //firebase.auth.GithubAuthProvider.PROVIDER_ID,
            //firebase.auth.EmailAuthProvider.PROVIDER_ID,
            //firebase.auth.PhoneAuthProvider.PROVIDER_ID
        ],
        tosUrl: ''
    };
    return ICVAuthFirebase(firebaseConfig, uiConfig);
})();

ライセンス

IIIF Curation Viewer - Firebase authentication plugin

Copyright 2017 Center for Open Data in the Humanities, Research Organization of Information and Systems
Released under the MIT license

Core contributor: Jun HOMMA (@2SC1815J)

エクスポート関係

JSONkeeperエクスポートプラグイン

IIIF Curation ViewerにJSONkeeperへのキュレーションリストエクスポート機能を付加する。

導入方法

IIIF Curation Viewerをロードした後、次のようにJavaScriptとCSSをインクルードする。エクスポート時にアクセス制御を行う場合、認証系プラグインをロードした後にインクルードする。

<link rel="stylesheet" href="iiif-curation-viewer-plugins/icv.exportJsonKeeper.css">
<script src="iiif-curation-viewer-plugins/icv.exportJsonKeeper.js"></script>
<script src="exportJsonKeeper.js"></script>

設定

ICVExportJsonKeeper(jsonKeeperConfig)

jsonKeeperConfigは次に挙げるプロパティを持ったオブジェクト:

項目名 説明
accessControl string(''または'firebase'
デフォルト値:''
エクスポート時に用いるトークンの種類を指定する。
''とした場合、トークンなしとなる。
'firebase'とした場合、Firebase認証プラグインから得られるIDトークンを用いる。未ログイン状態ではトークンなしとなる。
allowAnonymousPost boolean
デフォルト値:true
トークンなしでのエクスポートを許可するか否かを指定する。

トークンを用いてエクスポートすると、他のユーザによる編集や削除が禁止される(詳細)。トークンなし(匿名)でエクスポートすると、誰でも編集可能な状態となり、削除されることがある。

キュレーションリスト送信先URL(JSONkeeperのエンドポイントURL)は、ビューワ設置時の設定項目service.curationJsonExportUrlで指定する。

設定例

exportJsonKeeper.js

var icvExportJsonKeeper = (function() {
    var jsonKeeperConfig = {
        accessControl: 'firebase',
        allowAnonymousPost: true
    };
    return ICVExportJsonKeeper(jsonKeeperConfig);
})();

ライセンス

IIIF Curation Viewer - JSONkeeper export plugin

Copyright 2017 Center for Open Data in the Humanities, Research Organization of Information and Systems
Released under the MIT license

Core contributor: Jun HOMMA (@2SC1815J)

キュレーションリスト上書きエクスポートプラグイン

curationパラメータ指定により読み込んだキュレーションリストについて、リスト編集後の上書きエクスポート機能をIIIF Curation Viewerに付加する。

本プラグインの導入により、ビューワのキュレーションリスト画面に上書き更新ボタンが追加される。curationパラメータ指定により読み込んだキュレーションリストを編集(コマの追加・削除・並び替え)すれば、キュレーションリスト画面よりリスト編集後キュレーションリストのエクスポートを行う。

キュレーションリスト上書きエクスポートプラグインによる上書き更新ボタン表示

キュレーションメタデータ編集プラグイン(後述)と同時に使用する場合、メタデータ編集は、キュレーションリスト画面よりエクスポートされる内容には反映されない点に留意されたい。メタデータ編集を行った場合は、メタデータ編集サイドバーからエクスポートすることで、メタデータ編集が反映されたキュレーションリストがエクスポートされる。

導入方法

IIIF Curation Viewerをロードした後、次のようにJavaScriptをインクルードする。

<script src="iiif-curation-viewer-plugins/icv.exportCurationList.js"></script>
<script src="exportCurationList.js"></script>

設定

ICVExportCurationList(curationListConfig)

curationListConfigは次に挙げるプロパティを持ったオブジェクト:

項目名 説明
setUpdateButtonToDefault boolean
デフォルト値:false
上書き更新ボタンをデフォルトにするか否かを指定する。

設定例

exportCurationList.js

var icvExportCurationList = (function() {
    var curationListConfig = {
        setUpdateButtonToDefault: false
    };
    return ICVExportCurationList(curationListConfig);
})();

ライセンス

IIIF Curation Viewer - Curation list export plugin

Copyright 2018 Center for Open Data in the Humanities, Research Organization of Information and Systems
Released under the MIT license

Core contributor: Jun HOMMA (@2SC1815J)

切り取り画像エクスポートプラグイン

IIIF Curation Viewerに、切り取り画像(ユーザが選択した部分矩形領域)エクスポート先の変更機能を付加する。これにより、ユーザのニーズに応じて、切り取り画像を処理する外部サービスを選択し、ビューワと連携して利用することができる。

ただし、ビューワ本体の設置時設定においてcroppedImageExportUrl指定がなされている場合は、本プラグインの機能よりもビューワ本体の設置時指定が優先される。

本プラグインの導入により、ビューワの部分矩形領域指定ボタン押下時にエクスポート設定ボタンが追加される。

切り取り画像エクスポートプラグインによるエクスポート設定ボタン表示

エクスポート設定ボタン押下により、切り取り画像エクスポートの設定画面が表示される。切り取り画像エクスポートの設定画面では、切り取り画像エクスポート先サービスの変更が行える。

切り取り画像エクスポートプラグインによる切り取り画像エクスポートの設定画面表示

切り取り画像エクスポート先サービスが選択されている場合、領域選択後、選択領域をクリックして表示されるポップアップから、エクスポート先のサービスを利用できる。

切り取り画像エクスポート先サービスの選択は、プラグイン導入時の設置者による指定およびビューワ利用時のユーザによる指定によって行える。

プラグイン導入時の設置者による指定は、エクスポート先サービスの情報を記述したオブジェクト(後述)を引数に与えることによって行う。

ビューワ利用時のユーザによる指定は、エクスポート先として利用できるサービスの情報が掲載されているページ(例えば「ICPサービスリポジトリ」など)から、サービスのエンドポイント設定(エクスポート先サービスの情報を記述したJSONファイルへのリンク)をドラッグし、切り取り画像エクスポートの設定画面へドロップすることで行う。

導入方法

IIIF Curation Viewerをロードした後、次のようにJavaScriptとCSSをインクルードする。

<link rel="stylesheet" href="iiif-curation-viewer-plugins/icv.exportCroppedImage.css">
<script src="iiif-curation-viewer-plugins/icv.exportCroppedImage.js"></script>
<script src="exportCroppedImage.js"></script>

設定

ICVExportCroppedImage(defaultCroppedImageExportConfig, croppedImageExportPluginConfig)

defaultCroppedImageExportConfigは次に挙げるプロパティを持ったオブジェクト:

項目名 説明
name stringまたはarray
デフォルト値:なし
エクスポート先サービスの名称を指定する。言語ごとに異なる内容とする場合は、@language@valueを用いて記述する(詳細)。
description stringまたはarray
デフォルト値:なし
エクスポート先サービスの短い説明を指定する。言語ごとに異なる内容とする場合は、@language@valueを用いて記述する(詳細)。
homepage stringまたはarray
デフォルト値:なし
エクスポート先サービスのホームページURLを指定する。言語ごとに異なる内容とする場合は、@language@valueを用いて記述する(詳細)。
provider stringまたはarray
デフォルト値:なし
エクスポート先サービスの提供元名称を指定する。言語ごとに異なる内容とする場合は、@language@valueを用いて記述する(詳細)。
exportUrl string
デフォルト値:なし
エクスポート先サービスのエンドポイントURLを指定する。このURLに対して情報が送信される。
method string('GET'または'POST'
デフォルト値:GET
エクスポート先サービスへ情報を送信する際のHTTPメソッドを指定する。
enctype string('application/x-www-form-urlencoded'または'multipart/form-data'
デフォルト値:application/x-www-form-urlencoded
method'POST'であるとき、エクスポート先サービスへ情報を送信する際のMIMEタイプを指定する。
paramMap object
デフォルト値:なし
エクスポート先サービスへ情報を送信するパラメータ名を変更する場合、その対応関係を指定する。キーとして、imagemanifestcanvasxywhlangの指定が有効。例えば、切り取り画像URL情報について、デフォルトのパラメータ名imageに代えてパラメータ名urlを用いる場合は、{image: 'url'}とする。情報の送信を省略する場合は、キーに対応する値をnullとする(例:{xywh: null})。
openTab boolean
デフォルト値:false
エクスポート先サービスからの応答について、新たなタブを開いて表示するか否かを指定する。falseの場合、応答はポップアップ内に表示される。
height string
デフォルト値:280px
openTabfalseであるとき、エクスポート先サービスからの応答をポップアップ内で表示する際に用いられる<iframe>の高さを指定する。
requireFirebaseIdToken boolean(非推奨:→ sendFirebaseIdToken
sendFirebaseIdToken string('required''optional''none'のいずれか)
デフォルト値:'none'
エクスポート先サービスが、サービス利用にあたりFirebaseログインユーザ情報を必要とするか否かを指定する。'required'または'optional'の場合、method'POST'であって、exportUrl'https://'で始まり、かつtrustedUrlPrefixes(後述)リストの要素から始まる場合に限り、Firebase認証プラグインから得られるIDトークンをエクスポート先サービスに送信する。'required'の場合、Firebase未ログインまたは送信条件が満たされないときは、エクスポート先サービスへのリンク等を無効にする。

切り取り画像エクスポートの設定画面にドロップする設定は、上記オブジェクトを表現するJSONファイルへのリンクとする。

croppedImageExportPluginConfigは次に挙げるプロパティを持ったオブジェクト:

項目名 説明
trustedUrlPrefixes stringのarray
デフォルト値:[]
Firebase認証プラグインから得られるIDトークンの送信を認める送信先URLの接頭辞を設定する。

設定例

exportCroppedImage.js

var icvExportCroppedImage = (function() {
    //初期状態で有効となるエクスポート先サービスを登録する場合の設定例
    var defaultCroppedImageExportConfig = {
        name: [
            {
                '@language': 'en',
                '@value': 'Single Kuzushiji Recognition'
            },
            {
                '@language': 'ja',
                '@value': 'くずし字一文字認識'
            }
        ],
        description: [
            {
                '@language': 'en',
                '@value': 'Performs single kuzushiji character recognition and displays the result in a popup.'
            },
            {
                '@language': 'ja',
                '@value': 'くずし字一文字の認識を行い、ポップアップ内に結果を表示します。'
            }
        ],
        homepage: 'http://codh.rois.ac.jp/char-shape/app/single-mobilenet/',
        exportUrl: 'http://codh.rois.ac.jp/char-shape/app/single-mobilenet-frame/',
        openTab: false,
        height: '280px'
    };
    //初期状態で有効となるエクスポート先サービスを登録しない場合の設定
    //var defaultCroppedImageExportConfig = {};

    var croppedImageExportPluginConfig = {
        trustedUrlPrefixes: ['https://mp.ex.nii.ac.jp/']
    };
    return ICVExportCroppedImage(defaultCroppedImageExportConfig, croppedImageExportPluginConfig);
})();

エクスポート項目

切り取り画像エクスポート先サービスに対し、以下に挙げる情報が送信される。上述のparamMap項目指定により、エクスポート先サービスの仕様に応じて、パラメータ名の変更や、送信情報の省略も行える。

パラメータ名 内容
image 切り取り画像のURL
manifest マニフェストのURL
canvas キャンバスの@id
xywh 切り取り画像の領域(x,y,w,h形式)
lang 表示言語
token (送信条件が満たされる場合のみ)
Firebase認証プラグインから得られるIDトークン

ライセンス

IIIF Curation Viewer - Cropped image export plugin

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)

編集関係

キュレーションメタデータ編集プラグイン

curationパラメータ指定により読み込んだキュレーションリストの各キャンバスについてメタデータを編集する機能をIIIF Curation Viewerに付加する。

本プラグインの導入により、ビューワにメタデータ編集ボタンが追加される(下図、右から6番目)。

キュレーションメタデータ編集プラグインによるメタデータ編集ボタン表示

メタデータ編集ボタン押下により、メタデータ編集サイドバーが表示される。curationパラメータ指定により読み込んだキュレーションリストについて、キャンバスのメタデータを編集すれば、サイドバーよりメタデータ編集後キュレーションリストのエクスポートを行う。

キュレーションメタデータ編集プラグインによるメタデータ編集サイドバー表示

キュレーションリスト画面で行ったリスト編集(コマの追加・削除・並び替え)は、サイドバーよりエクスポートされる内容には反映されない点に留意されたい。リスト編集を行った場合は、キュレーションリスト画面からエクスポートすることで、リスト編集が反映されたキュレーションリストがエクスポートされる。

導入方法

IIIF Curation Viewerをロードした後、次のようにJavaScriptとCSSをインクルードする。

<script src="json-editor/jsoneditor.min.js"></script>
<link rel="stylesheet" href="leaflet/leaflet-sidebar/L.Control.Sidebar.css">
<script src="leaflet/leaflet-sidebar/L.Control.Sidebar.js"></script>
<link rel="stylesheet" href="iiif-curation-viewer-plugins/icv.editCurationMetadata.css">
<script src="iiif-curation-viewer-plugins/icv.editCurationMetadata.js"></script>
<script src="editCurationMetadata.js"></script>

設定

ICVEditCurationMetadata(curationMetadataConfig)

curationMetadataConfigは次に挙げるプロパティを持ったオブジェクト:

項目名 説明
useJsonEditor boolean
デフォルト値:false
メタデータ編集にJSON Editorを利用するか否かを指定する。
jsonEditorOptions object
デフォルト値:{}
JSON Editorのオプション(詳細)を指定する。

設定例

editCurationMetadata.js

var icvEditCurationMetadata = (function() {
    var curationMetadataConfig = {
        useJsonEditor: true,
        jsonEditorOptions: {
            schema: {
                'title': 'Metadata',
                'type': 'array',
                'format': 'table',
                'items': {
                    'title': 'item',
                    'type': 'object',
                    'properties': {
                        'label': {
                            'type': 'string'
                        },
                        'value': {
                            'type': [
                                'string',
                                'array'
                            ]
                        }
                    }
                }
            },
            theme: 'bootstrap3',
            iconlib: 'bootstrap3',
            disable_array_delete_all_rows: true,
            disable_array_delete_last_row: true,
            disable_array_reorder: true,
            disable_properties: true
        }
    };
    return ICVEditCurationMetadata(curationMetadataConfig);
})();

ライセンス

IIIF Curation Viewer - Curation metadata edit plugin

Copyright 2017 Center for Open Data in the Humanities, Research Organization of Information and Systems
Released under the MIT license

Core contributor: Jun HOMMA (@2SC1815J)

デフォルト選択サイズ設定プラグイン

deprecated:「選択サイズ条件設定プラグイン」に発展統合

選択サイズ条件設定プラグイン

IIIF Curation Viewerに、部分矩形領域選択時のデフォルトサイズ設定機能、最小選択サイズ制限機能等を付加する。

本プラグインの導入により、ビューワの部分矩形領域指定ボタン押下時に選択設定ボタンが追加される。

デフォルト選択サイズ設定プラグインによる選択設定ボタン表示

選択設定ボタン押下により、領域選択の設定画面が表示される。領域選択の設定画面では、機能利用の有無やデフォルト選択サイズを指定できる。

デフォルト選択サイズ設定プラグインによる設定画面表示

デフォルト選択サイズを利用する場合、領域選択後、選択領域がデフォルト選択サイズに変更される。サイズ変更中縦横比維持機能を有効にしている場合、選択領域をデフォルト選択サイズから拡大縮小する際、その縦横比が維持される。

最小選択サイズ制限を利用する場合、プラグイン導入時の設置者による設定で指定された最小選択サイズの条件を満たすように領域選択が行われる。

導入方法

IIIF Curation Viewerをロードした後、次のようにJavaScriptをインクルードする。ただし、bootstrap-validatorについては、選択サイズ座標入力プラグイン利用のため既にロードしている場合、ここではインクルードしない。

<script src="bootstrap/bootstrap-validator/validator.min.js"></script>
<script src="iiif-curation-viewer-plugins/icv.setCropSizeConditions.js"></script>
<script src="setCropSizeConditions.js"></script>

設定

ICVSetCropSizeConditions(cropSizeConditionsConfig)

cropSizeConditionsConfigは次に挙げるプロパティを持ったオブジェクト:

項目名 説明
enableDefaultSize boolean
デフォルト値:false
デフォルト選択サイズ設定機能の有効無効の初期値を指定する。
defaultWidth number
デフォルト値:100
デフォルト選択サイズの幅(ピクセル)の初期値を指定する。
defaultHeight number
デフォルト値:100
デフォルト選択サイズの高さ(ピクセル)の初期値を指定する。
keepDefaultAspectRatio boolean
デフォルト値:false
選択領域をサイズ変更する際、デフォルト選択サイズの縦横比を保つか否かの初期値を指定する。
enableMinimumSize boolean
デフォルト値:false
最小選択サイズ制限機能の有効無効の初期値を指定する。
minPercentageToCanvasShortSideLength number
デフォルト値:10
選択領域の一辺の長さが満たすべき最小値を、キャンバスの短辺の長さに対する比率(パーセント)として指定する。

設定例

setCropSizeConditions.js

var icvSetCropSizeConditions = (function() {
    <