Tweet

特集：Silverlight 2 Deep Zoomプログラミング デジタルアドバンテージ　岸本 真二郎 2009/01/30

Page1 Page2 Page3

　2008年10月にSilverlight 2がリリースされ、Silverlight SDKやVisual Studio用のツールの提供も始まったことで、Silverlight 2の開発が身近になっている。Silverlight 2ではロジックの記述をC#やVisual Basic（VB）で行えるため、特にWindowsプログラマーにとっては、ソリューションの選択肢が広がったことになる。

　Silverlight 2では、アプリケーション作成の際にさまざまなコンポーネントが利用できるが、この中には、「Deep Zoom」と呼ばれる画像表示用コントロールが含まれている。Deep Zoomを使ったSilverlight 2アプリケーションをWebページに埋め込むと、次に示すように、Webページ上で簡単に画像を拡大／縮小できるようになる。

今回作成したSilverlight 2アプリケーション

これは単なる画像ファイルではなく、Silverlight 2アプリケーションである。実際にマウスを使って、この場で操作できる。ボタンをクリックしたり、画像をマウスでドラッグしたりしてほしい。

　この画像は、「.NET TIPS：Visual Studioのキーバインド（キーボード・ショートカット）を一覧するには？」で紹介しているVisual Studioのショートカット・キーのポスターだが、A3サイズで印刷しても小さくて見づらいほどの細かな内容である（元はPDFファイルだが、4610ピクセル×3458ピクセルのビットマップ・ファイルに変換したものをDeep Zoomを使って表示している）。

　これはC#のショートカット・キー一覧だが、よく見ていただくと、ポスターの右下にはVB用のポスターが配置されており、この部分を拡大することでVBのショートカット・キー一覧も確認できる。

　もう1つ、次の画像はSilverlight 2のポスターをDeep Zoomを使って表示している。これは、後述するDeep Zoom Composerというツールで生成したSilverlight 2アプリケーションだ。

Deep Zoom Composerで生成したSilverlight 2アプリケーション

マウスの左ボタンをクリックするとズームイン、［Shift］キーを押しながらマウスの左ボタンをクリックするとズームアウトする。マウスのホイールでもズームイン／ズームアウトが可能。

　ほかにも、Deep Zoomを使用した例としては、ハードロック・カフェのサイトが有名だ。どんどん画像を拡大しても鮮明な画像が表示されるのに驚かされる（The Beatlesのポール・マッカートニーが送った封筒の切手の部分がさらに拡大できるところに注目）。

　本稿では、このDeep Zoomを使ったプログラミングの概要を紹介する。

Deep Zoomの特徴

　Deep Zoomの特徴は何といっても、拡大を繰り返しても画像が鮮明に表示される点である。さらに、高解像度の画像を表示していても、Webブラウザの処理が重くならない点も重要だ。この2つがDeep Zoomの大きな特徴である。

■画像を事前に分割し、最適な解像度の画像を動的に読み込む

　とはいっても、Deep Zoomが画像を表示する仕組みは、原理的にはそれほど難しいものではない。Deep Zoomでは、表示する画像について、あらかじめ縮小率の異なる複数の画像を用意する。そして、リクエストされたスケールに応じて最適な画像をダウンロードして表示している。

　Deep Zoomではこれを「イメージ・ピラミッド」と呼んでいるが、これに含まれる画像には、最も大きな縮小率（1ピクセル×1ピクセル）からオリジナルの画像（100％）まで、複数の画像が含まれている。

　さらに、それぞれの縮小率の画像について、縦もしくは横幅が256ピクセルを超えるものは、256ピクセルｘ256ピクセル（タイル）で分割されている。これにより、必要最小限のデータのみをダウンロードして表示することができ、画像表示までの時間が短縮されるわけだ。

Deep Zoomでの画像の分割処理（イメージ・ピラミッド）

Deep Zoomでは、256ピクセル四方の領域に分割された、縮小率の異なる複数の画像が使用される。

　上記のショートカット・キーのポスターの場合では、後述するDeep Zoom Composerにより、17種類の縮小率で処理された画像が生成されている。分割された画像が格納されているフォルダを見ると、実際に分割されている様子が分かる。

Deep Zoom用画像フォルダの内容（一部）

それぞれの縮小率ごとにフォルダが分けられ、その中に分割された画像が格納されている。

　では次に、Deep Zoom Composerを使ったイメージ・ピラミッドの生成方法について解説しよう。

INDEX
	Silverlight 2
	Deep Zoomプログラミング
	1．Deep Zoomの特徴
	2．Deep Zoom Composerを使ったイメージ・ピラミッドの生成
	3．ユーザー・インターフェイスは自分で記述する必要がある

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード