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