mirador-sync-windowsのMirador 4版のリポジトリを公開しました。

概要 以下の記事で、mirador-sync-windowsのMirador 4(3)版を作成したことを紹介しました。 今回は、本プラグインのリポジトリを公開したので、備忘録です。 リポジトリ 以下で公開しています。 https://github.com/nakamura196/mirador-sync-windows デモページ 以下からお試しいただけます。 https://nakamura196.github.io/mirador-sync-windows/ GitHub Pagesでの公開に向けて、設定した内容は以下です。 webpack 以下のファイルを一部変更しました。 https://github.com/nakamura196/mirador-sync-windows/blob/main/webpack.config.js 具体的には、以下です。publicPathについて、developmentの場合は、相対パスにしました。これにより、basePathによる問題に対処しました。 r e t } u ; r o } d } d m e p ] n u , e , e o n l , . t f p p v h p s ] v d t u n n { c p i a u S o o t , t e r g e e o u l t b e t r a o : y i w w n t e h p l r : t t o : n ( f : n : u i v : i / l ' s c H R i a b c e t c d : d [ : o t e g { m p l P r r 4 : e e ' n m a , e a i a : u 4 m ' v . [ f l c : t c t e 4 [ o e e / i W t h P h { , 4 / v l d g e R ' . a : , d a o e . b e d j t i l p m p p f e o h o s - m o l a r m i : p t s e / u c e o n t / o n s g k s . ( i ' u t r i P h j _ o , r ' c n l W s _ n c , / s u e ' d s e i g b , i . - n i p r m m d n a n o a e ( c a d p x [ { k m e ' . ] P e , j ) t l , = s , e u = ' m g ' = ] p i d , l n e " a ( m d t ) o e e , / v : d e i l p s o a t p t ' m h ) e . , n j t o " i n ? ( _ _ d i r n : a m e , ' , ' d e m o / s r c / i n d e x . h t m l ' ) } ) , GitHub Actions GitHub Actionsを使ったGitHub Pagesの利用にあたり、以下のようなymlファイルを用意しました。 ...

2024年6月27日 · 3 分 · Nakamura

Mirador 4プラグイン開発:任意の角度で画像を回転する

概要 Mirador 4において、任意の角度で画像を回転するプラグインを作成しました。 https://github.com/nakamura196/mirador-rotation-plugin 以下で挙動をご確認いただけます。 https://nakamura196.github.io/mirador-rotation-plugin/ 背景 Mirador 3向けに本プラグインを開発していましたが、2024/3/15にMirador 4がプレリリースされました。 https://github.com/ProjectMirador/mirador/releases/tag/v4.0.0.alpha-1 Mirador 3の最新版であるv3.3.0は2021年のリリースだったため、使用されているライブラリ等も古くなっていましたが、今回の更新で、開発がしやすくなりました。 工夫 任意の角度で画像を回転するにあたり、Mirador 4をそのまま使うと、以下のように、角度の変更に対して、画像の回転が追いつかないケースがありました。 https://www.youtube.com/watch?v=zJKWCTA9rjw そこで以下の記事で述べたように、画像の回転や拡大・縮小を遅延なく行うための機能を追加したMiradorを使用しています。 具体的には、openseadragonのsetRotationなどで用意されているimmediatelyパラメータをMiradorから設定できるようにしました。 https://openseadragon.github.io/docs/OpenSeadragon.Viewport.html#setRotation ! 今回はMirador本体にも手を加えましたが、プラグイン側でこのような設定がすでにできるかもしれません。引き続き調査したいと思います。 参考 90度単位で画像を回転させるプラグインとしては、以下もあります。 https://github.com/ProjectMirador/mirador-image-tools こちらは回転だけでなく、さまざまな画像を操作を可能にします。 まとめ Miradorの利用にあたり、参考になりましたら幸いです。

2024年6月27日 · 1 分 · Nakamura

カスタマイズしたMirador 4をnpmパッケージとして公開する

概要 カスタマイズしたMirador 4をnpmパッケージとして公開する機会がありましたので、備忘録です。 Fork 以下の公式サイトからリポジトリをForkします。 https://github.com/projectmirador/mirador 以下のようになります。 ブランチを作成する クローンし、ブランチを作成します。 g c g i d i t t m c i c l r h o a e n d c e o k r o h u t t t p - s b : / f / e g a i t t u h r u e b - . a c d o d m - / i n m a m k e a d m i u a r t a e 1 l 9 y 6 - / p m r i o r p a e d r o t r y 以下のように出力されます。 ...

