HTML5 & Web PlatformPresentation @ SwapSkills

by Tomoya Asai (aka. dynamis)

about:me

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

Mozilla Product & Technology Evangelist

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

mail: dynamis mozilla-japan.org

twitter: @dynamitter

@

Download Please! http://r.dynamis.jp/swapskills

HTML5 のホントとウソ

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

アプリケーションプラットフォーム

ネイティブマルチメディア機能

HTML5 の彼方に

Agenda:

Download Please! http://r.dynamis.jp/swapskills

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

Truth of HTML5HTML5 is...

"HTML5" のよくある質問

"HTML5" って Video？ Canvas？ SVG？

"HTML5" はタグの仕様？ API の仕様？

"HTML5" でプラグインは不要になる？

"HTML5" は 2010 年中に勧告される？

"HTML5" にブラウザは完全対応する？

"HTML5" って Video？ Canvas？ SVG？

"HTML5" はタグの仕様？ API の仕様？

"HTML5" でプラグインは不要になる？

"HTML5" は 2010 年中に勧告される？

"HTML5" にブラウザは完全対応する？

photo by Horia http://www.flickr.com/photos/horiavarlan/4273168957/

どの疑問もナンセンス

"HTML5" と呼んでいる範囲は？

仕様が勧告されれば使えるのか？

仕様に完全準拠した実装は存在した？

仕様に合わせて実装すれば良いのか？

実装に合わせて仕様を書くのか？

photo by Horia http://www.flickr.com/photos/horiavarlan/4273168957/

"HTML5" と呼んでいる範囲は？

仕様が勧告されれば使えるのか？

仕様に完全準拠した実装は存在した？

仕様に合わせて実装すれば良いのか？

実装に合わせて仕様を書くのか？

HTML5 とは何なのか？

"HTML5" の範囲は？

W3C HTML5

W3C HTML5, Microdata, Web Messaging

WHATWG HTML5 (device, ping は除く)

Web Storage, Web Workers, WebSockets API ...以前 HTML5 仕様に入っていたものを含む場合

CSS3, DOM3, Geolocation API, SVG, WebGL ...次世代 Web 技術もまとめて呼ぶ場合

なにもかも HTML5 (バズワード)

This specification evolves HTML

and its related APIs to ease the

authoring of Web-based applications.

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

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

HTML5

Canvas 2D Graphics ContextMicrodata

Microdata vocabulariesCross-document messaging

Channel messaging

Forms

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

Next Generation of HTML

HTML5

Canvas 2D Graphics ContextMicrodata

Microdata vocabulariesCross-document messaging

Channel messaging

Forms

device elementping attribute

Web WorkersThe WebSocket protocol

Web Storage

The WebSockets APIServer-Sent Events

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

Web SQL Database

Geolocation APIXMLHttpRequest Level 2

Next Generation of HTML

HTML5

Canvas 2D Graphics ContextMicrodata

Microdata vocabulariesCross-document messaging

Channel messaging

Forms

device elementping attribute

SVGMathML

Indexed Database API

Next Generation of HTML

HTML5

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

Canvas 2D Graphics ContextMicrodata

Microdata vocabularies

HTML5Forms

Cross-document messagingChannel messaging

Forms

HTML5 Web Messaging

HTML5 Microdata

HTML Canvas 2D Context

device elementping attribute

Web WorkersThe WebSocket protocol

SVGMathML

Web Storage

The WebSockets APIServer-Sent Events

Geolocation APIXMLHttpRequest Level 2

Indexed Database 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

WebM (VP8)CSS3 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)CSS3 TransitionsECMAScript 5th

Offline Events

HTML5 Markup

CSS3 Selectors

XPath

ブラウザ開発側から見た Web 標準は...

ユーザの必要とする機能をブラウザに

既存の独自拡張を整理統合して標準化

新規追加機能の仕様も統一して標準化

既存の標準は実装により有効性を確認

複数の実装なくして標準に意味はない

すべての環境で同一に

すべての環境で同一に

ユーザに最善の Web を

ではなく

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

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

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

Current & Coming Tech

Technology Status

Web DesignCSS, Image, Fonts...

今回はデザイン周りの技術はざっくり割愛...

過去の講演でご覧になった方もいるでしょうから...「今使える技術」はデザイン系の方が多いんですけどね...

text-shadow, box-shadow

✴ テキストやボックスに影を付加

rgba, opacity

✴ 色や要素にアルファチャネル

