Firefox5+HTML5×5

Firefox5 + HTML5 × 5 Slides @ Mozilla & NSEG @ Nagano by Tomoya ASAI (dynamis) last update on 2011.07.23 see also: http://dynamis.jp/r

Tomoya ASAI (dynamis) Mozilla Japan - Technical mktg. http://dynamis.jp/ http://facebook.com/dynamis http://twitter.com/dynamitter [email protected] ( dunamis)

Agenda

Agenda about:Mozilla Firefox5 + HTML5 Multimedia Tags Animations Web Apps Network Security

Facebook Twitter

about:mozilla.com brain .org heart

http://www.ﬂickr.com/photos/intothefuzz/5577427601/

: http://www.mozilla.org/about/manifesto.ja.html

HTML5 FeaturesNew HTML...

Theora Firefox 3.5~, WebM Firefox4~

<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"/></video><video controls poster="posterframe.jpg"> ... </video><video controls preload="auto"> ... </video> autobuffer preload

<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> http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-ﬁrefox-4/

<video src="video-with-track.xxx"> <track src="track.vtt" srclng="ja"/></video><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> https://developer.mozilla.org/en/HTML/Element/track

http://www.mirovideoconverter.com/

Mozilla & HTML5 α https://dev.mozilla.jp/events/workshop09/

Xiph.Org On2 Tech. Google VP3 OggTheora VP4Vorbis VP5 VP6 WebM Ogg VP7 Matroska VP8 VP8 Vorbis Container Video Audio WebM FAQ: http://www.webmproject.org/about/faq/

http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/ OSS

MS MPEG-LA FUD

https://tools.google.com/dlpage/webmmfhttp://www.interoperabilitybridges.com/html5-extension-for-wmp-plugin http://www.videolan.org/vlc/download-macosx.html

http://vid.ly/

http://www.w3.org/2005/Incubator/audio/

<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> http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-ﬁrefox-4/

http://twitter.com/cherenkov/status/21614170698

AnimationsJavaScript or not JS?

setTimeout()/setInterval()

http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html

https://developer.mozilla.org/en/Canvas_tutorial

http://www.w3.org/TR/html5/the-canvas-element.html#security-with-canvas-elements

http://googlecode.blogspot.com/2011/05/creating-2d-games-with-javascript-html5.html

http://muizelaar.blogspot.com/2011/02/drawing-sprites-canvas-2d-vs-webgl.html

http://processingjs.org/http://code.google.com/p/cakejs/http://www.highcharts.com/http://graph.tk/http://thejit.org/

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

animateColor https://bugzilla.mozilla.org/show_bug.cgi?id=436296

http://raphaeljs.com/http://g.raphaeljs.com/http://blogs.msdn.com/b/ie/archive/2011/04/22/thoughts-on-when-to-use-canvas-and-svg.aspxhttp://www.codedread.com/svg-support.php

Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions

#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);} http://hacks.mozilla.org/2010/07/ﬁrefox4-beta2/

Firefox 5~ https://developer.mozilla.org/en/CSS/CSS_animations

http://www.khronos.org/webgl/

<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> http://webos-goodies.jp/archives/getting_started_with_webgl.html

https://dev.mozilla.jp/2011/06/a-three-dimensional-platform/

http://scenejs.org/http://www.glge.org/https://github.com/mrdoob/three.jshttps://github.com/cjcliffe/CubicVR.js/ : http://www.khronos.org/webgl/wiki/User_Contributions

Web AppsWeb Platform

window.addEventListener("online", function() // オンラインになった時の処理}, true);window.addEventListener("offline", function() { // オフラインになったときの処理}, true);

// セッションをまた保持するデータlocalStorage.dataname = "datavalue";// ブラウザ終了するまで一時的に保存sessionStorage.dataname = "datavalue"; DOM Storage

<!DOCTYPE html><html manifest="myapp.manifest" lang="ja"> myapp.manifest CACHE MANIFEST images/firefox.png images/thunderbird.png NETWORK: dont-cache-this.php CACHE: cache-this-too.html

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

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

https://dev.mozilla.jp/hacksmozillaorg/history-api-changes-in-ﬁrefox-4/

// <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-ﬁrefox-4/

NetworkConnect with you...

// 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."); } https://dev.mozilla.jp/hacksmozillaorg/websockets-in-ﬁrefox/

Securitymore Secure Web...

https://developer.mozilla.org/ja/Introducing_Content_Security_Policy

// 全コンテンツを同一ドメインのみ (サブドメインも不可)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

// 画像は任意サイト、メディアファイルと JS は指定サイトに限定X-Content-Security-Policy: default-src self; img-src *; (実際は改行なし) media-src video.tld audio.tld; (実際は改行なし) script-src script.tld;// 自身と *.mail.jp は全許可、他サイトは画像のみに制限// スクリプトなど指定していないものは default-src と同じX-Content-Security-Policy: defaut-src self *.mail.jp; (実際は改行なし) img-src * https://developer.mozilla.org/en/Security/CSP/Using_Content_Security_Policy

// dynamis.jp のページからはこのサイトの読み込み許可Access-Control-Allow-Origin: http://dynamis.jp// 任意サイトからの読み込みを許可 (公開 API などに)Access-Control-Allow-Origin: * https://developer.mozilla.org/en/http_access_control

http://r.dynamis.jp/mozhacks

Any Question ?

Firefox5+HTML5×5

by dynamis ., Technical Marketing at Mozilla on Jul 24, 2011

Statistics

Views

Actions

2 Embeds 3

Accessibility

Categories

Upload Details

Usage Rights

Report content

Firefox5+HTML5×5 Presentation Transcript

http://s.deeeki.com	2
http://tweetedtimes.com	1