2024年6月27日 · 4 分 · Nakamura

Mirador 4の拡大・縮小・回転の挙動を確認する

概要 Mirador 4の拡大・縮小・回転の挙動を変更する必要があり、その変更方法に関する備忘録です。 セットアップ 以下により、ローカルでMirador 4を起動します。 g c p p i d n n t p p m m m c i l r i s o a t n d a e o r r t h t t p s : / / g i t h u b . c o m / p r o j e c t m i r a d o r / m i r a d o r ポート4444で起動します。 ...

2024年6月26日 · 10 分 · Nakamura

Mirador 2のプラグインの挙動を確認する

概要 Mirador 2のプラグインの挙動を確認するリポジトリを作成しました。 https://github.com/nakamura196/mirador2-plugins-demo 以下のURLからお試しいただけます。 https://nakamura196.github.io/mirador2-plugins-demo/ サンプルデータを含む動作例は以下です。 https://nakamura196.github.io/mirador2-plugins-demo/?manifest=https://nakamura196.github.io/mirador2-sync-windows/data/examples/org.json;https://nakamura196.github.io/mirador2-sync-windows/data/examples/inf.json 本リポジトリを作成した目的は、Mirador 2向けに開発されたプラグインをMirador 3向けに改修するための挙動確認です。 プラグイン mirador-sync-windows 以下の記事で紹介したmirador-sync-windowsを有効にしています。 こちらについては、以下の記事でM3版を試作しています。 mirador-disable-plugin UCLA LibraryによってMirador 2向けに作成された以下のプラグインを有効にしています。 https://github.com/UCLALibrary/mirador-disable-zoom こちらについても、以下の記事でM3版を作成しています。 https://youtu.be/RN2V4b7IYoI まとめ Mirador 2のプラグインの挙動確認にあたり、参考になりましたら幸いです。引き続き、プラグインの追加などを行いたいと思います。

2024年6月25日 · 1 分 · Nakamura

ズーム操作を無効化するMirador 3(4)向けプラグインの開発

概要 Mirador 3(実際には、Mirador 4)向けに、ズーム操作を無効化するプラグインを作成しました。 https://github.com/nakamura196/mirador-disable-zoom/ 以下が動作デモです。 https://youtu.be/RN2V4b7IYoI 以下のURLからお試しいただけます。 https://nakamura196.github.io/mirador-disable-zoom/ 本プラグインは、UCLA LibraryによってMirador 2向けに作成された以下のプラグインを参考にしています。 https://github.com/UCLALibrary/mirador-disable-zoom 今回は、本プラグインの開発によって気がついた点をメモします。 targetの指定 targetによって、プラグインのボタンを設置する場所を指定することができました。今回は、WindowTopBarPluginAreaを指定することで、ウインドウ毎のバーに直接アイコンを表示することができました。 i i i i i e ] m m m m m x ; p p p p p p { } { } o o o o o o , , r r r r r r t m c m } t c m m } m } c } t t t t t t a o o a ) a o o a , a ) o , r d m p e r m d p u p e , n t { M M t c g e p S n g p e D p S n f r i i r o e : o t a e o : i d t a i a a g r r a n t n a b t n s a a b g n s e a a n s : ' e t l : e ' p t t l : s t d d s t a n e e n a a e e e l a W o o l ' d t T d ' t d t W T d { a c i r r a m O d : o : W : d c i o : t t n D D t i p ' P i ' h n P i i d i i i r e , M r g n M , T d r g o o o s s o a n i o e d i o o o e n n w a a n d S r p t o r P w p t s s C b b s o e a s W w a r : s W , o l l r a d : i T d o : i f n e e f D d o n o o p a n r f Z Z r i r r ( d p r s c ( d o i o o o s a D s o B D : t s o m g o o m a g i t w a i i t w m m b o s a C r s { o a C ' } M l n a t o P a n t o m f e e V b e n l b s e n i f r n / Z i l , f u l . , f r r o u t o e e i g e u i a o m I r o w Z { g i Z p { g d m t a m e o ( n o d ( o e n P r o w s A o a w s r ' m s l ' m i t r m t i t m / l u , , n a e M e n a d i p f a g d t a e W d t i r l r t i o e ' n i o e s a u o i n w , , u n w , t d g m o I I d I / o i n = d { t o d { e r n s e w s s ' [ } w m , } w d ; ) i , ) i s i M p n n r s i l = d = d c t r u > o > o / / a g w w s e d i ( I ( I t s n { d { d a r s t s D / } } e r i M ) ) / c s i . . a / a r d d c s b a i i t t l d s s i a e o a a o t Z r b b n e D l l s o i e e ' s m s Z Z ; e ' a o o l ; b o o e l m m c e E E t Z n n o o a a r o b b s m l l ' M e e ; e d d n u I t e f f m a a ' l l ; s s e e , , https://github.com/nakamura196/mirador-disable-zoom/blob/main/src/index.js ...

