Silverlight 2で.NET技術をカッコよく使おう
連載インデックスへ

Silverlight 2で.NET技術をカッコよく使おう(5)

最新の画像処理技術PhotosynthとDeepZoomを使う


インフラジスティックス・ジャパン株式会社
デベロッパー エバンジェリスト 山田 達也
2009/7/9


DeepZoomをSilverlightアプリで使う有用テク

 DeepZoomComposerを使ったDeepZoomコンテンツの作成方法は前述の記事「DeepZoomプログラミング」の中で触れているとおりですが、ここではさらに一歩進んだアプリケーションの中での活用テクニックを紹介します。

 例えば、DeepZoomをWebアプリケーションの中で活用する場合、「特定の画像をクリックしたときに何らかのインタラクションを開始する」といった処理に対する要求が発生することがあります。このような要求に応えるためには、まずDeepZoomComposerでイメージ・ピラミッドを作成するときに、コレクション形式としてエクスポートする必要があります(図3)(DeepZoomがサポートするファイル形式については、MSDNに詳しく説明があります)。

図3 DeepZoomComposerで画像コレクションとしてエクスポート
図3 DeepZoomComposerで画像コレクションとしてエクスポート。DeepZoomComposerは執筆時点で最新の2009年6月バージョン(英語版)を使用している

 これにより、単一イメージ形式で出力したときとは異なり、複数の画像を独立した画像として認識できるようになります。

 Silverlightには、DeepZoomデータを取り扱うためのコントロールとしてMultiScaleImageがあり、これにSubImagesという複数のMultiScaleSubImageオブジェクトを格納するコレクションが用意されています。そしてコレクション型で出力されたデータを扱うときのみ、このSumImagesコレクションを通してDeepZoom内の個々の画像にアクセスできるようになります。

 例えば、図4のSilverlightアプリケーションはDeepZoomを使った単純な画像ビューアですが、各サブイメージへのクリック処理とタグ情報を表示しています。

図4 サブイメージに対するクリックとタグ表示を実装した例
図4 サブイメージに対するクリックとタグ表示を実装した例(画像をクリックすると、実際のSilverlightサンプルが動作します。※サンプルを動かすには、事前に実行環境のインストールが必要です。→ダウンロードページ

 サブイメージの取得はMultiScaleImageのMouseLeftButtonイベントのタイミングで、MultiScaleImage.SubImagesコレクション内の各イメージの領域にヒットするかどうかを判断することで行います。

  クリック位置に対応するサブイメージを取得するコード例(詳しくはソースコードをダウンロードして確認してください)
//クリック位置に該当するSubImageを取得
private MultiScaleSubImage SelectSubImage(MultiScaleImage msi, Point p)
{
    //SubImagesコレクションの画像を順に照合する
    var subImage = msi.SubImages.FirstOrDefault(image =>
        {
            //SubImageのRectにクリック位置が含まれるかどうかをチェック
            double scaleBy = 1 / image.ViewportWidth;
            Rect rect = new Rect(
                -image.ViewportOrigin.X * scaleBy,
                -image.ViewportOrigin.Y * scaleBy,
                1 * scaleBy,
                (1 / image.AspectRatio) * scaleBy);
            return rect.Contains(p);
        });
    return subImage;
}

 DeepZoomComposerでは、画像と一緒にタグ情報を出力できます。タグ情報は、そのほかの画像情報と一緒に「Metadata.xml」というファイルに出力されるので、このファイルの内容を読み取ることで選択されたサブイメージの属性情報を取得できます。ただし、Metadata.xml自体は自動的に読み込まれないので、ファイルを読み込む処理を実装する必要があります。

  MetaData.xmlからメタ情報を読み込んでサブイメージと関連付ける例(詳しくはソースコードをダウンロードして確認してください)
//イメージとTagの関連付けを行うDictionary
private Dictionary<MultiScaleSubImage, string> TagDictionary = new Dictionary <MultiScaleSubImage, string>();
 
//イメージが読み込まれた際にメタデータのロードを開始
private void msi_ImageOpenSucceeded(object sender, RoutedEventArgs e)
{
    this.LoadMetaData();
}
 
//メタデータの読み込みを開始する
private void LoadMetaData()
{
    WebClient xmlClient = new WebClient();
    xmlClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(this.MetaDataLoaded);
    xmlClient.DownloadStringAsync(new Uri("./pics/Metadata.xml", UriKind.Relative));
}
 
//メタデータ読み込み完了
private void MetaDataLoaded(object sender, DownloadStringCompletedEventArgs e)
{
    if (e.Error != null) return;
    XDocument xml = XDocument.Parse(e.Result);
    XElement metaData = xml.Element("Metadata");
    var images = from img in metaData.Descendants()
                 where img.Name == "Image"
                 select img;
    //XML内の各Imageタグについて、SubImagesコレクション内の画像と関連付ける
    int index = 0;
    foreach (XElement image in images)
    {
        string tag = image.Element("Tag").Value;
        this.TagDictionary.Add(this.msi.SubImages[index++], tag);
    }
}

 この例で取り上げたような個々の画像データに対するアクセスや属性データの活用によって、DeepZoomのインタラクティブ性を最大限に生かしたWebアプリケーションの可能性がさらに広がるのが見れたかと思います。

手軽にバーチャル世界を作れるアプリ「Photosynth」

 次に、DeepZoomをさらに発展させた画像技術として「Photosynth(フォトシンス)」を紹介します。以下のPhotosynthのトップページでは、メニューの「Synths」から公開中のさまざまな画像世界を体験できます。

 Photosynthは「Microsoft Live Labs」で研究開発が進められている画像解析技術です。同じ場所をさまざまな角度から撮影した写真を用意するだけで、Photosynthが自動的に写真と写真のつなぎ目や位置関係を自動的に解析して疑似的な3D空間上に配置してくれるので、インドアやアウトドアに限らずバーチャルな世界を簡単にPC上に再現できます。

 Photosynthのサイトには多数のサンプルがあるので、まずは気軽にいろいろな町や名所を散策してみてください。

図5 さまざまな名所の景観をいろいろな角度から眺めたり、写真と写真の間を移動したり
図5 さまざまな名所の景観をいろいろな角度から眺めたり、写真と写真の間を移動したり

 次のページでは、Photosynthをインストールして使ってみましょう。

1-2-3

 INDEX
Silverlight 2で.NET技術をカッコよく使おう(5)
最新の画像処理技術PhotosynthとDeepZoomを使う  
  Page1
画像処理技術に革命を起こした「DeepZoom」
コードを書かずにDeepZoomを手軽に試せるサービス
Page2
DeepZoomをSilverlightアプリで使う有用テク
手軽にバーチャル世界を作れるアプリ「Photosynth」
  Page3
Photosynthをインストールして使ってみよう
最新の画像処理技術をWebアプリに生かしてみては



リッチクライアント&帳票 全記事一覧へ




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間