はじめに

以前の記事で、DOCX → TEI/XML 変換ツールを紹介しました。TEI Garage API を使ってブラウザだけで Word 文書を TEI/XML に変換できるツールです。

公開後、利用者の方から「変換されたタグが想定どおりに機能するかを視覚的に確認したい」というフィードバックをいただきました。XML のシンタックスハイライト表示だけでは、見出し・注釈・リスト・テーブルなどが実際にどのようにレンダリングされるか確認が難しいためです。

そこで、CETEIcean を使った TEI プレビュー機能を追加しました。

デモサイト: https://tei-converter.pages.dev/

CETEIcean とは

CETEIcean は、TEI Consortium が開発している JavaScript ライブラリです。TEI/XML を HTML5 カスタム要素（Custom Elements） に変換し、ブラウザ上でそのまま表示できます。

通常、TEI/XML をブラウザで表示するには XSLT で HTML に変換する必要がありますが、CETEIcean は Web Components の仕組みを利用して、TEI の要素名をそのままカスタム要素として登録します。例えば <p> は <tei-p> に、<head> は <tei-head> に変換されます。

これにより、CSS だけで TEI 要素のスタイルを定義でき、サーバサイドの変換処理が不要になります。

追加した機能

XML / プレビュー タブ切り替え

変換結果の表示エリアに 「XML」と「プレビュー」の2つのタブを追加しました。

  • XML タブ: 従来どおりのシンタックスハイライト付き XML 表示
  • プレビュータブ: CETEIcean によるレンダリング結果

タブをクリックするだけで切り替えられます。

TEI 要素の視覚的レンダリング

プレビュータブでは、以下のような TEI 要素を視覚的にレンダリングします。

TEI 要素表示
<head>見出し（階層に応じたフォントサイズ）
<p>段落
<hi rend="bold">太字
<hi rend="italic">斜体
<list> / <item>リスト（箇条書き・番号付き）
<table> / <row> / <cell>テーブル
<note>注釈（ホバーでポップアップ表示）
<titlePage>タイトルページ（中央揃え）
<pb>ページ区切り
<teiHeader>非表示（メタデータ部分）

注釈のポップアップ表示

<note> 要素は上付きの番号として表示され、マウスホバーすると注釈内容がツールチップ風にポップアップ表示されます。これにより、注釈タグが正しく機能しているか視覚的に確認できます。

技術的なポイント

CETEIcean の組み込み

CETEIcean は CDN から読み込んでいます。

<script src="https://cdn.jsdelivr.net/npm/CETEIcean@1.9.5/dist/CETEI.js"></script>

変換結果の XML 文字列を makeHTML5() メソッドに渡すだけで、HTML5 カスタム要素に変換されます。

function renderTeiPreview(xmlString) {
  teiPreview.innerHTML = '';
  const ct = new CETEI();
  ct.makeHTML5(xmlString, function(data) {
    teiPreview.appendChild(data);
  });
}

CSS によるスタイリング

CETEIcean が生成するカスタム要素は tei- プレフィックス付きの要素名になるため、CSS セレクタで直接スタイルを定義できます。

.tei-preview tei-head {
  display: block;
  font-weight: bold;
  margin: 1em 0 .5em;
}
.tei-preview tei-body > tei-div > tei-head { font-size: 1.5em; }
.tei-preview tei-div > tei-div > tei-head { font-size: 1.3em; }

注釈のポップアップも CSS だけで実装しています。

.tei-preview tei-note::before {
  content: "[" attr(n) "]";
  vertical-align: super;
}
.tei-preview tei-note:hover > * {
  display: block;
  position: absolute;
  background: #1d1d1f;
  color: #fff;
  /* ... */
}

ファイル分割

元々は単一 HTML ファイルでしたが、プレビュー機能の追加に伴い CSS や JavaScript のコード量が増えたため、以下の3ファイルに分割しました。

  • index.html — HTML 構造のみ
  • style.css — 全スタイル（基本 UI + TEI プレビュー用）
  • app.js — JavaScript（変換・プレビュー・UI ロジック）

おわりに

CETEIcean を使うことで、サーバサイドの XSLT 変換なしに TEI/XML のプレビュー機能を実現できました。変換結果の XML コードとレンダリング結果を並べて確認できるため、タグが想定どおりに機能しているかを素早くチェックできます。

ぜひサンプルファイルで試してみてください。

https://tei-converter.pages.dev/