第4回 Silverlightならではの見せ方とは?

DeepZoomって何?

 同じフィールドに複数のテクノロジーが存在している場合、いずれを採用するのかは、開発ごとにおいて非常に重要な問題です。そしてその判断材料としては、目に見える(そして理解しやすい)差別化のポイントがキーになりやすいのではないでしょうか。

 特に、既にFlashという、ある種のデファクトスタンダードが存在する中であえてSilverlightが採用候補に挙がる際、クライアントさんは「Silverlightならではの見せ方ってありませんか?」と聞くことでしょう。

 今回ご紹介するDeepZoomテクノロジーも、そんなSilverlight 2ならではの見せ方の機能の1つです。これは、一昨年にMicrosoftが買収したSeadragonというテクノロジーを元にしたもので、超高解像度の画像を効率よく表示する技術です。まずは百聞は一見にしかずということで、このDeepZoomテクノロジーを使用したサイトとして先駆けなHard RockのMEMORABILIA(http://memorabilia.hardrock.com/)をご覧ください。

 DeepZoomは、高解像度の画像を詳細レベル(LOD:Detail Of Level)で分割管理しています。それらを、サムネイルなどの小さく低解像度な表示の場合には低解像度な画像を、特定の一部分を大きく拡大表示する場合には、その特定の部分の高解像度の画像を引っ張りだして表示してくれる仕組みです。

 概念としては、その画像の構造がLODに応じてピラミッド状に管理されているようなイメージです。一番低解像度の画像(1x1ピクセル)を頂点として、例えばある階層が128x128ピクセルの1枚の画像なら、次の階層では同じ画像を128x128ピクセル画像4枚で合計256x256ピクセル、その次は128x128ピクセル画像を16枚で合計512x512ピクセルというようになります。

 これらのピラミッド状の階層、そして各階層内のタイル状の画像を、アプリケーション内で表示する領域に応じて自動的に抽出・結合してシームレスに表示してくれる技術、それがDeepZoomテクノロジーです。

DeepZoomイメージの作成ツール

 このDeepZoom形式の画像を作るには、Deep Zoom Composerというアプリケーションを使用します。これは、Microsoftからプレビュー版がリリースされており、Microsoftのサイト(http://www.microsoft.com/downloads/details.aspx?FamilyID=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en)でダウンロードすることができます。

 もちろん、元素材として高解像度の画像を準備する必要がありますが、自分で試す範囲内でしたら、flicker(http://www.flickr.com/)やPCASO(http://www.pcaso.kr/)でダウンロードしてみるのも良いでしょう。

 アプリケーションで画像をオーサリングした後、DeepZoomイメージとして書き出すことができます。この書き出されたコンテンツを、Expression Blend内でオブジェクトとして配置すれば、Deep Zoomイメージを使用したアプリケーションの完成となります。

 また、現在公開中のDeep Zoom Composer最新版では、この書き出しの際に併せて、Silverlight2アプリケーションのプロジェクトファイルを書き出してくれます。Silverlight 2 beta 2以前のバージョン用のものでは、自分でコンテンツの作成と操作のためのコードを記述する必要がありましたが、最新版では、単純なDeepZoomコンテンツの作成のみでしたらそれらも不要です。

著者について

後藤 雄介

株式会社アゼスト 後藤 雄介

UX・情報アーキテクト。広く・浅く・普くをキーワードに、クライアントサイド・サーバサイドの様々なテクノロジーを囓り散らす。UXとアーキテクチャを主軸に、アプリケーション開発における上流設計を専門とする。またその傍ら、マラソンやトライアスロンを趣味とし、日々トレーニングに勤しむ。http://www.azest.co.jp/

IT Leaders 毎月無料でお届けいたします

本誌は、読者登録いただくことにより、毎月無料でみなさまのお手元まで直接お届けいたします(書店などでは販売していません)。

企業の情報システムを担当する方々や事業部門のIT担当の方々、およびIT関連プロフェッショナルの方々を対象に、実践的に役立つ情報を掲載、幅広く業務にご活用いただけます。

IT Leaders新規購読お申し込みはこちらから