Silverlightならではの見せ方とは?

2008年7月22日(火)
後藤 雄介

Expression BlendでDeep Zoomイメージを読み込み

 書き出されたDeepZoomイメージは、細切れの画像とそれらの結合情報を記述したxmlファイルで管理されます。今度はView Image Folderを選択し、書き出し先フォルダをのぞいてみましょう。非常に多くのフォルダで階層構造が作られ、その奥に画像の細切れが収まっているのが確認できるかと思います。

 先ほどはプロジェクトファイルとしてDeep Zoom Composerにはき出してもらいましたが、今度はDeepZoomイメージのExpression Blendへの組み込みを理解するため、このプロジェクトファイルを開いて見てみましょう。書き出し完了のダイアログから、今度はEdit in Expression Blendを選択してください。Expression Blendが起動し、プロジェクトが読み込まれましたら、まずはPage.xamlをXAMLビューで開いてみましょう。

 DeepZoomイメージは、MultiScaleImageというオブジェクトで下記のように記述されています。Expression Blendでは、このタグを記述することでDeepZoomイメージをコンテンツに組み込むことが可能です。



 次に、Page.xaml.csを開いてみましょう。プロジェクトとしてはき出されたコードが記述されています。

 下記のコードにて、先ほどXAMLに記述されていたMultiScaleImageオブジェクトに、DeepZoomイメージを読み込みます。なお、ここではmsiが、MultiScaleImageオブジェクトに付けた名前となっています。

this.msi.Source = new DeepZoomImageTileSource(new Uri("GeneratedImages/dzc_output.xml", UriKind.Relative));

 そのほかのコードは、このDeepZoomイメージに対してマウスクリックやドラッグ、ホイール操作のイベントハンドラを記述し、それぞれの動作を記述しています。手動でBlendにDeepZoomを埋め込む際にも、これらのコードは流用してしまった方が早いでしょう。

 また、「Project→File」パネルも見てみてください。このSilverlightコンテンツのxapが書き出されるパブリッシュ先フォルダに、先ほど書き出したDeepZoomイメージフォルダが配置されていることが確認できます。なお、今回紹介したサンプルはこちらよりダウンロード(http://www.thinkit.co.jp/images/article/92/4/9241.zip)できます(9241.zip/46.8 KB)。

アプリケーションとしての考え方

 最後に、用途についてちょっと考えてみましょう。もちろん、これは画像表示のための技術ですので、画像の拡大縮小表示をする単純なアプリケーションとしての使い道もあるかと思います。実際、かなり昔にはFlashPix等、類似テクノロジーもありました。Microsoftも開発に参加していたようです。

 しかし、単に画像を見せる手段ではなく、何らかのインフォメーションオブジェクトから拡大・縮小という手段を挟んでシームレスに別のインフォメーションオブジェクトへ遷移できる手段として考えたとき、それはRIA(Rich Internet Applications)で実現できる新たなユーザインターフェースの概念になり得るのではないでしょうか。

 特にユーザビリティを考えるとき、そこで重要視されるものの1つであるコンテクストの連続性を実現しつつ、ツリー状に管理された入れ子状のデータを自在にたどれる操作感は今までにないものです。何らかの情報集合体に対して、その論理構造を直感的に感じながらそこに出入りできる感覚は、まさに新たなユーザエクスペリエンスと言えるでしょう。

 Silverlightを使用する必然性として、もちろん一風変わった画像の見せ方としてのDeepZoomもあるかと思いますが、あるいはアプリケーションにおけるUIの手段としてのDeepZoomテクノロジー、そういったアプローチも今後出てくるかもしれません。

 次回はほかのExpression製品も交え、これまでのまとめと、Microsoft Silverlightプラットフォームをふかんしてみた際のワークフローについてお話したいと思います。

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

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています