概要

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」から取得することができました。

スクロールの実装

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

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

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

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

R}fe,eacci}tcoof[ctnn...c)ci}th.ssrrt(o;ofeDutteeotnxtnXnnt}tiasppLespeuPus(a)aDterxlloitailalttrbbi;roaEapaawCtCltlagelngcfwacceorho,htrehole]fXteerne,nRagtacit)eph((CtstereEvknE;ca//aeuesgtli:eltt=(snlnueEeo:e(h[etttltlmr"m(rA(RRtEee:c"e)=a/-)e=e.lmnecnw,Z;ffFeet"net="Xa.d.Imn.stn.>/p"-cocRetsmetsTa"zucuSn)coret{Et)]rurTtro"ryIhrmr_{ot,"l/eeeO=lh,et(nnnRl".e?tttDrI,bx=).,Eenat\eRstc[/{vEuok1|aDlVg]\l_tir/[uN.eob|aOswuo$tDi(nd)eEn{dy/(_gC[gTlo1,Yel]PNo/"Eorpt,d[ee=1iV]-a"/$lys1uee"elg)l[ao2sw6"7H;]tT"eM;iL-Element;

まとめ

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