Miradorで画像を表示し、CETEIceanでテキストを表示するサンプルアプリ

概要

TEI/XMLファイルを読み込み、Miradorで画像を表示し、CETEIceanでテキストを表示するサンプルアプリを作成しました。以下のURLからお試しいただけます。

デモサイト

https://nakamura196.github.io/ceteicean-mirador/

背景

これまでにも、同様の機能を提供するアプリケーションを開発してきました。

• Next.js を使用した実装例

https://zenn.dev/nakamura196/articles/a959b7bda6d4da

• XSLT を使用した実装例

https://zenn.dev/nakamura196/articles/d0e74f0e3fc547

今回は、HTMLとプレーンなJavaScriptのみを使用して実装する方法をご紹介します。

対象データ

以下の校異源氏物語テキストDBを対象とします。

https://kouigenjimonogatari.github.io/

実装方法

ソースコードは以下のリポジトリで公開しています。

https://github.com/nakamura196/ceteicean-mirador

実装のポイント

1. CETEIcean の behaviors を利用した pb タグの処理

以下のコードでは、CETEIcean の behaviors を利用して pb タグのクリック時の挙動を定義しています。

ct.addBehaviors({
  tei: {
    // 不要な要素を非表示
    graphic: () => document.createDocumentFragment(),
    figure: () => document.createDocumentFragment(),
    
    // pbタグの処理
    pb: function (el) {
      let pb = document.createElement("tei-pb");
      
      // 属性を引き継ぐ
      if (el.hasAttribute("n")) {
        pb.setAttribute("n", el.getAttribute("n"));
      }
      
      // corresp属性からzoneIdを取得
      const corresp = el.getAttribute("corresp");
      if (corresp) {
        const zoneId = corresp.replace('#', '');
        pb.setAttribute("data-zone-id", zoneId);
      }
      
      // ページ番号を表示
      const pageNum = el.getAttribute("n") || "";
      pb.textContent = `[Page ${pageNum}]`;
      
      // クリックイベントを追加
      pb.addEventListener("click", function() {
        const zoneId = this.getAttribute("data-zone-id");
        if (zoneId) {
          const zoneElement = document.querySelector(`tei-zone[id="${zoneId}"]`);
          if (zoneElement) {
            const surfaceElement = zoneElement.closest("tei-surface");
            if (surfaceElement && surfaceElement.hasAttribute("sameAs")) {
              goToPage(surfaceElement.getAttribute("sameAs"));
            }
          }
        }
      });

      return pb;
    }
  },
});

2. Mirador でのページ遷移処理

pb タグをクリックした際に、TEI/XML ファイルから Canvas の URI を取得し、Mirador のページ遷移を実行します。

// Miradorインスタンスを格納する変数
let miradorInstance;

// ページ遷移関数
function goToPage(canvasUri) {
  if (miradorInstance) {
    miradorInstance.store.dispatch(
      Mirador.actions.setCanvas('window-1', canvasUri)
    );
  }
}

3. CETEIcean の CSS を利用

テキストのスタイルは、CETEIcean が提供する CSS を利用しています。

<link rel="stylesheet" href="https://teic.github.io/CETEIcean/css/CETEIcean.css" />

まとめ

本記事では、TEI/XML ビューアの開発手法の一例として、HTML とプレーンな JavaScript を使用した方法をご紹介しました。

今回のアプローチを参考にしつつ、Next.js などのフレームワークの活用や、ビューアを介さない XSLT の利用など、さまざまな方法を検討いただければ幸いです。