2024年6月23日 · 5 分 · Nakamura

mirador-sync-windowsのM3版を作成しました。

概要 以下の記事で、mirador-sync-windowsというMirador 2向けのプラグインを紹介しました。 今回は上記の機能をMirador 3(実際には、Mirador 4)向けに改修しました。 まだ挙動が不安定なところがありますが、以下からお試しいただけます。 https://mirador-sync-windows.vercel.app/ Vercelへのデプロイ 以下のmirador-image-toolsプラグインのmirador4向けのブランチをベースに開発を行いました。 https://github.com/ProjectMirador/mirador-image-tools/tree/mirador4-compat-clean 上記では、以下のようなコマンドが用意されています。 { " } s c } r , i " " " " " " " " " " " " p b b b b b c l p s t t t t u u u u u l i r t e e e s i i i i i e n e a s s s " l l l l l a t p r t t t : d d d d d n " u t " : : " : : : : " : b " : c w { : d u e c : l : o a e m s j " i " v t " m d " s " e s " n e c n o " : " r s h N p r h p " : : m l O O m a " m : " i n D g : " m " - n l E r e r " N k m r t y _ u " " u N O d k f " E n : j n O D i d : N e D E r i V l " s b E _ r s " = i j t u _ E - u r n d n e i E N p - m c p e t s l N V p d m v t - d V = e e & w : = p s l & r l & a u d r i & u o - t m e o & b _ n p j c c d v d & r t m e o h " e u & m e c e s v " , l c c & s l n t e o t p - t e t " r p i c r s a , a m o - p f _ n w g e n r _ e e n - " & b " t w s r / , & p , e r e a w b c s s n c e p / r p k b a * c & m p c / & s a k e * r e c s r u r k l m n v - & i e m & b - b - o r u m d N & f i o e O & l o d = D d p e p E N / : e = r _ O l e n d o E D i s " e d N E b , v u V _ & e c = E & & l t p N & o i r V n p o o = r p m n d p m m e " u r n , c o - r t t d r u " i u f n , o c n t b i u M d i O n e l D m d U M o : L O / c E D d j _ U i s F L s O E t & R _ " & M F , A O n T R p = M m e A s T r = u n c n p j x s b u b n i a p l b x d e " l b , a e b s e l - d l i e b s " - , d l i b " , 上記のコマンドを踏まえて、vercelのデプロイ設定を以下のように修正しました。 ...

2024年6月21日 · 4 分 · Nakamura

mirador-sync-windowsを試す

概要 mirador-sync-windowsは、以下のように説明されています。 https://github.com/UCLALibrary/mirador-sync-windows (機械翻訳)同じオブジェクトの異なるスペクトル画像など、ほぼ同一の画像を複数比較する際に、複数のウィンドウで同時にアクションを適用することが役立ちます。 使用イメージは以下です。 https://youtu.be/Ls2zvJpSRlc 注意点として、Mirador 2向けのプラグインとなっており、またリポジトリもアーカイブされています。 今回は、このmirador-sync-windowsを試すリポジトリを作成したので、紹介します。 リポジトリ https://github.com/nakamura196/mirador2-sync-windows/ 使い方 以下のように、manifestパラメータに、比較したいマニフェストファイルを;で区切って指定します。 https://nakamura196.github.io/mirador2-sync-windows/?manifest=https://nakamura196.github.io/mirador2-sync-windows/data/examples/org.json;https://nakamura196.github.io/mirador2-sync-windows/data/examples/inf.json GUIの使用方法については、上記の動画をご参照ください。 上記の例は、以下の「シェリー書簡の透過光画像を使ったIIIFアプリケーション」のデータを利用しています。 https://utda.github.io/shelley/ まとめ 今後、本機能をMirador 3のプラグインとして開発したいと思います。 また本モジュールはほぼ同一の画像を複数比較することを目的としていますが、対応点の計算などにより、ほぼ同一でない画像の比較も行えるような機能開発を行いたいと思います。 mirador-sync-windowsについて、参考になりましたら幸いです。

