firefox5+html5×5
Post on 20-Dec-2014
4.356 Views
Preview:
DESCRIPTION
TRANSCRIPT
Firefox5 + HTML5 × 5Slides @ Mozilla & NSEG @ Nagano
by Tomoya ASAI (dynamis)
last update on 2011.07.23see also: http://dynamis.jp/r
about:me Tomoya ASAI (dynamis) Mozilla Japan - Technical mktg. http://dynamis.jp/ http://facebook.com/dynamis http://twitter.com/dynamitter dynamis mozilla-japan.org@
dynamis (古代ギリシャ語 dunamis) は「でゅなみす」と読みます
Firefox 5 & HTML5時代の Web 技術
注目の Web 技術を 5 つの視点で(CSS/Design 系は天野さんにおまかせ)
Agenda
about:Mozilla Firefox5 + HTML5
Multimedia Tags Animations Web Apps Network Security
Agenda
このスライドの見方 こんなスライドが基本スタイル 可読性のため下線なしリンクも コードは要点だけ残した簡略版
-moz- 以外の接頭辞など割愛
右下には補足や一次情報源 URL
何かあれば遠慮無く Facebook や Twitter でコンタクトしてください
画像からも時々リンクしてます
about:mozilla.com brain .org heart
http://www.flickr.com/photos/intothefuzz/5577427601/
about:Firefox Firefox の意義
オープンで適切な実装の提供 Firefox の目的
公共のリソースとしてのインターネットの発展を促進
http://www.flickr.com/photos/intothefuzz/5578011308/
.com brains - 会社組織 営利企業同様の開発スタイル
.org heart - 非営利組織 より良いインターネット環境へ 社員より遙かに多い貢献者
about:Mozilla
マニフェスト: http://www.mozilla.org/about/manifesto.ja.html
http://www.flickr.com/photos/intothefuzz/5577430083/
HTML5 FeaturesNew HTML...
HTML5 Video 実用的になったビデオサポート
GPU も活用して低負荷再生 体感速度に直結する機能に注意
ポスターフレーム 自動バッファ制御
Theora は Firefox 3.5~, WebM は Firefox4~
<Video> の基本
autobuffer 属性は preload 属性に変更されたので注意
<!-- 互換性を考慮したマークアップ --><video controls> <source src="video.webm" type="video/webm"/> <source src="video.ogg" type="video/ogg"/> <source src="video.mp4" type="video/mp4"/> <embed src="video.swf" type="application/x-shockwave-flash"/><!-- 最悪 Flash でも --></video><!-- ポスターフレームの指定 --><video controls poster="posterframe.jpg"> ... </video><!-- 先読みの制御 preload=none/metadata/auto --><video controls preload="auto"> ... </video>
<Video> のバッファ対応
http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
<!-- 読み込み済み(キャッシュ)範囲を読み取る --><video id="longvideo" src="video.ogv" ... > ... </video><script>var video = document.getElementById("longvideo");var ranges = video.buffered; // バッファ済み TimeRangesfor (var i=0; i<ranges.length; i++) { var s = ranges.start(i); var e = ranges.end(i); // WebKit ではシークすると end(0)=全体の長さ(バグ) alert(s+"秒から"+e+"秒まで読み込み済み");}</script>
<track> で字幕データ<!-- Firefox6 で DOM API のみ実装(表示はまだ) --><video src="video-with-track.xxx"> <track src="track.vtt" srclng="ja"/></video><!-- 複数の track を指定することも可能 --><video src="video-with-track.xxx"> <track src="subtitles.vtt" srclng="ja" kind="subtitles" label="字幕"/> <track src="descriptions.vtt" srclng="ja" kind="descriptions" label="解説"/></video><!-- http://www.whatwg.org/specs/web-apps/current-work/webvtt.html -->
https://developer.mozilla.org/en/HTML/Element/track
WebM ビデオの作り方 Miro Video Converter
ドラッグ＆ドロップするだけ ffmpeg コマンド
ffmpeg -i in.avi -f webm out.webm
http://www.mirovideoconverter.com/
Video Codec 問題？ HTML5 では Codec 指定なし
WebM: Firefox, Chrome, Opera H.264: IE, Safari
Audio についても同じ vorbis: Firefox, Chrome, Opera mp3: IE, Safari
このへんは Mozilla & HTML5＋α＠福岡のセッションも参照https://dev.mozilla.jp/events/workshop09/
Open Video と特許問題 Web に「税金」はいらない
そのための Web 標準 WebM はライセンスフリー H.264 は MPEG-LA が特許管理 フリーにならない限り採用不可
このへんは Mozilla & HTML5＋α＠福岡のセッションも参照https://dev.mozilla.jp/events/workshop09/
On2 Tech.VP3
Xiph.Org Google
OggVP4TheoraVP5VP6VP7VP8
Container
Vorbis
Matroska
VorbisVP8
AudioVideo
WebM
ロイヤリティフリーWebM プロジェクト FAQ: http://www.webmproject.org/about/faq/
Ogg
H.264 がフリーになった？ 無料動画配信のみがフリーに
有料配信や Codec ソフトは有償 W3C 的にも OSS 的にも問題外
MPEG-LA 側が譲らない限りWeb 標準になる事はあり得ない
http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/自社だけライセンス料払って OSS 業界は無視とかあり得ない
WebM は特許問題が不安？ H.264 も特許問題への保障なし
GIF はサブマリン特許で訴訟 MP3 は特許権利者問題で訴訟
H.264 も WebM も同じこと MPEG-LA の特許プール範囲は
WebM も問題にならないはず
MS や MPEG-LA などが展開する FUD でしょ
プラグインで再生 互いに相手ブラウザ向けに推進
Codec 用のプラグインを提供 WebM for IE9 HTML5 Extension for Windows
Media Player Firefox Plug-in Safari 用 Ogg プラグインも
VLC Web Browser Pluginhttps://tools.google.com/dlpage/webmmf
http://www.interoperabilitybridges.com/html5-extension-for-wmp-pluginhttp://www.videolan.org/vlc/download-macosx.html
エンコード面倒なら vid.ly 共通 URL で全端末対応
UP すれば各種形式に自動変換 ogg, mp4, mov, 3gp...
他にも YouTube に UP して webm 変換させるという手も...
http://vid.ly/
Audio Data API Video は Canvas に取得可能 Audio も取得や生成可能に W3C にて標準化予定
試験実装 API について: https://wiki.mozilla.org/
Audio_Data_API
http://www.w3.org/2005/Incubator/audio/
Audio Data の読み取り
http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
<audio id="input" src="test-tone.ogg" controls></audio><div id="display"></div><script>var input = document.getElementById('input');var display = document.getElementById('display');// Audio の入力を監視するイベントリスナを設定input.addEventListener('MozAudioAvailable', function(e){ // フレームバッファの最初のサンプリングをしてみる display.innerHTML += e.frameBuffer[0] + ', '; }, false );</script>
Audio Data API の用途 Fourier 変換して周波数分解 フィルタ、ミキサ、イコライザ そして勿論 DSP や音声合成...
http://twitter.com/cherenkov/status/21614170698
AnimationsJavaScript or not JS?
アニメーションいろいろ
アニメーションいろいろ JavaScript Animation Canvas 2D SVG & SMIL CSS Transisions CSS Animations WebGL
JavaScript Animation setTimeout() でループ処理 多数のタイマー回すと重くなる バックグラウンドでも重くなる
JS Timer 間隔の変更 setTimeout Timer の最小値
HTML5 で 4ms と規定された IE9, Fx5, WebKit: 4ms に統一 IE9 は Canvas 操作時短い(バグ)
IE9 バッテリー動作時 10~15ms Firefox 5, Chrome 11 以降アク
ティブタブ以外は最大1回/秒setTimeout()/setInterval() などの時間間隔に依存しないように
RequestAnimationFrame 無駄なく省電力アニメーション
setTimeout では最大 250fps? 実際の画面表示は最大 60fps
Transition などと JS の同期 JS 以外のアニメーションと同期
jQuery などは対応済み
http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
RequestAnimationFrame 使い方は極めてシンプル
setTimeout() の代わりにmozRequestAnimationFrame()
Date.now() の代わりにmozAnimationStartTime とevent.timeStamp
http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
RequestAnimationFreme 使用法var d = document.getElementById("d"); // 動かす対象要素var start = window.mozAnimationStartTime;function step(event) { var progress = event.timeStamp - start; // Date.now() 代わり d.style.left = Math.min(progress/10, 200) + "px"; if (progress < 2000) { window.mozRequestAnimationFrame(); // setTimeout() 代わり } else { window.removeEventListener("MozBeforePaint", step, false); }}// RequestAnimationFrame でフレーム描画前に実行する関数を設定window.addEventListener("MozBeforePaint", step, false);// 次のフレーム再描画前に BeforePaint に設定した関数を実行window.mozRequestAnimationFrame(); // setTimeout() 代わり
http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
Canvas 2D JavaScript API で描画
点、線、弧、矩形、影、画像、テキストなど自由に描画
https://developer.mozilla.org/en/Canvas_tutorial
Canvas 使用時の注意 Same Origin Policy に注意 toDataURL(), getImageData()
他サイトの画像を DrawImage()した後で使用するとエラー
measureText() 他サイトのフォントを使用する
場合に呼び出すとエラー
http://www.w3.org/TR/html5/the-canvas-element.html#security-with-canvas-elements
Canvas とパフォーマンス 細かく編集より一度に編集
小さな領域を何度も書き換えるより大きな領域を一度に描画
レイヤーを重ねて使う 激しく動くモノと動きの少ない
背景がある場合レイヤーに分離することで書き換えを少なく
よく使う要素はキャッシュhttp://googlecode.blogspot.com/2011/05/creating-2d-games-with-javascript-html5.html
Canvas とパフォーマンス 位置座表は整数値で保持
浮動小数点演算は遅い Transitions との同時使用に注意
GPU 描画モードとの切り替えオーバーヘッドに要注意
最終手段は WebGL 採用 一般に WebGL の方が高速
http://muizelaar.blogspot.com/2011/02/drawing-sprites-canvas-2d-vs-webgl.html
Canvas LibrariesProcessing.js - Canvas 上で Processing を使う
http://processingjs.org/Canvas でのアニメーションライブラリ
http://code.google.com/p/cakejs/Highcharts.js - インタラクティブグラフを生成
http://www.highcharts.com/graph.tk - 数式を Canvas に描画する
http://graph.tk/JavaScript InfoVis Toolkit - データの可視化
http://thejit.org/
SVG Animation SVG のアニメーション機能
<animate>, <set> などで定義 GPU を用いた高速処理 IE9 のみ未サポート
「SVG を使ったアニメ」とは別 独自の類似仕様 HTML+TIME
https://developer.mozilla.org/en/SVG/SVG_animation_with_SMIL
http://dynamis.jp/demo/smil/ovaling.svg<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>
ちょっとややこしいので手では書きたくないですね
SMIL 使用時の注意 <animateColor> は使わない
上位互換の <animate> を使う 仕様の不備により非サポート
モバイルでの対応状況に注意 Android 2.x の「ブラウザ」は
Chrome と違い非サポート
animateColor について https://bugzilla.mozilla.org/show_bug.cgi?id=436296
SVG ReferencesRaphaël - JavaScript から簡単に SVG を生成
http://raphaeljs.com/gRaphaël - グラフ描画用 Raphaël
http://g.raphaeljs.com/Canvas vs SVG (実際は CSS や WebGL も検討を)
http://blogs.msdn.com/b/ie/archive/2011/04/22/thoughts-on-when-to-use-canvas-and-svg.aspx
SVG Test Suite 結果 (IE9 の結果には要注目)http://www.codedread.com/svg-support.php
CSS Transitions スタイル遷移をなめらかに 簡単にアニメーションできる GPU を用いた高速処理
今日は詳細割愛します
Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
CSS Transitions 使用例
http://hacks.mozilla.org/2010/07/firefox4-beta2/
#somebox { color: black; background-color: yellow; /* すべてのスタイルを2秒かけて変化、開始はなめらかに */ -moz-transition: all 2s ease-in; transition: all 2s ease-in;}#somebox:hover { /* マウスオーバーで配色、サイズ、角度を変化 */ color: white; background-color: red; -moz-transform: rotate(-60deg) scale(1.5); transform: rotate(-60deg) scale(1.5);}
CSS Animations Transitions を連続する機能
キーフレーム毎のスタイルを指定 CSS だけでアニメーション GPU を用いた高速処理
今日は詳細割愛します
Firefox 5~ https://developer.mozilla.org/en/CSS/CSS_animations
WebGL <Canvas> の 3D コンテキスト OpenGL ES2.0 相当の API
携帯用 GPU も広くサポート 2D でも高速アニメーションに
http://www.khronos.org/webgl/
WebGL
http://webos-goodies.jp/archives/getting_started_with_webgl.html
<canvas id="glcanvas" width="640" height="480"/><script type="text/javascript">var canvas = document.getElementById("glcanvas");// WebGL コンテキストを取得// コンテキスト名は仕様確定まで "experimental-webgl"var gl = canvas.getContext("webgl") || canvas.getContext("experimantal-webgl");if (gl) { // ... OpenGL 同様にいろいろ描画処理 ... // Int32Array など固定型配列も使って高速演算可能}</script>
WebGL アブナイ？ 新技術に懸念があるのは常
安全を維持する開発が続いてる IE なんて jpeg/avi でも...
Silverlight も Flash も同じ 基本的に同様に 3D 対応 足引っ張ってないで協力して...
https://dev.mozilla.jp/2011/06/a-three-dimensional-platform/
IE でも WebGL IEWebGL プラグイン
http://iewebgl.com/
JebGL (Java アプレット) http://code.google.com/p/jebgl/
WebGL FrameworksSceneJS - JSON ベースの API で 3D 操作使いやすくて大人気？http://scenejs.org/
GLGE - WebGL の Wrapper APIかなり高機能な模様http://www.glge.org/
Three.js - Canvas2D でも WebGL でもhttps://github.com/mrdoob/three.js
CubicVR.js - CubicVR 3D エンジンの移植版https://github.com/cjcliffe/CubicVR.js/
その他こちらを参照: http://www.khronos.org/webgl/wiki/User_Contributions
アニメーション使い分け Canvas
コードさえ書けば何でも可能 SVG & SMIL
オブジェクト操作に便利 CSS Transitions/Animations
ブラウザが自動で高速処理 WebGL
高速アニメーションの最終兵器
Canvas が適した処理 ピクセル単位の描画・編集
領域に比例して重くなる！ 細かく高速なアニメーション コード書くのは面倒 画像のコピー (drawImage) など限られた処理だけ GPU 活用
SVG が適した処理 拡大しても滑らかな画像 フィルタ処理や切り抜きも簡単 ユーザインタラクティブな処理 DOM イベントに対する処理 hover イベントには特に便利
CSS が適した処理 簡単な事は簡単に書ける スタイル変化のアニメーション 回転や歪みは Transition GPU 処理で高速化も
WebGL が適した処理 3D グラフィック (当然) ゲームなどでの高速処理 ライブラリも増えてきた iAd (iOS では広告でのみ利用可)
Web AppsWeb Platform
オフラインサポート オフラインイベント
ネットの接続、切断を検出 DOM Storage
Database 別途 Indexed DB 仕様 アプリケーションキャッシュ
指定ファイルを先読み
オフラインイベント
ネットワークの有無を検出して処理
window.addEventListener("online", function() // オンラインになった時の処理}, true);
window.addEventListener("offline", function() { // オフラインになったときの処理}, true);
DOM Storage// セッションをまた保持するデータlocalStorage.dataname = "datavalue";
// ブラウザ終了するまで一時的に保存sessionStorage.dataname = "datavalue";
オフライン時のデータ保持は DOM Storage が便利
アプリケーションキャッシュ
myapp.manifestCACHE MANIFESTimages/firefox.pngimages/thunderbird.pngNETWORK:dont-cache-this.phpCACHE:cache-this-too.html
<!DOCTYPE html><html manifest="myapp.manifest" lang="ja">
オフラインで必要になるファイルを列挙しておく
SQL DB の標準化は断念 SQLite 実装依存では仕様には...
そもそも Web に SQL が最良？ シンプルな IndexedDB に移行
IndexedDB 上に SQL 構築も？
HTML5 History ブラウザ履歴制御 API
戻る進む、履歴追加、URL 変更 履歴状態データの保存と取得
pushState() と history.state popState() の利用には要注意
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
ページ遷移せず URL 変更// <a href="/newpath" id="link">move to newpath</a>var link = document.getElementById("link");link.addEventListener("click", function(e) { // ページ遷移せず URL を書き換え履歴を追加 history.pushState(null, "New URL", link.href); swapContents(link.href); e.preventDefault(); // ページ遷移無効化}, true);function swapContents(href) { // 新 URL のコンテンツを XHR で取得して置き換えるなど // URL 変更に応じたコンテンツ書き換え処理}
http://dl.dropbox.com/u/130643/dih5ja/history.html https://github.com/
History の仕様変更 Mozilla の提案で最近仕様変更 常に参照可能な history.state popState() のダメ仕様修正
onload 後の発火じゃ遅すぎ... Safari のバグ実装も考慮...
https://dev.mozilla.jp/hacksmozillaorg/history-api-changes-in-firefox-4/
URL 維持して履歴を追加// <button id="button">Save Current State</button>var button = document.getElementById("link");button.addEventListener("click", function(e) { var currentState = {some: "foo", another: "bar"}; // URL 変更せず状態データを記憶した履歴を追加 history.pushState(currentState, "New State");}, true);function restoreState(stateData) { // 保存されているデータを用いてページの状態を復元}// 状態データが保存されていたらロード中にすぐ初期化処理if (history.state) { restoreState(history.state); }
https://dev.mozilla.jp/hacksmozillaorg/history-api-changes-in-firefox-4/
NetworkConnect with you...
WebSockets サーバとの双方向通信
ブラウザ間の P2P 機能はない リアルタイム Web などに
通信オーバーヘッドが少ない 大半の用途は他の技術でも...
SSE, multipart Ajax...
WebSockets 仕様策定状況 JS API 仕様はほぼ確定 プロトコル仕様ももうすぐ安定
Firefox 6 は ietf-07 サポート 接頭辞付きの MozWebSocket 他は古い hixie-76 をサポート
WebSocket のセキュリティ ietf-04 でセキュリティ問題修正
一部プロキシが誤動作する問題 Client-to-Server Masking
HandShake で masking-key 共有 data XOR masking-key を送信
WebSockets API
https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/
// WebSocket の接続を開始var socket = new MozWebSocket(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."); }
Securitymore Secure Web...
Content Security Policy 次世代セキュリティポリシー
許可ドメインとポートを指定 Same Origin Policy はもう古い
画像や JS の読み込み先も制御 XSS などの攻撃を防止
WebKit も実装取り組み中
https://developer.mozilla.org/ja/Introducing_Content_Security_Policy
CSP ヘッダ送信例// 全コンテンツを同一ドメインのみ (サブドメインも不可)X-Content-Security-Policy: default-src 'self'
// 自身と dynamis.jp のサブドメインのみ許可X-Content-Security-Policy: default-src 'self' *.dynamis.jp
// secure.mozilla.jp からの読み込みは HTTPS のみX-Content-Security-Policy: default-src https://secure.mozilla.jp/
https://developer.mozilla.org/en/Security/CSP/Using_Content_Security_Policy
CSP ヘッダ送信例
// 自身と *.mail.jp は全許可、他サイトは画像のみに制限// スクリプトなど指定していないものは default-src と同じX-Content-Security-Policy: defaut-src 'self' *.mail.jp; (実際は改行なし) img-src *
// 画像は任意サイト、メディアファイルと JS は指定サイトに限定X-Content-Security-Policy: default-src 'self'; img-src *; (実際は改行なし) media-src video.tld audio.tld; (実際は改行なし) script-src script.tld;
https://developer.mozilla.org/en/Security/CSP/Using_Content_Security_Policy
デフォルトセキュリティポリシー インライン JS/CSS 禁止
JS/CSS は外部ファイルに限る イベントハンドラなども不可
eval() などで文字列評価禁止 Function や setTimeout も同じ
現在のところこれらを許可する方法は仕様草案にはあるが未実装
Cross-Origin Resource Sharing 他ドメインからの読み込み許可
Cross-Site XMLHttpRequest
// dynamis.jp のページからはこのサイトの読み込み許可Access-Control-Allow-Origin: http://dynamis.jp
https://developer.mozilla.org/en/http_access_control
// 任意サイトからの読み込みを許可 (公開 API などに)Access-Control-Allow-Origin: *
...
もっと詳しく... Mozilla Hacks Blog を参照 他にももっと色々書いてます 日本語訳は modest にて http://r.dynamis.jp/mozhacks
Any Question ?
top related