Keypoints html5

Key Points HTML5Presentation @ OSC 2010 Nagoyaby Tomoya ASAI (aka. dynamis)

Fractal Firefox Background Image: http://r.dynamis.jp/fractalfx

about:me

dynamis (でゅなみす)

浅井智也 (あさいともや)

Mozilla Technology Evangelist

http://r.dynamis.jp/presen

dynamis mozilla-japan.org

twitter: @dynamitter

ギリシャ語由来なので「だいなみす」と英語読みはしないでね

何だか "HTML5" が世間の話題らしいので

"HTML5" にまつわるよくある疑問に答えます

次世代 Web のデモ

"HTML5" って何？

ブラウザのサポートは？

IE6 はどうすればいいの？

HTML5 使用上の注意

便利なツールはないの？

Agenda

Video Codec 問題は？

Google の Gears は？

Google の O3D は？

Google の Wave は？

SQL Database は？

One Point Q&A

Web Design

Application Platform

Native Multimedia

Beyond HTML5

reference urls...

(References)

公開資料に含めますのでご参照ください

demo...

今のは実は...

HTML5 ではありません

Flash でもありません

AIR でもありません

NaCl でもありません

Silverlight でもありません

"HTML5" って何？

仕様書に書いてあります

This specification evolves HTML

and its related APIs to ease the

authoring of Web-based applications.

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

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

HTML と関連 API を進化させる

Web アプリを記述しやすく？

これまでの問題は...

ブラウザの独自実装

実装まかせの曖昧な仕様

不安定、低機能、低速

HTML5 の目的は...

既存の独自実装を標準化

これから必要な機能の追加

実装を考慮した綿密な仕様

HTML と関連 API？

HTML というとタグ...

基本はタグ(ボキャブラリ)

(X)HTML 構文とパーサ

MicroData などメタデータ

Canvas タグと 2D API

SVG や MathML との連携

関連 API って何？

イベントやインターフェイス

オフラインイベント

Drag & Drop や Undo/Redo

履歴とナビゲーション

ドキュメント間通信

え？それだけですか？

Video Codec は？

Storage や Database は？

Video Codec は？

Workers や Sockets は？

Video Codec は？

SVG や WebGL は？

Video Codec は？

SVG や WebGL は？

WebFonts や Animations は？

それはみんな...

Video Codec, Storage, DB, Workers, Sockets, SVG, WebGL, Fonts, Animations...

みんな別個の仕様です

闇鍋みたいに混ぜないで！

HTML5 の範囲は？

ref. http://whatwg.org/html5

WAHTWG の HTML5 仕様書

W3C では仕様名に HTML 含む

Next Generation of HTML

WHATWG - HTML5

世間で "HTML5" とごちゃ混ぜで呼ばれることがある仕様の一部...

Canvas 2D Graphics ContextMicrodata

Microdata vocabularies

W3C - 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

WHATWG の HTML5 仕様書に書かれている範囲はここまで...

Next Generation of HTML

WAHTWG - HTML5

Microdata vocabulariesCross-document messaging

Channel messaging

Elements, Events, APIs

device elementping attribute

timed track modelconverting HTML to Atom

W3C - HTML5Elements, Events, APIs

HTML5 Web Messaging

HTML5 Microdata

仕様書で HTML5 の範囲として定義されているのはこれだけ

WHATWG - HTML5

Microdata vocabulariesCross-document messaging

Channel messaging

HTML5 Parser

W3C - HTML5

HTML5 Parser

HTML5 Web Messaging

HTML5 Microdata

Drag & Drop APIOffline Events

Event model & APIsHTML5 Forms

Multimedia Elements

Drag & Drop APIOffline Events

Event model & APIsHTML5 Forms

Multimedia ElementsSemantic Elements Semantic Elements

どこまで HTML5？

Web WorkersWeb Storage

The WebSockets API

Server-Sent Events

Geolocation API

XMLHttpRequest Level 2

Canvas 2D

File API

Drag & Drop APIIndexed Database API

Microdata

Cross-document MessagingWebGL

WebFonts

Event Listener

MicroformatsCSS3 TransitionsECMAScript 5th

Offline Events

HTML5 Markup

WebM (VP8) Codec

どこまで HTML5？

Web WorkersWeb Storage

The WebSockets API

Server-Sent Events

Geolocation API

XMLHttpRequest Level 2

Canvas 2D

File API

Drag & Drop APIIndexed Database API

Microdata

Cross-document MessagingWebGL

WebFonts

Event Listener

MicroformatsCSS3 TransitionsECMAScript 5th

Offline Events

HTML5 Markup

WebM (VP8) Codec

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

HTML5 以外も説明しますが...

バズワードは程々に (・・).

ブラウザのサポートは？

WHATWG の仕様書: http://whatwg.org/html5

