はじめに IIIFビューアのMiradorには検索機能があり、IIIF Search APIに対応したマニフェストでは検索結果をハイライト表示できます。しかし、Search APIに非対応のマニフェストでも、任意の領域をハイライト表示したいケースがあります。
本記事では、Miradorの内部APIを利用して、外部データソースからのアノテーション情報を基にハイライト表示を実現する方法を紹介します。
デモ Highlight Generator Form - フォームからハイライトを生成 ユースケース 独自のOCRシステムで抽出したテキスト領域のハイライト 機械学習で検出したオブジェクトの領域表示 外部データベースに保存されたアノテーションの可視化 Search API非対応のIIIFサーバーでの検索結果表示 実装方法 基本的な仕組み Miradorは内部でReduxを使用しており、receiveSearchアクションを通じて検索結果を登録できます。このアクションにIIIF Search API形式のJSONを渡すことで、任意のデータソースからのハイライトを表示できます。
必要な情報 ハイライトを表示するために必要な情報は以下の3つです：
キャンバスURI - ハイライトを表示するページのURI 座標（xywh） - ハイライト領域の位置とサイズ（x, y, width, height） テキスト - ハイライトに関連付けるテキスト（検索パネルに表示される） サンプルコード 以下は、国立国会図書館デジタルコレクションの源氏物語で「いつれの御時にか…」の冒頭部分をハイライト表示するサンプルです。
< < < < ! h h / b / / D t e < < < < h o < < < b h O m a m m t s / e d d s s / o t C l d e e i t b # s a y i c c c } c } f } l c } s d m T > t t t y o m t d > v r r o ; o ) u e o ) c y l Y l a a l l d i y > i i n m c h ] n i s l w } w } w } ; n c } c } v c c ) i } t n i c c c i } ; r > > P a e e y r l i p p 設 s a a i , M s d e a i ] i , o , ハ c o ; o ) i o o ; f マ s f o o o f i E n c n > > a e d t t 定 t n n g { } i t : l n n i m c t , n a a a s r e イ t n ' ' ' w } r } n c p ; e n n i c ) v ニ h t n n n h u a p g h a M { d > = > パ i v h , r e g d d a a h d l l l i k n ラ i I s @ @ @ i , e ) 検 s o o w c s s d ( o ; i フ i ( s s s マ ( i n d t h = a m i o " s ラ c f a l x t a m ' c u o : n n u o l l l d s a イ o I t c i t t ' t s ' ' m r } o ) 索 t n s e o t t s n ' s c s e ェ g u h t t t ニ m g s d > t " r e r m r m r メ o e s i y e d i m t a w i v m w o o o e p b ト n I o d y h @ o o @ @ o e , n , パ t i r m = e 検 s w e a e w ス h n i フ a h u H m j s = a a - i c ー n s I g w x o r i e g s ' f a b : w w w B a l を F s n ' p i t t u i t t s ' c : ネ a e t . p s s > a 索 t i a n a e ト l s g s m m ェ n l b i l a e " d r v r = タ f t d h h t r a r d e : w e s n F C M a c e 追 a e t : e n y a r d y i o @ h ル d n i s a t e r 結 n r v r r の i u h t a a ス i i s g > " t v o g i a " i U : t : : を d a T : i s I a { u l a r e d 加 d S a e ' : p l c ' p v u t a c を d t o t n a a s c 果 s d c a c . 読 g b l a n n ト f g c h > = i r i e d h g r s 初 o d h [ n t d i l o x O C : す d e r x c : e : e : e a r y r a 右 A : n o i t r t h を e o h s h s み h s i t i i が e h r l " e n w o t l ' : ' ' 期 r o e ' { d I : l l s i p o る H a c t a { ' s ' t c p s n 側 c : r o e c a C 登 a w C I R t 込 t c g e f f 読 s t i i U w C : e r t = : h 3 い 化 V r m j o d N s e m e n f 関 i r h ' n ' : h : c : i e e : v に t ' e n h t o 録 r - o d e o み A r h e e み t A b g T p u r - p t [ 0 つ i - e a w : c a c : i n t a 数 g c R : v s i a o : ' a 追 i s ' . W = C e m c 1 m s r 完 d i t = s s 込 d e h F o s 0 v s { ' t 9 れ e v : ' - o v r z : r l h h e a c ' g h n n : h s 加 o e r d i o . p h ' p + p e 了 d b A t t み & d ( t - r t ; { i : h p 5 の w i , 1 c n i e f e o s l s ' s : s h i v o : { i I n a i i n v m c a A , a o . を e e d m s 完 & e ) s 8 t o e / t s , 御 e e ' ' o f g e a : t l e i A p h I A c l g a a ' g d r g s d i p o n c n n d 監 d d i = 了 d ; ( " " m p w w / t : 6 時 r w l , n i a n l r P , g P o t d n : i h s : ' c h = c h p o e a m i t i s i 視 = e r = し ! m > a i e u p / 9 に e i f g t : s f u a h I n t n L g l I A s n l + h t a w w n p o i s e s し = d a m た m = i c H d d r n s / 4 か = r g i . i e a e n t 形 s p + o a h i d n c t i M ' ' t I e i a n o n e p て m ) d s a ら a r o i d t " p : d , 女 ' h g c o t , l , e s 式 e : t y t g n : : g ' i , , c d r o n W n W a a ハ f i o t n ハ n t a n g i h > k / l 9 御 M , t . a n r s l ( の / a e s h + o p C h # r h を . n i i i r t イ a r r r a i イ i r d t h n : < g / . 7 更 i ' m n P u e : v レ = / t r . t t a o t x a ( 取 s W o n = n c c ラ l a e V t f ラ f u o e l g / . d n , 衣 r , a v o e , i ス i s i ' l s a i n . y d a 得 t i n d d h h イ s d t i e e イ e e r n i : 1 d c l d 2 あ a n a s , { e ポ { i e o , e . / t n t t w o d o n W o M o ' ( ト e o u e . s ト s ; V t g 0 i o . l 0 ま d i s i w ン i a n n m h i t e e h r d r d i w i w , s を ; r r w m t を t i = h 0 0 v m n . 5 た o f I t e ス f r L g a i o i n x = . A e o n I r I e 追 V n e a s 追 . e " t ; % > / d g 1 さ r e d i r を . c i t p g n n t t ' a c . w d d a d a 加 i ; r n [ 加 i w w ; m l o ' ふ . s , o , 構 i h s h ( h ' g A , d t g I o ) d , r e . i c s e i S } i . . , ら v t n 築 o ' t , ( l , ' s + d i e d w o c w s f o F r d a h r g j ひ i U : c , ' h i , T C o t s { r h e t e n e , t m e a o p 給 e r a a , i g e h o n S = [ . A r o s f t h p i d . / け w l ' n p g h x i m ) t i r c . r t i c c = l g o j a る e , f v i h t t g p ; a O d e t s e s g h o d e h r p p な r a a / l ' h a t b ] c i t . . i n e < t @ / i か ( r s s i , l n e j . e o o g m n f v / : 4 a / に { - I e g i i ( e c i n r e a g i i t . p i い r d a h + g o ) c o v ) e t n g c i 1 0 i i と i , r t h n ; t n e ; . S { i & . e t 0 . / i や g c , i t W . t S s t } f & c - l 0 0 i f む h h h n . i k e e u a ; e a w e v - i / こ t i / i d x n e n a b t s m n i > h a i 3 と ' g 1 n e y d y t r s e t a v d ; l f 4 な , h / d x w o s c c ( U n a t p / 3 き l c e , h w ( = h r ) r i s h } h 3 7 ゝ i o x , ( s = ( i ; l f I , a 4 6 は g n ) ' t = b ] e d . 3 8 ' h t w a e ; s , i 1 7 6 , t e = i t ' ( t n 5 6 / s x > n e s ( . c i / 8 c ) t d . e ) j o t d 6 a . ( o c a s n i i / n { j { w o r = o f a s m v s - m c > n i l t a a o 1 p h ) g - / n s n ' a ' { . s m i / ' , n { h c i f 2 , i i a r e 2 { o g l a s ' n h e d t , W l = o . i i 1 r j n g . . s d h 0 m o o t " i n w s > n ' s ) . , ) ; j . s f " i > n < d / ( s c r i p t > コードの解説 1. 設定パラメータ c } o ; n m c h ] s a a i , t n n g { } i v h , c f a l x t o e s i y e n s I g w x f t d h h t i U : t : : g r s l ' : ' ' = : h 3 い t [ 0 つ { ' t 9 れ h p 5 の t s , 御 t : 6 時 p / 9 に s / 4 か : d , . / l 9 . / . 7 . d n , ' l d 2 , . l 0 n . 5 d g 1 l o ' . . , g j o p . / j a p p / i a / p i i i / i i f i / i 3 f 4 / 3 3 7 4 6 3 8 7 6 6 / 8 c 6 a / n m v a a n s i / f 2 e 2 s ' t , . j s o n ' , manifestUrl: IIIFマニフェストのURL canvasId: ハイライトを表示するキャンバスのURI highlights: ハイライト情報の配列。複数のハイライトを追加可能 2. IIIF Search API形式のレスポンス構築 c } o ; n ' ' r } s @ @ e ) t c t s ' m r } o ) o y o @ o e , n , s n p u t t s ' c : e t e r y i o @ h a e ' c p v u t a c r x : e e a r y r a c t s ' t c p s n h ' ' : : i e e : v R : s o : ' a e c h n : h s s ' : i o : { i I p h A g a ' g d o t n h : ' c h n t n l A s n l + s p o i n c t i e : t g n : : g ' / a h o p C h # = / t t t a o t x i i s a i n . y { i o . t n t t w i n m i t e e h f L a o i n x = . i p n n t t ' i s ( ' g A , o t ( , ' s + / ' h , T a , i e h p g x i i h t g / l ' h s i , l e g i a h g r t h c , t h . / i x 1 n y / d w c e h o x , n ) t e = x > t . ( j { s o n ' , ポイントは on プロパティで、キャンバスURI#xywh=x,y,width,height の形式でハイライト領域を指定します。
...