Firefox 4の新技術を使ったキャンペーンサイト--今度はトゥムクマケ

　Mozilla Japanは3月1日、Firefox 4のリリースを記念して、キャンペーンサイト「Virtual Park -Tumucumaque-」をオープンした。Virtual Park -Tumucumaque-は、Mozilla Firefox 4 のコードネームであるアマゾンの国立公園「Tumucumaque」にちなんで、Twitterから寄せられたさまざまな情報によって作り上げられる「情報の森」をイメージしている。

　Twitterで「#mozpark」というタグを付けて投稿すると、その投稿文がVirtual Park -Tumucumaque-にも掲載され、1区画の土地が形成される。Twitterの投稿内容によって、水や木々、アマゾンに住む動物などが現れる。投稿した文章に「Tree」という単語が含まれると木が生え、「Frog」という単語が含まれるとかえるが出現する。投稿の量にしたがってVirtual Park -Tumucumaque-の全体土地が広がり、そこに住む動植物の種類も増えていく仕組みだ。

　動植物のアイコンをマウスオーバーすると右上のウィンドウに写真と名前が表示される。写真をクリックするとより詳しい情報が表示される。さらに動物の鳴き声や水の音を再生することもできる。

　Virtual Park -Tumucumaque-に表示されているTwitterの投稿をクリックすると、メッセージが拡大表示される。クリック数の多いTwitterの投稿は、土地が盛り上がり、立体化して見えるようになる。画面左側にあるスクロールバーでVirtual Park -Tumucumaque-の拡大、縮小表示ができる。最大限縮小すると遠目から全体を見渡せる。

　Virtual Park -Tumucumaque-はグローバルで実施されているキャンペーンである。日本語と英語に対応している。土地の色が暗い箇所は現地時間で夜の地域から投稿されたことを、明るい箇所は現地時間で昼の地域から投稿されたことを表している。

　Virtual Park -Tumucumaque-にはFirefox 4で導入されるウェブ技術が使われている。主なものを紹介する。

• Audio Data API
  リアルタイムに音声を処理するAPI。かえるの鳴き声や水の流れる音を再生するところに使われている。
• CSS Transitions
  アニメーション技術。土地が盛り上がるアニメーションに使われている。
• CSS Transform
  土地の傾きに合わせてTwitterから投稿された文章を斜めに傾けるところに使われている。変形してもテキストデータとして扱えるため、サイト内検索の対象にしたり、コピー＆ペーストしたりできる。
• SVG animation
  アニメーションを定義する。木をマウスオーバーすると葉っぱがざわざわと揺れるアニメーションに使われている。

　Virtual Park -Tumucumaque-を閲覧する環境はFirefox 4が推奨されている。ほかのブラウザでも閲覧できるが、新技術を使っている箇所はFirefox 4が望ましいという。一部、ほかのブラウザだと見れない動きもあるという。Internet Explorer 6ではほとんど何も動かないそうなので注意が必要だ。