WHATWG HTML5 仕様書

各機能のサポート状況を記載

∵ 複数の実装が仕様策定条件

HTML5 以外の仕様は？

機能対応表を確認する

HTML5 以外の仕様は？

機能対応表を確認する

JS ツールで自動判別する

比較表見れば分かり易い

http://caniuse.com/

caniuse.com がオススメ

http://caniuse.com/

caniuse.com がオススメ

Acid Test とかは論外

http://caniuse.com/

Acid3 テストは論外

http://acid3.acidtests.org/

たった 100 項目のテスト

SVG Fonts とか本当に必要？

Firefox/IE は意図的に非対応

やっつけ実装ブラウザ多数

互換性確認ライブラリ

Modernizr: http://www.modernizr.com/

有名なのは Modernizr

但し偏りあり＆若干不正確

対応済みと嘘付くブラウザ...

すでにかなり使えます

Canvas かなり実用的

CSS3 は追加的に使える

オフライン対応と Storage

マルチスレッド (Workers)

アプリケーションキャッシュ

Drag & Drop API ＆ File API

どんどん強化されてます...

CSS3 Transitions

History

Indexed DataBase

SVG Filters

SVG Animations

WebGL (Canvas 3D)

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

CSS2 や HTML4 と同じ

仕様も機能別に順次確定

使わないのは勿体ない (・・).

IE6 はどうするの？

IE9 も来年でしょ？

IE6 はもう御臨終(＞＜)

IE6 のお葬式: http://ie6funeral.com/

無視しても良いのですが...

StatCounter: http://gs.statcounter.com/NetApplications: http://marketshare.hitslink.com/

IE6 のシェアは 9%̃17%

IE 全体で 52%̃62%

IE6 のシェアは 9%̃17%

IE 全体で 52%̃62%

Firefox 3.6 は 16%̃23%

Firefox 全体で 23%̃31%

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

IE6 でも使えます！(・・)/

Drag & Drop は標準サポート

IE6 でも使えます！(・・)/

Drag & Drop は標準サポート

他は、えーっと... .(＞＜).

互換実装ライブラリ

標準機能を独自実装で再現

VML や CSS フィルタとか

Flash や Silverlight も活用

uupaa.js がオススメ！

http://d.hatena.ne.jp/uupaa/20100728/1280253779

IE でも Canvas が使える！

VML/Flash/Silverlight など活用

基本機能も jQuery より高速

demo...

使用上の注意

用量・用法を守って...

必要に応じて使いましょう

漸進的なアプローチオススメ

HTML5 の書き方

HTML5 についておさらい: http://w3g.jp/blog/studies/html5report

HTML5 の書き方

<!DOCTYPE html>

HTML5 の書き方

<!DOCTYPE html>

HTML5 新要素を IE に認識させる Hack ライブラリ:

http://html5shiv.googlecode.com

HTML5 の書き方

<!DOCTYPE html>

HTML5 新要素を IE に認識させる Hack ライブラリ:

http://html5shiv.googlecode.com

HTML/XHTML 構文両方 OK

<li>item ...

CSS の書き方

独自実装スタイルに要注意

CSS の書き方

prefix (-moz- など) 付きのスタイルは必ず prefix なしも一緒に

CSS の書き方

prefix (-moz- など) 付きのスタイルは必ず prefix なしも一緒に

prefix 付きは書式変更可能性大

Canvas と SVG の使い分け

どちらも画像処理

Canvas と SVG の使い分け

どちらも画像処理

アニメーションも

Canvas が適した処理

ピクセル単位の描画・編集

Canvas が適した処理

ピクセル単位の描画・編集

細かく高速なアニメーション

SVG が適した処理

拡大しても滑らかな画像

フィルタ処理や切り抜きなど

ユーザインタラクティブな処理

DOM イベントでの処理

CSS3 Transitions

もっと簡単なアニメーション

CSS3 Transitions

拡大縮小・回転など基本的変化

CSS3 Transitions

CSS 数行書くだけで OK

CSS3 Transitions

CSS 数行書くだけで OK

GPU 処理での高速化も

便利なツールは？

Processing.js

アニメーションなどが簡単

ゲームなどでの採用が多い

http://processingjs.org/

Contextfree.js

Canvas 上でフラクタル画像

ContextFree 言語で記述

http://azarask.in/projects/algorithm-ink/

Raphaëlhttp://raphaeljs.com/

JavaScript で SVG を描画

XML タグを書かずに済む

GUI フレームワーク

いくつか有名なものがあります

Cappuccino:

http://objective-j.org/

Sproutcore:

http://www.sproutcore.com/

JavaScriptMVC:

http://javascriptmvc.com/

Video Codec 問題は？

Google の Gears は？

Google の O3D は？

