HTML5 in Firefox4

"HTML5" in Firefox4
Slides @ HTML5 NadoNado in Fukui
by Tomoya ASAI (aka. dynamis)
Fractal Firefox Background Image: http://r.dynamis.jp/fractalfx

about:me
dynamis (でゅなみす)
浅井智也 (あさいともや)
Mozilla Tech Evangelist
http://r.dynamis.jp/presen
dynamis mozilla-japan.org
twitter: @dynamitter
@
ギリシャ語由来なので「だいなみす」と英語読みはしないでね

Firefox 4 で見る
HTML5 時代の Web 技術
HTML5 だけじゃないのがポイント...

比較的見て分かり易い
技術を中心に紹介します
時間の都合で個々の技術解説あまり詳しくできないけどご容赦を...

HTML5 とは？
for Web Design
for Native Multimedia
for Application Platform
Agenda

資料だけ見てる方はゴメンナサイ...

demo...
資料だけ見てる方はゴメンナサイ...

HTML5 ではありません
Flash でもありません
AIR でもありません
Silverlight でもありません

仕様書に書いてあります

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 を発展させる

Web アプリケーション...
文書を共有するだけでなく...
メールや地図を見るのも...
テレビやゲームも...
仕事や授業も...

これまでの問題は...
ブラウザの独自実装
実装まかせの曖昧な仕様
不安定、低機能、低速

HTML5 の目的は...
既存の独自実装を標準化
これから必要な機能は追加
本格的なアプリ実行環境に

HTML の基本はタグ...
マークアップ (タグと意味)
(X)HTML 構文とパーサ
MicroData (セマンティクス)
SVG や MathML との連携

マルチメディアサポート...
Audio/Video タグのサポート
自由に描画する領域 Canvas
Canvas への二次元描画 API

関連 API って何？
イベントやインターフェイス
Drag & Drop や Undo/Redo
オフラインイベント
履歴とナビゲーション
ドキュメント間通信

再出発ではなく段階的発展
互換性を維持した発展
HTML4 の発展だから
HTML5
理想的転換ではなく現実的発展

It is necessary to evolve HTML
incrementally. The attempt to
get the world to switch to
XML, ... all at once didn't work.
Tim Berners-Lee の言葉: http://dig.csail.mit.edu/breadcrumbs/node/166

HTML は段階的に発展さ
せる必要がある。... すべて
を一度に切り替えようとい
う試みは成功しなかった。
Tim Berners-Lee の言葉: http://dig.csail.mit.edu/breadcrumbs/node/166

互換性を尊重
既存実装を考慮した仕様策定
構文エラー処理など詳細に定義
非互換の原因を最小限に

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 API は酷いけど、採用する理由
がひとつある。つまり、IE6 だけでなく Safari
や Firefox でも実装されているということだ。
Ian Hickson の言葉 http://twitter.com/Hixie/status/4075253361

HTML5 は次世代への第一歩
技術的には小さな一歩
既存技術の整理が主
協力関係は大きな変化
業界全体が標準を推進

仕様書に書いてあります
WAHTWG の HTML5 仕様書
分割して W3C でも標準化
W3C 仕様名に "HTML" を含む
WHATWG は整合性重視
W3C はモジュール指向
ref. http://whatwg.org/html5 - 1.1 Is this HTML5?

どこまで HTML5？
Web Workers
Web Storage
The WebSockets API
Server-Sent Events
Geolocation API
XMLHttpRequest Level 2
Canvas 2D
Forms
File API
SVG
Drag & Drop API
Indexed Database API
Microdata
Cross-document Messaging
WebGL
WebFonts
Event Listener
Microformats
CSS3 Transitions
ECMAScript 5th
Ofﬂine Events
HTML5 Markup
WebM (VP8) Codec
XPath

どこまで HTML5？
Web Workers
Web Storage
The WebSockets API
Server-Sent Events
Geolocation API
Canvas 2D
Forms
File API
SVG
Drag & Drop API
Microdata
Cross-document Messaging
WebGL
WebFonts
Event Listener
Microformats
CSS3 Transitions
ECMAScript 5th
Ofﬂine Events
HTML5 Markup
WebM (VP8) Codec
XPath
WHATWG 仕様書の定義による
Canvas はタグの定義だけが HTML5