2024年6月19日 · 1 分 · Nakamura

Mirador2のPhysical Document Rulerを試す

概要 IIIFのLinking to External ServicesにPhysical Dimensionsがあります。 https://iiif.io/api/annex/services/#physical-dimensions 以下のように説明されています。 For digitized objects, it is often useful to know the physical dimensions of the object. When available, they allow a client to present a ruler, or other rendition of physical scale, to the user. (機械翻訳)デジタル化された物体の場合、その物体の物理的な寸法を知ることはしばしば有用である。利用可能な場合、クライアントが定規やその他の物理的な縮尺をユーザーに提示することができます。 Mirador ver.2とver.3では、それぞれ以下のプラグインが存在します。 ver.2 https://github.com/dbmdz/mirador-plugins#physical-document-ruler ver.3 https://github.com/ubleipzig/mirador-ruler-plugin 残念ながらver.3のプラグインをうまく導入することができませんでした。そこで、Mirador2を対象に、Physical Document Rulerを使用する方法を説明します。 結果、例えば東京大学史料編纂所所蔵の大型絵図である正保琉球国絵図写(請求記号:S島津 76-2-4、法量:354.1×731.0cm)を対象にした場合、以下のように定規を表示させることができます。 ソースコードの準備 以下のリポジトリからソースコードを取得できます。 https://github.com/nakamura196/mirador2 Mirador2のプラグインを格納する以下のフォルダmirador/pluginsに対して、以下で公開されているPhysicalRulerのソースコードをコピーしています。 https://github.com/dbmdz/mirador-plugins/tree/main/PhysicalRuler そして、index.htmlで以下のように参照しています。 < b / o < < < < b d d s s s o y i c c c s d > v r r r c y i i i r > i p p p i d t t t p = t " s s t > v r r y i c c p e = = e w " " = e m m " r i i t " r r e > a a x < d d t / o o / d r r j i / / a v m p v > i l a r u s a g c d i r o n i r s p . / t m P " i h > n y . s j i s c " a > l < R / u s l c e r r i / p p t h > y < s / i s c c a r l i R p u t l > e r . j s " > < / s c r i p t > データ マニフェストファイルの各Canvasに対して、serviceを追記します。physicalScaleは実寸(cm)をピクセル数で割った値を用いています。 ...

2023年8月29日 · 4 分 · Nakamura

Mirador3プラグイン開発: Text Overlay pluginで縦書き対応を行う

