CETEIceanとXPathを使って特定の要素にスクロールする

概要

CETEIceanとXPathを使って特定の要素にスクロールする方法を調べたので備忘録です。

デモ

以下のURLからお試しいただけます。

https://next-ceteicean-router.vercel.app/xpath/

ページにアクセス後、スクロールし、以下のように表示されます。

XPathの取得

上記では、以下の「校異源氏物語テキストDB」のXMLファイルを対象にしています。

https://kouigenjimonogatari.github.io/tei/01.xml

そして、以下のXPathを指定しています。

/TEI/text[1]/body[1]/p[1]/seg[267]

このXPathの取得にあたっては、Oxygen XML Editorを用いて、対象要素を右クリックして、「Copy XPath」から取得することができました。

スクロールの実装

以下で紹介したアプリをベースにします。

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

GitHub上のソースコードは以下です。

https://github.com/nakamura196/next-ceteicean-router/blob/main/src/components/xpath/Render.tsx

特に以下の部分で、XPathをCETEIceanによって作成される要素名に変換し、scrollIntoViewによってスクロールしています。

// fetchDataの修正
  React.useEffect(() => {
    const rawXpath = "/TEI/text[1]/body[1]/p[1]/seg[267]";

    const xpath = rawXpath
      .replace(/^\//, "") // 先頭のスラッシュを削除
      .replace(/([A-Za-z]+)(?=\/|\[|$)/g, "tei-$1") // tei-プレフィックスを追加
      .toLowerCase();

    if (teiContentRef.current) {
      const result = document.evaluate(
        xpath,
        teiContentRef.current,
        null,
        XPathResult.FIRST_ORDERED_NODE_TYPE,
        null
      );

      const targetElement = result.singleNodeValue as HTMLElement;
      if (targetElement) {
        targetElement.scrollIntoView({
          behavior: "smooth",
          block: "center",
          inline: "center",
        });
        targetElement.style.backgroundColor = "yellow";
      }
    }
  }, [teiDoc]);

まとめ

他にも良い方法があるかもしれませんが、参考になりましたら幸いです。