このページの本文へ

Deep Zoom採用のキャンペーンサイトがオープン

Silverlight 2が叶える願い――セントレアの巨大ツリー

2008年11月28日 08時00分更新

小橋川誠己/企画報道編集部

  • この記事をはてなブックマークに追加
本文印刷

 大きなクリスマスツリーに飾られたたくさんのオーナメント。ツリーをクリックするたびに、だんだん大きく広がっていくオーナメントには、みんなの願いが綴られている――。

 こんなクリスマスキャンペーンサイトを開設したのが、中部国際空港(愛称「セントレア」)だ。「メッセージの森」と名づけられたこのWebサイトは、“願い”を込めたメッセージをネット上で募り、オーナメントとして掲載している。更新は12月10日まで、毎週水曜日までに投稿されたメッセージは翌週の金曜日夜に掲載される。

メッセージの森
セントレアの「メッセージの森」。ちなみに、Web上に掲載されたメッセージは、セントレア内のリアルのツリーにも飾られる予定だ。自分が投稿したメッセージが探せないときのために、ニックネームから検索もできる

 このサイトで使われているのが、マイクロソフトのRIA(リッチ・インターネット・アプリケーション)技術である「Silverlight 2」の機能「Deep Zoom」だ。実際のサイトを訪れてもらえると体感できるが、画像のズームイン/アウトや上下左右へのスクロールがとても軽快かつスムーズ。FlashやJavaScriptを使ったこれまでの同種のアニメーションではなかなか見られない動きだ。

メッセージの森
マウスでオーナメントのある部分をクリックしていくとスムーズに拡大していく。スクロールの動きもなめらか
メッセージの森
メッセージの森
何が書かれているか分からなかったメッセージカードが、はっきり内容が分かるレベルにまで拡大できる(実際にはまだ拡大できる)

 Deep Zoomは、超高解像度の巨大な画像をあらかじめ細かく分割し、異なる解像度ごとに大量の画像ファイルとして用意しておいたものをつなぎ合わせて表示している。ちょうどこのツリーのように、拡大させたいポイント(メッセージカード部分)だけを別の高解像度画像として用意し、ツリーの画像と重ね合わせて1枚の画像のように見せることも可能だ。Deep Zoom特有の動きのよさだけでなく、今回のサイトのように制作後に定期的な更新がある場合でも対応しやすいメリットもある。

 海外ではHard Rock Cafeの特設サイトなどの採用例があるDeep Zoomだが、国内の商用サイトではまだ珍しく、「メッセージの森」の事例はなかなか興味深い。Deep Zoomを使ったサイトの一例として参考になる。

 ちなみに、実際にDeep Zoomを試してみたい、という場合はマイクロソフト謹製の「Deep Zoom Composer」が無料で利用できる。手持ちの画像データから、GUI画面による簡単な操作でDeep Zoomアニメーションを作成できるツールだ。ぜひ試してみよう。

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く