概要 Text Overlay plugin for Mirador 3は、OCRまたはトランスクリプションに基づいて選択可能なテキストオーバーレイを表示するMirador3のプラグインです。 https://github.com/dbmdz/mirador-textoverlay 以下でデモページが公開されています。 https://mirador-textoverlay.netlify.app/ 一方、日本語などの縦書きテキストを表示してみると、以下のようにうまく表示ができませんでした。 そこで、上記のリポジトリをフォークして、縦書きテキストも表示できるようにしました。以下のリポジトリでソースコードを公開しています。(いずれプルリクエストも検討したいと思います。) https://github.com/nakamura196/mirador-textoverlay 結果、以下のように縦書きテキストも表示できるようになりました。 デモページは以下です。 https://nakamura196.github.io/mirador-integration-textoverlay/?manifest=https://nakamura196.github.io/static/iiif/6722fa34-2fff-11ee-a029-0242ac1c000c/manifest_o.json&annotationState=1&canvasIndex=3 以下、本モジュール開発に関連する事項をメモします。 マニフェストファイルの構造 本モジュールでは、以下の要件を満たすIIIFマニフェストが必要とのことでした。 https://github.com/dbmdz/mirador-textoverlay#requirements-for-supported-iiif-manifests いくつかのオプションがありますが、以下のwellcome collectionのマニフェストを参考にしました。 https://iiif.wellcomecollection.org/presentation/v2/b18035723 Canvas毎にseeAlsoでALTO XMLファイルへのURLが指定されています。 { } { } { } { } { } " " " " " " } " " " " , , , } " } " " " @ @ f h w s ] " ] " @ @ l t " " " " " " " " , s , h w i i t o e i e " " " " " " , o , w i t a h " " " w h w h w h w h } e " " " " e i m { d y r i d r @ @ p p w h } t { } i d y b u @ @ s i e i e i e i e e @ p f l i d a " p m g t v c i r r i e h t " p e m i t e " " " " " " " d i d i d i d i ] A i r o a g t g " " " " : e a h h i o d o o d i } " e " " " h : e l b d y r @ @ p p w h s t g t g t g t g l d o r b h h e @ @ m r " t t " c n " f t t g , o r @ @ l i " " n " p v c i r r i e i h h h h h h h h s " f m e t " s i t o e " : " " : e t : i o h h n C i t a n " : : a : e i o d o o d i z " t " t " t " t o : i a l " : " d y t s h : : " e l c " t " o d y b " h i " c n " f t t g e : " : " : " : " " l t " : : " p i o t " 7 : x " e o : " : n " p e : t " " l " : e t : i o h h s : : : : : " e " : 2 : e v u t d " 1 3 t h " l : t : e l t s - " h " e l c " t " 7 1 2 7 h " : 3 4 [ " a r p c i 0 2 { " t : " 2 " e " " " p c " : t " : x " e o : " : 2 1 4 2 8 4 3 1 { t : " 3 1 " : t c s t m 2 , : t : 4 3 h n " : : " s : , t d t h " l : , 0 3 0 6 0 2 0 t " M 7 1 h i e : y a 4 p " 1 3 t t h : C { p c { " t : " 7 [ 0 , 0 , 0 , 2 p " t E 2 , t " o " / p g , " s h " 1 7 t " t " " / a s t : t : 3 1 4 s h e T , t o n : / e e h : t h , 2 p : t s T / n : y p " 2 0 : t x S p a " i s / t / t t s p c e i v / p " s h " , 2 / t t - s : : { i : j t / p t : [ s : x i a / e h : t h 4 / p / A : A i I p p i : p / : A t i s i s t / t t , a : x L / n " f m e : i / : / / n f " i : t / p t p / m T / n s . a g / i / / i / n o . , i I p i : p i l O i o c w g " / f i / i i o f w f m : i / : . w " i t : e e , i . i i i i t e . a / i / / w w , X i a p l " i w i i f i a p l w g / f i / e w M f t a l , i e f i . f t a l e e i . i i l . L . i i c f l . f w . i g c l " i w i i l l " w o n o . l i . e w o e o l , i e f i c o e n t m i c o i l e n m c f l . f o c l " i e o / o l l L e o . l i . m . l , n c m a / c l i - c m i c o i e g c g o a e p a o c s " o e o / o c o o " l p c i p m o t l c m a / o v m , l i / i e m " l o a e p a l / e e l i / c e , e l p c i p l s c c i l m i o c c l i / i e t o t m e a m l o t e l i / c a l i a c g a l l i c i l m i t n l o g t e g e l o t m e a m i d e n e i e c e n i a c g a o a c . / 2 " t c . o g t e g n r t o 2 n , i t o n e i e . d i r / . l o i r . / 2 " o s o g c o e n o g o 2 n , r / n / o r v . n / r / . l g a . i n g e o . p g c o e / l o m t / l r o r / o r v t t r a e i 1 g r e t n g e e o g g x m . / g s h t / l x / / e t a j p / e u e t 0 t p / . g s r a n m x h . / 3 r b j e e n t b t u j a / e 1 s n s n a s . m s l a s 8 b " e o t / j b o t l e 0 n 1 , n t i b s s n o t n 3 " 8 t a o 1 o / " / o t 5 , 0 a t n 8 n b , b . a 7 3 t i / 0 " 1 1 x t 2 5 i o b 3 , 8 8 s i 3 7 o n 1 5 0 0 d o _ 2 n s 8 7 3 3 " n 0 3 / / 0 2 5 5 , / 0 _ b v 3 3 7 7 b 0 0 1 2 5 _ 2 2 1 3 0 8 / 7 0 3 3 8 . 0 0 b 2 0 _ / 0 J 3 3 1 3 0 0 b 3 P . 5 8 / 3 0 1 5 2 J 7 0 c . 0 8 7 / P 2 3 a J 3 0 2 f 2 3 5 n P . 3 3 u " / 7 v 2 J 5 / l , c 2 a / P 7 c l a 3 s f 2 2 a / n / e u " 3 n 7 v b s l , _ v 3 a 1 / l 0 a 2 s 8 b / 0 s , e 0 1 7 0 e 1 s 3 8 2 3 s 0 / 5 0 , . / 2 b 7 3 1 J b 4 1 2 5 0 P 1 / 8 3 7 0 2 8 0 0 _ 2 / " 0 / 3 0 3 0 , 3 d 5 0 _ / 5 e 7 0 0 d 7 f 2 3 0 e 2 a 3 . 0 f 3 u _ J 3 a _ l 0 P . u 0 t 0 2 J l 0 . 0 / P t 0 j 3 l 2 . 3 p . i " j . g J n , p J " P e g P , 2 " " 2 " , , / p a i n t i n g / a n n o " , まとめ 開発したプラグインについて、xmlファイルのロードが完了しない時があるなど、引き続き改善が必要ですが、Mirador3のプラグイン開発やIIIF、OCR結果の活用にあたり、参考になりましたら幸いです。 ...

2023年8月22日 · 9 分 · Nakamura

Mirador 3のmirador-annotationsプラグインとSimpleAnnotationServerを試す

概要 mirador-annotationsはアノテーションの作成ツールを追加するMirador 3のプラグインです。 https://github.com/ProjectMirador/mirador-annotations 今回、以下のSimpleAnnotationServerとの組み合わせを試してみましたので、その備忘録です。 https://github.com/glenrobson/SimpleAnnotationServer SimpleAnnotationServerの準備 以下のGetting Startedの通りに進めます。 https://github.com/glenrobson/SimpleAnnotationServer#getting-started http://localhost:8888/index.html にアクセスすると、以下の画面が表示されます。 エンドポイントは http://localhost:8888/annotation/ のようで、登録済みのアノテーションの一覧(はじめは空)が表示されます。 このエンドポイントをMirador 3から利用することになります。 Mirador 3の準備 ソースコードから 以下のサイトからソースコードをクローンして立ち上げます。 https://github.com/ProjectMirador/mirador-annotations g c n n i d p p t m m m c i i r l r u o a # n n d e o n s r p t h - m a t a r t n i t p n s o : t - / a f / t o g i r i o c t n e h s u が b 必 . 要 c か o も m し / れ P ま r せ o ん j e c t M i r a d o r / m i r a d o r - a n n o t a t i o n s http://localhost:3000/ にアクセスすると、以下の画面が表示されます。 ...

2023年8月18日 · 14 分 · Nakamura

Mirador3プラグイン開発: レイヤーのスライドショーを行う

概要 レイヤーのスライドショーを行うMirador3プラグインを開発しました。 https://youtu.be/r1ShHGqCs24 以下の記事にある通り、以前、Mirador2のカスタマイズにより実現しました。以下では「起絵図」のIIIF実装を試みています。 https://nakamura196.hatenablog.com/entry/2020/08/14/073700 今回はMirador3のプラグインとして開発を試みました。 リポジトリ https://github.com/nakamura196/mirador-layer-slideshow-plugin デモサイト https://nakamura196.github.io/mirador-layer-slideshow-plugin/ まとめ 改善の余地が多々ありますが、参考になりましたら幸いです。

2023年8月3日 · 1 分 · Nakamura

Mirador3プラグイン開発: ウインドウをコピーする

概要 Mirador3のプラグインとして、ウインドウをコピーするプラグインを作成しました。 なお本機能は以下のプラグインですでに提供されているものです。 https://github.com/ProjectMirador/mirador-plugin-demos そのため、本プラグインはプラグインの開発手順を学ぶために作成しています。そのような観点で、本プラグインが参考になりましたら幸いです。 画面例は以下です。 ソースコードは以下です。 https://github.com/nakamura196/mirador-copy-window-plugin デモサイトは以下です。 https://nakamura196.github.io/mirador-copy-window-plugin/ 開発メモ 本プラグインの開発にあたり、まず以下のリポジトリをcloneし、変更を加えていきました。 https://github.com/ProjectMirador/mirador-dl-plugin src/index.js まず以下のファイルについて、miradorDownloadをMiradorCopyWindowに書き換えました。 https://github.com/nakamura196/mirador-copy-window-plugin/blob/main/src/index.js src/MiradorCopyWindow.js 以下のファイルが主に編集するファイルです。 https://github.com/nakamura196/mirador-copy-window-plugin/blob/main/src/MiradorCopyWindow.js 本ファイルは、まず以下のファイルの内容をコピーしました。 https://github.com/ProjectMirador/mirador-plugin-demos/blob/master/src/plugins/copy-window.js まず末尾の以下の記述から説明します。 e } x p t m c m m o a o o a a r r d m p p t g e p D S e : o i t d t n s a e : ' e p t f a n a e a ' d t t T u W d : c o l i ' h P t n , C T r d o o o { o p P p w y r s T W o : o i p p n s m M d : a e o p n w m S u C a t ' o p a , m D t p i e o s T n p o e a P n t r t c o , h p T s o , P r o p s , targetとmode targetはコンポーネントを設置する場所を指定します。またmodeはコンポーネントの追加方法を指定します。modeについては、addやwrapという選択肢があるようでした。 ...

