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

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.org
dynamis ( dunamis)

4. Agenda

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

7. Facebook Twitter

8. about:mozilla
.com brain .org heart

9. http://www.flickr.com/photos/intothefuzz/5577427601/

11. http://www.flickr.com/photos/intothefuzz/5578011308/

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

13. http://www.flickr.com/photos/intothefuzz/5577430083/

14. HTML5 Features
New HTML...

15. Theora Firefox 3.5~, WebM Firefox4~

16. <!-- 互換性を考慮したマークアップ -->
<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

17. <!-- 読み込み済み(キャッシュ)範囲を読み取る -->
<video id="longvideo" src="video.ogv" ... > ... </video>
<script>
var video = document.getElementById("longvideo");
var ranges = video.buffered; // バッファ済み TimeRanges
for (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/

18. <!-- 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

19. http://www.mirovideoconverter.com/

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

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

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

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

24. MS MPEG-LA FUD

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

26. http://vid.ly/

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

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

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

30. Animations
JavaScript or not JS?

34. setTimeout()/setInterval()

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

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

37. 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

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

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

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

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

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

43. https://developer.mozilla.org/en/SVG/SVG_animation_with_SMIL

44. 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>

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

46. 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.aspx
http://www.codedread.com/svg-support.php

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

48. #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/

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

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

51. <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

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

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

60. Web Apps
Web Platform

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

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

64. <!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

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

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

68. https://dev.mozilla.jp/hacksmozillaorg/history-api-changes-in-firefox-4/

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

70. Network
Connect with you...

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

75. Security
more Secure Web...

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

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

78. // 画像は任意サイト、メディアファイルと 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

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

82. http://r.dynamis.jp/mozhacks

84. Any Question ?