SVG＆CSS＆Audio Data API
～ ウェブの最新技術が魅せる「Firefoxの灯」（3）

　Webアプリケーション「Firefoxの灯（ともしび）」に採用されているウェブの最新技術をテーマに、具体的なソースコードなどを交えて解説する本連載。第3回目の今回は、描画技術の「SVG」「CSS」、そしてWeb上で音を生成できる「Audio Data API」を取り上げます。

はじめに

　「Firefoxの灯（ともしび）」（以下、灯と表記）に実装されているWebの最新技術を紹介する本連載。前回は、HTML5の「Canvas」要素と、JavaScriptライブラリの「Processing.js」を使った描画技術を取り上げ、解説しました。

　本稿では、SVGとCSSおよびAudio Data APIをテーマに取り上げます。Firefoxの灯では、SVGを使って日本地図を描画し、その淵にはSVG Filterを利用した境界線が淡く描画されています。その上に、Canvasを重ねることで、灯を描画しています。さらにCSS Transformを利用して、俯瞰図および鳥瞰図を生成し、CSS Transitionにて俯瞰図と鳥瞰図間の遷移をアニメーションでつなぎます。

　Audio Data APIは、Firefoxで先行実装された技術で、オーディオデバイスへの直接的なデータの書き込みと読み込みを可能とします。オーディオファイルは一切利用せず、リアルタイムに音を生成することが可能です。今回は、これらのSVG、SVG Filter、CSS Transform、CSS TransitionおよびAudio Data APIについて、実際のサンプルコードを動かしながら解説します。

※サンプルの表示について

　記事内で紹介されているサンプルはHTML5を使用して実装されているため、

　HTML5をサポートしていないブラウザでは、正常に表示されません。

　HTML5対応のブラウザ（Firefox、Chrome等）でご覧ください。

SVGとSVG Filter

　日本地図の描画にはSVG、SVG Filterを用いています。SVGの最大の利点は、ビットマップ画像とは違い、ベクタデータを持つことでどのような画面サイズにおいても最適な描画を実現できることです。また、SVG Filterを利用すればグラフィクスを装飾することが可能です。色変換やブラーなどのエフェクトをかける際、HTML Canvasで実装するよりも簡単かつ高速になります。本章では、実際にSVGを使った簡単な描画を行い、それに対してSVG Filterをかけ、解説していきます。

SVGの準備

　早速、SVGを書いていきましょう。ここでは前回の記事と同じようなものを描いていきます。まずは、SVGの用意です。書き方はW3Cによって仕様が決められています。

SVG：svg_1.svg

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     style="background-color: gray;">
</svg>

svg_1.svg

　HTMLドキュメントではルートエレメントがhtmlだったのに対し、SVGドキュメントではsvgを使います。

矩形を描こう

　前回の記事の例と同様、同じ場所に同じサイズ、同じ色の矩形を出してみます。SVGでも、矩形などの描画は非常に簡単です。

SVG：svg_2.svg

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     style="background-color: gray;"
>
<rect x="150" y="250" width="100" height="50"
    fill="red" stroke="none"/>
</svg>

svg_2.svg