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

鳥瞰ビュー

　先ほどの全体図の中から、興味のある地域の詳細な状況を見ることができます。全国地図上で見たい場所をクリックすると、クリックした位置を中心として、アニメーションを伴いながらズームインします。

図3. 鳥瞰ビュー（ズームイン）

　全国地図では真上から俯瞰したような2次元ビューであるのに対し、ズームインした時には鳥瞰図のような2.5次元ビューとして表示され、違った視点で状況を眺めることができます。2.5次元ビューでは、灯の表現もやや立体的な雰囲気を持つようにしています。鳥瞰ビューにおいては、ダウンロード数も県ごとにまとめられており、知りたい県の上にマウスオーバすることで、日本全国の時と同様に左上に大きく表示されます。

　また、県の領域のストロークもそれまでより太く目立つように設定されており、マウスが県から外れると徐々にストロークが細くなってもとの細さに戻ります。ズームによる表示の変形やアニメーションは、それぞれCSS TransformおよびCSS Transitionによって行われています。また、マウスオーバはSVGドキュメントが発生するイベントを取得しており、Canvas＋SVG＋JavaScriptの連携がここでとられています。

図4. 各県のダウンロード数

ダウンロード数の一覧表示

　俯瞰ビュー、鳥瞰ビューに関わらず、日本全体や各県のダウンロード数は一覧として常に画面右に表示されます。これまでの累積を確認でき、ダウンロードの全体的な状況を把握する1つの要素となります。この一覧は、Mac OS XにおけるDockのように、マウスオーバした場所にある数値と名前ラベルを大きくさせることで、閲覧性を向上させようと試みています。なお、一覧は全てJavaScriptによって制御されています。

図5. ダウンロード数一覧

サウンド

　今回は、ダウンロード状況を視覚だけではなく聴覚的にも提示しようと試みました。各ダウンロードに対して音が割り当てられてられ、音高（ピッチ）、音長（デュレーション）、音色（時間エンベロープ）を少しずつ変えながら音を生成します。音の再生には音声ファイルを一切使っておらず、Firefoxで先行実装されたAudio Data APIを利用しています。そのため、その場に応じた音の生成が可能となり、より繊細な表現が実現できるようになりました。また、音声ファイルを利用していないことから、アプリケーション全体のサイズを極端に小さくすることが可能になります。