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

今回の灯の特徴

Flashからウェブ標準技術へ - Canvasの採用

　Mozilla 24でのFirefoxの灯、Firefox 3の灯の発表当時、アニメーションを伴ったWebアプリケーションを作成するにはFlashを利用することが、開発の容易さやパフォーマンスの面を総合的にみて妥当であったと思います。最近では、Canvasという描画コンポーネントがいくつかのブラウザで実装されてきました。Canvasは、JavaScriptから円や線、自由曲線など、比較的プリミティブな描画を可能とします。最近では、ハードウェアアクセラレーションなどを有効活用する実装が施され、パフォーマンスも向上しています。

　また、ウェブ標準となったこともあり、Canvasを利用したさまざまなライブラリがサードパーティから発表され、開発が容易になりました。中でもProcessing.jsは、アニメーションを前提とし、形状や色、透明度、イメージなどを使ったプログラムを比較的簡単に作れるようになります。このように、開発容易性、パフォーマンス、ライブラリの充実などの観点から鑑みて、今回のFirefoxの灯ではCanvasを利用するに至りました。

SVG＆SVG Filter

　日本地図の描画には、SVG、SVG Filterを用いています。SVGの最大の利点は、画像とは違いベクタデータを持つことで、どのような画面サイズにおいても最適な描画を実現できることです。またSVG FilterというSVGで描かれるグラフィクスを装飾する機能が備わっており、色変換やブラーなどのエフェクト効果を出すことなどはCanvasで行うより簡単且つ高速です。

CSS Transform＆Transition

　本アプリケーションでは、俯瞰と鳥瞰の2つのビューモードが実装されています。俯瞰は全国地図を真上から見たビューであり、鳥瞰はやや斜めから望むようなビューとなっています。これらの視点の切り替えは、ユーザーによって行われ、視点の変換にはCSS Transformを、変換中のアニメーションにはCSS Transitionをそれぞれ利用しています。

終わりに

　ここまで、新しくなったFirefoxの灯の機能や技術概要をお伝えしてきました。次回からは、CanvasやProcessing.js、CSSの利用方法、SVG、SVGとJavaScriptとの連携、音を奏でるAudio Data APIの使い方など、技術的な側面を掘り下げて解説を行っていく予定です。