PR
PROJECT KySS(プロジェクト・キッス)
四国のSOHO。薬師寺 国安と,薬師寺 聖によるコラボレーション・ユニット。XMLや.NETプログラミングに関する執筆多数。両名とも,Microsoft MVP for Development Platforms - XML(Oct 2003-Sep 2009),http://www.PROJECTKySS.NET

 Silverlightの特徴的なテクノロジの一つに,DeepZoomがあります。これは,巨大な画像を高速に表示し,インタラクティブな拡大や縮小などの操作を可能とするテクノロジです。デモを見たり,サンプルを作って拡大縮小を試してみた人も少なからずいることでしょう。

 では,このテクノロジを何に使えばよいのでしょうか?単に,ブラウザ画面上で画像を拡大縮小するだけなら,ブラウザの拡大縮小機能を使えば可能です。また,小さい画像をクリックして大きな画像を表示するだけであれば,2枚の画像を用意して切り替えれば済むかもしれません。

 ところが,DeepZoomは,そういった単なる拡大縮小とは異なります。

 まず,用意する画像は一つのサイズでかまいません。また,表示されている画像を直接操作する感覚で,拡大縮小したりドラッグ移動させることができます。複数の画像を用意して並べて見せることもできます。画像の上に画像を重ねることもできるので,全体と細部を同時に見渡すユーザーインタフェースも可能になります。そういった特徴があるので,DeepZoomを使うのであれば,拡大することに意味のある画像を用意しなければなりません。

 そこで,今回のサンプルでは,素材として,12個の鉱物の写真を用意しました。例えば,輝銀鉱であれば,等倍の写真では白地にグレーの模様がある石にしか見えませんが,拡大していくと,銀色のきらめきが随所に見られるようになります。これは実際に石を手に取って間近で見れば気づくことですが,単にGIFやJPG画像をWebページ上に載せるだけでは伝わりにくい情報です。他の鉱物でも断面の形状がよくわかります。こういった見せかたにDeepZoomはうってつけです。

 ただし,ハイビジョンの登場時と同じで,拡大すると見えない方がよいものまで見えてしまう懸念があるので,素材の作成時には注意してください。鉱物の汚れを取り除かないまま撮影してしまったことを,筆者は悔やんでいるのですから。

 また,画像を拡大縮小するだけでなく,画像の説明も表示したいところですね。そこで,今回は,Visual Studio2008を使って,VB.NETでプログラムコードを記述して,画像の説明を表示させてみましょう。

サンプルの完成イメージ

 まず,画面が表示されると,12個の鉱物の画像が表示されます(図1)。任意の鉱物の画像の上でマウスをクリックすると,その鉱物が拡大されていきます。順次クリックし続けることで,拡大し続けます。画像の上方には,選択された鉱物の名前と産出地が表示されます(図2)。

 [縮小]ボタンをクリックしていくと,12個の鉱物の画像がどんどん縮小表示されます(図3)。ただし,このサンプルではマウスホールによる拡大縮小は実装していません。[リセット]ボタンをクリックした時には,12個の鉱物の画像を元のサイズに戻します。また,マウスムーブによって画像をドラッグ移動させます。

図1●12個の鉱物が表示される(画像をクリックすると,サンプル・アプリケーションの動作を確認できます)
こちらからプログラムをダウンロードできます=8.1MB)
図2●任意の鉱物をクリックすると,上方に「鉱物名」と「産出地」が表示される。クリックし続けると延々と拡大を続ける
図2●任意の鉱物をクリックすると,上方に「鉱物名」と「産出地」が表示される。クリックし続けると延々と拡大を続ける
[画像のクリックで拡大表示]
図3●[縮小]ボタンをクリックしていくと,どんどん画像が縮小する
図3●[縮小]ボタンをクリックしていくと,どんどん画像が縮小する
[画像のクリックで拡大表示]