Annotated Image Viewer

Firefox で動作確認。IE非対応。使い方は下のほうにあります。

DEBUG

Show/Hide Annotations

説明

画像に注釈をつけられるインターフェースを作ってみました。 ドラッグで画像を動かしたり範囲を選んで注釈をつけたりできます。 アイデア自体にはあまり新しいところはないので、 ひょっとして似たようなのがどっかでちゃんと作られてるかもしれません。 Firefox 1.0/Windows XP でしか動作確認してません。IE はダメみたいです。 手元の Mozilla 1.4b では動くっぽいです。他は試してません。 サンプルのレンブラント『夜警』の画像はWikipedia から。

使い方は、

• 画面上をドラッグすると、画像の表示領域が移動します。
• 「Select Area」ボタンを押して画面上をドラッグすると範囲を選択できます(左上から右下に向かってドラッグして下さい)。 マウスボタンを離すとダイアログが出るので、そこに注釈を書き込みます。
• 注釈がついている範囲の表示・非表示は、注釈のチェックボックスで切りかえます。
• 「Show All」で全部の範囲を表示、「Hide All」で全部の範囲を非表示にします。
• 注釈の範囲が非表示になっている時に、注釈のつけられた領域にマウスを持っていくとカーソルが変わります (Firefox などのブラウザの機能によっては注釈がツールチップで表示されます)。 そこでクリックすると領域が表示されます。

もうちょっと直感的に素直にできるといいんですが、まぁとりあえず。

既知の問題と足りない機能：

• 注釈の削除ができない。
• 保存ができない。これはサーバ側に何か仕掛けが必要でしょう。
• 注釈を入力するダイアログでキャンセルすると空の注釈ができちゃう。本来は何も加わらないようにすべき。
• 範囲選択が左上から右下にしかできない。逆もできるべき。
• 範囲選択中にマウスが画面の外に出たら、中の画像が追随したりするといいんでしょうけど、面倒そう。
• IE で動いたほうがいいんでしょうけど、そしてやればできそうだけど、でも面倒くさそう。

画像は普通に一度に読みこまれるだけで、分割読み込みとかしてません。そういう機構をつけてやると、 すごく大きな画像でも使えるんでしょうけど、タイル分割した画像も用意しなくちゃいけないので、 とりあえずそれについては忘れることにしました。

サーバ側に蓄積できるようにすると、注釈にさらに他の人がコメントできたりする仕組みも作れそうです。 そうすると、教育関係では結構使えるかもしれません。美術作品じゃなくても、例えばパーティーの時の写真に 顔に名前を注釈で入れたり、そこに FOAF のデータを付けてクリッカブルマップにしたり、 写真の上で知人関係を可視化したりできるかもしれません。