Openseadragon

概要 今回開発したエディタは、IIIF対応の高解像度画像上で任意の座標を記録・管理するためのWebベースのツールです。URLパラメータで画像を指定でき、様々な研究プロジェクトで利用可能な汎用的な座標記録ツールとして設計されています。 https://youtu.be/UqPo5Xrkin8 主要技術スタック OpenSeadragon : IIIF画像ビューアライブラリ (v4.1) SVGオーバーレイ : マーカー表示用 localStorage : データの永続化 Vanilla JavaScript : フレームワークレス実装 技術的特徴 1. URLパラメータによる画像指定 ツールの最大の特徴は、URLパラメータで任意のIIIF画像を指定できることです: f } c u o n n c s t c c i } r t i o o f e o n n t i n s s ( D u m t t u t } } e r a g r r f n g e u u l y c a e t r r P a u ' U I l l a { r t c a l h r m P P r e c o l t t l a a a a t h n e t g r r m u s r i p = e a a ) r ( o t m s U m m n e l ( a : g r s { ) e ' g / e l = d . U e / t F = e { e R i I r u c r L U m m o n r o r パ R g a m e l d o ラ L . g Q w P e r メ t e u a U ( ー o U e U r R ' タ y r r R a I E の o l y L m C r デ b F ( S s o r コ u r ) e . m o ー n o a g p r ド k m { r e o に o Q c t n d 失 - u h ( e e 敗 l e P ' n c し a r a u t o ま b y r ' ( d し . ( a ) u i た j ) m ; r n 。 p ; s l g デ / ( P フ i w a U ォ i i r R ル i n a L ト f d m 画 / o ) p 像 p w ; a を r . r 使 e l a 用 m o m し o c e ま d a t す e t e 。 r i r ' n o : ) _ n ' ; c . , h s i e e n a ) e r ; s c e h / ) s ; u i k e i c h u z u / S u i k e i c h u u z u _ g r i d _ l . t i f ' ; 使用例: ...

概要 IIIF画像に対する多角形アノテーション支援ツール「IIIF Annotator」の改修を行いました。具体的には、以下の2点に取り組みました。 Image Server未使用のマニフェストファイルへの対応 アノテーション付きIIIFマニフェストファイルのエクスポート機能 TEI/XMLファイルのエクスポート機能 以下、これらの改修について説明します。 背景 以下の記事で、アノテーション付与ツールを新規に作成した理由等を説明しました。 今回追加した機能は他のツールでも提供されている機能群になりますが、利便性向上のため追加実装しました。 Image Server未使用のマニフェストファイルへの対応 以下の記事で紹介しているように、IIIFマニフェストファイルにおいて、Image API（Image Server）を使用しないオプションを取ることができます。デメリットもありますが、Cantaloupe Image Serverなどのソフトウェアを導入せずに使用できる点に利点があります。 IIIF Annotatorについて、これまではImage Serverの使用を前提として実装していましたが、今回の改修により、Image Server未使用のマニフェストファイルも読み込めるようにしました。 具体的には以下のように、serviceの有無に応じて、OpenSeadragonに渡すtileSourcesを調整しました。 c o n . } . ) s m ) f ; t a c c i c } i } } i ( p o o f o ; f l t t ( n n n i s r e r } t i t i ( s s ( s d e ( e l e ; e l i l c t t ! t : r b t s t t u r e l e a a v o u e u y r ( S e S n a a n b s i d r r p l o S o v n n n o t c y n { n e : u o u a n n o d r e . : r u r s o o t y i ? s b { b c r c : t t a n : e o " o e c e a a t = g r d i d : e s C t t i ; { v y m y a i i o a i . a . s ! = n o o n n " c s g i t = v n n ) n @ e e e d r = c a P o i r " , i a s a = r t d & v , n n n ) g e a " & i g u v e a t t : c l a = n u i b e | l s > = n r o s o [ e o n n t d 0 { s { c t . r y ] a a n b i . [ t n t u o n s " y v i l d g e @ p a o l y r i e s n ; } v d : . P a [ i " i a s ] c ] s t g ; e t e e { . + r m ? l i s . e " n ? i n / g . t g i ; [ e t n 0 m h f u ] s o r ; ? > . l . j : [ 0 s 0 ) o s ] n t ; { " r ; i n g } | n u l l ) = > エクスポート機能 アノテーション付きIIIFマニフェストファイル、およびTEI/XMLファイルとしてエクスポートする機能を追加しました。エクスポートボタンを押すと、以下のような選択肢が表示されます。 ...

概要 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 ' , 応用 上記を応用して、以下のような初期設定を行ってみました。 ...

概要 Annotorious OpenSeadragon Pluginを使って、IIIFマニフェストファイルからロードした複数画像に対するアノテーション付与を行うサンプルプログラムを作成しました。以下からお試しいただけます。 https://nakamura196.github.io/nuxt3-demo/annotorious ソースコード 以下を参考にしてください。 https://github.com/nakamura196/nuxt3-demo/blob/main/pages/annotorious/index.vue ポイント npm install –force ライブラリ@recogito/annotorious-openseadragonはopenseadragonのv5に非対応のようで、強制的にインストールする必要がありました。 n n n n p p p p m m m m e e e e r r r r r r r r o o o o r r r r C p n o e o u e d @ l r e r d _ e o m c n p o o o e d g t n u i s l t r e e o e a s s d a o r @ n l a r n v g e o e o c t n o o d @ g r e " i i p ^ t o e 3 o u n . / s d 0 a - e . n o n 0 n p c o e y t n : s r e ^ i a 4 o d . u r 0 s a . - g 0 o o " p n e @ f n " r s ^ o e 2 m a . d 7 @ r . r a 1 e g 8 c o " o n g f i r t o o m / a t n h n e o t r o o r o i t o u p s r - o o j p e e c n t s e a d r a g o n @ 2 . 7 . 1 8 plugins プラグインとして、Annotoriousを読み込みました。 ...

概要 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で起動します。 ...

OpenSeadragonのzoomToメソッドを使用した後に、viewport.applyConstraints()を呼び出すことで、ビューポートが設定した制約を満たすように調整されます。これは、ズームやパンの操作がビューポートの制約を超えた場合に有用です。 以下にその例を示します： c v v o i i n e e ` s w w v t e e i r r e z . . w o v v e o i i r m e e ` L w w は e p p O v o o p e r r e l t t n . . S = z a e o p a 2 o p d . m l r 0 T y a ; o C g ( o o z n n o s の o t イ m r ン L a ス e i タ v n ン e t ス l s ) ( ; ) ; 上記のコードでは、まずビューポートのズームレベルを指定した値に設定します。その後、applyConstraintsメソッドを呼び出すことでビューポートがその制約を満たすように調整されます。つまり、もし指定したズームレベルが設定された制約を超えていた場合、ズームレベルはその制約に合うように調整されます。 ...

（以下、ChatGPTによる回答です。参考になりましたら幸いです。） OpenSeadragon(OSD)のfitBoundsとfitBoundsWithConstraintsの違いは、制約を適用するかどうかにあります。 OSDは高度なズーム機能とパニング機能を持つJavaScriptライブラリで、深くズーム可能な画像やコンテンツを扱う際に使われます。その中のfitBoundsとfitBoundsWithConstraintsは、ビューポート（表示領域）を特定の境界に合わせるメソッドです。 fitBounds(rectangle, immediately): ビューポートを指定した矩形に合わせます。immediatelyパラメータがtrueの場合、アニメーションなしで即座にビューポートをフィットさせます。falseの場合、アニメーションを伴ってビューポートをフィットさせます。 fitBoundsWithConstraints(rectangle, immediately): fitBoundsと同じ動作をしますが、ビューポートのズームとパンの制約を考慮します。つまり、指定した矩形にフィットさせる前に、最小ズームレベル、最大ズームレベル、画像のパン制約などを確認します。これにより、ユーザーが画像をズームやパンしても、設定した制約を超えることがありません。 つまり、主な違いはfitBoundsWithConstraintsがビューポートの制約を適用することで、その制約を超える動作を防ぎます。これは特に、ユーザーが画像をズームイン/ズームアウトしたり、画像をパン（スクロール）する際の振る舞いを制御するのに重要です。

概要 Nuxt3でOpenSeadragonとOpenSeadragon SVG Overlayを使う例を作成しました。（鯰に御札を貼る要石）「国立国会図書館 所蔵」の画像を利用しています。 OpenSeadragon https://nuxt3-demo-nine.vercel.app/osd OpenSeadragon SVG Overlay https://nuxt3-demo-nine.vercel.app/osd-svg 方法 ポイントとして、以下のようなプラグインファイルを用意しました。これにより、SSR時に生じる不具合を解消できました。 https://github.com/nakamura196/nuxt3-demo/blob/main/plugins/osd.client.js またsvg overlayに関する記述は以下を参考にしました。 https://github.com/openseadragon/svg-overlay/blob/master/openseadragon-svg-overlay.js まとめ よりよい記述の方法があるかと思いますが、Nuxt3でのOpenSeadragonの利用にあたり、参考になりましたら幸いです。

概要 TEIビューアでの利用を想定したCustom OpenSegDragon Viewerを作成しました。 背景 以下のようなTEIとIIIFを対応させたビューア開発において、次に示す機能を持ったビューアが必要でした。 https://www.hi.u-tokyo.ac.jp/collection/digitalgallery/wakozukan/tei/ IIIFのマニフェストファイルを読み込むことができる。 ビューアコンポーネント側でのコマ送りを、コンポーネント外で把握することができる。 画像の部分領域をハイライトすることができる。 上記の要件を全てを満たす既存のIIIF対応ビューアを見つけることができなかったため、独自のビューアの開発を試みました。合わせて、npmパッケージとして公開することも試みました。 開発したビューア ドキュメンテーション等がまだ不十分ですが、以下のページで公開しています。このページで、ソースコードへのリンクも掲載しています。 https://www.npmjs.com/package/@nakamura196/osd-custom-viewer vue3とviteを使ったコンポーネントの開発およびnpmでの公開にあたっては、以下のサイトを参考にしました。 https://blog.egmond.dev/vue-component-to-npm-package 使用例 以下のページで導入例をご確認いただけます。 https://nakamura196.github.io/nuxt3-iiif-viewer/custom-osd コンポーネント内外からのコマ送りが可能です。これにより、例えばIIIF画像とTEIテキストの並列表示を行った際、TEIテキスト側からのコマ送りや、画像のコマ送りによる当該テキストへのスクロールなどを行うことができます。 またハイライト機能用いることで、あるテキスト行に対応した画像の部分領域をハイライトさせる、といったことが可能です。 使用例のソースコードは以下です。 https://github.com/nakamura196/nuxt3-iiif-viewer/blob/main/pages/custom-osd/index.vue ssrでの公開にあたり、pluginsフォルダに以下を追加しています。 https://github.com/nakamura196/nuxt3-iiif-viewer/blob/main/plugins/custom-osd.client.js まとめ ドキュメンテーションの充実や、IIIF v3への対応など、多くのTODOが残っていますが、参考になりましたら幸いです。

Vue3でOpenSeadragonを使用するサンプルリポジトリを作成しました。 以下が動作例です。 https://static.ldas.jp/vue3-osd/ ソースコードは以下です。 https://github.com/ldasjp8/vue3-osd Vue3初学者のため、誤りなどがあるかもしれませんが、参考になりましたら幸いです。