Ceteicean

概要 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 } f e , e a c c i } t c o o f [ c t n n . . . c ) c i } t h . s s r r t ( o ; o f e D u t t e e o t n x t n X n n t } t i a s p p L e s p e u P u s ( a ) a D t e r x l l o i t a i l a l t t r b b i ; r o a E a p a a w C t C l t l a g e l n g c の f w a c c e o r h o , h t r e h o l e ] 修 f X t e e r n e , n R a g t a c i t ) 正 e p h ( ( C t s t e r e E v k n E ; c a / / a e u e s g t l i : e l t t = ( s n l n u e E e o : e ( h [ e t t t l t l m r " m ( r A ( R R t E e e : c " e ) = a / - ) e = e . l m n e c n w , Z ; f f F e e t " n e t = " X a . d . I m n . s t n . > / p " - c o c R e t s m e t s T a " z u c u S n ) c o r e t { E t ) ] r u r T t r o " r y I h r m r _ { o t , " l / e e e O = l h , e t ( n n n R l " . e ? t t t D r I , b x 先 = ) . , E e n a t 頭 \ e R s t c [ の / { v E u o k 1 ス | a D l V g ] ラ \ l _ t i r / ッ [ u N . e o b シ | a O s w u o ュ $ t D i ( n d を ) e E n { d y 削 / ( _ g C [ 除 g T l o 1 , Y e l ] P N o / " E o r p t , d [ e e = 1 i V ] - a " / $ l y s 1 u e e " e l g ) l [ a o 2 s w 6 " 7 H ; ] t T " e M ; i L - E プ l レ e フ m ィ e ッ n ク t ス ; を 追 加 まとめ 他にも良い方法があるかもしれませんが、参考になりましたら幸いです。 ...

概要 TEI/XMLファイルを読み込み、Miradorで画像を表示し、CETEIceanでテキストを表示するサンプルアプリを作成しました。以下のURLからお試しいただけます。 デモサイト https://nakamura196.github.io/ceteicean-mirador/ 背景 これまでにも、同様の機能を提供するアプリケーションを開発してきました。 Next.js を使用した実装例 XSLT を使用した実装例 今回は、HTMLとプレーンなJavaScriptのみを使用して実装する方法をご紹介します。 対象データ 以下の校異源氏物語テキストDBを対象とします。 https://kouigenjimonogatari.github.io/ 実装方法 ソースコードは以下のリポジトリで公開しています。 https://github.com/nakamura196/ceteicean-mirador 実装のポイント 1. CETEIcean の behaviors を利用した pb タグの処理 以下のコードでは、CETEIcean の behaviors を利用して pb タグのクリック時の挙動を定義しています。 c } t ) . t } ; a e , d i g f p } d : r i b B a g : l i } c i } c p p } r e { 不 p u p e f o f o b b ) e h 要 h r b f t p n c p n . . c i } ; t a な i e タ u 属 ( b c s ( o b ペ s t ク a o f u v 要 c : グ n p 性 e . o t c n . ー t e リ d n c i } r i 素 : の c b を l s r o s s ジ x ッ d s ( o f n o を 処 t 引 . e r c r t e 番 p t ク E t z n c i } r 非 理 i = き h t e o r t 号 a C イ v o s ( o f p s 表 o 継 a A s r e z A を g o ベ e z n t z n g b ( 示 = n d ぐ s t p r s o t 表 e n ン n o e o s ( o ; { = > o A t 属 e p n t 示 N t ト t n I z n t s T > ( c t r 性 s ) e r u e を L e d o e u o d e u t i か p I i m n 追 i I ) n E s r P d o l m r b ら { d b t 加 s d e l u f a o c ) e i u z = u = t { E e r a g c u n b t o = t = e = l m f c e u m { t u e n e e e n e e a e ( m e . t ( e l c ( l ` e t m n c E s e n c e " I . o " . [ r h e t e l u n t r ( n d g r d g P ( i n ) E e r t . e " " を e r a e a " s t l m f . c a n , 取 t e t t g c . { e e a c r t " 得 A s a A e l g = m n c r e e ) e t p - t i e e t e e a E ) l t . z t $ c t d n E a t l . r r o r { k A o t & l t e e { g i e n i p " t c & e e D m e b p e b a , t u = m D o e t u l - u g r m s e o c n A t a i t e f i e z u n c u t t e c d e N u b n o r t u m ( t ( e " ( u n u t n f . m e " r " ( , " m c t . e a g e n t i c ' n } t e q E c e n t e b o # z " ] i ( u l e t t F i u r ' o ) ` o " e e E A F r - t r , n ; n d r m l t r a p e e e ( a y e e t a g b ( s I ) t S n m r g m " " p d a e t e i m e ) n " ) ) " { - l . n b e n ; " ) ; ; " z e c t u n t ) ; ; o c l . t t ( ) n t o h e ( ) ; e o s a ( ) , - r e s " , i ( s A s d ` t t a " t ( t m ) e " r e ; i t i A - e b s z i u " o - t ) n s e ) e u ( ; [ r " i f s d a a = c m " e e $ " A { ) s z ; " o ) n ) e I { d } " ] ` ) ; 2. Mirador でのページ遷移処理 pb タグをクリックした際に、TEI/XML ファイルから Canvas の URI を取得し、Mirador のページ遷移を実行します。 ...

概要 Next.js、CETEIcean、React TEI Routerを組み合わせたTEI/XMLビューアの開発についての備忘録です。 背景 CETEIceanは、TEI/XML を HTML5 に変換する JavaScript ライブラリです。 https://github.com/TEIC/CETEIcean そして、React TEI Routerは、CETEIcean をベースに React コンポーネントで TEI/XML を構造化して表示できるライブラリです。以下のように説明されています。 https://github.com/pfefferniels/react-teirouter TEI for React using CETEIcean and routes これらを組み合わせることで、Next.js において TEI/XML をカスタマイズして表示できるビューア を作成しました。 リポジトリ 以下がサンプルリポジトリです。 https://github.com/nakamura196/next-ceteicean-router 実際に動作するデモも用意しています。 https://next-ceteicean-router.vercel.app/ 実装 Next.js のページコンポーネント (page.tsx) CETEIcean を利用して XML を変換し、カスタムコンポーネントで描画します。 i i e } m m x p p p c r o o o o e r r r n < t t t t s T / u t E < T r R R d I t / E n e e e x e < t I a n f m x x b / e > < c d a l m t o < < b x ` R t e u C l > d d / d / o t ; e r l o n y i 私 d i < < d d > n f t n s > v の i v p p / i y d r f t = 名 v > p v > e o r f e " t 前 > s s > > r m o u n h y は t t m n t t p < y y x " c t e p l l m r " t = p = e e e l e @ i : " r = = C a / o ` / o s " " o c c n < / r N c c n t o ? w i a o o t " m A x w g m l l e ; p p m w i e o o n o p l . n r r t n ( t a c : : = e ) v e l o { n e i " r g g x t { r - > r r r m s s c e e e l / i . s e e C t o o p n n o e n r = ; ; n i = g " " " t " " / # > > e ; 1 n i こ こ n . s d ん ん t 0 / 1 に ば } " 1 " ち ん . > は は e 0 田 < > n " 中 / < ; c > 太 p s o 郎 > e d < g i / n p s g e t = r y " s l U N e T a = F m " - e c 8 > o " で l ? す o > 。 r : b l u e ; " > x x x < / s e g > TEIレンダリングコンポーネント CETEIcean を使って XML を HTML5 に変換。 TEIRender + TEIRoute を使い、TEI 要素ごとにカスタムコンポーネントを適用。 import { TEIRender, TEIRoute } from "react-teirouter";を使用した上で、要素毎にコンポーネントを用意しています。 ...

概要 CETEIceanとNuxt3を使ったサンプルリポジトリを作成しました。 https://github.com/TEIC/CETEIcean 以下のissueを参考にさせていただきました。 https://github.com/TEIC/CETEIcean/issues/27 以下で紹介されているスクリプトでは、CETEIceanのv1.8.0では動作しなかったため、CETEIceanのv1.8.0とNuxt3で動作する最小限のリポジトリを作成しました。 デモページ https://nakamura196.github.io/ceteicean-nuxt3 ソースコード https://github.com/nakamura196/ceteicean-nuxt3 主なファイル https://github.com/nakamura196/ceteicean-nuxt3/blob/main/app.vue まとめ 参考になりましたら幸いです。またCETEIceanを開発してくださっている方々に感謝いたします。

概要 Raffaele Vigliantiさんが作成されたGatsby CETEIceanを試してみました。 https://github.com/raffazizzi/gatsby-ceteicean-workshop 試作サイト 以下が試作したサイトです。MUIの追加や、縦書き表示、RDFデータへのリンクなど、いくつかのカスタマイズを加えています。 https://nakamura196.github.io/gatsby-ceteicean-workshop/ データとして、以下の「校異源氏物語テキストDB」のTEI/XMLファイルを使用しています。 https://kouigenjimonogatari.github.io/ ソースコード カスタマイズ内容を含むソースコードは以下でご確認いただけます。 https://github.com/nakamura196/gatsby-ceteicean-workshop まとめ Gatsby CETEIceanを用いることで、TEI/XMLファイルの公開環境を効率的に開発することができそうです。 参考になりましたら幸いです。