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/4.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.7.0/firebase-auth.js"></script>
<link rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.css" />
<script src="https://cdn.firebase.com/libs/firebaseui/2.5.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認証プラグインから得られるログインユーザ情報を用いてエクスポートする。
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とCSSをインクルードする。

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

設定

ICVExportCurationList()

設定項目なし

設定例

exportCurationList.js

var icvExportCurationList = (function() {
    var curationListConfig = {
    };
    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)

編集関係

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

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)

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

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

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

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

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

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

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

導入方法

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

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

設定

ICVSetDefaultCropSize(defaultCropSizeConfig)

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

項目名 説明
enable boolean
デフォルト値:false
デフォルト選択サイズ設定機能の有効無効の初期値を指定する。
width number
デフォルト値:100
デフォルト選択サイズの幅(ピクセル)の初期値を指定する。
height number
デフォルト値:100
デフォルト選択サイズの高さ(ピクセル)の初期値を指定する。
keepAspectRatio boolean
デフォルト値:false
選択領域をサイズ変更する際、デフォルト選択サイズの縦横比を保つか否かの初期値を指定する。

設定例

setDefaultCropSize.js

var icvSetDefaultCropSize = (function() {
    var defaultCropSizeConfig = {
        enable: false,
        width: 100,
        height: 100,
        keepAspectRatio: false
    };
    return ICVSetDefaultCropSize(defaultCropSizeConfig);
})();

ライセンス

IIIF Curation Viewer - Default crop size set 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)