HTML5 IntroductionPresentation @ OSC 2010 Hokkaidoby Tomoya Asai (aka. dynamis)

about:me

浅井 智也 =̃ dynamis (でゅなみす)

Mozilla Products & Technology Evangelist

slides: http://r.dynamis.jp/presen

mail: dynamis mozilla-japan.org

twitter: @dynamitter

@

FIFA World Cup 2010決勝進出おめでとう！

決勝進出おめでとう！

HTML5&CSS3 ブブゼラ http://people.opera.com/danield/html5/vuvuzela/

"HTML5" とは？

Why? What? When?

今使える技術、次に来る技術

Design, Platform, Multimedia

HTML5 の彼方に

Agenda:

StatisticsShare and Active Users

2002/01

2009/07

Browser MarketShare Graph by AXIIShttp://www.axiis.org/examples/BrowserMarketShare.html

Browser MarketShare Graph by AXIIShttp://www.axiis.org/examples/BrowserMarketShare.html

Opera2%

Safari5%

Chrome7%

Firefox25%

Internet Explorer60%

世界のブラウザシェア by NetApps (2010/04)

Opera2%

Safari5%

Chrome7%

Firefox25%

Internet Explorer60%

世界のブラウザシェア by NetApps (2010/04)

Stats by NetApplicationshttp://marketshare.hitslink.com/

http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html

http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html

"HTML5"？ (・・)?

Why HTML5Birth of HTML5...

Why HTML5Birth of HTML5...

2004: Web 2.0

Google Suggest, Maps, Gmail

Ajax による実用サービス

Web の可能性が再評価

Browser = Web Viewer

Browser = Web Platform

Problems are...

ブラウザ間の互換性...

不安定、低機能、低速...

XHTML 2.0 なども普及せず...

5 years later...

Web アプリの為の HTML を

後方互換性のある形で進化を

WHATWG を設立して仕様策定

HTML5

次世代 Web のための HTML

Web アプリを書きやすく

相互運用性も確保できる仕様

This specification evolves HTML

and its related APIs to ease the

authoring of Web-based applications.

http://whatwg.org/html5 - Abstract より

http://whatwg.org/html5 - Abstract より

この仕様では Web アプリケーションを記述しやすくするため

HTML と関連 API を進化させる

What is HTML5?Range of HTML5...

What is HTML5?Range of HTML5...

"HTML5" ?

Video? Canvas? SVG? CSS3?

タグの仕様？ API の仕様？

プラグインが不要になる？

どこまで HTML5？

Web WorkersWeb Storage

The WebSockets API

Server-Sent Events

Geolocation API

XMLHttpRequest Level 2

Canvas 2D

Forms

File API

SVG

Drag & Drop APIIndexed Database API

Microdata

Cross-document MessagingWebGL

WebFonts

Event Listener

CSS3 TransitionsECMAScript 5th

Offline Events

HTML5 Markup

CSS3 Selectors

XPath

WebM (VP8) Codec

HTML5 の定義

仕様書に書いてあります

ベンダーの宣伝はウソだらけ

メディアも気にせず間違い多い

ref. http://whatwg.org/html5 - 1.1 Is this HTML5?

WHATWG の HTML5 仕様書に基づきます

HTML5

Canvas 2D Graphics ContextMicrodata

Microdata vocabulariesCross-document messaging

Channel messaging

HTML5 Parser

HTML5

HTML5 Parser

HTML5 Web Messaging

HTML5 Microdata

HTML Canvas 2D Context

Drag & Drop APIOffline Events

Event model & APIsHTML5 Forms

Multimedia Elements

Drag & Drop APIOffline Events

Event model & APIsHTML5 Forms

Multimedia ElementsSemantic Elements Semantic Elements

WHATWG の仕様書にも HTML5 範囲外のものが入ってます

Next Generation of HTML

HTML5

Canvas 2D Graphics ContextMicrodata

Microdata vocabulariesCross-document messaging

Channel messaging

Elements, Events, APIs

device elementping attribute