次世代 Web 標準技術 (バズワードとしての "HTML5")
Web Applications 1.0
Next Generation of HTML
WHATWG - HTML5
要素とタグの定義
デザイン機能 (CSS)
Microdata (メタデータ)
Events & Messaging (通信)
Web ブラウザ向け機能 ...
device 要素, ping 属性 ...
高度なアプリケーション機能Web Workers
Web Sockets
レイアウトと装飾
Web Fonts
CSS Images (Gradients ...)
CSS 2D Transforms
CSS Media Queries
Web Storage
Audio Data API
SVG SMIL
MathML WebGL

Web Workers
The WebSocket protocol
Web Storage
The WebSockets API
Server-Sent Events
注目されている関連仕様の一部を標準化団体別に色分け
Geolocation API
Next Generation of HTML
WHATWG - HTML5
Canvas 2D Graphics Context
Microdata
Microdata vocabularies
Cross-document messaging
Channel messaging
Forms
<device>
SVG MathML
ping=""
timed track HTML→Atom
Audio Data API
Touch Events
WHATWG Spec W3C Spec Non Standard凡例:
CSS3 XPath
Device Orientation Event

仕様書で HTML5 として定義されている範囲のはこれだけ
WHATWG - HTML5
Canvas 2D Graphics Context
Microdata
Microdata vocabularies
Cross-document messaging
Channel messaging
HTML5 Parser
W3C - HTML5
HTML5 Parser
HTML5 Web Messaging
HTML5 Microdata
HTML Canvas 2D Context
Drag & Drop API
Ofﬂine Events
Event model & APIs
HTML5 Forms
Multimedia Elements
Drag & Drop API
Ofﬂine Events
Event model & APIs
HTML5 Forms
Multimedia Elements
Semantic Elements Semantic Elements

HTML & "HTML5"
HTML5 は仕様書の定義
"HTML5" は次世代技術の総称
"HTML5" = HTML5 ＆ ALL
バズワードのご利用は程々に...

HTML5 が使える時代
HTML5 が注目される時代
誤りではないぼかした表現

Web Design
CSS, Image, Fonts...

Web Fonts
ダウンロードフォント
Firefox 3.6 からは WOFF も
IE9 なども WOFF サポート
WOFF = Web用圧縮フォント
Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face

日本語 Web Fonts
http://decomoji.jp/
商用サービス「デコもじ」
http://decomoji.jp/
サブセットフォントを使う
必要文字だけ切り出して小さく
Font Squirrel などで可能:
http://fontsquirrel.com/
fontface/generator

Web Fonts
@font-face { /* IE8 以前用 EOT フォント設定 (最初に) */
font-family: Sawarabi;
src: url(Sawarabi.eot) /* IE8 以前は format() 非サポート */;
}
@font-face { /* WOFF 非対応ブラウザ向けフォント設定 */
src: url(Sawarabi.otf) format("opentype");
}
@font-face { /* WOFF 対応ブラウザには WOFF を */
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/

Font Control Features
CSS3 font-variant
フォントの詳細な機能を制御
分数、桁揃え、合字、旧字体...
仕様のエディタ自身による実装
実装者本人の解説: http://people.mozilla.org/~jdaggett/webfontsfuture.pdf

http://hacks.mozilla.org/2009/10/font-control-for-designers/

CSS Transitions
スタイル遷移をなめらかに
簡単なアニメーションにも
ベンダー接頭辞に注意
Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions

CSS Transitions
#somebox {
color: black; background-color: yellow;
-moz-transition: all 2s ease-in;
-webkit-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
transition: all 2s ease-in; /* すべてのスタイル変化はを2秒かけて開始をなめらかに */
}
#somebox:hover { /* マウスオーバーで配色、サイズ、角度を変化 */
color: white; background-color: red;
-moz-transform: rotate(-60deg) scale(1.5);
-webkit-transform: rotate(-60deg) scale(1.5);
-o-transform: rotate(-60deg) scale(1.5);
transform: rotate(-60deg) scale(1.5);
}
http://hacks.mozilla.org/2010/07/ﬁrefox4-beta2/