Google の Wave は？

SQL Database は？

One Point Q&A

Video Codec 問題？

Open Video

Theora は Firefox 3.5~, WebM は Firefox4~

Open Video

HTML5 では Codec 指定なし

Open Video

Web 標準＝ロイヤリティフリー

Open Video

WebM (Web Media) が有力に

Open Video

WebM = VP8+Vorbis@Matroska

Open Video

WebM = VP8+Vorbis@Matroska

特許問題完全解決かは不明

On2 Tech.VP3

Xiph.Org Google

OggVP4TheoraVP5VP6VP7VP8

Container

Vorbis

Matroska

VorbisVP8

AudioVideo

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

Gears は？

Gears は終了しました

2010/02/19 開発停止

Safari はサポートも停止

2010/02/19 開発停止

Safari はサポートも停止

Geolocation API などWeb標準へ

O3D は？

O3D は終了しました

2010/05/07 開発停止

WebGL サポートに一本化

2010/05/07 開発停止

WebGL サポートに一本化

WebGL に変換するライブラリ

Wave は？

Wave は終了しました

Wave 追悼会: http://atnd.org/events/6995

使い物にならなかったしね

8/21 に追悼会するらしいよ

SQL Database？

SQL DB の標準化は頓挫

SQLite 実装依存では仕様には...

そもそも Web に SQL 適する？

シンプルな IndexedDB に移行

IndexedDB 上に SQL 構築も

さて。

Any Question ?

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

Multiple Backgrounds

Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

Multiple Backgrounds

background に複数の画像を指定可能に

background: <image1>, <image2>, <image3>...

CSS3 Images の gradation も組み合わせ可能

半透明なグラデーションでフェード効果も

画像の数、ファイルサイズ削減にも繋がる

Firefox 3.6 以降でサポート

WebKit は未サポートなので注意

Firefox3.6~ https://developer.mozilla.org/ja/Using_gradients

http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

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);

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

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>

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 ...

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/

CSS Transitions

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

CSS Transitions

Firefox 4~ 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 のアニメーション関連機能

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">  <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>

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

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

<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

:-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

Referencesfor more information...

referencesMozilla Hacks Blog - 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://w3g.jp/blog/studies/html5report

ref. - slidesHTML5 の基本は矢倉さんのスライドがオススメ！

http://www.slideshare.net/myakura/presentationsMicroData についても矢倉さんのスライドオススメ！

http://www.slideshare.net/myakura/microdata-a-primerWebFonts は仕様執筆者のプレゼンが必見！

http://people.mozilla.org/~jdaggett/webfontsfuture.pdfFirefox 4: fast, powerful and empowering (英語)

http://www.slideshare.net/beltzner/firefox-roadmap-2010-0510

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

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

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

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

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

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

ref. - demo & samplesMozilla 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/

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 を描画可能にする uupaa.js

http://d.hatena.ne.jp/uupaa/searchdiary?word=*[uupaa.js]

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

ref. - other spec.CSS Current Work

http://www.w3.org/Style/CSS/current-workTyped Arrays

https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/TypedArray-spec.htmlHTML5 の定義解説から関連仕様へのリンク色々

http://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#is-this-html5?

Keypoints html5

Technology

HTML5 Ahora

HTML5 - CORE · •¿Qué es HTML5? •El nuevo lenguaje HTML5 •Más información Contenido ¿QUÉ ES HTML5? ... var e = ("abbr,article,aside,audio,canvas,datalist,details," +

HTML5 Geolocalizacion

Html5 2010

SIFT - Distinctive Image Features from Scale-Invariant Keypoints

Html5+js with game engine cocos2d-html5 분석 @KGC2012

Ejercicios HTML5

Industry trend of HTML5 in 2012 (2012년 HTML5 총정리)

HTML5 Video - Audiodi002.edv.uniovi.es/~labra/cursos/html5/presentaciones/HTML5_vide… · HTML5 Contenido multimedia en Web Flash Player (Adobe) Descargar plugin de terceros HTML5

Concentrated HTML5 & Attractive HTML5

HTML5 & CSS3

Memoria html5

HTML5? HTML5!

HTML5. Waarom HTML5 nu relevant is voor jóu

Html5 fisl15

Présentation html5

Apresentação html5

HTML5 - W3C...HTML4 + CSS 56 HTML5 - Futuro da Web Futuro da Web - HTML5 HTML 5 [HyperText Markup Language] Novos elementos (semânticos) HTML5 + CSS E o que ficou de fora do HTML5?

HTML5? · HTML5 und CSS3 sind keine abgeschlossenen Speziﬁkationen. Die Implementation in Browsern ist noch lückenhaft. HTML5 + CSS3 + More = NEWT. HTML5 + CSS3 + More = NEWT SVG,

Html5 caravantokyo