TEI/XMLファイルを読み込み、Miradorで画像を表示し、CETEIceanでテキストを表示するサンプルアプリを作成しました。以下のURLからお試しいただけます。
デモサイト
https://nakamura196.github.io/ceteicean-mirador/
これまでにも、同様の機能を提供するアプリケーションを開発してきました。
今回は、HTMLとプレーンなJavaScriptのみを使用して実装する方法をご紹介します。
対象データ#
以下の校異源氏物語テキストDBを対象とします。
https://kouigenjimonogatari.github.io/
実装方法#
ソースコードは以下のリポジトリで公開しています。
https://github.com/nakamura196/ceteicean-mirador
実装のポイント#
1. CETEIcean の behaviors を利用した pb タグの処理#
以下のコードでは、CETEIcean の behaviors を利用して pb タグのクリック時の挙動を定義しています。
2. Mirador でのページ遷移処理#
pb タグをクリックした際に、TEI/XML ファイルから Canvas の URI を取得し、Mirador のページ遷移を実行します。
3. CETEIcean の CSS を利用#
テキストのスタイルは、CETEIcean が提供する CSS を利用しています。
まとめ#
本記事では、TEI/XML ビューアの開発手法の一例として、HTML とプレーンな JavaScript を使用した方法をご紹介しました。
今回のアプローチを参考にしつつ、Next.js などのフレームワークの活用や、ビューアを介さない XSLT の利用など、さまざまな方法を検討いただければ幸いです。