はじめに

古典籍のデジタル化が進む中、異なる写本や校訂本のテキストを比較・分析するニーズが高まっています。本稿では、IIIF（International Image Interoperability Framework）マニフェストを活用し、2つの資料の画像とテキストを並べて比較できるWebアプリケーション「Text Comparison Tool」を紹介します。

デモサイト : https://iiif-text.vercel.app/

背景と課題

デジタルアーカイブで公開されている古典籍には、IIIFマニフェストにテキストアノテーションが付与されているものがあります。しかし、2つの資料のテキストを並べて比較する手軽なツールは多くありません。

例えば、ある作品の校訂本と写本を比較する場合、以下のような作業が必要です：

  • 画像を並べて目視で比較する
  • テキストの差異を一文字ずつ確認する
  • どの程度類似しているかを定量的に把握する

これらを1つのツールで実現することを目指しました。

3つの比較モード

本ツールは、3つのモードで資料を比較できます。

1. 画像比較

OpenSeadragonを用いた高精細画像ビューアで、2つの資料の画像を左右に並べて表示します。ズーム・パン・回転に対応し、ページ送りも可能です。

2. テキスト差分（Diff）

IIIFマニフェストに含まれるテキストアノテーションを抽出し、文字単位での差分をハイライト表示します。追加箇所は緑色、削除箇所は赤色の取り消し線で表示されます。

3. 編集距離（Levenshtein Distance）

レーベンシュタイン距離に基づき、行単位でのテキスト類似度を算出します。結果はネットワークグラフとして可視化され、類似度の高い行同士がエッジで結ばれます。閾値スライダーにより、表示するエッジの最低類似度を調整できます。

技術スタック

カテゴリ技術
フレームワークNext.js（App Router / Static Export）
言語TypeScript
スタイリングTailwind CSS v4
UIコンポーネントRadix UI
画像ビューアOpenSeadragon
ネットワーク可視化vis-network
状態管理Zustand
国際化next-intl（日本語 / English）
差分検出diff

アーキテクチャ

データフロー

IfCZ各Ieou比I↓t↓m↓s↓較FcptコマhaaンニMrnポフaidーェnsネスioSントfntトUeVoがRsar消Ltle費(u・)e—描画——アプマ画リニ像ケフUーェRシスLョト群ン取、状得テ態・キとパスしートてス配保列持、メタデータ

fetchManifest()関数がIIIF Presentation API v3のマニフェストをパースし、各キャンバスの画像URLとテキストアノテーションを抽出します。抽出されたデータはZustandストアに格納され、各コンポーネントがリアクティブに参照します。

レーベンシュタイン距離の計算

独自実装のレーベンシュタイン距離アルゴリズムにより、左右のテキストの各行を総当たりで比較します。距離は 編集回数 / max(文字列長1, 文字列長2) で正規化し、0〜1のスケールに変換しています。パフォーマンスを考慮し、ネットワークグラフには類似度上位10本のエッジのみを表示します。

URLパラメータによる共有と埋め込み

比較結果はURLパラメータとして保持されるため、URLを共有するだけで同じ比較画面を再現できます。

https://iiif-text.vercel.app/ja/?manifest1=<URL>&manifest2=<URL>&canvas1=<URL>&canvas2=<URL>&label1=校異源氏物語&label2=近世前期横本写本&mode=1
パラメータ説明
manifest1 / manifest2IIIFマニフェストURL
canvas1 / canvas2特定のキャンバスURL（任意）
label1 / label2表示ラベル（任意）
mode表示モード: 0=画像, 1=差分, 2=編集距離
embed1で埋め込みモード

embed=1を指定すると、ヘッダーを省略したコンパクトな表示になり、iframeでの埋め込みに適した形で表示されます。

<i/fswhirriefacdirm=tgae"hhmh=tet"=>t1"p05s00:%0/"p/xi"i>if-text.vercel.app/ja/?manifest1=...&manifest2=...&embed=1"

静的サイトとしてのデプロイ

Next.jsのoutput: "export"を使用し、完全な静的サイトとして出力しています。サーバーサイドの処理が不要なため、Vercel、Netlify、GitHub Pagesなど任意の静的ホスティングサービスにデプロイ可能です。basePathの設定により、サブディレクトリへの配置にも対応しています。

使用例：源氏物語の写本比較

本ツールのデモでは、以下の2つの資料を比較しています。

  • 左 : 校異源氏物語（桐壺）
  • 右 : 近世前期横本写本（国立国会図書館所蔵）

テキスト差分モードでは、校訂本と写本の間の本文異同を視覚的に確認でき、編集距離モードでは、どの行が対応しているかをネットワークグラフで俯瞰できます。

おわりに

本ツールは、IIIFマニフェストにテキストアノテーションが付与された資料であれば、任意の2資料を比較できます。デジタルアーカイブにおける古典籍研究や、OCR結果の検証など、さまざまな場面での活用を想定しています。

ソースコードはGitHubで公開しています。フィードバックや機能要望をお待ちしています。