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

サイト、ツール、ライブラリなどはこちらをご参照ください:

http://dynamis.jp/r

このスライドの見方 こんなスライドが基本スタイル 可読性のため下線なしリンクも コードは要点だけ残した簡略版

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