Download - Firefox5+HTML5×5
![Page 1: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/1.jpg)
Firefox5 + HTML5 × 5Slides @ Mozilla & NSEG @ Nagano
by Tomoya ASAI (dynamis)
last update on 2011.07.23see also: http://dynamis.jp/r
![Page 2: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/2.jpg)
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) は「でゅなみす」と読みます
![Page 3: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/3.jpg)
Firefox 5 & HTML5時代の Web 技術
注目の Web 技術を 5 つの視点で(CSS/Design 系は天野さんにおまかせ)
![Page 4: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/4.jpg)
Agenda
![Page 5: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/5.jpg)
about:Mozilla Firefox5 + HTML5
Multimedia Tags Animations Web Apps Network Security
Agenda
![Page 7: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/7.jpg)
このスライドの見方 こんなスライドが基本スタイル 可読性のため下線なしリンクも コードは要点だけ残した簡略版
-moz- 以外の接頭辞など割愛
右下には補足や一次情報源 URL
何かあれば遠慮無く Facebook や Twitter でコンタクトしてください
画像からも時々リンクしてます
![Page 8: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/8.jpg)
about:mozilla.com brain .org heart
![Page 9: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/9.jpg)
http://www.flickr.com/photos/intothefuzz/5577427601/
![Page 10: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/10.jpg)
about:Firefox Firefox の意義
オープンで適切な実装の提供 Firefox の目的
公共のリソースとしてのインターネットの発展を促進
![Page 11: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/11.jpg)
http://www.flickr.com/photos/intothefuzz/5578011308/
![Page 12: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/12.jpg)
.com brains - 会社組織 営利企業同様の開発スタイル
.org heart - 非営利組織 より良いインターネット環境へ 社員より遙かに多い貢献者
about:Mozilla
マニフェスト: http://www.mozilla.org/about/manifesto.ja.html
![Page 13: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/13.jpg)
http://www.flickr.com/photos/intothefuzz/5577430083/
![Page 14: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/14.jpg)
HTML5 FeaturesNew HTML...
![Page 15: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/15.jpg)
HTML5 Video 実用的になったビデオサポート
GPU も活用して低負荷再生 体感速度に直結する機能に注意
ポスターフレーム 自動バッファ制御
Theora は Firefox 3.5~, WebM は Firefox4~
![Page 16: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/16.jpg)
<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>
![Page 17: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/17.jpg)
<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>
![Page 18: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/18.jpg)
<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
![Page 19: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/19.jpg)
WebM ビデオの作り方 Miro Video Converter
ドラッグ&ドロップするだけ ffmpeg コマンド
ffmpeg -i in.avi -f webm out.webm
http://www.mirovideoconverter.com/
![Page 20: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/20.jpg)
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/
![Page 21: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/21.jpg)
Open Video と特許問題 Web に「税金」はいらない
そのための Web 標準 WebM はライセンスフリー H.264 は MPEG-LA が特許管理 フリーにならない限り採用不可
このへんは Mozilla & HTML5+α@福岡のセッションも参照https://dev.mozilla.jp/events/workshop09/
![Page 22: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/22.jpg)
On2 Tech.VP3
Xiph.Org Google
OggVP4TheoraVP5VP6VP7VP8
Container
Vorbis
Matroska
VorbisVP8
AudioVideo
WebM
ロイヤリティフリーWebM プロジェクト FAQ: http://www.webmproject.org/about/faq/
Ogg
![Page 23: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/23.jpg)
H.264 がフリーになった? 無料動画配信のみがフリーに
有料配信や Codec ソフトは有償 W3C 的にも OSS 的にも問題外
MPEG-LA 側が譲らない限りWeb 標準になる事はあり得ない
http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/自社だけライセンス料払って OSS 業界は無視とかあり得ない
![Page 24: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/24.jpg)
WebM は特許問題が不安? H.264 も特許問題への保障なし
GIF はサブマリン特許で訴訟 MP3 は特許権利者問題で訴訟
H.264 も WebM も同じこと MPEG-LA の特許プール範囲は
WebM も問題にならないはず
MS や MPEG-LA などが展開する FUD でしょ
![Page 25: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/25.jpg)
プラグインで再生 互いに相手ブラウザ向けに推進
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
![Page 26: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/26.jpg)
エンコード面倒なら vid.ly 共通 URL で全端末対応
UP すれば各種形式に自動変換 ogg, mp4, mov, 3gp...
他にも YouTube に UP して webm 変換させるという手も...
http://vid.ly/
![Page 27: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/27.jpg)
Audio Data API Video は Canvas に取得可能 Audio も取得や生成可能に W3C にて標準化予定
試験実装 API について: https://wiki.mozilla.org/
Audio_Data_API
http://www.w3.org/2005/Incubator/audio/
![Page 28: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/28.jpg)
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>
![Page 29: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/29.jpg)
Audio Data API の用途 Fourier 変換して周波数分解 フィルタ、ミキサ、イコライザ そして勿論 DSP や音声合成...
http://twitter.com/cherenkov/status/21614170698
![Page 30: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/30.jpg)
AnimationsJavaScript or not JS?
![Page 31: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/31.jpg)
アニメーションいろいろ
![Page 32: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/32.jpg)
アニメーションいろいろ JavaScript Animation Canvas 2D SVG & SMIL CSS Transisions CSS Animations WebGL
![Page 33: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/33.jpg)
JavaScript Animation setTimeout() でループ処理 多数のタイマー回すと重くなる バックグラウンドでも重くなる
![Page 34: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/34.jpg)
JS Timer 間隔の変更 setTimeout Timer の最小値
HTML5 で 4ms と規定された IE9, Fx5, WebKit: 4ms に統一 IE9 は Canvas 操作時短い(バグ)
IE9 バッテリー動作時 10~15ms Firefox 5, Chrome 11 以降アク
ティブタブ以外は最大1回/秒setTimeout()/setInterval() などの時間間隔に依存しないように
![Page 35: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/35.jpg)
RequestAnimationFrame 無駄なく省電力アニメーション
setTimeout では最大 250fps? 実際の画面表示は最大 60fps
Transition などと JS の同期 JS 以外のアニメーションと同期
jQuery などは対応済み
http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
![Page 36: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/36.jpg)
RequestAnimationFrame 使い方は極めてシンプル
setTimeout() の代わりにmozRequestAnimationFrame()
Date.now() の代わりにmozAnimationStartTime とevent.timeStamp
http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html
![Page 37: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/37.jpg)
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
![Page 38: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/38.jpg)
Canvas 2D JavaScript API で描画
点、線、弧、矩形、影、画像、テキストなど自由に描画
https://developer.mozilla.org/en/Canvas_tutorial
![Page 39: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/39.jpg)
Canvas 使用時の注意 Same Origin Policy に注意 toDataURL(), getImageData()
他サイトの画像を DrawImage()した後で使用するとエラー
measureText() 他サイトのフォントを使用する
場合に呼び出すとエラー
http://www.w3.org/TR/html5/the-canvas-element.html#security-with-canvas-elements
![Page 40: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/40.jpg)
Canvas とパフォーマンス 細かく編集より一度に編集
小さな領域を何度も書き換えるより大きな領域を一度に描画
レイヤーを重ねて使う 激しく動くモノと動きの少ない
背景がある場合レイヤーに分離することで書き換えを少なく
よく使う要素はキャッシュhttp://googlecode.blogspot.com/2011/05/creating-2d-games-with-javascript-html5.html
![Page 41: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/41.jpg)
Canvas とパフォーマンス 位置座表は整数値で保持
浮動小数点演算は遅い Transitions との同時使用に注意
GPU 描画モードとの切り替えオーバーヘッドに要注意
最終手段は WebGL 採用 一般に WebGL の方が高速
http://muizelaar.blogspot.com/2011/02/drawing-sprites-canvas-2d-vs-webgl.html
![Page 42: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/42.jpg)
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/
![Page 43: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/43.jpg)
SVG Animation SVG のアニメーション機能
<animate>, <set> などで定義 GPU を用いた高速処理 IE9 のみ未サポート
「SVG を使ったアニメ」とは別 独自の類似仕様 HTML+TIME
https://developer.mozilla.org/en/SVG/SVG_animation_with_SMIL
![Page 44: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/44.jpg)
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>
ちょっとややこしいので手では書きたくないですね
![Page 45: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/45.jpg)
SMIL 使用時の注意 <animateColor> は使わない
上位互換の <animate> を使う 仕様の不備により非サポート
モバイルでの対応状況に注意 Android 2.x の「ブラウザ」は
Chrome と違い非サポート
animateColor について https://bugzilla.mozilla.org/show_bug.cgi?id=436296
![Page 46: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/46.jpg)
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
![Page 47: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/47.jpg)
CSS Transitions スタイル遷移をなめらかに 簡単にアニメーションできる GPU を用いた高速処理
今日は詳細割愛します
Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
![Page 48: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/48.jpg)
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);}
![Page 49: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/49.jpg)
CSS Animations Transitions を連続する機能
キーフレーム毎のスタイルを指定 CSS だけでアニメーション GPU を用いた高速処理
今日は詳細割愛します
Firefox 5~ https://developer.mozilla.org/en/CSS/CSS_animations
![Page 50: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/50.jpg)
WebGL <Canvas> の 3D コンテキスト OpenGL ES2.0 相当の API
携帯用 GPU も広くサポート 2D でも高速アニメーションに
http://www.khronos.org/webgl/
![Page 51: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/51.jpg)
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>
![Page 52: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/52.jpg)
WebGL アブナイ? 新技術に懸念があるのは常
安全を維持する開発が続いてる IE なんて jpeg/avi でも...
Silverlight も Flash も同じ 基本的に同様に 3D 対応 足引っ張ってないで協力して...
https://dev.mozilla.jp/2011/06/a-three-dimensional-platform/
![Page 53: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/53.jpg)
IE でも WebGL IEWebGL プラグイン
http://iewebgl.com/
JebGL (Java アプレット) http://code.google.com/p/jebgl/
![Page 54: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/54.jpg)
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
![Page 55: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/55.jpg)
アニメーション使い分け Canvas
コードさえ書けば何でも可能 SVG & SMIL
オブジェクト操作に便利 CSS Transitions/Animations
ブラウザが自動で高速処理 WebGL
高速アニメーションの最終兵器
![Page 56: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/56.jpg)
Canvas が適した処理 ピクセル単位の描画・編集
領域に比例して重くなる! 細かく高速なアニメーション コード書くのは面倒 画像のコピー (drawImage) など限られた処理だけ GPU 活用
![Page 57: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/57.jpg)
SVG が適した処理 拡大しても滑らかな画像 フィルタ処理や切り抜きも簡単 ユーザインタラクティブな処理 DOM イベントに対する処理 hover イベントには特に便利
![Page 58: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/58.jpg)
CSS が適した処理 簡単な事は簡単に書ける スタイル変化のアニメーション 回転や歪みは Transition GPU 処理で高速化も
![Page 59: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/59.jpg)
WebGL が適した処理 3D グラフィック (当然) ゲームなどでの高速処理 ライブラリも増えてきた iAd (iOS では広告でのみ利用可)
![Page 60: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/60.jpg)
Web AppsWeb Platform
![Page 61: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/61.jpg)
オフラインサポート オフラインイベント
ネットの接続、切断を検出 DOM Storage
Database 別途 Indexed DB 仕様 アプリケーションキャッシュ
指定ファイルを先読み
![Page 62: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/62.jpg)
オフラインイベント
ネットワークの有無を検出して処理
window.addEventListener("online", function() // オンラインになった時の処理}, true);
window.addEventListener("offline", function() { // オフラインになったときの処理}, true);
![Page 63: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/63.jpg)
DOM Storage// セッションをまた保持するデータlocalStorage.dataname = "datavalue";
// ブラウザ終了するまで一時的に保存sessionStorage.dataname = "datavalue";
オフライン時のデータ保持は DOM Storage が便利
![Page 64: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/64.jpg)
アプリケーションキャッシュ
myapp.manifestCACHE MANIFESTimages/firefox.pngimages/thunderbird.pngNETWORK:dont-cache-this.phpCACHE:cache-this-too.html
<!DOCTYPE html><html manifest="myapp.manifest" lang="ja">
オフラインで必要になるファイルを列挙しておく
![Page 65: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/65.jpg)
SQL DB の標準化は断念 SQLite 実装依存では仕様には...
そもそも Web に SQL が最良? シンプルな IndexedDB に移行
IndexedDB 上に SQL 構築も?
![Page 66: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/66.jpg)
HTML5 History ブラウザ履歴制御 API
戻る進む、履歴追加、URL 変更 履歴状態データの保存と取得
pushState() と history.state popState() の利用には要注意
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
![Page 67: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/67.jpg)
ページ遷移せず 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/
![Page 68: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/68.jpg)
History の仕様変更 Mozilla の提案で最近仕様変更 常に参照可能な history.state popState() のダメ仕様修正
onload 後の発火じゃ遅すぎ... Safari のバグ実装も考慮...
https://dev.mozilla.jp/hacksmozillaorg/history-api-changes-in-firefox-4/
![Page 69: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/69.jpg)
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/
![Page 70: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/70.jpg)
NetworkConnect with you...
![Page 71: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/71.jpg)
WebSockets サーバとの双方向通信
ブラウザ間の P2P 機能はない リアルタイム Web などに
通信オーバーヘッドが少ない 大半の用途は他の技術でも...
SSE, multipart Ajax...
![Page 72: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/72.jpg)
WebSockets 仕様策定状況 JS API 仕様はほぼ確定 プロトコル仕様ももうすぐ安定
Firefox 6 は ietf-07 サポート 接頭辞付きの MozWebSocket 他は古い hixie-76 をサポート
![Page 73: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/73.jpg)
WebSocket のセキュリティ ietf-04 でセキュリティ問題修正
一部プロキシが誤動作する問題 Client-to-Server Masking
HandShake で masking-key 共有 data XOR masking-key を送信
![Page 74: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/74.jpg)
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."); }
![Page 75: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/75.jpg)
Securitymore Secure Web...
![Page 76: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/76.jpg)
Content Security Policy 次世代セキュリティポリシー
許可ドメインとポートを指定 Same Origin Policy はもう古い
画像や JS の読み込み先も制御 XSS などの攻撃を防止
WebKit も実装取り組み中
https://developer.mozilla.org/ja/Introducing_Content_Security_Policy
![Page 77: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/77.jpg)
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
![Page 78: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/78.jpg)
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
![Page 79: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/79.jpg)
デフォルトセキュリティポリシー インライン JS/CSS 禁止
JS/CSS は外部ファイルに限る イベントハンドラなども不可
eval() などで文字列評価禁止 Function や setTimeout も同じ
現在のところこれらを許可する方法は仕様草案にはあるが未実装
![Page 80: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/80.jpg)
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: *
![Page 81: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/81.jpg)
...
![Page 82: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/82.jpg)
もっと詳しく... Mozilla Hacks Blog を参照 他にももっと色々書いてます 日本語訳は modest にて http://r.dynamis.jp/mozhacks
![Page 83: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/83.jpg)
![Page 84: Firefox5+HTML5×5](https://reader035.vdocument.in/reader035/viewer/2022070303/54953e09b4795976588b4603/html5/thumbnails/84.jpg)
Any Question ?