XSLTを使ってIIIFとTEIの対照表示を実現する
概要
XSLTを使ってIIIFとTEIの対照表示を実現してみる機会がありましたので、備忘録です。
結果は以下からご確認いただけます。「校異源氏物語テキストDB」を利用しています。
背景
TEI/XMLの可視化にあたって、これまでは、TEI XMLをHTMLに変換してブラウザ上で表示するためのJavaScriptライブラリであるCETEICeanを使うことが多かったです。
これらの取り組みではJavaScriptのフレームワークと合わせて、柔軟な開発が可能でした。
しかし、この方法ではTEI/XMLとは別に、ビューアのデプロイが必要であるなど、課題を感じる点もありました。
対策
そこで、XSLTを使ったIIIFとTEIの対照表示に取り組みました。以下のXSLファイルを用意しました。実装にあたっては、ChatGPTを利用しました。
そして、XMLファイルからは、以下のように参照します。相対パスとなっている点は、適宜読み替えてください。
<?xml version="1.0" ?>
...
<?xml-stylesheet type="text/xsl" href="../../xsl/mirador.xsl"?>
<TEI xmlns="http://www.tei-c.org/ns/1.0">
<teiHeader>
<fileDesc>
<titleStmt>
<title>校異源氏物語・きりつぼ</title>
<author>池田亀鑑</author>
...
これにより、以下のようなXMLファイルをブラウザで表示すると、
https://kouigenjimonogatari.github.io/xml/xsl/01.xml
以下のように、IIIFとTEIの対照表示を実現することができました。ページのリンクやMiradorビューアの前後ボタンのクリックにより、テキストと画像が同期します。
このようにXSLTによる可視化を行うことにより、別途のビューア開発やデプロイが不要となり、またxslファイルの更新による容易なカスタマイズを実現することができました。
考察
Next.jsのようなフレームワークとCETEIceanを組み合わせてビューアを作成する方法と、本記事で紹介したようなXSLTを使った可視化方法について、ChatGPTに使い分けを聞いてみました。
結果、以下のように、比較的単純な可視化ではXSLT、高度なインタクラションが求められる場合はCETEIcean、を選択するのがよさそうでした。
1. 高度なインタラクションが必要な場合: Next.js + CETEIcean
- Next.jsはReactベースのフレームワークで、クライアントサイドレンダリングやサーバーサイドレンダリング、APIの統合などを柔軟に行えます。Next.jsを使うと、複雑なUIや状態管理、ナビゲーション、動的なデータ処理が必要なアプリケーションの構築が簡単です。
- CETEIceanは、TEI XMLをそのままHTMLにレンダリングするためのライブラリで、特にクライアントサイドでTEIを動的に表示したい場合に便利です。CETEIceanを使うと、JavaScriptを使ってTEI要素を直接操作できるため、ユーザーがクリックした際に特定のページに遷移したり、アノテーションの追加など、インタラクティブな機能を実装できます。
-
利点:
- リッチなインタラクション（ページナビゲーション、フィルタリング、ユーザーの操作に応じた動的なUIの更新など）が容易。
- コンポーネントベースの設計が可能で、保守性が高く再利用性も高い。
- さまざまなJavaScriptライブラリやプラグイン（Mirador、Annotoriousなど）との統合が容易。
2. 単純な表示や静的な構造でよい場合: XSLT
- XSLTは、XMLデータをHTMLなどに変換するためのテンプレート言語で、サーバーサイドまたはクライアントサイドでの静的な表示に適しています。XSLTを使用すると、TEI XMLをシンプルなHTMLとして表示できます。
-
利点:
- 軽量で設定がシンプル。ブラウザがXSLTをサポートしていれば、特別な環境を必要とせずに、直接HTML表示が可能。
- HTMLとして生成されるため、CSSによるスタイルの適用が容易で、簡単なナビゲーションや静的なページリンク程度なら実装も比較的簡単。
- 静的なレポートや閲覧専用のデータの表示に最適。
判断基準のまとめ
-
高度な機能やインタラクティブな要素が求められる：Next.js + CETEIcean
- 例：クリックやスクロールに応じて動的にデータをロード、複数のナビゲーションや検索機能の提供、アノテーションや画像ビューワーの統合。
-
単純な表示がメイン：XSLT
- 例：TEIドキュメントをただ表示するだけ、特定の要素にスタイルを適用して閲覧しやすくする、シンプルなページナビゲーション。
まとめ
ビューアを使用せずに、TEI/XMLファイルとXSLファイルのみで閲覧環境を実現することは、管理や運用コストの低減にもつながるように思いました。
XSLTによってIIIFとTEIの対照表示を実現される際などには、今回紹介したXSLファイルを適宜カスタマイズしてご使用いただけますと幸いです。
TEI/XMLの導入・利用にあたり、参考になりましたら幸いです。
Discussion