timed track modelconverting HTML to Atom

HTML5Elements, Events, APIs

HTML5 Web Messaging

HTML5 Microdata

HTML Canvas 2D Context

Next Generation of HTML

HTML5

その他いろいろ話題ですが HTML5 じゃありません

Canvas 2D Graphics ContextMicrodata

Microdata vocabularies

HTML5

Cross-document messagingChannel messaging HTML5 Web Messaging

HTML5 Microdata

HTML Canvas 2D Context

Web WorkersThe WebSocket protocol

SVGMathML

Web Storage

The WebSockets APIServer-Sent Events

Geolocation APIXMLHttpRequest Level 2

Indexed Database API<device> ping=""

timed track HTML→Atom

Elements, Events, APIs Elements, Events, APIs

どこまで HTML5？

Web WorkersWeb Storage

The WebSockets API

Server-Sent Events

Geolocation API

XMLHttpRequest Level 2

Canvas 2D

Forms

File API

SVG

Drag & Drop APIIndexed Database API

Microdata

Cross-document MessagingWebGL

WebFonts

Event Listener

WebM (VP8) CodecCSS3 TransitionsECMAScript 5th

Offline Events

HTML5 Markup

CSS3 Selectors

XPath

どこまで HTML5？

Web WorkersWeb Storage

The WebSockets API

Server-Sent Events

Geolocation API

XMLHttpRequest Level 2

Canvas 2D

Forms

File API

SVG

Drag & Drop APIIndexed Database API

Microdata

Cross-document MessagingWebGL

WebFonts

Event Listener

WebM (VP8) CodecCSS3 TransitionsECMAScript 5th

Offline Events

HTML5 Markup

CSS3 Selectors

XPath

WHATWG 仕様書の定義によるCanvas はタグの定義だけが HTML5

独自実装ばかりのデモはAppleHTML とか

GoogleHTML とでも

When HTML5?Practical HTML5...

Now.

サポート状況

仕様書に書いてあります

Acid3 などは無意味です

公開資料末尾の付録参照

ベンダー発表のサポート状況は注意して見ること自社のブラウザでサポートした機能に絞ったチェックリスト古い仕様や独自実装やバグだらけの実装でもサポートと主張

後方互換は？

Video などは Fallback 簡単

Canvas も SVG もライブラリで

公開資料末尾の付録参照

IE6 でも Canvas 動作するライブラリあります個人的には uupaa さんの uuCancas.js がオススメ

SVG の後方互換ライブラリも鋭意開発中とのことです

使えるものから使いましょう。

仕様の中でサポートされているものから使うこれまでの Web 開発でやってきた事と同じです

ブラウザ対応状況などは資料末尾の Reference 参照

Current & Coming Tech

Technology Status

HTML5 だけじゃ物足りないので他も含めます

Web DesignCSS, Image, Fonts...

CSS Gradients

Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/CSS ボタン生成ツールも: http://css-tricks.com/examples/ButtonMaker/

CSS Gradients線形 (linear) と放射状 (radial) の２種類

linear-gradient(top, black 0%, white 100%)

radial-gradient(circle, yellow, green)

繰り返し形式もサポート

repeating-linear-gradient(red 10px, blue 10px)

CSS3 Images で画像の一種として定義

Draft なので -webkit-, -moz- prefix が必要

Firefox 3.6 では background に対してのみ

WebKit の構文は古い独自仕様なので注意

Firefox3.6~ http://dev.w3.org/csswg/css3-images/#gradients-

http://people.mozilla.org/~blizzard/2009-11-gradient-button/sample.html