2023年7月19日 · 5 分 · Nakamura

Mirador 3でビューポートが設定した制約を満たすようにズームを行う

概要 Mirador 3で特定の領域にズームにするには、以下に記載があるような方法で行います。 https://github.com/ProjectMirador/mirador/wiki/M3---Mirador-3-Frequently-Asked-Questions#q-how-do-i-change-the-view-of-an-image-to-zoom-to-a-certain-area 具体的には以下です。 c } c } v } m o ; o ; a ) i n x y w h n x y r x y z ; r B s : : i e s : : : : o a o t d i t a o d x 1 1 t g b b c z z m o b 4 8 h h z o o t o o : r t o 2 3 : t o x x i o o I o x 0 1 : o T T o m m 1 n T , , 8 m o o n C C s z o 0 1 C Z Z e e / t o Z 0 1 e o o = n n a o o , 9 n o o t t b n m o 5 t m m M e e o c m e . . i r r x e t r x y r . . T . o = a x y o s = + + d , , Z t { o o o { b b r o r o o . m e x x a . . T T c w d o o t i i Z Z i d s o o o t p o o n h a m m s t . . . c w h u h i e p ( d i d a t g a c h h t t t e i / V o / i n 2 e ) , 2 w ; p o r t ( w i n d o w I d , { 内部的にはOpenSeadragonのpanToとzoomToが使用されているようでした。 ...

2023年7月11日 · 9 分 · Nakamura

IIIF Mirador2のアノテーション画面の説明

概要 IIIF Mirador2のアノテーション画面の使い方(の一部)を説明します。 四角形アノテーションの作成 https://www.youtube.com/watch?v=jny09nLZvLU パス(多角形)アノテーションの作成 アノテーションを終了する場合には、ダブルクリックします。 https://www.youtube.com/watch?v=4cM-6-rXL9M 既存のアノテーションの修正 https://www.youtube.com/watch?v=HlE36inbgq4 既存のアノテーションの削除 https://www.youtube.com/watch?v=STk2vjLc_-k まとめ IIIF Mirador2を用いたアノテーション付与の際の参考になりましたら幸いです。

2023年6月21日 · 1 分 · Nakamura

Mirador 3 による画像比較ツールを作成しました。

Mirador 3 による画像比較ツールを作成しました。URLは以下です。 https://ldas-jp.github.io/viewer/input/ またGitHubリポジトリのURLは以下です。 https://github.com/ldas-jp/viewer 以下が入力フォームです。比較する画像のIIIFマニフェストファイルのURLとCanvasのURIを指定します。「例」にあるボタンをクリックすることで、入力例をご確認いただけます。 「開く」ボタンをクリックすると、以下のようにMirador 3が起動します。入力情報に基づく画像比較を行うことができます。 Mirador 3を用いた画像比較にあたり、ご活用いただけますと幸いです。

2022年7月8日 · 1 分 · Nakamura

Mirador 3にmirador-image-toolsプラグインを追加して、1つのjsファイルにまとめて配布する方法

概要 表題の通り、Mirador 3にmirador-image-toolsなどのプラグインを追加して、1つのjsファイルにまとめて配布する方法を記述します。 JavaScriptに関する知識不足により、誤った記述があるかもしれません。間違っている点などがありましたらご指摘いただけますと幸いです。 ゴール 以下に示すようなHTMLファイルを記述することにより、以下のURLから確認できるアプリを作成することが目的です。mirador-image-toolsプラグインが有効化されているMirador 3を使用しています。 https://nakamura196.github.io/mirador-integration-alt/ < < ! h / D t < < h O m h / b / t C l e < < h o < < < < b m T > a m t e d d ! s s / o l Y d e i a y i - c c c c } M s d > P > t t d > v - r r o o ; i c y E a l > i i n n i w ] r r > e i ポ p p 注 s s d i a i h c > d イ t t 意 t t : n { } d p t h B = ン > 点 d , o t m a a " ト s { c " o i i m r > l r s d r M o d w m m a . > s i e c i n e s a a n v e c m = r f m : g g i i t o " a i o e e f e = M " h d g " [ T T e w " i > t o , o o s e u r < t r = o o t r t a / p , l l I ( f d d s { s s d c - o i : m E O : o 8 r v / i n p n " < > / r a e " f n a b n h i t a d l : t g i k o e t , t a r d t p l m I : r s [ e u m u : . > r a t e / . a g r , / . 1 e u i m 9 T e i i 6 o , i r . o f a g l . d i s d o t P l r h l . I u u i m b g t a . i c g i n . e o } u T / - o m = t o i o l r i k s a n y P d t o l o e . u r g a g - r c i i a . n n t j ] t i p ) e o / ; g n r r e a p t o i / o i n i - i a f l / t f / b d d i 0 s 4 t 7 / 9 m b a - i d n b . b j 4 s - " 4 > e < a / a s - c 9 r 5 i b p 8 t - > f 2 7 e 1 c 4 2 3 e 4 b / m a n i f e s t " , ポイントは、上記のソースコードで「<!-- ポイント -->」としている点です。1つのjsファイルを読み込むことで、Mirador 3とmirador-image-toolsプラグインを使用しています。 ...

