概要

TEIビューアでの利用を想定したCustom OpenSegDragon Viewerを作成しました。

背景

以下のようなTEIとIIIFを対応させたビューア開発において、次に示す機能を持ったビューアが必要でした。

蒋洲咨文テキストビューア
蒋洲咨文のテキストを閲覧するためのビューアです。
蒋洲咨文テキストビューア

  • IIIFのマニフェストファイルを読み込むことができる。
  • ビューアコンポーネント側でのコマ送りを、コンポーネント外で把握することができる。
  • 画像の部分領域をハイライトすることができる。

上記の要件を全てを満たす既存のIIIF対応ビューアを見つけることができなかったため、独自のビューアの開発を試みました。合わせて、npmパッケージとして公開することも試みました。

開発したビューア

ドキュメンテーション等がまだ不十分ですが、以下のページで公開しています。このページで、ソースコードへのリンクも掲載しています。

www.npmjs.com
www.npmjs.com

vue3とviteを使ったコンポーネントの開発およびnpmでの公開にあたっては、以下のサイトを参考にしました。

Mike van Egmond - Web Development Blog
Blog from Mike van Egmond, Web developer from the Netherlands.
blog.egmond.dev

使用例

以下のページで導入例をご確認いただけます。

nakamura196.github.io
nakamura196.github.io

コンポーネント内外からのコマ送りが可能です。これにより、例えばIIIF画像とTEIテキストの並列表示を行った際、TEIテキスト側からのコマ送りや、画像のコマ送りによる当該テキストへのスクロールなどを行うことができます。

またハイライト機能用いることで、あるテキスト行に対応した画像の部分領域をハイライトさせる、といったことが可能です。

使用例のソースコードは以下です。

nuxt3-iiif-viewer/pages/custom-osd/index.vue at main · nakamura196/nuxt3-iiif-viewer
Contribute to nakamura196/nuxt3-iiif-viewer development by creating an account on GitHub.
GitHub

ssrでの公開にあたり、pluginsフォルダに以下を追加しています。

nuxt3-iiif-viewer/plugins/custom-osd.client.js at main · nakamura196/nuxt3-iiif-viewer
Contribute to nakamura196/nuxt3-iiif-viewer development by creating an account on GitHub.
GitHub

まとめ

ドキュメンテーションの充実や、IIIF v3への対応など、多くのTODOが残っていますが、参考になりましたら幸いです。