CSS3 calc()
サイズを計算式で指定可能
width: -moz-calc(20% - 1rem)
-moz- prefix に注意

CSS3 calc()
/* margin 分を考慮した左右の分割を行う例 */
#main {
width: 75%;
margin-right: 1rem;
}
#side {
width: -moz-calc(25% - 1rem);
width: calc(25% - 1rem); /* prefix なし忘れずに */
}
/* rem はルート要素の font-size (Firefox 3.6~) */
http://hacks.mozilla.org/2010/06/css3-calc/

-moz-any() selector
CSS セレクタを書きやすく
階層構造などで特に便利
-moz- prefix に注意

-moz-any() がないとき(＞＜)
h1 { font-size: 30px; }
section h1, article h1, aside h1, nav h1 {
font-size: 25px;
}
section section h1, section article h1, section aside h1,
section nav h1, article section h1, article article h1,
article aside h1, article nav h1, aside section h1,
aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1,
{
font-size: 20px;
}
/* ... これ以上は書く気も読む気もしない */
http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/

-moz-any() があるとき(・・).
h1 { font-size: 30px; }
-moz-any(section, article, aside, nav) h1 {
font-size: 25px;
}
-moz-any(section, article, aside, nav)
font-size: 20px;
}
/* まだまだ書ける */

-moz-any() があるとき(・・).
font-size: 15px;
}
font-size: 10px;
}
/* 何層目でもシンプルですね */

background: -moz-element()
他の要素を参照して背景に指定
既存要素との比較変換など便利
Canvas は toDataURL() 不要
反射やサムネイルなどにも便利

http://hacks.mozilla.org/2010/08/mozelement/

background: -webkit-canvas()
Canvas 参照だけ WebKit も
-webkit-canvas(canid)
canid は JS でコンテキスト取
得時に
getCSSCanvasContext(,canid,
,) メソッドで指定する
JS 併用必須って仕様として変...
http://webkit.org/blog/176/css-canvas-drawing/

background: -webkit-canvas()
http://webkit.org/blog/176/css-canvas-drawing/
<div id="divid">Lorem ipsum dolor sit amet, ... </div>
<style>
#divid { background: -webkit-canvas(canvasid);
width:600px; height:600px; }
</style>
<script type="application/x-javascript">
var ctx = document.getCSSCanvasContext("2d", "canvasid",
300, 300);
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
</script>

moz-element() では任意要素
JS との組み合わせ不要
説明割愛しますが JS から操作する mozSetImageElement() もあり

<canvas id="canvasid" width="300" height="300"/>
<style>
#divid { background: -moz-element(#canvasid);
width:600px; height:600px; }
</style>
<script type="application/x-javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d"); // 標準通り
// ... 以下略 ...
</script>

参照元を見せない場合の注意
内部的には描画させる必要あり
display: none; などとしない
hight:0; overflow: hidden;
などの div で囲んで隠す
img, canvas, video は例外
DOM ツリーになくても良い
これは内部実装や効率などの問題から来る現時点の制約

<div style="height: 0; overflow: hidden;">
<iframe id="iframeid"
src="http://google.com/search?q=%22-moz-element%22"
style="width:800px; height:600px;"></iframe>
</div>
<style>
#divid { background:-moz-element(#iframeid) no-repeat;
height:600px; width:800px;
border:2px solid black; }
</style>

Native Multimedia
Video, Audio, 3D ...

<Video>
自動バッファ、キャッシュなど
実用に向けてどんどん強化中
Safari も Plugin で Ogg 再生
WebM もいずれプラグインで...
Firefox の <video> サポートは他と比べても積極的に行われています
VLC Web Browser Plugin: http://www.videolan.org/vlc/download-macosx.html

<Video>
autobuffer 属性は preload 属性に変更されたので注意

<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" type="application/x-
shockwave-flash"/>
</video>

<video controls poster="posterframe.jpg"> ... </video>

<video controls preload="auto"> ... </video>

<Video> のバッファ対応
http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-ﬁrefox-4/
<video id="longvideo" src="video.ogv"
preload="auto" ... >
<script type="text/javascript">
var video = document.getElementById("longvideo");
var ranges = video.buffered; // バッファ済み TimeRanges
for (var i=0; i<ranges.length; i++) {
var s = ranges.start(i);
var e = ranges.end(i);
// WebKit ではシークすると end(0)=全体の長さ(バグ)
alert(s+"秒から"+e+"秒まで読み込み済み");
}
</script>

H.264 がフリーになった？
Codec ソフト側の話などは別
無料動画配信限定の話
W3C 的にも OSS 的にも問題外
MPEG-LA 側が譲らない限り
Web 標準になる事はあり得ない
http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/
自社だけライセンス料払って OSS コミュニティ無視とかあり得ない

Audio Data API
Video は Canvas に取得可能
Audio も取得や生成可能に
W3C にて標準化予定
試験実装 API について:
https://wiki.mozilla.org/
Audio_Data_API
http://www.w3.org/2005/Incubator/audio/

Audio Data の読み取り
http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-ﬁrefox-4/
<audio id="input" src="test-tone.ogg" controls></audio>
<div id="display"></div>
var $ = function($) { return document.getElementById($); }
var input = $('input');
var display = $('display');
// Add an event listener to the audio input object
input.addEventListener('MozAudioAvailable',
function(e){
// フレームバッファの最初のサンプリングをしてみる
display.innerHTML += e.frameBuffer[0] + ', ';
}, false );
</script>

Audio Data API の用途
Fourier 変換して周波数分解
フィルタ、ミキサ、イコライザ
そして勿論 DSP や音声合成...
http://twitter.com/cherenkov/status/21614170698

WebGL
<Canvas> の 3D コンテキスト
OpenGL ES2.0 相当の API
携帯用 GPU が広くサポート
http://www.khronos.org/webgl/

WebGL
http://webos-goodies.jp/archives/getting_started_with_webgl.html
<canvas id="glcanvas" width="640" height="480"/>
var canvas = document.getElementById("glcanvas");
// WebGL コンテキストを取得
// コンテキスト名は仕様確定まで "experimental-webgl"
var gl = canvas.getContext("webgl")
|| canvas.getContext("experimantal-webgl");
if (gl) {
// ... OpenGL 同様にいろいろ描画処理 ...
// Int32Array など固定型配列も使って高速演算可能
}
</script>

WebGL - note
The Khronos Group で API 仕様を策定
Apple, Google, Mozilla, Opera が参加
実質的には Mozilla の Vlad がリード
OpenGL ES 2.0 ベースの API を JS から使う
シェーダーやテクスチャなども当然利用可能
<canvas> の 3D コンテキストとして定義
Firefox 4 や WebKit Nightly でサポート
Firefox ではデフォルトで有効
WebKit は --enable-glsl-translator で起動
Firefox 4~ https://developer.mozilla.org/en/WebGL

Application Platform
JS APIs for Web Apps...

HTML5 History
ページ遷移せずに履歴制御
History オブジェクトを導入
go(delta), back(), forward()
pushState(), replaceState()
popstate イベントで状態復元

HTML5 History
http://d.hatena.ne.jp/javascripter/20100404/
// popstate イベントで適切な状態に初期化する
window.addEventListener("popstate", function (event) {
// pushState の第一引数(のClone)を event.state で取得
var state = JSON.parse(event.state);
// 履歴遷移時に行いたい処理を適当に
}, false);
// pushState(data, title, url) で履歴を追加する
// 仕様上 data は任意オブジェクトだが現実装は文字列だけ？
var state = { ... } // 履歴制御時に記録したいオブジェクト
var serializedState = JSON.stringify(stateobj);
var url = "http://dev.mozilla.jp/#history";
history.pushState(serializedState, "", url);
// 履歴を追加ではなく置き換える場合
history.replaceState(serializedState, "", url);

HTML5 History
pushState/replaceState
path, query, fragment 変更
http://host/path?query#fragment

WebSockets
サーバとの双方向通信
ブラウザ間の P2P 機能はない
リアルタイム Web などに
通信オーバーヘッドが少ない
大半の用途は他の技術でも...
SSE, multipart Ajax...

WebSockets のサポート
API 仕様は比較的安定
プロトコル仕様はまだ不安定
rev76 を各ブラウザがサポート
今後の更新時期など不透明
プロキシなどにも依存...

