Website Usability Info


本文へスキップ



ここから本文です。 現在位置表示(パンくずリスト)は、このすぐ上にあります。

高解像度画像ビューワーの例(その2):TJPzoom

高解像度画像は、サイトが扱っている内容によっては、ユーザーからの強い閲覧ニーズがあることを、コラム記事「高解像度画像を閲覧できるようにする」で述べました。これを受けて、高解像度画像を閲覧するためのアプリケーション(ビューワー)、特に無料で気軽に使えるものをご紹介したいと思います。今回採り上げるのは、「TJPzoom」です。

TJPzoomは、JavaScriptを使用したビューワーです。Webページに貼り付けられた元画像の上にマウスポインターを当てると、その部分が虫眼鏡のように拡大表示されます。操作子などの細かなUI(ユーザーインターフェース)が一切無く、ただマウスポインターを重ねるだけなので、シンプルでわかりやすく、非常に直感的と言えます。下記にサンプルを用意してみました。

サンプル

航空機のコクピット

上の元画像にマウスポインターを当てると、その部分が高解像度で表示されます。

(マウスが使えない場合/JavaScriptが無効の場合:こちらで高解像度画像ファイルを開きます

なおTJPzoomでは、高解像度画像を閲覧中に、マウスボタンを押した状態で上下左右にマウスを滑らせる(ドラッグの要領で)と、以下のように拡大表示領域(虫眼鏡領域)を調整することができます。

  • 上に滑らせるとズームイン
  • 下に滑らせるとズームアウト
  • 左に滑らせると虫眼鏡領域の面積縮小
  • 右に滑らせると虫眼鏡領域の面積拡大

TJPzoomの細かい問題を挙げるとすれば、Webページに貼り付けられた元画像のどこにマウスポインターが当たっているのかが、厳密には虫眼鏡領域の下に隠れる形になってしまうため、たとえば細かい情報が詰まったような画像の場合、「どの部分を拡大しているか」を精緻なレベルで捉えにくいかもしれません。とはいえ、UI(ユーザーインターフェース)のシンプルさ、直感的なわかりやすさという点では、よくできたツールだと思います。

当サイトのアクセシビリティポリシーに基づいて、このページの「JIS X8341-3」準拠状況をWebInspector(富士通)でチェックをすると、要件「5.3a(ウェブコンテンツは、特定の単一のデバイスによる操作に依存せず、少なくともキーボードによってすべての操作が可能でなければならない。)」に抵触するという結果が出ます。これは、上記「サンプル」でJavaScriptのonmouseover属性を使用しているためです。このページでは対応策(代替手段)として、目的の情報(高解像度画像)にキーボード操作でも直接アクセスできるリンクを用意しています。

(公開日:2009年5月10日 )

はてなブックマーク


コメントを投稿する

(投稿いただいたコメントは、当サイト管理者による承認後、公開させていただきます。なお、コメントの記入は、日本語でお願い致します。)




トラックバック

この記事に対するトラックバックURL: http://website-usability.info/cgi/mt/mt-tb.cgi/127

サイト内検索

キーワード(タグ)から探す

人気のコラム記事