ROIS-DS人文学オープンデータ共同利用センター(CODH)

vdiff.js

“vdiff.js”は、ウェブページ埋め込み型の画像比較ツールである。

本ツールは、射影変換機能を備え、画像内で比較したい対象の配置の違いを軽減して比較できる点に独自性があり、2枚の類似した画像の比較から変化を調べる目的に適している。

類似画像の違い探し、古写真と現代写真の今昔比較、災害写真のビフォー／アフター比較など、画像を用いたストーリーテリングのツールとしても幅広く活用できる。例えば、武鑑全集では同一出版物の異なる版の画像比較、メモリーグラフでは同一地点を同一構図で撮影した写真比較に、本ツールを活用している。

また、“vdiff.js editor”は、画像比較に用いる対応点の修正ツールである。

vdiff.jsにおける重ね合わせ結果が満足できない場合、対応点を修正する機能を提供する。

この文書は、vdiff.jsについて記述する。その他の情報については、以下の別資料を参照のこと。

目次

動作デモ／活用例

動作デモ（シンプル版・開発者向け）

動作デモ（解説あり・一般向け）

活用例

使い方

本ツールは、「局所強調比較モード」または「全体変化比較モード」のいずれかの状態で表示される。

局所強調比較モードは、局所的な差異を強調する機能によって、差異に気付きやすくする効果を備えており、武鑑全集のように版間変化を比較するアプリケーションに適している。

全体変化比較モードは、全体的な変化の雰囲気に注目する効果を備えており、メモリーグラフのように時間変化を比較するアプリケーションに適している。

各モードでは、それぞれ数種類の画像比較手法が提供され、アイコンボタンまたは画像上を右クリックして表示されるアイコンメニューにより、適宜選択できる。

右クリックして表示されるアイコンメニュー

また、埋め込み時の設定に応じて、各種機能を提供するアイコンボタンが表示される。

これらアイコンボタンは、設定に応じて、画像の上部または下部に表示される。

また、画像に関するラベル（画像のタイトル／キャプション）が、設定に応じて、画像の上部または下部に表示される。ラベルには、比較モードおよび画像に応じたカラーチップ（後述）が付加される。

局所強調比較モード

差異が存在する箇所の把握に適した、4種類の比較手法が選択できる。

左右表示

画像上に表示される分割線を左右にドラッグすることにより、出版物における「あおり校正」のように、能動的に差異を探索する比較手法である。

強調チェックボックスがチェックされているとき、強調表示（後述）に基づくハイライト表示が重畳され、注目箇所が示唆される。このとき、ハイライト箇所にマウスカーソルを重ねると、マウスカーソルの周囲ではハイライト表示が解除され、資料の元の状態を確認できる。

左右表示

強調表示

画像間の差分を取捨した結果をハイライト表示することで、静的に差異の概要を把握する比較手法である。

画像間の差分から、撮影条件の違い等に起因するもの（ノイズ）を除去し、撮影対象の本来の差異を強調することを目的としている。

ただし、ノイズ除去に伴い本来の差異も除去されてしまうケースや、ノイズ除去が不十分となるケースもあるため、他の比較手法（赤青表示など）と併せて利用されたい。

ハイライト表示は、以下の配色となる。

  • 設定により、画像1が左側、画像2が右側に表示されている場合（後述）

    • どちらの画像も白地に黒文字であるとき
      • 左画像（画像1）にはあって右画像（画像2）にはない文字部分：青色のハイライト
      • 右画像（画像2）にはあって左画像（画像1）にはない文字部分：赤色のハイライト
    • どちらの画像も黒地に白文字であるとき
      • 左画像（画像1）にはあって右画像（画像2）にはない文字部分：赤色のハイライト
      • 右画像（画像2）にはあって左画像（画像1）にはない文字部分：青色のハイライト

  • 設定により、画像1が右側、画像2が左側に表示されている場合（後述）

    • どちらの画像も白地に黒文字であるとき
      • 右画像（画像1）にはあって左画像（画像2）にはない文字部分：青色のハイライト
      • 左画像（画像2）にはあって右画像（画像1）にはない文字部分：赤色のハイライト
    • どちらの画像も黒地に白文字であるとき
      • 右画像（画像1）にはあって左画像（画像2）にはない文字部分：赤色のハイライト
      • 左画像（画像2）にはあって右画像（画像1）にはない文字部分：青色のハイライト

これらのとき、画像に関するラベルのカラーチップにこれらの配色が反映される。

強調表示

赤青表示

差異箇所を赤色・青色で表示することで、静的に差異の詳細を検討する比較手法である。

画像間の差分について、可能な限り差異情報を失わずに提示することを目的としている。

前述の強調表示とは異なりノイズ除去を行わないため、本来の差異が除去されてしまうおそれは少ないが、差異の概要を把握する目的には最適ではないため、他の比較手法（強調表示など）と併せて利用されたい。

赤色・青色の配色は、強調表示におけるハイライト表示と同様である。

赤青表示

並列表示

射影変換後の画像を左右に並べて表示することで、左右に視線を往復させながら画像の差異を検討する比較手法である。