WebSockets API
https://dev.mozilla.jp/hacksmozillaorg/websockets-in-ﬁrefox/
// 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."); }

HTTP Strict Transport Security
以後 HTTPS での接続を要求
認証ページなどで使う
簡単なのですぐにでも採用を
非対応ブラウザへの副作用なし
Chrome でもサポート
古い Firefox は拡張機能で...
http://hacks.mozilla.org/2010/08/ﬁrefox-4-http-strict-transport-security-force-https/

Multi-touch
Windows 7 のタッチ API
MozTouchDown,
MozTouchUp,
MozTouchMove, イベント
CSS セレクタも定義
:-moz-system-metric(touch-
enabled)

Multi-touch Events
http://hacks.mozilla.org/2009/10/multi-touch/
<canvas id="canvas" width="1200" height="800"/>
var ctx = document.getElementById("canvas").getContext('2d');
document.addEventListener("MozTouchMove",
function(e) { // タッチイベントのイベントリスナ
ctx.fillStyle='rgba(0,0,0,1)';
ctx.beginPath();
// タッチした位置 (clientX, clientY) を中心に円を描画
ctx.arc(e.clientX, e.clientY, 20, 0, Math.PI*2, 1);
ctx.fill();
ctx.closePath();
}, false);
</script>

今日の話の多くは...
Mozilla Hacks Blog を参照
他にももっと色々書いてます
日本語訳は modest にて
http://r.dynamis.jp/mozhacks
翻訳協力者も募集中

Video Codec 問題は？
Google の Gears は？
Google の O3D は？
Google の Wave は？
SQL Database は？
One Point Q&A

Open Video
HTML5 では Codec 指定なし
WebM (Web Media) が有力
VP8+Vorbis@Matroska
特許問題完全解決かは不明
H264 は特許問題で採用不可
MPEG-LA 側の問題です
Theora は Firefox 3.5~, WebM は Firefox4~

On2 Tech.
VP3
Xiph.Org Google
Ogg
VP4Theora
VP5
VP6
VP7
VP8
Container
Vorbis
Matroska
Vorbis
VP8
Audio
Video
WebM
ロイヤリティフリー
WebM プロジェクト FAQ: http://www.webmproject.org/about/faq/

Gears は終了しました
2010/02/19 開発停止
Safari はサポートも停止
Web 標準技術の採用へ

O3D は終了しました
2010/05/07 開発停止
WebGL サポートに一本化
WebGL に変換するライブラリ

Wave は終了しました
使い物にならなかったしね
8/21 に追悼会したらしいよ
Wave 追悼会: http://atnd.org/events/6995

SQL DB の標準化は頓挫
SQLite 実装依存では仕様には...
そもそも Web に SQL が最良？
シンプルな IndexedDB に移行
IndexedDB 上に SQL 構築も

References
for more information...

references
Mozilla Hacks Blog - Mozilla と Web の最新技術紹介
http://hacks.mozilla.org/
https://dev.mozilla.jp/hacksmozillaorg/
Firefox の最新機能紹介ページ
https://developer.mozilla.org/en/
Upcoming_Firefox_features_for_developers
https://developer.mozilla.org/ja/Firefox_3.6_for_developers
WHATWG HTML5 (各機能のブラウザ実装状況含む)
http://www.whatwg.org/html5
HTML5 についてのおさらい
http://w3g.jp/blog/studies/html5report

ref. - slides
HTML5 の基本は矢倉さんのスライドがオススメ！
http://www.slideshare.net/myakura/presentations
MicroData についても矢倉さんのスライドオススメ！
http://www.slideshare.net/myakura/microdata-a-primer
WebFonts は仕様執筆者のプレゼンが必見！
http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
Firefox 4: fast, powerful and empowering (英語)
http://www.slideshare.net/beltzner/ﬁrefox-
roadmap-2010-0510
必見スライドだけ紹介してみます

ref. - status
HTML5 の対応状況は仕様書に書かれている
各項目のタイトル左側にポップアップ表示
http://www.whatwg.org/html5
caniuse.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_browsers
SVG Test Suite の結果表
http://www.codedread.com/svg-support.php
ブラウザの仕様サポート状況を比較や確認したいときにどうぞ

ref. - demo & samples
Mozilla Hacks Blog - 開発者向け最新情報とデモ
http://hacks.mozilla.org/
HTML5ROCKS - チュートリアル(やや古い)など
http://html5rocks.com/
Safari Technology Demos - CSS3 と Apple 独自仕様
http://developer.apple.com/safaridemos/
IE9 Test Drive - IE9 に最適なデモばかりですが
http://ie.microsoft.com/testdrive/
@paulrouget - Mozilla Tech Evangelist
http://twitter.com/paulrouget/
各ベンダーの用意する Web 技術紹介サイト

ref. - sites
HTML5 導入済みサイトのギャラリー
http://html5gallery.com/
ドキュメント共有サイト Scribd
http://www.scribd.com/doc/30964170/Scribd-in-HTML5
プレゼン作成サイト 280slides
http://280slides.com/
YouTube HTML5 動画プレイヤー
http://www.youtube.com/html5

ref. - game
Mozilla Labs Gaming
https://gaming.mozillalabs.com/
canvasdemos - 比較的シンプルなデモ集
http://www.canvasdemos.com/type/games/
HTML5 でゲーム - ノーコメント
http://benﬁrshman.com/projects/jsnes/
Aves Game Engine - 本格的 Social ゲームエンジン
http://www.dextrose.com/en/projects/aves-engine
Akihabara - シンプルなゲーム用ライブラリ
http://www.kesiev.com/akihabara/
ゲームプラットフォームとしての Web について

ref. - tools
Open 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
Canvas でのアニメーションライブラリ
http://code.google.com/p/cakejs/

ref. - tools
IE でも Canvas を描画可能にする uupaa.js
http://d.hatena.ne.jp/uupaa/searchdiary?word=*[uupaa.js]
JavaScript から簡単に SVG を生成
http://raphaeljs.com/
http://g.raphaeljs.com/
Web アプリケーション用のフレームワーク
Cappuccino: http://objective-j.org/
Sproutcore: http://www.sproutcore.com/
JavaScriptMVC: http://javascriptmvc.com/
Ample SDK: http://www.amplesdk.com/
一時 Gianduia も話題でしたが外部向けに公開されてないので現状論外

ref. - web fonts
CSS Fonts Module Level 3
http://www.w3.org/TR/css3-fonts/
Google の Web Font サービス
http://code.google.com/webfonts
Web Fonts のライセンス販売 (無償フォント含む)
http://typekit.com/
http://decomoji.jp/
Web Fonts Generator - eot や WOFF フォントに変換
http://www.fontsquirrel.com/fontface/generator

ref. - webgl
The Khronos Group - WebGL
http://www.khronos.org/webgl/
http://www.khronos.org/webgl/wiki/Demo_Repository
WebGL セクション@MDC
https://developer.mozilla.org/en/WebGL
The WebGL の解説
http://www.gatk.net/webgl/
http://webos-goodies.jp/archives/
getting_started_with_webgl.html
http://learningwebgl.com/cookbook/

ref. - other spec.
File API
http://www.w3.org/TR/FileAPI/
http://www.w3.org/TR/ﬁle-writer-api/
Geolocation API
http://www.w3.org/TR/geolocation-API/
Audio Data API
https://wiki.mozilla.org/Audio_Data_API
window.onmozorientation
https://developer.mozilla.org/en/DOM/
window.onmozorientation

ref. - other spec.
CSS Current Work
http://www.w3.org/Style/CSS/current-work
WebGL Spec.
https://cvs.khronos.org/svn/repos/registry/trunk/public/
webgl/doc/spec/WebGL-spec.html
Typed Arrays
https://cvs.khronos.org/svn/repos/registry/trunk/public/
webgl/doc/spec/TypedArray-spec.html
HTML5 の定義解説から関連仕様へのリンク色々
http://www.whatwg.org/specs/web-apps/current-work/
multipage/introduction.html#is-this-html5?

HTML5 in Firefox4

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (7)

Similaire à HTML5 in Firefox4

Similaire à HTML5 in Firefox4 (20)

Plus de dynamis

Plus de dynamis (20)

Dernier

Dernier (8)

HTML5 in Firefox4