Firefox 4 以降, Chrome 13.0 以降, Safari 5.1以降
Firefox の灯とは
“Firefox の灯”は、日本での Firefox のダウンロード状況をほぼリアルタイムに視覚化するウェブアプリケーションです。Firefox がダウンロードされる際のアクセスポイントからおおまかな地域を特定し、それを基にダウンロード状況を地図上に「灯 (ともしび)」に見立てて表現しています。
コンセプト
従来、文字情報でしかなかった Web のアクセス情報を視覚化することにより、数字や文字だけでは伝えることが難しかった臨場感や雰囲気を感じていただけるよう「感じるダウンロード」をテーマに制作しています。 これまでも数多くの Firefox がダウンロードされてきましたが、そのダウンロード状況は、「何件ダウンロードされた」など、文字や数字を通して知る以外に状況を知る術がありませんでした。本ツールでは、よりリアルなダウンロード状況を提示することで、どれぐらいの頻度でダウンロードされているのか、朝・昼・晩と時が移り変わっていく際のアクセスの変化、盛り上がっている地域、自分の住んでいる地域の様子など、文字以上の臨場感や雰囲気を知っていただくため開発しています。この取り組みは、2008 年の Firefox 3 から公開していますが、2011 年 8 月の Firefox 6 のリリースにともないリニューアルしました。今回のリニューアルでは、現在における最新のウェブ標準技術、Firefox で先行実装された技術、またその技術で可能となったアニメーションやサウンドなどの表現によって成り立っています。
Firefox の灯 の楽しみ方 1
ズームアウト (日本全体図)
日本地図上に淡く煌めく光は、実際にその場所で Firefox のダウンロードがあったことを表します。大きな灯は、直近約 15 秒以内のダウンロードを表現しており、灯はしばらくその場に残ります。灯の色は、地域情報同様 IP アドレスに依存し、同じ IP アドレスからダウンロードされた場合は同じ色の灯が出現するしくみです。日本地図の上にマウスを置くと、日本における Firefox 最新版のダウンロード総数（概数）が表示されます。
ズームイン (拡大図)
地域毎に拡大して、より詳細な状況を見ることができます。全体図の状態で見たい地域をクリックすることにより、アニメーションを伴いながらズームインします。全体図では真上から見る平面的なビューであるのに対し、ズームインした場合は、斜め上から眺めているような視点に替わります。また、各県の上にマウスオーバすることで、日本全国図と同じように県毎のダウンロード数が左上に大きく表示されます。
Firefox の灯 の楽しみ方 2
ダウンロード数の一覧表示
日本全体図、拡大図に関わらず、画面上右側には、日本全体および各県のダウンロード数が表示されます。
サウンド
画面左下の「SOUND OFF/ON」ボタンを切り替えることにより、各ダウンロードに対して割り当てられた音を聞くことができます。音高 (ピッチ)、音長 (デュレーション)、音色 (時間エンベロープ) を少しずつ変えながらリアルタイムに音を生成しています。
Firefox の灯 で使っている技術
アニメーションを伴った灯の描画には、Processing.js (HTML Canvas) を利用しています。日本地図や日本地図の周りを囲む淡い輪郭は、SVG および SVG Filter によって実装されています。全体図から拡大図へ、拡大図から全体図へ遷移する際のアニメーションは CSS Transition を、全体図と拡大図の見た目の表現の変更には CSS Transform をそれぞれ用いて実現しています。サウンドには Firefox で先行実装された Audio Data API を利用します。この技術は、音声ファイルを一切使わずに、プログラム上からリアルタイムに豊富な音を生成することを可能とします。
※より詳しい技術解説は codezine さんにて掲載させていただいた記事 ウェブの最新技術が魅せる「Firefoxの灯」をご覧ください。