html5 & web platform
DESCRIPTION
SwapSkills2010 vol.3 浅井智也 1. HTML5 のホントとウソ 2. いま使える技術、次に来る技術 3. アプリケーションプラットフォーム 4. ネイティブマルチメディア機能 5. HTML5 の彼方にTRANSCRIPT
HTML5 & Web PlatformPresentation @ SwapSkills
by Tomoya Asai (aka. dynamis)
about:me
浅井 智也 =̃ dynamis (でゅなみす)
Mozilla Product & Technology Evangelist
slides: http://r.dynamis.jp/presen
mail: dynamis mozilla-japan.org
twitter: @dynamitter
@
HTML5 のホントとウソ
今使える技術、次に来る技術
アプリケーションプラットフォーム
ネイティブマルチメディア機能
HTML5 の彼方に
Agenda:
StatisticsShare and Active Users
2002/01
2009/07
Browser MarketShare Graph by AXIIShttp://www.axiis.org/examples/BrowserMarketShare.html
Browser MarketShare Graph by AXIIShttp://www.axiis.org/examples/BrowserMarketShare.html
Opera2%
Safari5%
Chrome7%
Firefox25%
Internet Explorer60%
世界のブラウザシェア by NetApps (2010/04)
Opera2%
Safari5%
Chrome7%
Firefox25%
Internet Explorer60%
世界のブラウザシェア by NetApps (2010/04)
Browser MarketShare Data by NetApplicationshttp://marketshare.hitslink.com/
http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html
http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html
Truth of HTML5HTML5 is...
"HTML5" のよくある質問
"HTML5" って Video？ Canvas？ SVG？
"HTML5" はタグの仕様？ API の仕様？
"HTML5" でプラグインは不要になる？
"HTML5" は 2010 年中に勧告される？
"HTML5" にブラウザは完全対応する？
"HTML5" って Video？ Canvas？ SVG？
"HTML5" はタグの仕様？ API の仕様？
"HTML5" でプラグインは不要になる？
"HTML5" は 2010 年中に勧告される？
"HTML5" にブラウザは完全対応する？
photo by Horia http://www.flickr.com/photos/horiavarlan/4273168957/
どの疑問もナンセンス
"HTML5" と呼んでいる範囲は？
仕様が勧告されれば使えるのか？
仕様に完全準拠した実装は存在したか？
仕様に合わせて実装すれば良いのか？
実装に合わせて仕様を書くのか？
photo by Horia http://www.flickr.com/photos/horiavarlan/4273168957/
"HTML5" と呼んでいる範囲は？
仕様が勧告されれば使えるのか？
仕様に完全準拠した実装は存在したか？
仕様に合わせて実装すれば良いのか？
実装に合わせて仕様を書くのか？
HTML5 とは何なのか？
"HTML5" の範囲は？
W3C HTML5
W3C HTML5, Microdata, Web Messaging
WHATWG HTML5 (device, ping は除く)
Web Storage, Web Workers, WebSockets API ...以前 HTML5 仕様に入っていたものを含む場合
CSS3, DOM3, Geolocation API, SVG, WebGL ...次世代 Web 技術もまとめて呼ぶ場合
なにもかも HTML5 (バズワード)
ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
HTML5
Canvas 2D Graphics ContextMicrodata
Microdata vocabulariesCross-document messaging
Channel messaging
Forms
ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
Next Generation of HTML
HTML5
Canvas 2D Graphics ContextMicrodata
Microdata vocabulariesCross-document messaging
Channel messaging
Forms
device elementping attribute
Web WorkersThe WebSocket protocol
Web Storage
The WebSockets APIServer-Sent Events
ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
Web SQL Database
Geolocation APIXMLHttpRequest Level 2
Next Generation of HTML
HTML5
Canvas 2D Graphics ContextMicrodata
Microdata vocabulariesCross-document messaging
Channel messaging
Forms
device elementping attribute
SVGMathML
Indexed Database API
Next Generation of HTML
HTML5
ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
Canvas 2D Graphics ContextMicrodata
Microdata vocabularies
HTML5Forms
Cross-document messagingChannel messaging
Forms
HTML5 Web Messaging
HTML5 Microdata
HTML Canvas 2D Context
device elementping attribute
Web WorkersThe WebSocket protocol
SVGMathML
Web Storage
The WebSockets APIServer-Sent Events
Geolocation APIXMLHttpRequest Level 2
Indexed Database API
This specification evolves HTML and
its related APIs to ease the authoring
of Web-based applications.
http://whatwg.org/html5 - Abstract より
ブラウザ開発側から見た Web 標準は...
ユーザの必要とする機能をブラウザに
既存の独自拡張を整理統合して標準化
新規追加機能の仕様も統一して標準化
既存の標準は実装により有効性を確認
複数の実装なくして標準に意味はない
すべての環境で同一に
すべての環境で同一に
ユーザに最善の Web を
ではなく
使えるものから使いましょう。
Current/Coming TechTechnology Status
Web DesignCSS, Image, Fonts...
今回はデザイン周りの技術はざっくり割愛...
text-shadow, box-shadow
✴ テキストやボックスに影を付加
rgba, opacity
✴ 色や要素にアルファチャネル
Multiple Backgrounds
✴ 背景画像を複数組み合わせて指定
CSS Gradations
✴ CSS でグラデーション画像を作成
CSS Transforms
✴ CSS で要素の回転、変形、拡大縮小、平行移動
その他色々... https://developer.mozilla.org/en/Upcoming_Firefox_features_for_developers
Media Queries
✴ 画面サイズなどに応じたスタイルを指定
Web Fonts & WOFF
✴ テキストのフォントをダウンロード
Scalable Vector Graphics
✴ XML で記述するベクター画像ファイル
SVG Filter for HTML
✴ ぼかしや切り取りなどの SVG フィルタ
Flexible Box Model
✴ 要素のサイズや配置を簡単かつ柔軟に指定
その他色々... https://developer.mozilla.org/en/Upcoming_Firefox_features_for_developers
Application PlatformJS APIs for Web Apps...
Web Forms
photo by Aron http://www.flickr.com/photos/aarongustafson/2491839081/
Daniel さんが説明してくれたので Firefox の実装状況だけ簡単に...
Web Forms 実装状況Mounir Lamouri さんがほぼ単独で順次実装
主な実装済み:
placeholder 属性: 未入力時の灰色テキスト
autofocus 属性: 初期フォーカスフィールド
input type=tel/search: 電話や検索の入力
主なチェックイン待ち: (Firefox 4 に多分入る)
定数/URL/pattern validation: 入力値の検証
required 属性: 入力必須項目の指定
:required, :optional CSS 擬似クラス
最新状況: https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
Web Forms 実装状況
実装したが仕様に問題あり中断:
autocomplete: 入力の自動補完
未着手: (Firefox 4 に入る見込みまず無し)
input type=range/date/month/time など
list/min/max/step/form/progress 属性など
Color/Date/Time/Range などの選択 UI
最新状況のまとめ:
https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
最新状況: https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
WebSockets
photo by 5500 http://www.flickr.com/photos/5500/303849123/
WebSockets
シンプルなテキスト送受信プロトコル
バイナリデータや多重化などの機能はない
JavaScript API も極めて単純
データの送信は send メソッド
open, error, close, message イベントで処理
まだまだ仕様が不安定なので要注意
Firefox は 2009/04 からパッチを用意し仕様変更に随時追従しながら仕様の問題を指摘
Firefox 4, Chrome 6 が現仕様サポート予定仕様策定(修正)状況からしてまだ当分は安心して使えない...
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(e) { alert("data from server: "+e.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
Drag & Drop API
HTML5 の Drag & Drop API
DOM 要素などは Firefox 3.5 からサポート
addEventListener("drop", function(event) { ... },true)
dragstart, dragover, dragend などのイベント
ローカルファイルの扱いは File API
File API との組み合わせは Firefox 3.6 から
event.dataTransfer.files でファイルを受け取る
あとは File API で自由に読み取る
Firefox3.5̃ https://developer.mozilla.org/Ja/DragDrop/Drag_and_Drop
http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/
reader.onload = function(e) { var bin = e.target.result; //binaryString // 読み取ったファイルをアップロード var xhr = new XMLHttpRequest(); xhr.open("POST", "upload.php"); xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); xhr.sendAsBinary(bin);};
dropzone.addEventListener("drop", function(event) { event.preventDefault(); // ドロップイベントの dataTransfer でファイルアクセス var allTheFiles = event.dataTransfer.files; alert("ドロップしたファイル数: " + allTheFiles.length); for (var i = 0; i < files.length; i++) { // バイナリファイルとして読み込み reader.readAsBinaryString(files[i]); }}, true);
HTML5 Parser
http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html
HTML5 Parser
HTML5 では互換性確保のためパーサ仕様も含む
仕様の曖昧性もブラウザ非互換の主要因
Firefox 3.6 以降で実装 (4 でデフォルト有効)
パース処理のスレッド分離で全体的に高速化
innnerHTML 呼び出しは 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 ...
VideoOn2 Tech.
VP3Xiph.Org Google
OggVP4TheoraVP5VP6VP7VP8
Vorbis
Matroska
VorbisVP8
WebM
Open Video
HTML5 で Video タグの Codec は指定なし
高品質かつロイヤリティフリーな Codec が必要
Web 標準はロイヤリティフリーが前提
先日までは Ogg Theora が最有力の Open Video
WebM (Web Media) が公開され問題解決？
WebM = VP8+Vorbis in Matroska
Google が On2 を買収し VP8 を OSS 化
Google, Mozilla, Opera, Adobe, MS などが採用
Theora は Firefox 3.5~, WebM は Firefox4~
On2 Tech.VP3
Xiph.Org Google
OggVP4TheoraVP5VP6VP7VP8
Container
Vorbis
Matroska
VorbisVP8
AudioVideo
WebM
ロイヤリティフリーWebM プロジェクト FAQ: http://www.webmproject.org/about/faq/
CSS Transitions
Firefox.next~ http://24ways.org/2009/going-nuts-with-css-transitions
CSS Transitions
Firefox.next~ http://24ways.org/2009/going-nuts-with-css-transitions
CSS3 Transitions
transition: all 0.5s ease-in;
transition: color 1s linear, width 1s ease-in;
Draft なので -webkit-, -moz- prefix が必要
一部プロパティの変化をなめらかにする
動的擬似クラスや JavaScirpt 書き換え時に
位置、サイズ、カラー、シャドウなどが対象
変化の時間や速度なども制御可能
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, Safari, Chrome, Opera でサポート
IE9 では対応予定無し (＞＜)
SVG Test Suite 結果表: http://www.codedread.com/svg-support.php
http://people.mozilla.com/~dynamis/demo/smil/<svg ... xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."> ... <ellipse cx="290" cy="200" rx="80" ry="80"><!-- 中心の円 --> <!-- 毎秒指定色へと変化する 5秒間の色変更を無限に繰り返す --> <animate attributeType="CSS" attributeName="fill" dur="5s" values="#ff8; #f88; #f8f; #88f; #8ff; #8f8" keyTimes="0; .2; .4; .6; .8; 1" repeatCount="indefinite"/> </ellipse> ... <g id="R1" transform="translate(200, 200)"><!-- グループ化 --> <ellipse id="EL" cx="0" cy="0" rx="100" ry="30" ...><!-- 周囲の楕円 --> <animateTransform attributeName="transform" type="rotate" dur="7s" from="0" to="360" repeatCount="indefinite"/><!-- 回転 --> <animate attributeName="cx" dur="8s" values="-20; 120; -20" keyTimes="0; .5; 1" repeatCount="indefinite"/><!-- 中心の移動 --> <animate attributeName="ry" dur="3s" values="10; 60; 10" keyTimes="0; .5; 1" repeatCount="indefinite"/><!-- 半径の変更 --> </ellipse> </g> <use xlink:href="#R1" transform="rotate(30, 300, 200)"/><!-- 回転複製 --> ...</svg>
WebGL
Firefox.next~ http://www.khronos.org/webgl/wiki/Demo_Repository
WebGL
The Khronos Group で API 仕様を策定
Apple, Google, Mozilla, Opera が参加
OpenGL ES 2.0 ベースの API を JS から使う
シェーダーやテクスチャなども当然利用可能
<canvas> の 3D コンテキストとして定義
Firefox 4 や WebKit Nightly でサポート
Firefox では about:config で有効化する
webgl.enabled_for_all_sites = true
Firefox.next~ https://developer.mozilla.org/en/WebGL
https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL
<canvas id="glcanvas" width="640" height="480"/><script type="text/javascript">var canvas = document.getElementById("glcanvas");// WebGL コンテキストを取得// Firefox では "moz-webgl" または "experimantal-webgl"// WebKit では "webkit-gl" を引数に指定するvar gl = canvas.getContext("webgl");if (gl) { // WebGL コンテキストの初期化 gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); // ... OpenGL 同様にいろいろ描画処理 ...}</script>
Beyond HTML5Future Web Platform
Audio Data API
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
end.
Referencesfor more information...
referenceshacks.mozilla.org - Mozilla と Web の最新技術紹介
http://hacks.mozilla.org/https://dev.mozilla.jp/hacksmozillaorg/Firefox の最新機能紹介ページ
https://developer.mozilla.org/en/Upcoming_Firefox_features_for_developershttps://developer.mozilla.org/ja/Firefox_3.6_for_developersWHATWG HTML5 (各機能のブラウザ実装状況含む)
http://www.whatwg.org/html5HTML5 の基本は矢倉さんのスライドがオススメ
http://www.slideshare.net/myakura/presentations
ref. - toolsCanvas を使った Open Web ツール検索
http://tools.mozilla.com/Processing.js - Canvas によるアニメーション
http://processingjs.org/IE でも Canvas を Flash/Silverlight で実行する
http://code.google.com/p/uupaa-js/HTML5 ベースの RIA フレームワーク
Cappuccino: http://objective-j.org/Sproutcore: http://www.sproutcore.com/JavaScriptMVC: http://javascriptmvc.com/
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