高解像度画像ビューワーの例(その2):TJPzoom
- 公開日 : 2009年5月10日 (2011年7月31日 更新)
- カテゴリー : ユーザーインターフェース (UI)
高解像度画像は、サイトが扱っている内容によっては、ユーザーからの強い閲覧ニーズがあることを、コラム記事「高解像度画像を閲覧できるようにする」で述べました。これを受けて、高解像度画像を閲覧するためのアプリケーション(ビューワー)、特に無料で気軽に使えるものをご紹介したいと思います。今回採り上げるのは、「TJPzoom」です。
TJPzoomは、JavaScriptを使用したビューワーです。Webページに貼り付けられた元画像の上にマウスポインタを当てると、その部分が虫眼鏡のように拡大表示されます。操作子などの細かなUI(ユーザーインターフェース)が一切無く、ただマウスポインタを重ねるだけなので、シンプルでわかりやすく、非常に直感的と言えます。下記にサンプルを用意してみました。
なおTJPzoomでは、高解像度画像を閲覧中に、マウスボタンを押した状態で上下左右にマウスを滑らせる(ドラッグの要領で)と、以下のように拡大表示領域(虫眼鏡領域)を調整することができます。
- 上に滑らせるとズームイン
- 下に滑らせるとズームアウト
- 左に滑らせると虫眼鏡領域の面積縮小
- 右に滑らせると虫眼鏡領域の面積拡大
TJPzoomの細かい問題を挙げるとすれば、Webページに貼り付けられた元画像のどこにマウスポインタが当たっているのかが、厳密には虫眼鏡領域の下に隠れる形になってしまうため、たとえば細かい情報が詰まったような画像の場合、「どの部分を拡大しているか」を精緻なレベルで捉えにくいかもしれません。とはいえ、UI(ユーザーインターフェース)のシンプルさ、直感的なわかりやすさという点では、よくできたツールだと思います。