Image Annotatorの使い方

Image Annotatorの機能はどのサイトでも利用できます。必要なのはツールのファイルの他、OpenSeadragonAnnotoriousです。

このテストページでのhead要素では次のように記述しています。ハイパーリンクのあるファイルは当サイト作成のものなので、ここからダウンロードして使ってください。例は当サイトでの配置パスを用いていますが、どこに置いても構いません。なおOpenSeadragonで用いるアイコン画像フォルダの位置は、imgannot.jsMia.prep_osd.osdoptionで設定するprefixUrlに記述してください(Annotorious用の追加ボタンアイコンもここに配置します)。

Any site can use the functions of Image Annotator, which requires OpenSeadragon and Annotorious.

The following is the head element of this page. Please download files with hyperlink from this site, along with OpenSeadragon and Annotorious. You can put those files anywhere in your site. Image path option for OpenSeadragon (prefixUrl) should be defined in Mia.prep_osd.osdoption within imgannot.js (button icons for Annotorious should be placed there).

<link rel="stylesheet" href="/lib/js/annot/annotorious.css" />
<link rel="stylesheet" href="/works/2016/pub/imgannot.css" />
<script src="/lib/js/osd/openseadragon.js"></script>
<script src="/lib/js/annot/annotorious.min.js"></script>
<script src="/lib/js/my/annotext.js"></script>
<script src="/lib/js/my/webannotorious.js"></script>
<script src="/works/2016/pub/imgannot.js"></script>

body要素内にはid="openseadragon"を設定したdiv要素を配置します。この要素ロード後にMia.setup()を実行すると、URIのクエリパラメータ u で与えたマニフェスト/Web Annotation/画像URIの内容を表示します。

Place div element with id="openseadragon" in anywhere within body element. Mia.setup() will display manifest / web annotation / images given by u parameter.

<body onload="Mia.setup();">
<div id="openseadragon"></div>
</body>

URIに#p8のようにp+ページ番号をフラグメントで加えると、そのページを最初に表示します(日本古典籍データセット『源氏物語歌合絵巻』を表示する例)。

#openseadragon要素は他の要素と自由に組み合わせて配置できますが、文書情報、画像一覧などは#openseadragonの親要素を基準にしてスクリプトが付加しますので、ひとつラッパ要素を置くと安全です。取得した情報のラベルは、既存のh1要素があればそこに、なければh1を生成して表示します。そのほか必要に応じてimgannot.cssを調整してください。

URI with fragment id (p + page number, e.g. #p8) will make that page displayed initially (try an example to display "Tale of Genji Picture scroll").

#openseadragon element can be placed among any other element. Since tool-generated sections (e.g. document information and page index) are attached based on the parent of #openseadragon, it will be safe to wrap #openseadragon up in a container so as to prevent generated sections from interfering other elements. Document label will be displayed in the h1 element if present, otherwise the tool will generate an h1 node. You can customize imgannot.css as needed.