「Firefoxの灯（ともしび）」技術の全貌
～ ウェブの最新技術が魅せる「Firefoxの灯」（1）

　2011年8月16日の深夜、Mozilla JapanによりWebアプリケーション「Firefoxの灯（ともしび）」が公開されました。この連載では、アプリケーションに採用されているウェブの最新技術をテーマに、具体的なソースコードなどを交えて解説していきます。

はじめに

　『Firefoxの灯（ともしび）』は、Firefoxのダウンロード状況をほぼリアルタイムに視覚化するWebアプリケーションです。従来、文字情報でしかなかったアクセス情報を視覚化することにより、文字情報だけでは伝えることが難しかった臨場感や雰囲気を感じること ― 「感じるダウンロード」をテーマに制作しています。

　Firefoxの灯は、2007年のMozilla 24で初めて公開されました。Mozilla 24とは、世界規模で展開するMozillaの活動とその永続性を表したイベントで、24時間ノンストップでMozillaに関連するさまざまなプログラムが行われており、そのプログラムの1つとしてFirefoxの灯を提案しました。この時は、Mozilla 24の特設サイトを閲覧している人々のアクセスから大まかな閲覧場所を取得し、世界地図上の該当地点に灯を表示して、アクセス状況を視覚化しました。オンラインで活発な国がより強く光り、世界の夜景を空から見ているような光景が広がっていました。

　その後、Firefox 3の公開に伴い、Firefoxのダウンロード状況を視覚化、また日本に特化した形でFirefox 3の灯を公開しました。Firefox 3公開当時は、その光だけで日本の輪郭が浮き上がるほどにさまざまな場所で多数のダウンロードがされていることがわかりました。

　今回公開するWebアプリケーションFirefoxの灯は、Firefox 3の灯の拡張版として位置づけられ、現在における最新のウェブ標準技術、Firefoxで先行実装された技術、またその技術で可能となったアニメーションやサウンドなどの表現によって成り立っています。この連載では、Firefoxの灯リニューアルに伴って、アプリケーションで利用している技術的な側面を中心に沿え、解説していく予定です。

Firefoxの灯の持つ機能

　まず、具体的な技術の説明に入る前に、Firefoxの灯ではどこにどのような技術が使われているかを、機能紹介をしながら簡単に説明していきます。

俯瞰ビュー

　次の画像が、本アプリケーションのメイン画面となります。

図1. 俯瞰ビュー（ズームアウト）

　この画面では、Firefoxのダウンロード状況を視覚化します。画面中央には日本地図を配置し、ダウンロードを行った際のアクセス情報からユーザーのIPアドレスを取得して大まかな位置情報を得たのち、地図上の座標系にマッピングされ、灯として表示します。色の付いた大きな灯は、直近約15秒以内にダウンロードがあったことを示します。灯の色もIPアドレスに依存し、同じIPからダウンロードした場合は同じ色の灯が出現するはずです。その後、灯は小さな白い光となって、しばらくの間瞬いています。

　日本全体でのダウンロード数を知りたい時には、地図上にマウスオーバすることで左上に大きく表示されます。技術的には、日本地図にはSVGやSVG Filterを採用しています。灯の表示はProcessing.js（Canvas）とSVGの混合で描画されています。

図2. 日本全体のダウンロード数