DeepZoomイメージを作ってみよう

DeepZoomイメージを作ってみよう

　では、DeepZoomイメージを作成してみましょう。まず、素材となる高解像度画像を何枚か用意してください。ここでは、一覧表示された画像の一部を拡大していくと、そこからまた別の画像が現れるような、入れ子状のコンテンツを作成してみます

　Deep Zoom Composerを立ち上げましたら、ファイルメニューから「File→New Project」を選択し、Deep Zoom Projectを選択しましょう。ここでは名前はmyZoomとしておきます。

　プロジェクトが作成されましたら、まずは使用する画像を登録します。画面右上の「Add Image...」ボタンを押してください。ファイル選択ダイアログが開きますので、使用する画像をすべて選択してください。画面右側のライブラリ領域へ直接ドラッグアンドドロップもできます。

　画像が追加されましたら、画面中央上部の「Compose」タブをクリックしてください。これで、画面が画像配置モードに切り替わります。

　画像配置モードでは、右側のライブラリから画像をドラッグアンドドロップでステージに配置していきます。配置済みの画像はクリックで選択状態になります。選択状態の画像にはガイド枠が表示され、拡大縮小や位置の移動が可能です。

　また、複数の画像を選択した状態で画面下部の位置調整ボタンを使用することで、画像のセンターやツラ合わせ、均等割り付けが可能です。左下のボタン類は左から順に、画像選択の選択ツール（矢印）、ドラッグでステージを移動させられるパンツール（手）、クリックで拡大／Alt＋クリックで縮小の拡大ツール（虫眼鏡）、ステージの拡大度合いを選択中の画像に合わせてくれる画面フィットツール（枠付き虫眼鏡）です。

　この配置の際、特定の画像に重ねて別の画像を小さく縮小して配置してみましょう。すると、書き出したコンテンツでは、元の画像を拡大していくことで、その一部分から、縮小配置した画像が現れるというような構成となります。

　なお、ステージ上で非常に小さく縮小した画像には虫眼鏡マークが付きますので、画像を見失った場合にはこの虫眼鏡マークを参考にして探してください。

DeepZoom形式での書き出し

　画像の配置が完了しましたら、それをDeepZoomコンテンツとして書き出してみましょう。画面中央上部の「Export」タブをクリックしてください。これで、画面が書き出しモードに切り替わります。

　まずは、「Name」欄に任意の画像名を入れましょう。ここではmyDeepZoomImageとしておきます。

　「Browse」ボタンを押して、書き出し先のフォルダを選択しましょう。「Image Type」はComposition、CollectionのいずれでもSilverlightで扱うことが可能です。「Output Type」はExport Images and Silverlight Projectを選択しておきましょう。これで、自分でゼロからコードを記述しなくても、このDeepZoomイメージが貼付けられたSilverlight 2アプリケーションの、Expression Blend用プロジェクトファイルが書き出されます。

　書き出しが完了すると、その旨と次のアクションを聞いてきます。まずはPreview in Browserを選択し、Silverlightアプリケーションとしての動作を確認してみましょう。いかがでしょうか。画像は表示されましたか。

　このDeepZoomイメージに対して、クリックでその場所を拡大、Shift＋クリックで縮小、ドラッグで表示位置を移動、ホイールの前後でも拡大縮小ができます。また、先ほど入れ子状に配置した画像の部分を拡大していくと、そこにその画像が現れ、その画像も拡大していくことが可能です。

　これでDeep Zoom Composerでの操作は完了です。念のためファイルメニューから「File→Save Project」でプロジェクトの保存をしてから、Deep Zoom Composerを終了してください。