Multiple Backgrounds

✴ 背景画像を複数組み合わせて指定

CSS Gradations

✴ CSS でグラデーション画像を作成

CSS Transforms

✴ CSS で要素の回転、変形、拡大縮小、平行移動

その他の新機能... http://r.dynamis.jp/firefox.next

Media Queries

✴ 画面サイズなどに応じたスタイルを指定

Web Fonts & WOFF

✴ テキストのフォントをダウンロード

Scalable Vector Graphics

✴ XML で記述するベクター画像ファイル

SVG Filter for HTML

✴ ぼかしや切り取りなどの SVG フィルタ

Flexible Box Model

✴ 要素のサイズや配置を簡単かつ柔軟に指定

過去の講演資料も参照... http://www.slideshare.net/dynamis

Application PlatformJS APIs for Web Apps...

Web Forms

photo by Aron http://www.flickr.com/photos/aarongustafson/2491839081/

Daniel さんが説明してくれたので Firefox の実装状況だけ簡単に...

Web Forms 実装状況Mounir Lamouri さんがほぼ単独で順次実装

主な実装済み:

placeholder 属性: 未入力時の灰色テキスト

autofocus 属性: 初期フォーカスフィールド

input type=tel/search: 電話や検索の入力

主なチェックイン待ち: (Firefox 4 に多分入る)

定数/URL/pattern validation: 入力値の検証

required 属性: 入力必須項目の指定

:required, :optional CSS 擬似クラス

最新状況: https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms

Web Forms 実装状況

実装したが仕様に問題あり中断中:

autocomplete: 入力の自動補完

未着手: (Firefox 4 に入る見込みまず無し)

input type=range/date/month/time など

list/min/max/step/form/progress 属性など

Color/Date/Time/Range などの選択 UI

最新状況のまとめ:

https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms

最新状況: https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms

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);};// ... 酷い仕様で無駄に複雑になるので中略 ...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]); }}, 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/

CSS Transitions

Firefox.next~ http://24ways.org/2009/going-nuts-with-css-transitions

CSS Transitions

Firefox.next~ http://24ways.org/2009/going-nuts-with-css-transitions

CSS3 Transitions

transition: all 0.5s ease-in;

transition: color 1s linear, width 1s ease-in;

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

一部プロパティの変化をなめらかにする

動的擬似クラスや JavaScript 書き換え時に

位置、サイズ、カラー、シャドウなどが対象

変化の時間や速度なども制御可能

linear, ease, ease-in, ease-out など

http://media.24ways.org/2009/14/5/index.htmla.polaroid { /* ... font-size とか省略 ... */ z-index: 2; -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; transition: all 0.5s ease-in;}a.polaroid:hover,a.polaroid:focus,a.polaroid:active { z-index: 999; border-color: #6A6A6A; -webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); -moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); -webkit-transform: rotate(0deg) scale(1.05); -moz-transform: rotate(0deg) scale(1.05); transform: rotate(0deg) scale(1.05);}

SVG Animation

SVG Animation

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

SMIL Animation ベースの仕様

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

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

<animateMotion>, <animateTransform> 実装済

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

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

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

IE9 では対応予定無し (＞＜)

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>

Edit & Try Now! Later!http://r.dynamis.jp/swapskillshttp://r.dynamis.jp/smildemo

<animation> の属性

attributeType="CSS" ー スタイルアニメーション

attributeName="fill" ー

dur="5s" ー アニメーション時間は 5 秒間

values="#ff8; #f88; #f8f; #88f; #8ff; #8f8"keyTimes="0; .2; .4; .6; .8; 1"

0 秒、1秒、2秒...5秒時点での fill 色を指定

キーフレーム時間は dur に対する比

repeatCount="indefinite" ー 無限繰り返し

WebGL

Firefox.next~ 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.next~ 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

Try Now! Later!http://r.dynamis.jp/swapskillshttp://r.dynamis.jp/audioapidemo

Audio API サポートした専用ビルドが必要上記 URL からビルドをダウンロードして試してください

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

やっぱいいよね Firefox

やっぱいいよね Firefox

end.

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_developersWHATWG HTML5 (各機能のブラウザ実装状況含む)

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

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

ref. - statusブラウザ対応状況の対応表とか

HTML5 の対応状況は仕様書に書いてある

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

http://www.whatwg.org/html5WHATWG の 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.jsIE でも Canvas を描画可能にするライブラリ

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.htmlWebGL セクション@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