<style>.gradationbutton { display: block; /* a タグをボックス要素に */ font: bold 138.5% Helvetica,Arial,sans-serif; text-align: center; text-decoration: none; /* リンクの下線解除 */ color: #ffffff; /* 白抜き文字 */ text-shadow: -1px -1px 2px #777777; /* エンボス */ padding: 10px; border: 1px solid #659635; -moz-border-radius: 10px; border-radius: 10px; /* 角を丸める */ background: #99ca28; /* 非サポートブラウザ向け Fallback */ background: -moz-linear-gradient(top, #CFE782 0%, #9BCB2A 2%, #5DA331 97%, #659635 100%);}.info { font-size: 81%; font-weight: normal;}</style><p style="width: 300px;"> <a class="gradationbutton" href="http://hacks.mozilla.org"> <span>hacks.mozilla.org</span><br/> <span class="info">HTML5 の最新情報はこちら!</span> </a></p>

Web Fonts

Firefox3.5~ http://www.alistapart.com/articles/cssatten

Web Fonts

Japanese Web Fonts Service by Seesaa http://decomoji.jp/

Web Fonts

CSS3 Web Fonts

@font-face でダウンロードフォントを定義

@font-face { font-family: Koburina; src url(Koburina.woff) format("woff"); }

Firefox 3.5 で OpenType, TrueType をサポート

Firefox 3.6 や IE9 などは WOFF もサポート

Web Open Font Format

フォントベンダと共に作った新フォント形式

グリフ部分のデータは圧縮して小さく

Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face

sample css style rules

/* Internet Explorer 8 以前用フォント設定 (最初に) */@font-face { font-family: Sawarabi; src: url(Sawarabi.eot) /* format() 非サポート */;}/* 他のブラウザ向けフォント設定 */@font-face { font-family: Sawarabi; src: url(Sawarabi.otf) format("opentype");}/* Firefox 3.6 以降などには WOFF を */@font-face { font-family: Sawarabi; src: url(Sawarabi.woff) format("woff");}body { font-family: Sawarabi, sans-serif; }

Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/

Application PlatformJS APIs for Web Apps...

WebSockets

photo by 5500 http://www.flickr.com/photos/5500/303849123/

WebSockets

シンプルなテキスト送受信プロトコル

バイナリデータや多重化などの機能はない

JavaScript API も極めて単純

データの送信は send メソッド

open, error, close, message イベントで処理

まだまだ仕様策定段階なので要注意

Firefox は 2009/04 からパッチを用意し仕様変更に随時追従しながら仕様の問題を指摘

Firefox 4, Chrome 6 が現仕様サポート予定https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/

Web Sockets API 使用コード例// WebSocket の接続を開始var socket = new WebSocket(url /* ,protocol */);

// on*** イベントハンドラを設定socket.onopen = function(event) { // send メソッドでサーバにテキストを送信 socket.send("Hello, WebSocket Server!");}// onmessage イベントハンドラでサーバからテキスト受信socket.onmessage = function(event) { alert("data from server: "+event.data);}

socket.onerror = function(e) { alert("Error!"); }socket.onclose = function(e) { alert("Closed."); }

File API

photo by californiaAmy http://www.flickr.com/photos/amyandthomas/3865411819/

File API

ローカルファイルの読み込み専用 API

Mozilla が中心に標準化、Firefox 3.6 で実装

書き込みは File API: Writer という別仕様

<input type="file"> 経由でのアクセスが一番基本

value は初期値設定や JS から文字列指定不可

XMLHttpRequest や Workers などでも利用可

Drag & Drop API との組み合わせも可能

Blob, File, FileReader などのインターフェイス

Firefox3.6~ https://developer.mozilla.org/en/Using_files_from_web_applications

https://developer.mozilla.org/en/Using_files_from_web_applications

<input type="file" id="fileInput" multiple="true"/><script><!--var fileInput = document.getElementById("fileInput");  fileInput.addEventListener("change", handleFiles);

// onchange イベントハンドラfunction handleFiles() {    var fileList = this.files;     for (var i = 0; i < files.length; i++) { alert("ファイル名: " + files[i].name); alert("内容: " + files[i].getAsText("UTF-8")); } // close や lock は不要 (try-catch すれば OK)}--></script>

Drag & Drop API

Firefox3.6~ http://r.dynamis.jp/fontdropdemo

The drag-and-drop API is horrible,

but it has one thing going for it: IE6

implements it, as do Safari and Firefox.

Ian Hickson の言葉 http://twitter.com/Hixie/status/4075253361

Drag & Drop APIHTML5 の Drag & Drop API

IE5, Firefox 3.5, Safar 4 からサポート

IE の (ホント酷い) 先行実装に合わせた仕様

addEventListener("drop", function(event) { ... },true)

dragstart, dragover, dragend などのイベント

ローカルファイルのドロップは File API

File API と組み合わせは Firefox 3.6 から

event.dataTransfer.files でファイルを受け取る

あとは File API で自由に読み取る

Firefox3.5~ https://developer.mozilla.org/Ja/DragDrop/Drag_and_Drop

http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/

reader.onload = function(e) { var bin = e.target.result; //binaryString // 読み取ったファイルをアップロード var xhr = new XMLHttpRequest(); xhr.open("POST", "upload.php"); xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); xhr.sendAsBinary(bin); // sendAsBinary は Firefox 独自です};// ... 酷い仕様で無駄に複雑になるので中略 ...dropzone.addEventListener("drop", function(event) { event.preventDefault(); // ドロップイベントの dataTransfer でファイルアクセス var allTheFiles = event.dataTransfer.files; alert("ドロップしたファイル数: " + allTheFiles.length); for (var i = 0; i < files.length; i++) { // バイナリファイルとして読み込み reader.readAsBinaryString(files[i]); // Firefox 独自 }}, true);

無駄に複雑な仕様なので省略しましたが、実用レベルではライブラリを使いましょう

HTML5 Parser

http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html

HTML5 Parser

HTML5 では互換性確保のためパーサ仕様も含む

仕様の曖昧性もブラウザ非互換の主要因

Firefox 3.6 以降で実装 (4 でデフォルト有効)

パース処理のスレッド分離で全体的に高速化

innerHTML 呼び出しは 20% 高速化

XML 名前空間無しで SVG/MathML 使用可

整形式でなくても SVG/MathML 使用可

ブラウザ非互換の原因やバグを多数解消

地味だが非常に重要な機能https://dev.mozilla.jp/hacksmozillaorg/firefox-4-the-html5-parser-inline-svg-speed-and-more/

Native MultimediaVideo, Animation, 3D ...

Open VideoOn2 Tech.

VP3Xiph.Org Google

OggVP4TheoraVP5VP6VP7VP8

Vorbis

Matroska

VorbisVP8

WebM

Open Video

HTML5 で Video タグの Codec 指定はない

高品質かつロイヤリティフリーな Codec が必要

Web 標準はロイヤリティフリーが大前提

先日までは Ogg Theora が最有力の Open Video

WebM (Web Media) が公開され問題解決か？

WebM = VP8+Vorbis in Matroska

Google が On2 を買収し VP8 を OSS 化

Google, Mozilla, Opera, Adobe, MS などが採用

Theora は Firefox 3.5~, WebM は Firefox4~

On2 Tech.VP3

Xiph.Org Google

OggVP4TheoraVP5VP6VP7VP8

Container

Vorbis

Matroska

VorbisVP8

AudioVideo

WebM

ロイヤリティフリーWebM プロジェクト FAQ: http://www.webmproject.org/about/faq/

SVG Animation

SVG Animation

SVG のアニメーション関連機能

SMIL Animation ベースの仕様

SVG は SMIL のホスト言語という位置づけ

<animate>, <set> などで属性の変更を定義

<animateMotion>, <animateTransform> 実装済

<animateColor> は仕様に不備があり pending

<animate> の機能制約版に過ぎず必要性も低い

Firefox 4, Safari, Chrome, Opera でサポート

IE では類似仕様の HTML+TIME をサポート

SVG Test Suite 結果表: http://www.codedread.com/svg-support.php

http://people.mozilla.com/~dynamis/demo/smil/<svg ... xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."> ... <ellipse cx="290" cy="200" rx="80" ry="80"><!-- 中心の円 --> <!-- 毎秒指定色へと変化する 5秒間の色変更を無限に繰り返す --> <animate attributeType="CSS" attributeName="fill" dur="5s" values="#ff8; #f88; #f8f; #88f; #8ff; #8f8" keyTimes="0; .2; .4; .6; .8; 1" repeatCount="indefinite"/> </ellipse> ... <g id="R1" transform="translate(200, 200)"><!-- グループ化 --> <ellipse id="EL" cx="0" cy="0" rx="100" ry="30" ...><!-- 周囲の楕円 --> <animateTransform attributeName="transform" type="rotate" dur="7s" from="0" to="360" repeatCount="indefinite"/><!-- 回転 --> <animate attributeName="cx" dur="8s" values="-20; 120; -20" keyTimes="0; .5; 1" repeatCount="indefinite"/><!-- 中心の移動 --> <animate attributeName="ry" dur="3s" values="10; 60; 10" keyTimes="0; .5; 1" repeatCount="indefinite"/><!-- 半径の変更 --> </ellipse> </g> <use xlink:href="#R1" transform="rotate(30, 300, 200)"/><!-- 回転複製 --> ...</svg>

WebGL

Firefox 4~ http://www.khronos.org/webgl/wiki/Demo_Repository

WebGL

The Khronos Group で API 仕様を策定

Apple, Google, Mozilla, Opera が参加

OpenGL ES 2.0 ベースの API を JS から使う

シェーダーやテクスチャなども当然利用可能

<canvas> の 3D コンテキストとして定義

Firefox 4 や WebKit Nightly でサポート

Firefox では about:config で有効化する

webgl.enabled_for_all_sites = true

Google の O3D は Gears 同様に開発終了Firefox 4~ https://developer.mozilla.org/en/WebGL

https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL

<canvas id="glcanvas" width="640" height="480"/><script type="text/javascript">var canvas = document.getElementById("glcanvas");// WebGL コンテキストを取得// Firefox では "moz-webgl" または "experimantal-webgl"// WebKit では "webkit-gl" を引数に指定するvar gl = canvas.getContext("webgl");if (gl) { // WebGL コンテキストの初期化  gl.clearColor(0.0, 0.0, 0.0, 1.0);  gl.clearDepth(1.0);  gl.enable(gl.DEPTH_TEST);  gl.depthFunc(gl.LEQUAL); // ... OpenGL 同様にいろいろ描画処理 ...}</script>

Beyond HTML5Future Web Platform

Audio Data API

デモ紹介ブログポスト: http://vocamus.net/dave/?p=974

Audio Data API<audio> データを操作する JS API の試験実装中

WHATWG では当初 audio canvas として検討

<video> データの解析は <canvas> 経由で

onloadedmetadata イベントを拡張

channels, rate, volume などを追加

onaudiowritten イベントを新しく定義

フレームバッファと開始時間が得られる

Audio クラスでゼロから音の合成も可能

詳細は: https://wiki.mozilla.org/Audio_Data_API

Orientation

Firefox3.6~ http://r.dynamis.jp/oryzeademo

Orientation

CSS と JavaScript の両方で利用可能

メディアクエリーで縦横画面別の CSS を指定

@media all and (orientation: portrait) { ... }

MozOrientation イベントで JavaScript 処理

window.addEventListener("MozOrientation", orientationHandler, true);定期的に加速度センサーからのイベント発生

デバイス面の法線ベクトル成分 x,y,z を取得

Firefox3.6~ http://hacks.mozilla.org/2009/10/orientation-for-firefox/

https://developer.mozilla.org/en/Detecting_device_orientation

<!-- 縦方向 (portrait) と横方向 (landscape) の CSS --><link rel="stylesheet" href="portrait.css" media="all and (orientation:portrait)"><link rel="stylesheet" href="landscape.css" media="all and (orientation:landscape)"><style>@media all and (orientation: portrait) { ... }@media all and (orientation: landscape) { ... }</style><script type="text/javascript">window.addEventListener("MozOrientation", handleOrientation);function handleOrientation(orientData) {    var x = orientData.x; // デバイスの法線ベクトル X 成分  var y = orientData.y; // デバイスの法線ベクトル Y 成分  var z = orientData.z; // デバイスの法線ベクトル Z 成分    // デバイスの傾きに応じた適当な処理を行う}</script>

Multi-touch

Multi-touch

:-moz-system-metric(touch-enabled) CSSセレクタ

MozTouchDown, MozTouchMove, MozTouchUp イベントで JavaScript 処理

document.addEventListener("MozTouchMove", touchHandler, true);位置の取得はマウス同様 screenX, clientX とか

現状は Windows 7 にのみ対応した試験実装

Firefox 4 での標準サポートは未定

タッチジェスチャーなども含めて検討中

https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish

http://www.mgalli.com/development/drawing/demoapp.html

<canvas id="canvas" width="1200" height="800"/><script type="text/javascript">var ctx = document.getElementById("canvas").getContext('2d');

window.setInterval(function fadeOut() { ctx.fillStyle = 'rgba(255,255,255,.1)'; ctx.fillRect(0,0,1200,800);}, 200); // 描いたものを自動フェードアウト

function drawCircle(e) { // タッチした位置に円を描画する ctx.fillStyle='rgba(0,0,0,1)'; ctx.beginPath(); ctx.arc(e.clientX, e.clientY, 20, 0, Math.PI*2, 1); ctx.fill(); ctx.closePath();}document.addEventListener("MozTouchMove", drawCircle, false);</script>

https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish/DOM_Events/Examples

Any Question ?

Any Question ?

end.

Tips & HacksWeb Only Contents (・・).

Native JSON

ブラウザネイティブ実装の JSON 変換メソッド

JSON.parse(), JSON.stringfy()

セキュアかつ高速な変換処理が可能

使える限り使った方が良いです

IE8 でもサポート (2010/02 に挙動変更)

それ以前には json2.js などのライブラリを利用

http://www.json.org/js.html

ECMA 5th の trim() などもネイティブメソッド...

Firefox.3.5~ https://developer.mozilla.org/en/Using_native_JSON

https://developer.mozilla.org/ja/Using_native_JSON

var foo = {};foo.str = "some string";foo.num = 3;foo.func = function(){ alert('(・・).'); };

var jsonString = JSON.stringify(foo);// jsonString = '{"str":"some string","num":3}'// リテラルと違いキー名も引用符で括られる// 関数のプロパティは JSON 仕様外なので無視される

var foo2 = JSON.parse(jsonString); // foo2 = {str: "some string", num: 3}

foo2.toJSON = function(){ return "bar"; }var jsonString2 = JSON.stringify(foo2)// jsonString2 = "bar";// toJSON() メソッドがあればその結果が使われる

about: <Video>

HTML5 では <video> や <audio> タグを追加

サポート Codec の違いには注意が必要

Firefox は特許問題のない Ogg/WebM に対応

H.264 特許権利者の Apple は H.264 のみ対応

特許権ない Google は Ogg/WebM/H.264 両対応

体感速度向上につながる属性に注意

ポスターフレーム画像を poster 属性に指定

自動バッファ設定は autobuffer 属性で指定

フルスクリーン対応は今のところ Firefox のみ

Firefox.3.5~ http://hacks.mozilla.org/category/video/

http://hacks.mozilla.org/2009/12/autobuffering-video-in-firefox/

<video controls> <!-- 各コーデックと、非対応ブラウザ向けを列挙 --> <source src="video.webm" type="video/webm"/> <source src="video.ogg" type="video/ogg"/> <source src="video.mp4" type="video/mp4"/> <embed src="video.swf" width="500" height="396" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"/></video><!-- 自動バッファオン、ポスターフレームあり --><video controls autobuffer poster="posterframe.jpg"> ...</video><!-- 自動バッファのデフォルト動作はブラウザ次第です - デスクトップ Safari/Chrome はデフォルトでオン - Firefox/Opera, iPhone Safari はデフォルトオフ - 但し Opera はその予定なだけで autobuffer 未対応 -->

Pointer Events

SVG 用 CSS pointer-events を HTML にも導入

Firefox 3.6 では auto と none だけ対応

pointer-events: auto; で従来通りの挙動

pointer-events: none; でマウスイベントを透過

例: 半透明画像下にあるリンクもクリック可能に

Firefox.3.6~ https://developer.mozilla.org/en/CSS/pointer-events

http://demos.hacks.mozilla.org/openweb/pointer-events/<div class="boxContainer"> <div class="layer1"> クリックしたい下レイヤ <a href="a.html">リンクテキスト</a> </div> <!-- 半透明背景画像だけの上レイヤ --> <div class="layer2"></div></div><style>.layer1 { background-color: rgb(221, 238, 246); position: absolute;}.layer2 { /* 右端をフェードアウトさせる半透明レイヤ */ position: absolute; right: -15px; width: 155px; height: 120px; background: -moz-linear-gradient(right, rgba(0,34,51,1) 40px, rgba(0,34,51,0));}</style>

Referencesfor more information...

referenceshacks.mozilla.org - Mozilla と Web の最新技術紹介

http://hacks.mozilla.org/https://dev.mozilla.jp/hacksmozillaorg/

Firefox の最新機能紹介ページ

https://developer.mozilla.org/en/Upcoming_Firefox_features_for_developershttps://developer.mozilla.org/ja/Firefox_3.6_for_developers

WHATWG HTML5 (各機能のブラウザ実装状況含む)

http://www.whatwg.org/html5HTML5 の基本は矢倉さんのスライドがオススメ

http://www.slideshare.net/myakura/presentations

ref. - statusHTML5 の対応状況は仕様書に書かれている

各項目のタイトル左側にポップアップ表示

http://www.whatwg.org/html5caniuse.com のまとめがオススメ

http://caniuse.com/http://caniuse.com/#cats=HTML5&statuses=rec,pr,cr,wd,ietf

WHATWG の Wiki

http://wiki.whatwg.org/wiki/Implementations_in_Web_browsersSVG Test Suite の結果表

http://www.codedread.com/svg-support.php

ref. - toolsOpen Web ツール検索

http://tools.mozilla.com/Processing.js - Canvas 上で Processing を使う

http://processingjs.org/Contextfree.js - Canvas 上で ContextFree を使う

http://azarask.in/projects/algorithm-ink/http://code.google.com/p/contextfree/source/browse/trunk/contextfree.js

IE でも Canvas を描画可能にする uuCanvas.js

http://code.google.com/p/uupaa-js-spinoff/

ref. - toolsJavaScript から簡単に SVG を生成

http://raphaeljs.com/Web アプリケーション用のフレームワーク

Cappuccino: http://objective-j.org/Sproutcore: http://www.sproutcore.com/JavaScriptMVC: http://javascriptmvc.com/

SVG や XUL にも対応するフレームワーク

Ample SDK: http://www.amplesdk.com/

一時 Gianduia も話題でしたが外部向けに公開されてないので現状論外

ref. - web fontsCSS Fonts Module Level 3

http://www.w3.org/TR/css3-fonts/Google の Web Font サービス

http://code.google.com/webfontsWeb Fonts のライセンス販売 (無償フォント含む)

http://typekit.com/http://decomoji.jp/

Web Fonts Generator - eot や WOFF フォントに変換

http://www.fontsquirrel.com/fontface/generator

ref. - webglWebGL Spec.

https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html

WebGL セクション@MDC

https://developer.mozilla.org/en/WebGLThe WebGL Cookbook

http://learningwebgl.com/cookbook/Khronos - WebGL

http://www.khronos.org/webgl/http://www.khronos.org/webgl/wiki/Demo_Repository

ref. - other spec.File API

http://www.w3.org/TR/FileAPI/http://www.w3.org/TR/file-writer-api/

Geolocation API

http://www.w3.org/TR/geolocation-API/Audio Data API

https://wiki.mozilla.org/Audio_Data_APIwindow.onmozorientation

https://developer.mozilla.org/en/DOM/window.onmozorientation