Miradorで画像を表示し、CETEIceanでテキストを表示するサンプルアプリ
概要 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 のページ遷移を実行します。 ...