2022年6月8日 · 4 分 · Nakamura

Nuxt 2を用いたMirador 3の使用例を紹介するGitHubリポジトリの修正

Nuxt 2を用いたMirador 3の使用例を以下のGitHubリポジトリで紹介しています。 https://github.com/nakamura196/nuxt-mirador ただ上記のリポジトリにおいて、production環境において不具合が生じることがわかりました。具体的には、ページ遷移後にMiradorの表示が崩れてしまう不具合です。 送っていただいたissue https://github.com/nakamura196/nuxt-mirador/issues/1 このissueについて、さらに不具合を修正したPull requestも送っていただきました。 https://github.com/nakamura196/nuxt-mirador/pull/2 具体的には、以下に示すように、beforeDestroyでunmountする必要がありました。 https://github.com/nakamura196/nuxt-mirador/pull/2/files 自分では不具合の解消方法が分かりかねたので、大変助かりました。 Nuxt(Vue)におけるMirador 3の使用において、参考になりましたら幸いです。

2022年5月1日 · 1 分 · Nakamura

Omeka S Mirador モジュールの使い方

概要 Omeka SにMiradorビューアを追加するモジュールについて紹介します。 GitHubリポジトリは以下です。 github.com Mirador2と3の両方が利用可能です。また、各種プラグインを設定画面から追加することができます。この記事では、画像の回転や左右反転を可能にする「Imgae tools」プラグインを追加する方法を紹介します。 本モジュールを利用するには、Omeka SにIIIFサーバ機能を持たせるか、外部のマニフェストファイルを参照する必要があります。前者の導入方法については、別の記事で紹介予定です。 インストール 特に注意点はありません。 使用方法 モジュールのインストール後、以下に示す各サイトの設定画面において、Miradorの設定を行うことができます。 特に、「Mirador plugins for v3」において、プラグインの追加を行うことができます。画像の回転やフリップなどを可能にする「Image tools」プラグイン等を導入可能です。 導入後、以下のように当該プラグインが表示されます。 Omeka SでMirador 3を使用する際の参考になれば幸いです。

2022年3月1日 · 1 分 · Nakamura

Mirador 3のimage tools(画像の回転など)を初期表示で有効にする方法

概要 今回はMirador 3のimage tools(画像の回転など)を初期表示で有効にする方法について説明します。 デフォルトのMirador 3では、Mirador 2ではデフォルトの機能として提供されていた、画像の回転や明度・コントラスト・彩度の調整機能は提供されていません。 これを実現するためには、以下のimage toolsというプラグインを追加する必要があります。 github.com 以下、プラグインの導入方法と、設定方法について説明します。 導入方法 image toolsプラグインの導入方法としては、上記のページの他、以下のリポジトリが参考になります。 モダンなフロントエンドビルドシステム github.com vueでの導入方法 github.com Nuxt.jsでの導入方法 github.com 設定方法 各ウインドウに対して、以下の設定が利用できます。 設定値 タイプ 初期値 説明 imageToolsEnabled boolean false プラグインの表示を有効にする imageToolsOpen boolean false デフォルトでimage toolsを開く 例えば以下のページで、image toolsを初期表示で有効にした例をご確認いただけます。 https://github.com/nakamura196/mirador-integration-vue/blob/master/src/App.vue まとめ Mirador 3の導入の参考になりましたら幸いです。

2021年9月16日 · 1 分 · Nakamura