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

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

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


インフラジスティックス・ジャパン株式会社
デベロッパー エバンジェリスト 山田 達也
2009/7/9
連載「.NETを知らない人でも分かるSilverlight入門」の続編のSilverlight 2入門連載です。Silverlightで.NET技術をよりカッコよく簡単に使えるRIAを作ってみましょう。Silverlightそのものについて詳しく知りたい読者は、本稿と併せて特集「Silverlightは次世代のJavaScriptフレームワーク?」もご参照ください(編集部)

画像処理技術に革命を起こした「DeepZoom」

 今回は、連載タイトル「.NET技術をカッコよく使おう!」の趣旨に立ち返って、Silverlightの面白い画像処理技術に注目してみます。まずはSilverlight 2で導入された「DeepZoom(ディープ・ズーム)」機能をおさらいしてみましょう。

 DeepZoomは簡単にまとめると、複数の画像を奥行きのある空間上に配置し、マウスやキーボードによるスクロールや拡大・縮小といったズーミングなどの操作に対してシームレスな画像表示を行う機能です。これは、もともと「SeaDragon」という名前でプロジェクトが進められ、Silverlight 2の登場とともにDeepZoomという名前に変わりました。

 すでに発表からしばらく時間が経ち、いろいろなWebサイトで活用されています。下記にDeepZoomの特徴がよく分かる代表的なWebサイトの例をピックアップしたので、まずはこれらを体験してみてください。

  • Hard Rock Memorabilia
    米国Hard Rock Cafeの所有するさまざまなアイテムを閲覧できる
  • PLAYBOY Archive
    PLAYBOY誌の創刊以来過去50年以上のアーカイブが見られるというちょっと刺激的な情報コンテンツ
  • Project UX
    双眼鏡を覗いてパスワードを探し出せ!DeepZoomをゲームのように使ったサイト

 すでにDeepZoomについてはいくつも記事が紹介されているので、もう皆さんにはおなじみの技術かもしれません。技術の特徴とコード例については、以下の記事で詳しく解説されていますので、本稿と併せて参照してください。

コードを書かずにDeepZoomを手軽に試せるサービス

 DeepZoomを使ったアプリケーションを開発するためには、「DeepZoomComposer」などのツールを使って画像の配置を行い、その情報をSilverlightアプリケーション上で使用する必要があります(詳しい手順は前述の特集記事にあるので、ここでは割愛します)。

 一方で、コードを1行も書かなくてもDeepZoomを体験できる「DeepZoomPix」というWebサービスが公開されています。DeepZoomPixでは好きな画像を直接アップロードしたり、またはFlickrやFacebookなどのWeb上の画像サービスからインポートすることで、Web上に自分だけのアルバムを作成できます。

図1 DeepZoomPixを使うと、自分の画像アルバムをDeepZoomで表現できる
図1 DeepZoomPixを使うと、自分の画像アルバムをDeepZoomで表現できる(利用にはWindows Live IDが必要。また、2009年12月31日でサービス終了とアナウンスされている)

図2 アップロードした画像をアルバム単位で管理し、いろいろなビューでサムネイルを一覧。そのままDeepZoomの機能でそれぞれの画像にズームインできる
図2 アップロードした画像をアルバム単位で管理し、いろいろなビューでサムネイルを一覧。そのままDeepZoomの機能でそれぞれの画像にズームインできる(画像をクリックすると、拡大します)

 このDeepZoomPixはSilverlightをフロントエンドに利用している以外にも、Windows Azureをデータストレージとして利用している点でクラウド・アプリケーションとしても興味深い事例です。

 また、DeepZoomPixのエンジン部分は、日本企業セカンドファクトリーが開発した「JellyFish」という開発ツールキットを利用して作成されており、JellyFish自体もCodePlex上でオープンソースとして公開されているので、技術的な学習素材としても大変有用なプロジェクトといえます。

 次ページでは、DeepZoomをSilverlightアプリで使う有用なテクニックをサンプルで解説し、手軽にバーチャル世界を作れるアプリ「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 記事ランキング

本日 月間