SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

SVG&CSS&Audio Data API
~ ウェブの最新技術が魅せる「Firefoxの灯」(3)


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

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

 本稿では、SVGCSSおよび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

 日本地図の描画にはSVGSVG 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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
いろいろな形をいろいろな色で描こう

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ウェブの最新技術が魅せる「Firefoxの灯」連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6136 2011/09/06 13:17

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング