体験！Expression Studio 第4回

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プラットフォームをふかんしてみた際のワークフローについてお話したいと思います。