プラグイン | IIIF Curation Viewer

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

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

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

IIIF Curation Viewer：利用者向け情報
インストール：ビューワの設置に関する情報

認証関係

Firebase認証プラグイン

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

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

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

導入方法

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 デフォルト値：なしエクスポート先サービスへ情報を送信するパラメータ名を変更する場合、その対応関係を指定する。キーとして、`image`、`manifest`、`canvas`、`xywh`、`lang`の指定が有効。例えば、切り取り画像URL情報について、デフォルトのパラメータ名`image`に代えてパラメータ名`url`を用いる場合は、`{image: 'url'}`とする。情報の送信を省略する場合は、キーに対応する値を`null`とする（例：`{xywh: null}`）。
`openTab`	boolean デフォルト値：`false` エクスポート先サービスからの応答について、新たなタブを開いて表示するか否かを指定する。`false`の場合、応答はポップアップ内に表示される。
`height`	string デフォルト値：`280px` `openTab`が`false`であるとき、エクスポート先サービスからの応答をポップアップ内で表示する際に用いられる`<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() {
    var cropSizeConditionsConfig = {
        enableDefaultSize: false,
        defaultWidth: 100,
        defaultHeight: 100,
        keepDefaultAspectRatio: false,
        enableMinimumSize: false,
        minPercentageToCanvasShortSideLength: 10
    };
    return ICVSetCropSizeConditions(cropSizeConditionsConfig);
})();

ライセンス

IIIF Curation Viewer - Crop size conditions set 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)

選択サイズ座標入力プラグイン

IIIF Curation Viewerに、部分矩形領域選択時の座標入力機能を付加する。

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

座標入力ボタン押下により、座標入力による領域選択画面が表示される。座標入力による領域選択画面では、座標（x座標、y座標、幅、高さ）によって選択領域を指定できる。

ただし、選択サイズ条件設定プラグインを導入し、デフォルト選択サイズや最小選択サイズ制限を有効にしている場合、選択される領域のサイズは入力座標値と一致しないことがある。

導入方法

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

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

設定

ICVSetCropSizeCoords()

設定項目なし

設定例

setCropSizeCoords.js

var icvSetCropSizeCoords = (function() {
    var cropSizeCoordsConfig = {
    };
    return ICVSetCropSizeCoords(cropSizeCoordsConfig);
})();

ライセンス

IIIF Curation Viewer - Crop size coordinates set plugin

Copyright 2020 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プラグイン

目次

認証関係

Firebase認証プラグイン

導入方法

設定

設定例

ライセンス

エクスポート関係

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

導入方法

設定

設定例

ライセンス

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

導入方法

設定

設定例

ライセンス

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

導入方法

設定

設定例

エクスポート項目

ライセンス

編集関係

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

導入方法

設定

設定例

ライセンス

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

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

導入方法

設定

設定例

ライセンス

選択サイズ座標入力プラグイン

導入方法

設定

設定例

ライセンス