Mirador

背景 Mirador は IIIF 対応の画像ビューアで、複数の IIIF マニフェストを並べて比較閲覧できる。複数機関が公開するマニフェストを一画面に並べて表示する際、各ウィンドウのタイトルにはマニフェストの label がそのまま表示される。 しかし、自プロジェクト独自の名称をウィンドウタイトルとして表示したいケースがある。例えば、マニフェストの label が個別の冊次情報を含む長い文字列であるのに対し、資料群を示す短い名称で表示したい場合などである。 制約：マニフェストの中身は変えてはいけない 他機関が公開している IIIF マニフェストを読み込んで表示する以上、その中身を改変して表示することは避けたい。fetch のインターセプトや Mirador 内部状態の書き換えでマニフェスト JSON の label を差し替える方法もあるが、これは実質的にマニフェストの改変にあたる。 変更すべきは Mirador が画面上に描画したウィンドウのタイトル表示（DOM）だけ であり、マニフェストのデータ自体はオリジナルのまま保持したい。 試したアプローチと結果 1. Mirador.actions.receiveManifest による内部状態の書き換え s } t ) o v i } ; M r a f i e r v u s r . ( v a p t a s s m e r d o d u t a r a r o b a n r u t e r s t i i p e . c e f d d d d の r e d a J i i = s e t s s s b t n e o p t e s s [ d n a o ( t [ m J . t r f o m a s l c e u r a n o a h n e n i n b ( を c . i f e M 監 t g f e = l i 視 i e e s r し o t s t J = a 、 n S t I S d マ t I d O c o ニ a d ] N u r フ t ] . s . ェ e = p t a ス { ( & a o c ト ) & t r m t 読 ; r s T i み m u e i o 込 a e ( t n み n ; J l s 後 i S e . に f O ; r e N e l s . c a t s e b s t i e [ r v l m i e a n M を n g a 書 i i n き f f i 換 e y f え s ( e t m s I a t d n ( ] i m . f a j e n s s i o t f n s e [ s & m t & a I n d ! i , o f v e u e s p r t d r I a i d t d ] e d . d e j J n s s [ o o m n n a ) ) n ) ) i ; ; f e s t I d ] ) { 結果：動作しない。 unpkg から配信される Mirador 4 の UMD ビルドでは Mirador.actions が undefined であり、この API は利用できなかった。 ...

IIIF画像の表示に Mirador ビューアを使用する方法について説明します。 参考実装 埋め込み方式は、Stanford University Libraries の Stanford Digital Repository を参考にしています。書誌情報の上部にビューアを埋め込み、メタデータと画像を同一ページで閲覧できるようにしています。 ファイル構成 a ├ │ ├ │ └ p ─ ─ ─ p ─ ─ ─ s / p └ s └ . w u ─ r ─ e e b ─ c ─ n b l / v / i i c M . c n o i l / d m r o m e p a c i x o d a r . n o l a h e r d t n V o m t i r l s e / / w i e t r e . m t / s x # # # M 埋 環 i め 境 r 込 変 a み 数 d コ 設 o ン 定 r ポ ー ビ ネ ュ ン ー ト ア 本 体 URLパラメータ /mirador/index.html は以下のURLパラメータを受け付けます： ...

はじめに IIIFビューアであるMiradorの最新版（Mirador 4）に対応した回転プラグイン「mirador-rotation」を開発し、npmで公開しました。本記事では、プラグインの開発から公開、そして実際に利用するための統合方法について解説します。 背景 Mirador 3からMirador 4へのメジャーアップデートに伴い、以下の変更がありました： React 16 → React 18 Material-UI v4 → MUI v7 その他多数の依存関係の更新 これにより、既存のMirador 3用プラグインはそのままでは動作しなくなりました。 mirador-rotation-pluginの開発 リポジトリ https://github.com/nakamura196/mirador-rotation-plugin 主な機能 画像の回転機能 Mirador 4のプラグインメニューへの統合 npmへの公開 開発したプラグインはnpmで公開しています： n p m i n s t a l l m i r a d o r - r o t a t i o n mirador-integrationの更新 公式のmirador-integrationリポジトリを参考に、Mirador 4対応の統合環境を構築しました。 主な変更点 項目 旧 新 Mirador 3.x 4.0.0 React 16.14.0 18.x ビルドツール Webpack Parcel UI Material-UI v4 MUI v7 package.json 最小限の依存関係で構成しています： ...

背景 mirador-annotations は、IIIF ビューア Mirador にアノテーション機能を追加するプラグインです。 従来のプロジェクトは以下の構成でした： ビルドツール : nwb (Create React App ベース) UI ライブラリ : Material-UI v4 Mirador : 3.x React : 17.x しかし、以下の問題が発生していました： nwb のメンテナンス停止 - nwb は長期間更新されておらず、依存関係の競合が頻発 npm install の失敗 - 古い依存関係により、新しい環境でのセットアップが困難に セキュリティ脆弱性 - 古いパッケージに多数の脆弱性警告 これらの問題を解決するため、以下への移行を決定しました： ビルドツール : Vite UI ライブラリ : MUI v7 Mirador : 4.x React : 18.x 移行作業の概要 1. ビルドツールの移行 (nwb → Vite) nwb の設定ファイルを削除し、vite.config.js を新規作成しました。 主なポイント： e } x ) p c r } ; v o o e ; i r n t d } r } t t s u e , e , e t r f g s d ] . d n d i l 重 o e , c e e r n o 複 l d ' ' ' ' o f n { a e b パ v u @ @ r r n a v f : a ッ e p e e e e f u t l ケ : e m m a a i l = - { : ー : o o c c g t j ジ { t t t t . l s ' の [ i i ' - j d o g 解 o o , d s e a が l 決 n n o f d o / / m i E g b r s ' n n l a e t , e v o l a y C ( b T c l o m a h t e n o l i ' d f d s , ' i e を ' , g , 参 , ( 照 ( p す { r る o た m c め o e d s e s . } c ) w d = ( > ) , { ) ; 2. Material-UI の移行 (v4 → v7) @material-ui/* を @mui/* に変更 makeStyles を sx prop に置き換え Grid コンポーネントの API 変更に対応 (item と xs props が size に統合) < < G G r r 変 i 変 i 更 d 更 d 前 後 i s ( t ( i M e M z U m U e I I = x { v s v 1 4 = 7 2 ) { ) } 1 > 2 } > 3. Mirador 4.x への対応 Mirador 4.x では、アクションやセレクターのインポート方法が変更されました： ...

概要 mirador-rotation-pluginに以下の機能を追加しました： 90度単位の回転ボタン URLパラメータによるマニフェスト・回転角度の指定 UIの改善（リセットボタンのアイコン変更） ヘルプ機能（使い方を説明するダイアログ） 新機能の詳細 1. 90度単位の回転ボタン 従来は1度単位のスライダーのみでしたが、90度単位で素早く回転できるボタンを追加しました。 実装内容 src/plugins/MiradorRotation.js に以下の変更を加えました： i i c } m m o ; p p n c u o o 9 s o p r r 0 t n d t t 度 s a 回 h t t R R 転 a e o o の n n V t t ハ d e i a a ン l w e t t ド e R w e e ラ R o p L R ー o t o e i t a r f g a t t t h t i ( I t e o w c I 9 n i o c 0 n n o = d n = o f r w r f ( o I o r d t d m o i a , m r t ' e i { @ ' c o m @ t n r u m i o i u o + t / i n a i / ) ( t c i d i o c = i o n o > r n s n e : - s { c m - t n a m i e t a o w e t n R r e o i r t a i a l a 9 t / l 0 i R ) o R ; n t o a t } t a ) e t ; L e e R f i t g ' h ; t ' ; UIには2つのボタンを追加： ...

はじめに 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 の形式でハイライト領域を指定します。 ...

はじめに IIIF（International Image Interoperability Framework）ビューアとして広く使われているMiradorで、以下の要件を満たす実装を行いました： URLパラメータで指定したキャンバス（ページ）を初期表示する 指定したキャンバス内の検索語をハイライト表示する 本記事では、この要件を実現するためのアプローチと実装方法を共有します。 アプローチの検討 defaultSearchQueryオプション Mirador 4では、ウィンドウ設定に defaultSearchQuery オプションを指定することで、初期化時に自動的に検索を実行できます： c } o ) n w } ; s i ] t n m c d , d a a e m o n n f i w i v a r s f a u a : e s l d s I t o [ t d S r { I : e V d a i : c r e a c w m n h e a v Q r n a u i s e = f I r e d y M s , : i t r U ' a r 検 d l 索 o , 語 r ' . , v i e w e r ( { このオプションは検索を自動実行する便利な機能ですが、今回の要件では以下の点を考慮する必要がありました： ...

概要 Mirador viewerの表示方向（viewingDirection）をURLパラメータから動的に指定する実装について解説します。この機能により、同じマニフェストを左から右（left-to-right）または右から左（right-to-left）で表示することができます。 実装方法 1. URLパラメータの取得 URLからviewingDirectionパラメータを取得し、デフォルト値を設定します： c c o o n n U s s R t t L パ u v ラ r i メ l e ー P w タ a i か r n ら a g 表 m D 示 s i 方 r 向 = e を c 取 n t 得 e i w o n U R = L S u e r a l r P c a h r P a a m r s a . m g s e ( t w ( i ' n v d i o e w w . i l n o g c D a i t r i e o c n t . i s o e n a ' r ) c h ; ' r i g h t - t o - l e f t ' ; この実装では、パラメータが指定されていない場合は'right-to-left'（右から左）がデフォルトとして使用されます。 ...

概要 IIIF画像に対して、多角形のアノテーションを付与するツールを作成しました。 https://next-fb-anno.vercel.app/ 本記事では、このツールについて説明します。 使い方 以下がトップ画面です。IIIFマニフェストファイルのURLを入力します。「入力例を使用」からもお試しいただけます。『百鬼夜行図』(東京大学総合図書館所蔵)を使用しています。 以下のようなアノテーション登録画面が表示されます。 画面右上のログインボタンからログインできます。 アノテーション付与の方法は、以下の動画を参考にしてください。 https://youtu.be/9RMqaXTaOzE 開発した背景 以下の記事で説明したように、Mirador 3の mirador-annotations プラグイン向けに、Firestore用のアダプタを開発しました。 このmirador-annotations プラグインについて、多角形のアノテーション付与を行いづらいという意見がありました。 そこで、主に多角形のアノテーション付与を支援するために、本ツールを開発しました。また、アノテーション付与を実装するためのライブラリであるAnnotoriousについて、Reactライブラリが公開されていたので、この調査も兼ねて実装しました。 https://annotorious.dev/react/openseadragon-iiif/ さらに、上記の記事で紹介したmirador-annotations プラグインのFirestore用のアダプタを流用することで、同じFirebaseのサービス（AuthenticationとFirestore）を使用するようにしました。 そのため、本ツールの右上のボタンに、Miradorへのリンクを付与しました。 これにより、本ツールで編集を行い、IIIFマニフェストファイルのメタデータを含む、情報の表示にはMiradorを使用する、といった使い方が可能になるかと思います。 多角形のアノテーションを付与するための既存ツール IIIF画像に対してアノテーションを付与する機能を持つ既存ツールは数多く存在します。ここでは、IIIF画像に対して多角形のアノテーションを付与する機能を有するツールと、本ツールとの差分を紹介します。 ここでは、国立国会図書館で公開されている「和泉国絵図」を例とします。 Omeka Classic + IIIF Toolkit 以下の記事でセットアップ方法や使い方を紹介しています。 https://zenn.dev/nakamura196/books/2a0aa162dcd0eb IIIF Toolkitでは、Mirador 2が使用されており、ポリゴンアノテーションが提供されています。 今回にニーズに対しては、多角形アノテーションではなくポリゴンアノテーションである点と、Omeka Classicのセットアップ（サーバの準備や維持）が必要になる点が課題として挙げられます。 Recogito Recogitoでは傾斜したボックス形式のアノテーションを付与することはできましたが、多角形のアノテーション付与はできないようでした。 また、以下のように、pctを用いてIIIF画像にアクセスするようで、画像が表示できないケースが多くありました。 Glycerine: Image Annotation Workbench 本ツールが最も今回のニーズに合致していました。 https://glycerine.io/ おそらく本ツールと同じ「Annotorious（のver.2）」が使用されており、多角形によるアノテーションのほか、複数人による共同作業も可能でした。 唯一の課題として、登録したアノテーションの一括登録機能が提供されていませんでした。この点に対して、今回開発したツールでは、読み込んだIIIFマニフェストファイルに対して、ログインユーザが登録したユーザが付与したアノテーションを一括エクスポートする機能を設けました。 これにより、本ツールで付与したアノテーションを一括エクスポートし、他の可視化ツールで使用する、といった使い方が容易になります。 なお、以下の記事で紹介したように、Mirador 3の mirador-annotations プラグインにも付与したアノテーションをダウンロードする機能が提供されています。しかい、この機能はCanvasごとにダウンロードする仕様となっており、複数ページから構成される場合には、ページごとにダウンロードする必要がありました。 工夫点および開発メモ 本ツールの開発にあたり、工夫した点などを紹介します。 入力するIIIFマニフェストのv2およびv3対応 入力するIIIFマニフェストファイルはv2とv3、どちらでも対応できるようにしました。この実現にあたり、以下の記事で紹介した@iiif/parserを使用しました。 ...

概要 任意の角度で画像を回転するMirador 4プラグインで、角度の初期値を設定できるようにしました。 リポジトリは以下です。 https://github.com/nakamura196/mirador-rotation-plugin デモページは以下です。角度および矩形を初期設定とともに、画像を回転させることができます。 https://nakamura196.github.io/mirador-rotation-plugin/ 背景 以下の記事で、本プラグインについて説明しています。 一方、課題として、角度の初期値を与えることができませんでした。 これに対して、以下の記事で紹介したように、Mirador 4の標準機能として、角度の初期値を与えることができるようでした。 合わせて、以下の「mirador-image-tools」プラグインについて、webpackからViteに変更されていたので、この変更を「mirador-rotation-plugin」にも反映することにしました。 https://github.com/ProjectMirador/mirador-image-tools GitHub Pagesでの公開 GitHub Pagesでの公開にあたり、「mirador-image-tools」のvite.config.jsを以下のように変更しています。これで、npm run build:demoにより、GitHub Pagesで公開するためのディレクトリを作成することができるようになりました。 https://github.com/nakamura196/mirador-rotation-plugin/blob/main/vite.config.js i i i i i i i e } m m m m m m m x ) p p p p p p p V p b ) e } o } p ] r } s } ; o o o o o o o i o a , s , p , l , e , e , r r r r r r r t r s p } { } b e i l t e } u r { } s a } r o p t t t t t t t e t e r u x n o i s , g e o l , v p o : o b } : b } i c c a m b p ] i a n c } l i ' e e r { r f p { { p c d c u , u , l l M l d i u l , n c カ a l v a @ r n t e s a k o e p e i o e r } s i l } r } s d u a u e z i u { } s t ス m o i } e s t : : : d a t f g g n f r s l u m o , o l i , o , o : d t d r e l g , : ( タ e s f : : e e c f h i l f a o s d t p l e i u d b e f f n l e o } u e c e : D d i n s } ) ム : e c c t } } s { ' f t r l o f i u c . : D t l x n r : : n i o a l x u , r { : h : e O n a e , [ , プ B ( o o r { { t 4 i o f e b r g l e e i y u t p c t l r m u t t a g } c e ' p p s m t b } ラ ' u p n n y c i } c i } s d 4 n f m r U S o u t s n { r O p e u e { { r e m e p e p s l , e [ s [ j s t : e T u u ) グ f n r s s d o f a f / e 4 e r o R y m r s v : u O r t m y N a : O r u s o r ' m ] s : i : O p i c l ) イ i d o t t e { n c c f } c t c ' m 6 C o ' m L n a d . . t p n : a : a t p n t e b e r a , . x o [ D ( l o o ; ン x l c m s ( o o o o c ( o : o ' o m f T c t e e G ' D t a p m s ' t a : t a a e p j _ ' { n ' O b d n a を - e e d d o t d n n r c c c i } n h e n , n s ' o i f n I d i i l f : e : M i l F l c a : s t , s l : u . t d 追 o : s i e / e s d s 各 o o o f s d a a c r s f s f ' n P } / o i v T i r o : i : i o : { i s t c e : o i o e e 加 u s s m s d m o e t フ ( n n n a c o e w w o ( r o i r i @ p o a p n n . H s : n l t / [ r n l : : t t a s a r l n n r し t a . t o r e o l m ァ c s s s ( w o l m a a n e . l l c g v r d t f a e G U t s [ e r s ( ' a s [ e - r n t { d e d L t : て p s e D S c m S e o f イ o t t t s a n e o i i s r c e e / i o e h r c C I B ' t : ' U u r f e d : . N { ' d u d s - n ) o s デ u y n i r / o r . / i ル n t i s . / t t o r o . U i } t m : o k o T _ , r _ R e c s o . a R o e _ j a a : ' ィ t n v r c デ S c l s l を s s d s a t o l s l ) d e R n e i p } m a n H P u { _ L , r ' r { . m e m , . _ s m { d j レ - c . D ィ r S o r e ル t r e t t l o r f f e e r L d f j s a g f U A e t T i m , D O e a ' j - e ( a s ク s G = i レ c t g c s ー c s a s f e g c s s . { r T e r s e t f ' e i B G , e o n a l b s c : s f { w x ト t I r ク S a ( 内 ト f P t t . s . ( 階 . . l ! o o x o / s h r g . g _ E s P d t ' P j : t x i a a ' リ r T p ト t t ' の = デ i a P s i . l ' 層 r r o = r P . m p ' ' o l j ( P S t a e ) u l e ' ' l l f i , 構 u H a = リ a s M フ ィ l t a s c o F を m m g = ( a h l ; ; m o s { A s t x m u c ' , R i e l i t 造 c = U t が t . o ァ a レ e h t = F o g i 削 ( ( ( ' t t u b o G ? _ h . = d g t m e n s l を t > B h p 存 s i v イ w ク h i p ( l 除 d p ' ' E h m v g ' ' n E _ ( j > ' i . i a ( - o t f 修 u _ . a 在 s i ル a ト o = a l y ` e （ e a R E r ( l i i u ; ' S { / n s ] n k r c j a u e s 正 r { P r t す = D n リ i リ f = w e F C s オ m t e N r n ' t n r ; * e ' ( , ' e a t _ s s r r . e A e h る i g ス t に p a ( i o プ o h m O o e , e - l ? ' w , f , y d D t | - : r ' G s . か a r ト 移 f a p i ) l p m シ S . o E r w ' r ' , o s o O e j j f e , E o r 確 w e f を f 動 i t a t ) e i o ョ r r v N ; e ; ( U r ( r M s s s i a S l e 認 a c i 取 s l h t ( e v ン c e e T p U a p R m p - ' t x x l ( d ) v s i t l 得 . e . h f { s d e ） D s d ' r R c r L a k r , s ) ' e s F e o t o e r s j . s r : d i o ) o L t o _ ( t g o _ $ , s r i { ( l r s e ) o j . c r l o c ( ' c m ' . t _ / c l ' v f y a i o s P $ s , v r { e ' ; e o . = p a , t | e d e s ( f d { n i t a { u e i s . s c / = e t a o _ ( i ( . ) r d ( n a t s c { ( g s / s k d = e i n / _ a s d s ) o i d ( t h r c d i i _ . s e r o d s . t r t i t m r e d ( , c e r i n n _ e _ m ' D n r j e g ' s a { ( m i s P s e s a g t n _ u e . . c s s s ) t t d d o s r d a s c t l e v m p [ j x t . ; D ( e e S t c e t f u D o s . s d e e s s p i d m m r D P s h u r i d u t B ' r ' n x x _ a r e o o c i a t } l s r i t s A ] c d t _ t , m / S D r t P l i , r p _ S , / ? e ] i ) h o s r i , h a y v e u _ E i n ' n . \ , ' S r c r ) t . e ' c t ' _ n ' c , j / d r c D , f ; h ' : d t , P d m i s s . ' e c i i ) $ ) e o f A e i e r x * u m D t r f l ; { ; t m r i i T x r s c ? \ t o i o ) i e d r o y l m H . a $ . f ' r ; l ) e u ' e p h d / j 8 , ) r e ; s e ) s s o t o ] s ' ; o ) t , , t : r m r , $ ) ' o ; P r ' t l - { / , s t a f { u , . ' r } r t o c m / , o ) } c d h r r t e e m t , , ' i } c e u r t i i a ) r ` e c r r a r m t a ; e ) : u e ) . a p i s c ; r . ; u d o o _ y t t s ' r o r n t n o r i ) l r t . e c r u v ; ) - . j s y e e ) r m s t ( . : , o e ' s a . } t t _ r . ) t a a : _ g ' ; r t . / s ) u i u ' * ) ; e o r m ' , n l i , = - ) r > f p ) a o l , d ( r u o _ { c g r m e i - o : n r c / o k t ' t s r ) a _ u t _ e : i / o * } n ' ) . ] ; ' e , , s . j s ' ) , まとめ Mirador 4のプラグイン開発にあたり、参考になりましたら幸いです。 ...

概要 Mirador 4で、初期読み込み時に、画像の回転や範囲指定を行う方法を紹介します。 背景 2025年3月現在、Mirador 4の開発が進められています。alpha版を以下で確認することができます。 https://github.com/ProjectMirador/mirador/releases おそらくMirador 4からの機能かと思いますが、以下のFAQで初期設定の方法が記述されています。 https://github.com/ProjectMirador/mirador/wiki/Frequently-Asked-Questions#q-how-do-i-change-the-view-of-an-image-to-zoom-to-a-certain-area 具体的には、以下のように、initialViewerConfigを用いることで、初期設定ができました。 https://github.com/ProjectMirador/mirador/blob/main/__tests__/integration/mirador/mirador-configs/initial-viewer-config.js e } x ; p i w } o d i ] r : n c i } m , t d a n , a ' o n i t x y z n d m w v t h : : o i e i s a i u o f f r : s a m 9 7 y m e a a I l b 3 8 o : s u d [ d V n 4 2 u t l o { : i a , , 0 I t r e i n . d ' ' w l e 0 : { , h e N e 0 t r a d 0 ' t C v 7 h p o i t , t s n g o t : f a p / i t s s / g i p : i : o e / i n c / i { P i i f o f i . s y i h i f a t z . r i o h v o o a a n m r r : v d f a a ' o r r f r d t a a m r t r u - h t s b i m e o s u u t s m t t e s o o u . m m o ' l s r , o . g o o / k r m g a g / n o m i o a f d n e i s f t e s s / t o s b / j o e b c j t e / c 2 t 9 / 9 2 8 9 4 9 3 8 / 4 c 3 a ' n , v a s / c a n v a s - 4 7 1 7 4 8 9 2 ' , 応用 上記を応用して、以下のような初期設定を行ってみました。 ...

概要 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 のページ遷移を実行します。 ...

概要 Mirador3のFirebase連携annotationsプラグインを開発しています。 こちらについて、これまではGoogleアカウントによるログイン機能のみを提供していましたが、メールアドレスによるログイン機能を追加しました。 機能紹介 以下、ログインボタンを押した場合です。 メールアドレスによるログインの場合、アカウントの新規作成が可能です。 ログイン後、ユーザに関する情報を表示するようにしました。 アイコンをクリックすると、ログアウトボタンが表示されます。 まとめ IIIFを用いたアノテーションの作成と共有において、参考になりましたら幸いです。

概要 Mirador 3の mirador-annotations プラグインで、付与したアノテーションをダウンロードするための設定に関する備忘録です。 https://mirador-annotations.vercel.app/ 背景 以下の記事で、アノテーションをGoogleのFirestoreに登録する方法を紹介しました。 ここで登録したアノテーションをダウンロードするにあたり、mirador-annotationsプラグインでダウンロードオプションが提供されていたので、その方法について紹介します。 方法 以下がデモページのソースコードになりますが、exportLocalStorageAnnotationsというオプションをtrueにすることで、ダウンロードアイコンが表示されました。 i i i i c c } m m m m m o o ; i p p p p n n a } i w } w } r o o o o s s n , d i , i ] a r r r r t t n a e : n d s n l , d t t t t o d x d e i d o o e c t a p ' o f d o a r m a L A n o a p a o d w a e w d . i n o n d n t t d r e : u B s e v r n c n p f i e a t m l a : d i a o a o o i o r p L o { t r M e d t l t i g n : t o ' S O [ a w o a S o n : e c , i p { n e r t t t t = ( r a d e i r i o A U { c : l e n f ( f o r d r { a S B B e c r n a a l n ( t a y s o o P g p v c o r D t n m l e t = a a r P e : f u A e s n a a f i ' g d r ' I v g n a ' g m i a h d a e e u h , i n p f t ) s A l l t r s t r t I n : t t [ a e o p = d n : p . d f r m : > ) o ' s . o r / t a t : . r f / n = a n r / a m r 1 e > t n u / n d o 2 w i o e i n i m 7 n o t , i o s . L e n a i t t 0 o w s t f a . c : i . t e s 0 a A o h i s r . l n f n a o c 1 S n a s r n s s : t o l ' v P r r A 3 o t s , a l c c s n 0 r o e r u / ' r n 0 a t , d g i ; c 0 g A a i n t / e d r n d L o a A a t s e o t n d p m ] x c A n a t d u ) ' a d o p e i s ; ; l a t t r s e S p a e ( p u t t t r c l m o e i ( a a s r r o ` n y . a ' n l v o g ; s o a a r e ' c s n g A ; a I n / d l d o m a S , t a p t a n t o e t i e r n i f r a d o e ' g p n s ; e o t : i J s / n S / / t O o ? U N b c r j a l e e n ) x c v , p t a o / s r 2 I t 9 d 9 = b 8 $ u 4 { t 3 c t ' a o , n n v a s I d } ` ) , ダウンロードによって得られるJSONファイルの例は以下です。canvas毎にダウンロードできます。 ...

概要 Mirador 3の mirador-annotations プラグイン向けに、Firestore用のアダプタを開発したので備忘録です。以下でお試しいただけます。 https://mirador-annotations.vercel.app/ 背景 Mirador 3の mirador-annotations プラグインは、デフォルトではローカルストレージにアノテーションが保存されます。 一方、以下の記事で紹介したように、アダプタを変更することで、ローカルストレージではない場所にアノテーションを保存することもできます。 そこで、今回はGoogleのFirestoreに保存するためのアダプタを開発しました。 使い方 ユーザごとにアノテーションを保存できる仕組みとしました。 そのため、まず以下のボタンから、ログインを行います。 ログイン後、自分が付与したアノテーションが表示されます。 アノテーションの登録方法に違いはありません。 ログアウトすると、アノテーションが非表示となります。 リポジトリ ソースコードは以下で公開しています。 https://github.com/nakamura196/mirador-annotations 特に、以下が今回開発したアダプタです。 https://github.com/nakamura196/mirador-annotations/blob/master/src/FirestoreAnnotationAdapter.js また、以下がログインを行うためのボタンです。 https://github.com/nakamura196/mirador-annotations/blob/master/src/GoogleAuthButton.js 開発される際には、.env.exampleを参考に、FirebaseのAPIキーなどを.envに記入します。 https://github.com/nakamura196/mirador-annotations/blob/master/.env.example まとめ 本アプリを使用することで、ユーザごとに、IIIF画像に対するアノテーションを簡単に管理できるようになると思います。 なお、冒頭でご紹介した本アプリのデモ環境に登録されたデータは任意のタイミングで削除する可能性があるのでご注意ください。

概要 XSLTを使ってIIIFとTEIの対照表示を実現してみる機会がありましたので、備忘録です。 結果は以下からご確認いただけます。「校異源氏物語テキストDB」を利用しています。 https://kouigenjimonogatari.github.io/xml/xsl/01.xml 背景 TEI/XMLの可視化にあたって、これまでは、TEI XMLをHTMLに変換してブラウザ上で表示するためのJavaScriptライブラリであるCETEICeanを使うことが多かったです。 これらの取り組みではJavaScriptのフレームワークと合わせて、柔軟な開発が可能でした。 しかし、この方法ではTEI/XMLとは別に、ビューアのデプロイが必要であるなど、課題を感じる点もありました。 対策 そこで、XSLTを使ったIIIFとTEIの対照表示に取り組みました。以下のXSLファイルを用意しました。実装にあたっては、ChatGPTを利用しました。 https://github.com/kouigenjimonogatari/kouigenjimonogatari.github.io/blob/master/xsl/mirador.xsl そして、XMLファイルからは、以下のように参照します。相対パスとなっている点は、適宜読み替えてください。 < < < ? ? T < x x E t < m m I e f < l l i i t < < - x H l i t a v s m e e t i u e t l a D l t t r y n d e e l h s l s e s S e o i e = r c t > r o s " > > m 校 > n h h t 異 池 = e t > 源 田 " e t 氏 亀 1 t p 物 鑑 . : 語 < 0 t / ・ / " y / き a p w り u ? e w つ t > = w ぼ h " . < t t r e e t > x i i t - t / c l x . e s o > l r " g / h n r s e / f 1 = . " 0 . " . > / . . / x s l / m i r a d o r . x s l " ? > これにより、以下のようなXMLファイルをブラウザで表示すると、 ...

概要 IIIF Presentation API v3でsvgを使ったアノテーション記述を行う機会がありましたので、備忘録です。 方法 以下のように記述することで、svgを使ったアノテーションを表示することができました。 { } " " " " } " " } " ] @ i t l , r r , i c d y a " ] i e " } " } t { } o " p b n g q l , v e n : e e o " h u a " ] a " ] m " " " " " } " ] " ] " ] t " l n き t i b n l n s i t w h l , t , a , i e " : " e り s r e o " u o " " d y i e a " ] h { } n { } t { } x h : " つ " e l n A e n P : " p d i b n u n e t t " : ぼ : d " e t " e r : e t g e o " m " " " o " " " ] m " " " ] " t M { " S : " t : " o [ " h h l n [ b f i t t i t i s i t i : p a [ " t : r : v " : " t " e 1 n o d y a d y t { } " d y t { } : n h a { i { i h : " : " ] a r " p t " p e : " p e " / i t t [ b [ d t " : : " i m : e i : e m " " " " } " } : e m " " " " } " h / f t e u e t C 6 { l a " o " s i t m b , t [ " s i t m b , t t 1 e p m t d p a 6 4 [ " t " : n " : " d y o o " " a " " " } " : " d y o o " " " " ] " " a t 2 s : e i : n 4 9 : " h s h : " p t d t v r s t s h : " p t d i t f s , w h r p 7 t / n o b / 2 9 : t " " t " : e i y y a g o y e " " t " : e i y d y o e { } i e g : . " / t n y / a , 0 [ t I : t A [ " v " p l e u p l t v t A [ " v " " p r r d i e 0 , c " " 1 s , " p m p n " : a : e u t r e e y a p n " : a : : e m v " " " t g t / . r : E 2 " i s a [ : n h t " e " c " c p l : n h t " a i i t p h h " i 0 e x 7 , m : g / t " i { : " : e : t e u / t " i { " : t c d y r " t : i . a { a . a / e t t A o : " o " e t t A o h " e " p o : " i 1 t m 0 g / " 1 a p n n " { : " r : " 1 a p n n t " : " : e f : " f : i p . e i 2 t : n " T " S " : 2 t : n " t I : " i 6 h . 6 v l 0 / i 7 i / : e < " p : " 7 i / : p m " " : l 6 4 t i 2 e e . j i . o t x p h e S " . o t : a i [ h e 4 9 t o 8 c 1 p f 0 n 1 a " t > t c { v < 0 n 1 a " / g m t " " 2 9 p / 1 o O : e . . P 2 t c u 校 t i g s . P 2 t p / e a t I : , 0 : a 6 m r 6 g d 0 a 7 i o a 異 p f S v 0 a 7 i a 1 " g p m / p / m g 2 " l . g . o m l 源 : i e g . g . o i 2 , e s a " / i a o a 8 , . 1 e 0 n m B 氏 / c l 1 e 0 n n 7 / : g l 1 / p n n 1 i : " . " e o 物 / R e x : " . " t . j / e e 2 p i s i 6 t 6 , 0 , n d 語 1 e c m 6 , 0 , i 0 p / S v 7 r / . z / c 2 . t y 2 s t l 2 . n . e i e e . e i o a a . 8 1 i " p 7 o o n 8 1 g 0 g i r l 0 s i r t p u 1 : n , . . u r s 1 : " . " i v 2 . e i g i i - 6 6 g 2 0 r " = 6 6 , 1 , f i " 0 n f / o / t / 2 " 1 . c , ' / 2 : . c . t / l n i o a 8 , 0 e h a 8 6 d e 1 a 3 i " i k p 1 開 . " t p 1 2 l 2 : t / c i y i 6 始 1 , t i 6 8 . " 6 i 1 e f o / / 位 : p / / 1 i , 2 o 1 n / . i a 置 6 : i a 6 t 8 n s 3 a i p < 2 / i p / c 1 m e / c i i / 8 / i i a . 6 3 a s 1 . f / p 1 w f / p u / / n / 1 j / i > 6 w / i i - a c i b / p 3 i < / w 3 i / t p o f y c / / i p a . / i i o i n e / a i 1 f > p w 1 f i k / t s 4 n i 1 / < i 3 1 / i y i e t . v i / 3 a / . / 3 f o i x " 0 a f c / i o c / / . i t , / s / a 1 h i r a 1 3 a f . " / g n 1 r i g n 1 / c / j , p e v / e f / v / 1 . 3 s 1 n a c f / 2 a c 1 j / o " j s a = 3 0 s a / p 1 n , i / n \ / 0 / n i / 1 " / p v " 1 0 p v m i / , T 1 a h 1 / 1 a a i c I / s t / s / s g i a F a / t c v p / e f n F n p p a g a p " / v / n 1 : n ' g 1 , g a A o / / v > e / e s 0 s a / a < " p n / 0 " n d s p , a j p _ , n l / a g i 1 6 o . p t e / " 5 s n 1 h / T 8 / d " i I 7 1 l , x m F / " . m a F 0 , g l g / 1 o n e A / . s a 0 0 j = n 0 1 p \ n _ _ / " o 6 0 i h " 5 0 n t , 8 2 f t 7 3 o p / . : : 0 t n / 1 i d / / f l w 0 / j w 1 f p w _ u / . 0 l p w 0 l i 3 2 / d . 3 2 / o . 0 3 r t 0 4 g i , 3 / f / 7 2 " 0 6 0 , / 8 0 d 6 0 e / / f 3 s a 0 v u \ g l " \ t > " . 国 j 立 d p 国 = g 会 \ " 図 " , 書 M 館 2 デ 7 ジ 9 タ 8 ル , コ 1 レ 3 ク 0 シ 9 ョ c ン 0 < , / - a 3 > 4 で み 1 る 7 < , / - p 6 > 8 " 5 1 , - 1 0 2 c 0 , - 3 4 - 1 7 , - 5 1 - 5 1 , - 5 1 c - 3 4 , 0 - 5 1 , 1 7 - 5 1 , 5 1 c 3 4 , 3 4 5 1 , 6 8 5 1 , 1 0 2 z \ " i d = \ " p i n _ a b c \ " f i l l - o p a c i t y = \ " 0 . 5 \ " f i l l = \ " # F 3 A A 0 0 \ " s t r o k e = \ " # f 3 8 2 0 0 \ " / > < / s v g > " 表示結果は以下です。 ...

概要 縦書きに対応したText Overlay pluginを導入済みのMiradorのリポジトリを更新しました。 https://github.com/nakamura196/mirador-integration-textoverlay 参考 変更元のText Overlay pluginのリポジトリは以下です。 https://github.com/dbmdz/mirador-textoverlay デモ 以下のページで動作内容をご確認いただけます。 https://nakamura196.github.io/mirador-integration-textoverlay/ 画面右上の「Text visible」ボタンを押すと、テキストが表示されます。ロード中のままとなってしまう場合には、ページの再読み込みをしてください。 参考 以下の記事で紹介した方法を使い、Text Overlay pluginをMirador 3に追加しています。 使用例 Text Overlay pluginの使用方法などについては、以下の記事を参考にしてください。 まとめ 今後、テキスト表示にあたり、ロードしたままになってしまう不具合を解消したいと思います。 IIIF画像とテキストの応用にあたり、参考になりましたら幸いです。

概要 URLの引数で指定したIIIFマニフェストに対して、Mirador 3のannotationsプラグインを試すことができるデモページを用意しました。 https://mirador-annotations.vercel.app/ iiif-contentまたはmanifest引数を使用することで、指定したIIIFマニフェストを対象にすることができます。 https://mirador-annotations.vercel.app/?iiif-content=https://dl.ndl.go.jp/api/iiif/1301543/manifest.json 本記事は、このデモページの作成に関する備忘録です。 背景 Mirador 3向けのアノテーション付与プラグインとして、mirador-annotationsがあります。 https://github.com/ProjectMirador/mirador-annotations 以下の記事で使い方の例を紹介しています。 そして、以下のデモページがすでに用意されていますが、URLの引数にIIIFマニフェストファイルを指定する機能は提供されていません。 https://mirador-annotations.netlify.app/ フォークと修正 URLの引数にIIIFマニフェストファイルを指定する機能の追加にあたり、上記のリポジトリをクローンしました。 https://github.com/nakamura196/mirador-annotations そして、以下の修正を加えました。 https://github.com/nakamura196/mirador-annotations/commit/18848ccb1fa51df821335ed76e7b9f4e974527d0 特に、以下の修正を加えています。 v v v i } a a a f r r r w ( i p m w m n a a i a d r n n n o a i d i w m f o f s s e w e . s s s p = t t u = ) s n = h e [ { ( w p ] { a ; U r m R a a L m n ( s i d . f o g e c e s u t t m ( I e ' d n i : t i . i m l f a o - n c c i a o f t n e i t s o e t n n ) t } . ' ) s ) ; e a r c h p P a a r r a a m m s s . ; g e t ( ' m a n i f e s t ' ) ' h t t p s : / / i i i f . h a r v a r d a r t m u s e u m s . o r g / m a n i f e s t s / o b j e c t / 2 9 9 8 4 3 ' これは、以下の実装を参考にしています。iiif-contentまたはmanifest引数でIIIFマニフェストファイルを参照するようでした。 ...

概要 Mirador 3でScroll Viewを使う方法についての備忘録です。 以下、「鹿児嶋征討記之内 高瀬口河通ノ戦争野津公聯隊旗を取返ス図（国立国会図書館所蔵）」を例としています。 このIIIFマニフェストは3つのキャンバス（画像）から構成されており、通常の表示方法（Single, 単一モード）では、画像ごとに表示されます。 これを3つ繋げて表示することを目指します。 デモ 以下からお試しいただけます。 https://nakamura196.github.io/mirador-multi-image/ IIIFマニフェストファイルについては、国立国会図書館で公開されているIIIFマニフェストファイルを一部変更しています。 変更前 https://dl.ndl.go.jp/api/iiif/1301543/manifest.json 変更後 https://nakamura196.github.io/mirador-multi-image/manifest.json 変更箇所として、今回の記事の目的であるScroll表示と直接関係がありませんが、画像が右から左に表示されるように、"viewingDirection": "right-to-left"を追加しています。 Miradorの設定 Mirador 2では事前設定なしにScroll Viewが使えましたが、Mirador 3のデフォルト設定では、Scroll Viewは無効化されているようでした。 https://projectmirador.org/embed/?iiif-content=https://nakamura196.github.io/mirador-multi-image/manifest.json そこで、Mirador 3の初期設定を以下のように修正します。 https://github.com/nakamura196/mirador-multi-image/blob/main/docs/index.html c } M o ; i n i w ] l w } r s d i , a i , a t : n { } n n s d d v d d , g d i e e i o c " o m u o d f f e r o m w a a w e a a w . n i s n g : B u u s v f r : i e a l l : i i a f : { r t t e g d [ e O S V [ w o s " p i i { e = r t j e d e r " I a n e w k ( { , d " B B : e c : , y a y o D r " : n " e P s f . f a c " i / a n r s g m u e o i ) a l l l n ; n t : l g i : " l f " , e e t i " s r n t u f } . e o , j , " s , { o n k " e , y : " g a l l e r y " } , { k e y : " s c r o l l " } ] , ポイントは、views: [{ key: "single" }, { key: "gallery" }, { key: "scroll" }]です。ここで、Scroll Viewを追加することで、以下のように選択肢として表示されるようになりました。 ...