Embed Size (px)
DESCRIPTION
20100807 OSC Nagoya での講演資料 # スライドのみで見やすいよう若干整理 P5〜 Agenda P17〜 "HTML5" って何？ P56〜 HTML5 の範囲は？ P67〜 ブラウザのサポートは？ P94〜 IE6 はどうするの？ P118〜 使用上の注意 P147〜 便利なツールは？ P152〜 One Point Q&A P186〜 追加資料
Citation preview
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 でもありません
Flash でもありません
AIR でもありません
Flash でもありません
AIR でもありません
NaCl でもありません
Flash でもありません
AIR でもありません
NaCl でもありません
Silverlight でもありません
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 より
http://whatwg.org/html5 - Abstract より
この仕様では Web アプリケーションを記述しやすくするため
HTML と関連 API を進化させる
この仕様では Web アプリケーションを記述しやすくするため
HTML と関連 API を進化させる
http://whatwg.org/html5 - Abstract より
この仕様では Web アプリケーションを記述しやすくするため
HTML と関連 API を進化させる
Web アプリを記述しやすく？
これまでの問題は...
これまでの問題は...
ブラウザの独自実装
これまでの問題は...
ブラウザの独自実装
実装まかせの曖昧な仕様
これまでの問題は...
ブラウザの独自実装
実装まかせの曖昧な仕様
不安定、低機能、低速
HTML5 の目的は...
HTML5 の目的は...
既存の独自実装を標準化
HTML5 の目的は...
既存の独自実装を標準化
これから必要な機能の追加
HTML5 の目的は...
既存の独自実装を標準化
これから必要な機能の追加
実装を考慮した綿密な仕様
http://whatwg.org/html5 - Abstract より
この仕様では Web アプリケーションを記述しやすくするため
HTML と関連 API を進化させる
HTML と関連 API？
HTML というとタグ...
HTML というとタグ...
基本はタグ(ボキャブラリ)
HTML というとタグ...
基本はタグ(ボキャブラリ)
(X)HTML 構文とパーサ
HTML というとタグ...
基本はタグ(ボキャブラリ)
(X)HTML 構文とパーサ
MicroData などメタデータ
HTML というとタグ...
基本はタグ(ボキャブラリ)
(X)HTML 構文とパーサ
MicroData などメタデータ
Canvas タグと 2D API
HTML というとタグ...
基本はタグ(ボキャブラリ)
(X)HTML 構文とパーサ
MicroData などメタデータ
Canvas タグと 2D API
SVG や MathML との連携
関連 API って何？
関連 API って何？
イベントやインターフェイス
関連 API って何？
イベントやインターフェイス
オフラインイベント
関連 API って何？
イベントやインターフェイス
オフラインイベント
Drag & Drop や Undo/Redo
関連 API って何？
イベントやインターフェイス
オフラインイベント
Drag & Drop や Undo/Redo
履歴とナビゲーション
関連 API って何？
イベントやインターフェイス
オフラインイベント
Drag & Drop や Undo/Redo
履歴とナビゲーション
ドキュメント間通信
え？それだけですか？
え？それだけですか？
Video Codec は？
え？それだけですか？
Video Codec は？
Storage や Database は？
え？それだけですか？
Video Codec は？
Storage や Database は？
Workers や Sockets は？
え？それだけですか？
Video Codec は？
Storage や Database は？
Workers や Sockets は？
SVG や WebGL は？
え？それだけですか？
Video Codec は？
Storage や Database は？
Workers や Sockets は？
SVG や WebGL は？
WebFonts や Animations は？
それはみんな...
HTML5 ではありません
Video Codec, Storage, DB, Workers, Sockets, SVG, WebGL, Fonts, Animations...
HTML5 ではありません
Video Codec, Storage, DB, Workers, Sockets, SVG, WebGL, Fonts, Animations...
みんな別個の仕様です
HTML5 ではありません
闇鍋みたいに混ぜないで！
HTML5 の範囲は？
仕様書に書いてあります
WAHTWG の HTML5 仕様書
ref. http://whatwg.org/html5
仕様書に書いてあります
WAHTWG の HTML5 仕様書
W3C では仕様名に HTML 含む
ref. http://whatwg.org/html5
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
Canvas 2D Graphics ContextMicrodata
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
HTML Canvas 2D Context
仕様書で HTML5 の範囲として定義されているのはこれだけ
WHATWG - HTML5
Canvas 2D Graphics ContextMicrodata
Microdata vocabulariesCross-document messaging
Channel messaging
HTML5 Parser
W3C - 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
どこまで 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
MicroformatsCSS3 TransitionsECMAScript 5th
Offline Events
HTML5 Markup
WebM (VP8) Codec
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
MicroformatsCSS3 TransitionsECMAScript 5th
Offline Events
HTML5 Markup
WebM (VP8) Codec
XPath
WHATWG 仕様書の定義によるCanvas はタグの定義だけが HTML5
HTML5 以外も説明しますが...
バズワードは程々に (・・).
ブラウザのサポートは？
仕様書に書いてあります
WHATWG HTML5 仕様書
WHATWG の仕様書: http://whatwg.org/html5
仕様書に書いてあります
WHATWG HTML5 仕様書
各機能のサポート状況を記載
WHATWG の仕様書: http://whatwg.org/html5
仕様書に書いてあります
WHATWG HTML5 仕様書
各機能のサポート状況を記載
∵ 複数の実装が仕様策定条件
WHATWG の仕様書: http://whatwg.org/html5
HTML5 以外の仕様は？
HTML5 以外の仕様は？
機能対応表を確認する
HTML5 以外の仕様は？
機能対応表を確認する
JS ツールで自動判別する
比較表見れば分かり易い
caniuse.com がオススメ
Acid Test とかは論外
http://caniuse.com/
Acid3 テストは論外
たった 100 項目のテスト
http://acid3.acidtests.org/
Acid3 テストは論外
たった 100 項目のテスト
SVG Fonts とか本当に必要？
http://acid3.acidtests.org/
Acid3 テストは論外
たった 100 項目のテスト
SVG Fonts とか本当に必要？
Firefox/IE は意図的に非対応
http://acid3.acidtests.org/
Acid3 テストは論外
たった 100 項目のテスト
SVG Fonts とか本当に必要？
Firefox/IE は意図的に非対応
やっつけ実装ブラウザ多数
http://acid3.acidtests.org/
互換性確認ライブラリ
有名なのは Modernizr
Modernizr: http://www.modernizr.com/
互換性確認ライブラリ
有名なのは Modernizr
但し偏りあり＆若干不正確
Modernizr: http://www.modernizr.com/
互換性確認ライブラリ
有名なのは Modernizr
但し偏りあり＆若干不正確
対応済みと嘘付くブラウザ...
Modernizr: http://www.modernizr.com/
すでにかなり使えます
Canvas かなり実用的
CSS3 は追加的に使える
オフライン対応と Storage
マルチスレッド (Workers)
アプリケーションキャッシュ
Drag & Drop API ＆ File API
どんどん強化されてます...
CSS3 Transitions
History
Indexed DataBase
SVG Filters
SVG Animations
WebGL (Canvas 3D)
使えるものから使いましょう
使えるものから使いましょう
CSS2 や HTML4 と同じ
使えるものから使いましょう
CSS2 や HTML4 と同じ
仕様も機能別に順次確定
使えるものから使いましょう
CSS2 や HTML4 と同じ
仕様も機能別に順次確定
使わないのは勿体ない (・・).
IE6 はどうするの？
IE9 も来年でしょ？
無視しても良いのですが...
StatCounter: http://gs.statcounter.com/NetApplications: http://marketshare.hitslink.com/
無視しても良いのですが...
IE6 のシェア は 9%̃17%
IE 全体で 52%̃62%
StatCounter: http://gs.statcounter.com/NetApplications: http://marketshare.hitslink.com/
無視しても良いのですが...
IE6 のシェア は 9%̃17%
IE 全体で 52%̃62%
Firefox 3.6 は 16%̃23%
Firefox 全体で 23%̃31%
StatCounter: http://gs.statcounter.com/NetApplications: http://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
IE6 でも使えます！(・・)/
IE6 でも使えます！(・・)/
Drag & Drop は標準サポート
IE6 でも使えます！(・・)/
Drag & Drop は標準サポート
他は、えーっと... .(＞＜).
互換実装ライブラリ
互換実装ライブラリ
標準機能を独自実装で再現
互換実装ライブラリ
標準機能を独自実装で再現
VML や CSS フィルタとか
互換実装ライブラリ
標準機能を独自実装で再現
VML や CSS フィルタとか
Flash や Silverlight も活用
uupaa.js がオススメ！
http://d.hatena.ne.jp/uupaa/20100728/1280253779
uupaa.js がオススメ！
IE でも Canvas が使える！
http://d.hatena.ne.jp/uupaa/20100728/1280253779
uupaa.js がオススメ！
IE でも Canvas が使える！
VML/Flash/Silverlight など活用
http://d.hatena.ne.jp/uupaa/20100728/1280253779
uupaa.js がオススメ！
IE でも Canvas が使える！
VML/Flash/Silverlight など活用
基本機能も jQuery より高速
http://d.hatena.ne.jp/uupaa/20100728/1280253779
demo...
使用上の注意
用量・用法を守って...
用量・用法を守って...
使えるものから使いましょう
用量・用法を守って...
使えるものから使いましょう
必要に応じて使いましょう
用量・用法を守って...
使えるものから使いましょう
必要に応じて使いましょう
漸進的なアプローチオススメ
HTML5 の書き方
HTML5 についておさらい: http://w3g.jp/blog/studies/html5report
HTML5 の書き方
<!DOCTYPE html>
HTML5 についておさらい: http://w3g.jp/blog/studies/html5report
HTML5 の書き方
<!DOCTYPE html>
HTML5 新要素を IE に認識させる Hack ライブラリ:
http://html5shiv.googlecode.com
HTML5 についておさらい: http://w3g.jp/blog/studies/html5report
HTML5 の書き方
<!DOCTYPE html>
HTML5 新要素を IE に認識させる Hack ライブラリ:
http://html5shiv.googlecode.com
HTML/XHTML 構文両方 OK
<li>item ...
<li>item ... </item>
HTML5 についておさらい: http://w3g.jp/blog/studies/html5report
CSS の書き方
CSS の書き方
独自実装スタイルに要注意
CSS の書き方
独自実装スタイルに要注意
prefix (-moz- など) 付きのスタイルは必ず prefix なしも一緒に
CSS の書き方
独自実装スタイルに要注意
prefix (-moz- など) 付きのスタイルは必ず prefix なしも一緒に
prefix 付きは書式変更可能性大
Canvas と SVG の使い分け
Canvas と SVG の使い分け
どちらも画像処理
Canvas と SVG の使い分け
どちらも画像処理
アニメーションも
Canvas が適した処理
Canvas が適した処理
ピクセル単位の描画・編集
Canvas が適した処理
ピクセル単位の描画・編集
細かく高速なアニメーション
SVG が適した処理
SVG が適した処理
拡大しても滑らかな画像
SVG が適した処理
拡大しても滑らかな画像
フィルタ処理や切り抜きなど
SVG が適した処理
拡大しても滑らかな画像
フィルタ処理や切り抜きなど
ユーザインタラクティブな処理
SVG が適した処理
拡大しても滑らかな画像
フィルタ処理や切り抜きなど
ユーザインタラクティブな処理
DOM イベントでの処理
CSS3 Transitions
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 指定なし
Theora は Firefox 3.5~, WebM は Firefox4~
Open Video
HTML5 では Codec 指定なし
Web 標準＝ロイヤリティフリー
Theora は Firefox 3.5~, WebM は Firefox4~
Open Video
HTML5 では Codec 指定なし
Web 標準＝ロイヤリティフリー
WebM (Web Media) が有力に
Theora は Firefox 3.5~, WebM は Firefox4~
Open Video
HTML5 では Codec 指定なし
Web 標準＝ロイヤリティフリー
WebM (Web Media) が有力に
WebM = VP8+Vorbis@Matroska
Theora は Firefox 3.5~, WebM は Firefox4~
Open Video
HTML5 では Codec 指定なし
Web 標準＝ロイヤリティフリー
WebM (Web Media) が有力に
WebM = VP8+Vorbis@Matroska
特許問題完全解決かは不明
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/
Gears は？
Gears は終了しました
Gears は終了しました
2010/02/19 開発停止
Gears は終了しました
2010/02/19 開発停止
Safari はサポートも停止
Gears は終了しました
2010/02/19 開発停止
Safari はサポートも停止
Geolocation API などWeb標準へ
O3D は？
O3D は終了しました
O3D は終了しました
2010/05/07 開発停止
O3D は終了しました
2010/05/07 開発停止
WebGL サポートに一本化
O3D は終了しました
2010/05/07 開発停止
WebGL サポートに一本化
WebGL に変換するライブラリ
Wave は？
Wave は終了しました
Wave 追悼会: http://atnd.org/events/6995
Wave は終了しました
使い物にならなかったしね
Wave 追悼会: http://atnd.org/events/6995
Wave は終了しました
使い物にならなかったしね
8/21 に追悼会するらしいよ
Wave 追悼会: http://atnd.org/events/6995
Wave は終了しました
使い物にならなかったしね
8/21 に追悼会するらしいよ
Wave 追悼会: http://atnd.org/events/6995
SQL Database？
SQL DB の標準化は頓挫
SQL DB の標準化は頓挫
SQLite 実装依存では仕様には...
SQL DB の標準化は頓挫
SQLite 実装依存では仕様には...
そもそも Web に SQL 適する？
SQL DB の標準化は頓挫
SQLite 実装依存では仕様には...
そもそも Web に SQL 適する？
シンプルな IndexedDB に移行
SQL DB の標準化は頓挫
SQLite 実装依存では仕様には...
そもそも Web に SQL 適する？
シンプルな IndexedDB に移行
IndexedDB 上に SQL 構築も
さて。
Any Question ?
Any Question ?
end.
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>
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/
<style>.fadedflower { background: /* 左が白、右が無色透明となるグラデーション */ -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), /* その後ろに表示する画像 */ url(flowers-pattern.jpg);}</style>
<div class="fadedflower"> <!-- グラデーション背景画像つき要素 --></div>
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/
<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 未対応 -->
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 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
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?
![MSCOCO Keypoints Challenge 2017 - cocodataset.orgpresentations.cocodataset.org/COCO17-Keypoints-Megvii.pdfIs Hourglass good for COCO keypoint ResNet-FPN-like[1]network works better](https://img.pdfslide.net/doc/110x75/5f18bc4e82aff242ab772479/mscoco-keypoints-challenge-2017-is-hourglass-good-for-coco-keypoint-resnet-fpn-like1network.jpg)
