Firefox5+HTML5×5
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Firefox5+HTML5×5

  • 5,006 views
Uploaded on

Mozilla & NSEG@長野 で使用したスライド ...

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,006
On Slideshare
5,003
From Embeds
3
Number of Embeds
2

Actions

Shares
Downloads
11
Comments
0
Likes
1

Embeds 3

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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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