はじめに#
東アジアの古典籍をデジタル化する際、TEI（Text Encoding Initiative）ガイドラインに準拠したXMLでマークアップすることが一般的になっています。一般財団法人人文情報学研究所が開発した「TEI古典籍ビューワ」は、このようなTEI/XMLファイルをブラウザで簡単に表示できる便利なツールです。
今回、このビューワをカスタマイズして、判読不能箇所を示す<gap>タグの表示に対応しました。本記事では、そのカスタマイズ方法を紹介します。
課題：gapタグが表示されない#
古典籍のデジタル化において、虫損や破損などにより判読できない箇所は<gap>タグでマークアップします。
しかし、標準のTEI古典籍ビューワでは、このタグが適切に表示されません。そこで、判読不能な文字数分の黒四角（■）を表示し、マウスホバーで理由を確認できるようにカスタマイズしました。
カスタマイズの方針#
TEI古典籍ビューワは以下のファイル構成になっています。
app.min.jsを直接編集すると、本体のアップデート時に変更が失われてしまいます。そこで、app_conf.jsのみを編集することで、本体との互換性を保ちながらカスタマイズを実現しました。
実装方法#
1. MutationObserverによるDOM監視#
TEI古典籍ビューワはXMLをパースしてDOMに変換します。この変換後のタイミングで<gap>タグを処理するため、MutationObserverを使用してDOM変更を監視します。
2. gapタグの処理#
<gap>タグを検出したら、quantity属性の値に応じて黒四角を表示し、reason属性をツールチップとして設定します。
ポイント：属性の取得方法#
TEI古典籍ビューワがXMLをHTMLに変換する際、属性の扱いは要素によって異なります。<gap>タグの場合、XML属性がそのまま保持されるため、getAttribute()で直接取得できます。
実際のDOM構造をブラウザの開発者ツールで確認することが重要です。
追加カスタマイズ#
同様の手法で、以下の機能も追加しました。
GETパラメータによる高さ指定#
テキスト表示部の高さをURLパラメータで指定できるようにしました。
ページタイトルの設定#
TEI/XMLに複数の<title>要素がある場合、1つ目のタイトルをページタイトルに設定します（デフォルトでは最後のタイトルが使用されます）。
書誌情報（sourceDesc/bibl）の表示改善#
<sourceDesc>内の<bibl>要素を見やすく整形するため、CSSで各要素にラベルを付けてブロック表示にしました。
これにより、以下のような見やすい表示になります：
まとめ#
TEI古典籍ビューワは、設定ファイルapp_conf.jsを編集することで柔軟にカスタマイズできます。今回紹介したMutationObserverを使った手法は、他のTEIタグへの対応にも応用可能です。
カスタマイズしたコードは以下のリポジトリで公開しています。
参考リンク#
TEI古典籍ビューワを開発・公開されている永崎研宣氏（一般財団法人人文情報学研究所）、本間淳氏（フェリックス・スタイル）に感謝いたします。