View
2.785
Download
1
Category
Tags:
Preview:
DESCRIPTION
20100530 SwapSkills での講演スライド
Citation preview
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
Recommended