Firefox5 + HTML5 × 5  Slides @ Mozilla & NSEG @ Nagano      by Tomoya ASAI (dynamis)                   last update on 2011...
Tomoya ASAI (dynamis)       Mozilla Japan - Technical mktg.       http://dynamis.jp/       http://facebook.com/dynamis    ...
Agenda
Agenda         about:Mozilla         Firefox5 + HTML5           Multimedia Tags           Animations           Web Apps   ...
Facebook   Twitter
about:mozilla.com brain .org heart
http://www.flickr.com/photos/intothefuzz/5577427601/
http://www.flickr.com/photos/intothefuzz/5578011308/
: http://www.mozilla.org/about/manifesto.ja.html
http://www.flickr.com/photos/intothefuzz/5577430083/
HTML5 FeaturesNew HTML...
Theora   Firefox 3.5~, WebM   Firefox4~
<!--	 互換性を考慮したマークアップ	 --><video	 controls>	 	 <source	 src="video.webm"	 type="video/webm"/>	 	 <source	 src="video.ogg"	 ...
<!--	 読み込み済み(キャッシュ)範囲を読み取る	 --><video	 id="longvideo"	 src="video.ogv"	 ...	 >	 ...	 </video><script>var	 video = document...
<!--	 Firefox6	 で	 DOM	 API	 のみ実装(表示はまだ)	 --><video	 src="video-with-track.xxx">	 	 <track	 src="track.vtt"	 srclng="ja"/>...
http://www.mirovideoconverter.com/
Mozilla & HTML5   α      https://dev.mozilla.jp/events/workshop09/
Mozilla & HTML5   α      https://dev.mozilla.jp/events/workshop09/
Xiph.Org          On2 Tech.               Google                    VP3 OggTheora              VP4Vorbis              VP5 ...
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://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.get...
http://twitter.com/cherenkov/status/21614170698
AnimationsJavaScript or not JS?
setTimeout()/setInterval()
http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
var	 d	 =	 document.getElementById("d");	 //	 動かす対象要素var	 start	 =	 window.mozAnimationStartTime;function	 step(event)	 {	...
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	...
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-a...
Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
#somebox {  color: black; background-color: yellow;  /* すべてのスタイルを2秒かけて変化、開始はなめらかに */  -moz-transition: all 2s ease-in;  tr...
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("glc...
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/          ...
Web AppsWeb Platform
window.addEventListener("online",	 function()	 	 	 //	 オンラインになった時の処理},	 true);window.addEventListener("offline",	 function...
//	 セッションをまた保持するデータlocalStorage.dataname	 =	 "datavalue";//	 ブラウザ終了するまで一時的に保存sessionStorage.dataname	 =	 "datavalue";     ...
<!DOCTYPE html><html manifest="myapp.manifest" lang="ja">               myapp.manifest                CACHE	 MANIFEST     ...
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.addEventListene...
https://dev.mozilla.jp/hacksmozillaorg/history-api-changes-in-firefox-4/
//	 <button	 id="button">Save	 Current	 State</button>var	 button	 =	 document.getElementById("link");button.addEventListe...
NetworkConnect with you...
//	 WebSocket	 の接続を開始var	 socket	 =	 new	 MozWebSocket(url	 /*	 ,protocol	 */);//	 on***	 イベントハンドラを設定socket.onopen	 =	 fun...
Securitymore Secure Web...
https://developer.mozilla.org/ja/Introducing_Content_Security_Policy
//	 全コンテンツを同一ドメインのみ	 (サブドメインも不可)X-Content-Security-Policy:	 default-src	 self//	 自身と	 dynamis.jp	 のサブドメインのみ許可X-Content-Sec...
//	 画像は任意サイト、メディアファイルと	 JS	 は指定サイトに限定X-Content-Security-Policy:	 default-src	 self;	 img-src	 *;	 	 (実際は改行なし)	 	 	 	 media...
//	 dynamis.jp	 のページからはこのサイトの読み込み許可Access-Control-Allow-Origin:	 http://dynamis.jp//	 任意サイトからの読み込みを許可	 (公開	 API	 などに)Acces...
http://r.dynamis.jp/mozhacks
Any Question ?
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Firefox5+HTML5×5
Upcoming SlideShare
Loading in...5
×

Firefox5+HTML5×5

4,541

Published on

Mozilla & NSEG@長野 で使用したスライド
https://dev.mozilla.jp/events/workshop10/

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,541
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Firefox5+HTML5×5

  1. 1. Firefox5 + HTML5 × 5 Slides @ Mozilla & NSEG @ Nagano by Tomoya ASAI (dynamis) last update on 2011.07.23 see also: http://dynamis.jp/r
  2. 2. Tomoya ASAI (dynamis) Mozilla Japan - Technical mktg. http://dynamis.jp/ http://facebook.com/dynamis http://twitter.com/dynamitter dynamis@mozilla-japan.orgdynamis ( dunamis)
  3. 3. Agenda
  4. 4. Agenda about:Mozilla Firefox5 + HTML5 Multimedia Tags Animations Web Apps Network Security
  5. 5. Facebook Twitter
  6. 6. about:mozilla.com brain .org heart
  7. 7. http://www.flickr.com/photos/intothefuzz/5577427601/
  8. 8. http://www.flickr.com/photos/intothefuzz/5578011308/
  9. 9. : http://www.mozilla.org/about/manifesto.ja.html
  10. 10. http://www.flickr.com/photos/intothefuzz/5577430083/
  11. 11. HTML5 FeaturesNew HTML...
  12. 12. Theora Firefox 3.5~, WebM Firefox4~
  13. 13. <!-- 互換性を考慮したマークアップ --><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> autobuffer preload
  14. 14. <!-- 読み込み済み(キャッシュ)範囲を読み取る --><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-firefox-4/
  15. 15. <!-- 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><!-- --> https://developer.mozilla.org/en/HTML/Element/track
  16. 16. http://www.mirovideoconverter.com/
  17. 17. Mozilla & HTML5 α https://dev.mozilla.jp/events/workshop09/
  18. 18. Mozilla & HTML5 α https://dev.mozilla.jp/events/workshop09/
  19. 19. 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/
  20. 20. http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/ OSS
  21. 21. MS MPEG-LA FUD
  22. 22. https://tools.google.com/dlpage/webmmfhttp://www.interoperabilitybridges.com/html5-extension-for-wmp-plugin http://www.videolan.org/vlc/download-macosx.html
  23. 23. http://vid.ly/
  24. 24. http://www.w3.org/2005/Incubator/audio/
  25. 25. <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-firefox-4/
  26. 26. http://twitter.com/cherenkov/status/21614170698
  27. 27. AnimationsJavaScript or not JS?
  28. 28. setTimeout()/setInterval()
  29. 29. http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
  30. 30. http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
  31. 31. 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
  32. 32. https://developer.mozilla.org/en/Canvas_tutorial
  33. 33. http://www.w3.org/TR/html5/the-canvas-element.html#security-with-canvas-elements
  34. 34. http://googlecode.blogspot.com/2011/05/creating-2d-games-with-javascript-html5.html
  35. 35. http://muizelaar.blogspot.com/2011/02/drawing-sprites-canvas-2d-vs-webgl.html
  36. 36. http://processingjs.org/http://code.google.com/p/cakejs/http://www.highcharts.com/http://graph.tk/http://thejit.org/
  37. 37. https://developer.mozilla.org/en/SVG/SVG_animation_with_SMIL
  38. 38. 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>
  39. 39. animateColor https://bugzilla.mozilla.org/show_bug.cgi?id=436296
  40. 40. 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
  41. 41. Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
  42. 42. #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/firefox4-beta2/
  43. 43. Firefox 5~ https://developer.mozilla.org/en/CSS/CSS_animations
  44. 44. http://www.khronos.org/webgl/
  45. 45. <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
  46. 46. https://dev.mozilla.jp/2011/06/a-three-dimensional-platform/
  47. 47. 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
  48. 48. Web AppsWeb Platform
  49. 49. window.addEventListener("online", function() // オンラインになった時の処理}, true);window.addEventListener("offline", function() { // オフラインになったときの処理}, true);
  50. 50. // セッションをまた保持するデータlocalStorage.dataname = "datavalue";// ブラウザ終了するまで一時的に保存sessionStorage.dataname = "datavalue"; DOM Storage
  51. 51. <!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
  52. 52. https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
  53. 53. // <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/
  54. 54. https://dev.mozilla.jp/hacksmozillaorg/history-api-changes-in-firefox-4/
  55. 55. // <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/
  56. 56. NetworkConnect with you...
  57. 57. // 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-firefox/
  58. 58. Securitymore Secure Web...
  59. 59. https://developer.mozilla.org/ja/Introducing_Content_Security_Policy
  60. 60. // 全コンテンツを同一ドメインのみ (サブドメインも不可)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
  61. 61. // 画像は任意サイト、メディアファイルと 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
  62. 62. // dynamis.jp のページからはこのサイトの読み込み許可Access-Control-Allow-Origin: http://dynamis.jp// 任意サイトからの読み込みを許可 (公開 API などに)Access-Control-Allow-Origin: * https://developer.mozilla.org/en/http_access_control
  63. 63. http://r.dynamis.jp/mozhacks
  64. 64. Any Question ?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×