html5 and web platform
DESCRIPTION
20100530 SwapSkills での講演スライドTRANSCRIPT
![Page 1: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/1.jpg)
HTML5 & Web PlatformPresentation @ SwapSkills
by Tomoya Asai (aka. dynamis)
![Page 2: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/2.jpg)
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
![Page 3: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/3.jpg)
HTML5 のホントとウソ
今使える技術、次に来る技術
アプリケーションプラットフォーム
ネイティブマルチメディア機能
HTML5 の彼方に
Agenda:
Download Please! http://r.dynamis.jp/swapskills
![Page 4: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/4.jpg)
StatisticsShare and Active Users
![Page 5: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/5.jpg)
![Page 6: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/6.jpg)
2002/01
2009/07
Browser MarketShare Graph by AXIIShttp://www.axiis.org/examples/BrowserMarketShare.html
![Page 7: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/7.jpg)
Browser MarketShare Graph by AXIIShttp://www.axiis.org/examples/BrowserMarketShare.html
![Page 8: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/8.jpg)
Opera2%
Safari5%
Chrome7%
Firefox25%
Internet Explorer60%
世界のブラウザシェア by NetApps (2010/04)
![Page 9: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/9.jpg)
Opera2%
Safari5%
Chrome7%
Firefox25%
Internet Explorer60%
世界のブラウザシェア by NetApps (2010/04)
Stats by NetApplicationshttp://marketshare.hitslink.com/
![Page 10: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/10.jpg)
http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html
![Page 11: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/11.jpg)
http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html
![Page 12: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/12.jpg)
Truth of HTML5HTML5 is...
![Page 13: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/13.jpg)
"HTML5" のよくある質問
![Page 14: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/14.jpg)
"HTML5" って Video? Canvas? SVG?
"HTML5" はタグの仕様? API の仕様?
"HTML5" でプラグインは不要になる?
"HTML5" は 2010 年中に勧告される?
"HTML5" にブラウザは完全対応する?
![Page 15: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/15.jpg)
"HTML5" って Video? Canvas? SVG?
"HTML5" はタグの仕様? API の仕様?
"HTML5" でプラグインは不要になる?
"HTML5" は 2010 年中に勧告される?
"HTML5" にブラウザは完全対応する?
photo by Horia http://www.flickr.com/photos/horiavarlan/4273168957/
![Page 16: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/16.jpg)
どの疑問もナンセンス
![Page 17: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/17.jpg)
"HTML5" と呼んでいる範囲は?
仕様が勧告されれば使えるのか?
仕様に完全準拠した実装は存在した?
仕様に合わせて実装すれば良いのか?
実装に合わせて仕様を書くのか?
![Page 18: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/18.jpg)
photo by Horia http://www.flickr.com/photos/horiavarlan/4273168957/
"HTML5" と呼んでいる範囲は?
仕様が勧告されれば使えるのか?
仕様に完全準拠した実装は存在した?
仕様に合わせて実装すれば良いのか?
実装に合わせて仕様を書くのか?
![Page 19: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/19.jpg)
HTML5 とは何なのか?
![Page 20: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/20.jpg)
"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 (バズワード)
![Page 21: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/21.jpg)
This specification evolves HTML
and its related APIs to ease the
authoring of Web-based applications.
http://whatwg.org/html5 - Abstract より
![Page 22: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/22.jpg)
ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
HTML5
Canvas 2D Graphics ContextMicrodata
Microdata vocabulariesCross-document messaging
Channel messaging
Forms
![Page 23: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/23.jpg)
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
![Page 24: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/24.jpg)
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
![Page 25: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/25.jpg)
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
![Page 26: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/26.jpg)
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
![Page 27: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/27.jpg)
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
![Page 28: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/28.jpg)
ブラウザ開発側から見た Web 標準は...
![Page 29: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/29.jpg)
ユーザの必要とする機能をブラウザに
既存の独自拡張を整理統合して標準化
新規追加機能の仕様も統一して標準化
既存の標準は実装により有効性を確認
複数の実装なくして標準に意味はない
![Page 30: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/30.jpg)
すべての環境で同一に
![Page 31: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/31.jpg)
すべての環境で同一に
ユーザに最善の Web を
ではなく
![Page 32: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/32.jpg)
使えるものから使いましょう。
仕様の中でサポートされているものを使うこれまでの Web 開発でやってきた事と同じです
ブラウザ対応状況などは資料末尾の Reference 参照
![Page 33: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/33.jpg)
Current & Coming Tech
Technology Status
![Page 34: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/34.jpg)
Web DesignCSS, Image, Fonts...
![Page 35: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/35.jpg)
今回はデザイン周りの技術はざっくり割愛...
過去の講演でご覧になった方もいるでしょうから...「今使える技術」はデザイン系の方が多いんですけどね...
![Page 36: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/36.jpg)
text-shadow, box-shadow
✴ テキストやボックスに影を付加
rgba, opacity
✴ 色や要素にアルファチャネル
Multiple Backgrounds
✴ 背景画像を複数組み合わせて指定
CSS Gradations
✴ CSS でグラデーション画像を作成
CSS Transforms
✴ CSS で要素の回転、変形、拡大縮小、平行移動
その他の新機能... http://r.dynamis.jp/firefox.next
![Page 37: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/37.jpg)
Media Queries
✴ 画面サイズなどに応じたスタイルを指定
Web Fonts & WOFF
✴ テキストのフォントをダウンロード
Scalable Vector Graphics
✴ XML で記述するベクター画像ファイル
SVG Filter for HTML
✴ ぼかしや切り取りなどの SVG フィルタ
Flexible Box Model
✴ 要素のサイズや配置を簡単かつ柔軟に指定
過去の講演資料も参照... http://www.slideshare.net/dynamis
![Page 38: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/38.jpg)
Application PlatformJS APIs for Web Apps...
![Page 39: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/39.jpg)
Web Forms
photo by Aron http://www.flickr.com/photos/aarongustafson/2491839081/
![Page 40: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/40.jpg)
Daniel さんが説明してくれたので Firefox の実装状況だけ簡単に...
![Page 41: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/41.jpg)
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
![Page 42: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/42.jpg)
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
![Page 43: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/43.jpg)
WebSockets
photo by 5500 http://www.flickr.com/photos/5500/303849123/
![Page 44: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/44.jpg)
WebSockets
シンプルなテキスト送受信プロトコル
バイナリデータや多重化などの機能はない
JavaScript API も極めて単純
データの送信は send メソッド
open, error, close, message イベントで処理
まだまだ仕様策定段階なので要注意
Firefox は 2009/04 からパッチを用意し仕様変更に随時追従しながら仕様の問題を指摘
Firefox 4, Chrome 6 が現仕様サポート予定https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/
![Page 45: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/45.jpg)
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."); }
![Page 46: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/46.jpg)
File API
photo by californiaAmy http://www.flickr.com/photos/amyandthomas/3865411819/
![Page 47: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/47.jpg)
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
![Page 48: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/48.jpg)
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>
![Page 49: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/49.jpg)
Drag & Drop API
Firefox3.6~ http://r.dynamis.jp/fontdropdemo
![Page 50: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/50.jpg)
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
![Page 51: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/51.jpg)
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
![Page 52: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/52.jpg)
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);
![Page 53: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/53.jpg)
HTML5 Parser
http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html
![Page 54: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/54.jpg)
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/
![Page 55: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/55.jpg)
Native MultimediaVideo, Animation, 3D ...
![Page 56: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/56.jpg)
Open VideoOn2 Tech.
VP3Xiph.Org Google
OggVP4TheoraVP5VP6VP7VP8
Vorbis
Matroska
VorbisVP8
WebM
![Page 57: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/57.jpg)
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~
![Page 58: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/58.jpg)
On2 Tech.VP3
Xiph.Org Google
OggVP4TheoraVP5VP6VP7VP8
Container
Vorbis
Matroska
VorbisVP8
AudioVideo
WebM
ロイヤリティフリーWebM プロジェクト FAQ: http://www.webmproject.org/about/faq/
![Page 59: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/59.jpg)
CSS Transitions
Firefox.next~ http://24ways.org/2009/going-nuts-with-css-transitions
![Page 60: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/60.jpg)
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 など
![Page 61: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/61.jpg)
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);}
![Page 62: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/62.jpg)
SVG Animation
![Page 63: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/63.jpg)
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
![Page 64: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/64.jpg)
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>
![Page 65: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/65.jpg)
Edit & Try Now! Later!http://r.dynamis.jp/swapskillshttp://r.dynamis.jp/smildemo
![Page 66: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/66.jpg)
<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" ー 無限繰り返し
![Page 67: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/67.jpg)
WebGL
Firefox.next~ http://www.khronos.org/webgl/wiki/Demo_Repository
![Page 68: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/68.jpg)
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
![Page 69: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/69.jpg)
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>
![Page 70: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/70.jpg)
Beyond HTML5Future Web Platform
![Page 71: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/71.jpg)
Audio Data API
デモ紹介ブログポスト: http://vocamus.net/dave/?p=974
![Page 72: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/72.jpg)
Audio Data API<audio> データを操作する JS API の試験実装中
WHATWG で当初 audio canvas として検討
<video> データの解析は <canvas> 経由で
onloadedmetadata イベントを拡張
channels, rate, volume などを追加
onaudiowritten イベントを新しく定義
フレームバッファと開始時間が得られる
Audio クラスでゼロから音の合成も可能
詳細は: https://wiki.mozilla.org/Audio_Data_API
![Page 73: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/73.jpg)
Try Now! Later!http://r.dynamis.jp/swapskillshttp://r.dynamis.jp/audioapidemo
Audio API サポートした専用ビルドが必要上記 URL からビルドをダウンロードして試してください
![Page 74: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/74.jpg)
Orientation
Firefox3.6~ http://r.dynamis.jp/oryzeademo
![Page 75: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/75.jpg)
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/
![Page 76: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/76.jpg)
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>
![Page 77: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/77.jpg)
Multi-touch
![Page 78: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/78.jpg)
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
![Page 79: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/79.jpg)
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
![Page 80: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/80.jpg)
![Page 81: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/81.jpg)
やっぱいいよね Firefox
![Page 82: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/82.jpg)
やっぱいいよね Firefox
end.
![Page 83: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/83.jpg)
Referencesfor more information...
![Page 84: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/84.jpg)
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
![Page 85: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/85.jpg)
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
![Page 86: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/86.jpg)
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/
![Page 87: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/87.jpg)
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 も話題でしたが外部向けに公開されてないので現状論外
![Page 88: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/88.jpg)
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
![Page 89: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/89.jpg)
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
![Page 90: HTML5 and web platform](https://reader038.vdocument.in/reader038/viewer/2022102922/54b7a9254a79594b258b4607/html5/thumbnails/90.jpg)
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