CodeZine(コードジン)

特集ページ一覧

「Firefoxの灯(ともしび)」技術の全貌
~ ウェブの最新技術が魅せる「Firefoxの灯」(1)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/08/18 17:05

目次

今回の灯の特徴

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

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

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

SVG&SVG Filter

 日本地図の描画には、SVGSVG 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の使い方など、技術的な側面を掘り下げて解説を行っていく予定です。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:ウェブの最新技術が魅せる「Firefoxの灯」

著者プロフィール

  • 赤塚 大典(アカツカ ダイスケ)

    1976年東京生まれ。都立航空工業高等専門学校を卒業後、4輪レーサーを目指すも断念。蕎麦屋、溶接屋を経てプログラマになる。プログラマとしては、京阪奈地区の研究所に7年従事し、その間、2003年IPA未踏ユース、2006年IPA未踏ソフトウェア創造事業に採択される。 未踏において、Firefoxの拡...

  • Mozilla Japan(Mozilla Japan)

    一般社団法人 Mozilla Japan http://mozilla.jp/

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5