Your SlideShare is downloading. ×
0
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
HTML5 in Firefox4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 in Firefox4

15,971

Published on

HTML5などなど次世代Web勉強会 in 福井での講演スライド …

HTML5などなど次世代Web勉強会 in 福井での講演スライド
http://kokucheese.com/event/index/5492/
# 公開用に多少編集したものです

Published in: Technology, Design
1 Comment
8 Likes
Statistics
Notes
  • Did not explain so useless
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
15,971
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
33
Comments
1
Likes
8
Embeds 0
No embeds

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. "HTML5" in Firefox4 Slides @ HTML5 NadoNado in Fukui by Tomoya ASAI (aka. dynamis) Fractal Firefox Background Image: http://r.dynamis.jp/fractalfx
  • 2. about:me dynamis (でゅなみす) 浅井 智也 (あさいともや) Mozilla Tech Evangelist http://r.dynamis.jp/presen dynamis mozilla-japan.org twitter: @dynamitter @ ギリシャ語由来なので「だいなみす」と英語読みはしないでね
  • 3. Firefox 4 で見る HTML5 時代の Web 技術 HTML5 だけじゃないのがポイント...
  • 4. 比較的見て分かり易い 技術を中心に紹介します 時間の都合で個々の技術解説あまり詳しくできないけどご容赦を...
  • 5. HTML5 とは? HTML5 時代の Web 技術 for Web Design for Native Multimedia for Application Platform Agenda
  • 6. まずはやはり...
  • 7. 資料だけ見てる方はゴメンナサイ...
  • 8. demo... 資料だけ見てる方はゴメンナサイ...
  • 9. 今のは実は...
  • 10. HTML5 ではありません
  • 11. HTML5 ではありません Flash でもありません AIR でもありません Silverlight でもありません
  • 12. それでは。(・・).
  • 13. HTML5 って何?
  • 14. 仕様書に書いてあります
  • 15. This specification evolves HTML and its related APIs to ease the authoring of Web-based applications. http://whatwg.org/html5 - Abstract より
  • 16. http://whatwg.org/html5 - Abstract より この仕様では Web アプリケー ションを記述しやすくするため HTML と関連 API を発展させる
  • 17. http://whatwg.org/html5 - Abstract より この仕様では Web アプリケー ションを記述しやすくするため HTML と関連 API を発展させる
  • 18. Web アプリケーション... 文書を共有するだけでなく... メールや地図を見るのも... テレビやゲームも... 仕事や授業も...
  • 19. これまでの問題は... ブラウザの独自実装 実装まかせの曖昧な仕様 不安定、低機能、低速
  • 20. HTML5 の目的は... 既存の独自実装を標準化 これから必要な機能は追加 本格的なアプリ実行環境に
  • 21. http://whatwg.org/html5 - Abstract より この仕様では Web アプリケー ションを記述しやすくするため HTML と関連 API を発展させる
  • 22. HTML と関連 API?
  • 23. HTML の基本はタグ... マークアップ (タグと意味) (X)HTML 構文とパーサ MicroData (セマンティクス) SVG や MathML との連携
  • 24. マルチメディアサポート... Audio/Video タグのサポート 自由に描画する領域 Canvas Canvas への二次元描画 API
  • 25. 関連 API って何? イベントやインターフェイス Drag & Drop や Undo/Redo オフラインイベント 履歴とナビゲーション ドキュメント間通信
  • 26. http://whatwg.org/html5 - Abstract より この仕様では Web アプリケー ションを記述しやすくするため HTML と関連 API を発展させる
  • 27. 再出発ではなく段階的発展 互換性を維持した発展 HTML4 の発展だから HTML5 理想的転換ではなく現実的発展
  • 28. It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, ... all at once didn't work. Tim Berners-Lee の言葉: http://dig.csail.mit.edu/breadcrumbs/node/166
  • 29. HTML は段階的に発展さ せる必要がある。... すべて を一度に切り替えようとい う試みは成功しなかった。 Tim Berners-Lee の言葉: http://dig.csail.mit.edu/breadcrumbs/node/166
  • 30. 互換性を尊重 既存実装を考慮した仕様策定 構文エラー処理など詳細に定義 非互換の原因を最小限に
  • 31. The drag-and-drop API is horrible, but it has one thing going for it: IE6 implements it, as do Safari and Firefox. Ian Hickson の言葉 http://twitter.com/Hixie/status/4075253361
  • 32. Drag & Drop API は酷いけど、採用する理由 がひとつある。つまり、IE6 だけでなく Safari や Firefox でも実装されているということだ。 Ian Hickson の言葉 http://twitter.com/Hixie/status/4075253361
  • 33. HTML5 は次世代への第一歩 技術的には小さな一歩 既存技術の整理が主 協力関係は大きな変化 業界全体が標準を推進
  • 34. HTML5 & "HTML5"
  • 35. HTML5 の範囲は...
  • 36. 仕様書に書いてあります WAHTWG の HTML5 仕様書 分割して W3C でも標準化 W3C 仕様名に "HTML" を含む WHATWG は整合性重視 W3C はモジュール指向 ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
  • 37. どこまで HTML5? Web Workers Web Storage The WebSockets API Server-Sent Events Geolocation API XMLHttpRequest Level 2 Canvas 2D Forms File API SVG Drag & Drop API Indexed Database API Microdata Cross-document Messaging WebGL WebFonts Event Listener Microformats CSS3 Transitions ECMAScript 5th Offline Events HTML5 Markup WebM (VP8) Codec XPath
  • 38. どこまで HTML5? Web Workers Web Storage The WebSockets API Server-Sent Events Geolocation API XMLHttpRequest Level 2 Canvas 2D Forms File API SVG Drag & Drop API Indexed Database API Microdata Cross-document Messaging WebGL WebFonts Event Listener Microformats CSS3 Transitions ECMAScript 5th Offline Events HTML5 Markup WebM (VP8) Codec XPath WHATWG 仕様書の定義による Canvas はタグの定義だけが HTML5
  • 39. 次世代 Web 標準技術 (バズワードとしての "HTML5") Web Applications 1.0 Next Generation of HTML WHATWG - HTML5 要素とタグの定義 デザイン機能 (CSS) Microdata (メタデータ) Events & Messaging (通信) Web ブラウザ向け機能 ... device 要素, ping 属性 ... 高度なアプリケーション機能Web Workers Web Sockets Indexed Database API レイアウトと装飾 Web Fonts CSS Images (Gradients ...) CSS 2D Transforms CSS Media Queries Web Storage Audio Data API SVG SMIL MathML WebGL
  • 40. Web Workers The WebSocket protocol Web Storage The WebSockets API Server-Sent Events 注目されている関連仕様の一部を標準化団体別に色分け Geolocation API XMLHttpRequest Level 2 Next Generation of HTML WHATWG - HTML5 Canvas 2D Graphics Context Microdata Microdata vocabularies Cross-document messaging Channel messaging Forms <device> SVG MathML Indexed Database API ping="" timed track HTML→Atom Audio Data API Touch Events WHATWG Spec W3C Spec Non Standard凡例: CSS3 XPath Device Orientation Event
  • 41. 仕様書で HTML5 として定義されている範囲のはこれだけ WHATWG - HTML5 Canvas 2D Graphics Context Microdata Microdata vocabularies Cross-document messaging Channel messaging HTML5 Parser W3C - HTML5 HTML5 Parser HTML5 Web Messaging HTML5 Microdata HTML Canvas 2D Context Drag & Drop API Offline Events Event model & APIs HTML5 Forms Multimedia Elements Drag & Drop API Offline Events Event model & APIs HTML5 Forms Multimedia Elements Semantic Elements Semantic Elements
  • 42. HTML & "HTML5" HTML5 は仕様書の定義 "HTML5" は次世代技術の総称 "HTML5" = HTML5 & ALL バズワードのご利用は程々に...
  • 43. HTML5 時代の Web 技術 HTML5 が使える時代 HTML5 が注目される時代 誤りではないぼかした表現
  • 44. Web Design CSS, Image, Fonts...
  • 45. Web Fonts ダウンロードフォント Firefox 3.6 からは WOFF も IE9 なども WOFF サポート WOFF = Web用圧縮フォント Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face
  • 46. 日本語 Web Fonts http://decomoji.jp/ 商用サービス「デコもじ」 http://decomoji.jp/ サブセットフォントを使う 必要文字だけ切り出して小さく Font Squirrel などで可能: http://fontsquirrel.com/ fontface/generator
  • 47. Web Fonts @font-face { /* IE8 以前用 EOT フォント設定 (最初に) */ font-family: Sawarabi; src: url(Sawarabi.eot) /* IE8 以前は format() 非サポート */; } @font-face { /* WOFF 非対応ブラウザ向けフォント設定 */ font-family: Sawarabi; src: url(Sawarabi.otf) format("opentype"); } @font-face { /* WOFF 対応ブラウザには WOFF を */ font-family: Sawarabi; src: url(Sawarabi.woff) format("woff"); } body { font-family: Sawarabi, sans-serif; } Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
  • 48. Font Control Features CSS3 font-variant フォントの詳細な機能を制御 分数、桁揃え、合字、旧字体... 仕様のエディタ自身による実装 実装者本人の解説: http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
  • 49. http://hacks.mozilla.org/2009/10/font-control-for-designers/
  • 50. CSS Transitions スタイル遷移をなめらかに 簡単なアニメーションにも ベンダー接頭辞に注意 Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
  • 51. CSS Transitions #somebox { color: black; background-color: yellow; -moz-transition: all 2s ease-in; -webkit-transition: all 2s ease-in; -o-transition: all 2s ease-in; transition: all 2s ease-in; /* すべてのスタイル変化はを2秒かけて開始をなめらかに */ } #somebox:hover { /* マウスオーバーで配色、サイズ、角度を変化 */ color: white; background-color: red; -moz-transform: rotate(-60deg) scale(1.5); -webkit-transform: rotate(-60deg) scale(1.5); -o-transform: rotate(-60deg) scale(1.5); transform: rotate(-60deg) scale(1.5); } http://hacks.mozilla.org/2010/07/firefox4-beta2/
  • 52. CSS3 calc() サイズを計算式で指定可能 width: -moz-calc(20% - 1rem) -moz- prefix に注意
  • 53. CSS3 calc() /* margin 分を考慮した左右の分割を行う例 */ #main { width: 75%; margin-right: 1rem; } #side { width: -moz-calc(25% - 1rem); width: calc(25% - 1rem); /* prefix なし忘れずに */ } /* rem はルート要素の font-size (Firefox 3.6~) */ http://hacks.mozilla.org/2010/06/css3-calc/
  • 54. -moz-any() selector CSS セレクタを書きやすく 階層構造などで特に便利 -moz- prefix に注意
  • 55. -moz-any() がないとき(><) h1 { font-size: 30px; } section h1, article h1, aside h1, nav h1 { font-size: 25px; } section section h1, section article h1, section aside h1, section nav h1, article section h1, article article h1, article aside h1, article nav h1, aside section h1, aside article h1, aside aside h1, aside nav h1, nav section h1, nav article h1, nav aside h1, nav nav h1, { font-size: 20px; } /* ... これ以上は書く気も読む気もしない */ http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  • 56. -moz-any() があるとき(・・). h1 { font-size: 30px; } -moz-any(section, article, aside, nav) h1 { font-size: 25px; } -moz-any(section, article, aside, nav) -moz-any(section, article, aside, nav) h1 { font-size: 20px; } /* まだまだ書ける */ http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  • 57. -moz-any() があるとき(・・). -moz-any(section, article, aside, nav) -moz-any(section, article, aside, nav) -moz-any(section, article, aside, nav) h1 { font-size: 15px; } -moz-any(section, article, aside, nav) -moz-any(section, article, aside, nav) -moz-any(section, article, aside, nav) -moz-any(section, article, aside, nav) h1 { font-size: 10px; } /* 何層目でもシンプルですね */ http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  • 58. background: -moz-element() 他の要素を参照して背景に指定 既存要素との比較変換など便利 Canvas は toDataURL() 不要 反射やサムネイルなどにも便利
  • 59. http://hacks.mozilla.org/2010/08/mozelement/
  • 60. background: -webkit-canvas() Canvas 参照だけ WebKit も -webkit-canvas(canid) canid は JS でコンテキスト取 得時に getCSSCanvasContext(,canid, ,) メソッドで指定する JS 併用必須って仕様として変... http://webkit.org/blog/176/css-canvas-drawing/
  • 61. background: -webkit-canvas() http://webkit.org/blog/176/css-canvas-drawing/ <div id="divid">Lorem ipsum dolor sit amet, ... </div> <style> #divid { background: -webkit-canvas(canvasid); width:600px; height:600px; } </style> <script type="application/x-javascript"> var ctx = document.getCSSCanvasContext("2d", "canvasid", 300, 300); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); </script>
  • 62. background: -moz-element() moz-element() では任意要素 JS との組み合わせ不要 説明割愛しますが JS から操作する mozSetImageElement() もあり
  • 63. background: -moz-element() http://hacks.mozilla.org/2010/08/mozelement/ <canvas id="canvasid" width="300" height="300"/> <div id="divid">Lorem ipsum dolor sit amet, ... </div> <style> #divid { background: -moz-element(#canvasid); width:600px; height:600px; } </style> <script type="application/x-javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 標準通り // ... 以下略 ... </script>
  • 64. background: -moz-element() 参照元を見せない場合の注意 内部的には描画させる必要あり display: none; などとしない hight:0; overflow: hidden; などの div で囲んで隠す img, canvas, video は例外 DOM ツリーになくても良い これは内部実装や効率などの問題から来る現時点の制約
  • 65. background: -moz-element() http://hacks.mozilla.org/2010/08/mozelement/ <div style="height: 0; overflow: hidden;"><!-- 隠す --> <iframe id="iframeid" src="http://google.com/search?q=%22-moz-element%22" style="width:800px; height:600px;"></iframe> </div> <div id="divid">Lorem ipsum dolor sit amet, ... </div> <style> #divid { background:-moz-element(#iframeid) no-repeat; height:600px; width:800px; border:2px solid black; } </style>
  • 66. Native Multimedia Video, Audio, 3D ...
  • 67. <Video> 自動バッファ、キャッシュなど 実用に向けてどんどん強化中 Safari も Plugin で Ogg 再生 WebM もいずれプラグインで... Firefox の <video> サポートは他と比べても積極的に行われています VLC Web Browser Plugin: http://www.videolan.org/vlc/download-macosx.html
  • 68. <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>
  • 69. <Video> のバッファ対応 http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/ <video id="longvideo" src="video.ogv" preload="auto" ... > <script type="text/javascript"> 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>
  • 70. H.264 がフリーになった? Codec ソフト側の話などは別 無料動画配信限定の話 W3C 的にも OSS 的にも問題外 MPEG-LA 側が譲らない限り Web 標準になる事はあり得ない http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/ 自社だけライセンス料払って OSS コミュニティ無視とかあり得ない
  • 71. Audio Data API Video は Canvas に取得可能 Audio も取得や生成可能に W3C にて標準化予定 試験実装 API について: https://wiki.mozilla.org/ Audio_Data_API http://www.w3.org/2005/Incubator/audio/
  • 72. 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 type="text/javascript"> var $ = function($) { return document.getElementById($); } var input = $('input'); var display = $('display'); // Add an event listener to the audio input object input.addEventListener('MozAudioAvailable', function(e){ // フレームバッファの最初のサンプリングをしてみる display.innerHTML += e.frameBuffer[0] + ', '; }, false ); </script>
  • 73. Audio Data API の用途 Fourier 変換して周波数分解 フィルタ、ミキサ、イコライザ そして勿論 DSP や音声合成... http://twitter.com/cherenkov/status/21614170698
  • 74. WebGL <Canvas> の 3D コンテキスト OpenGL ES2.0 相当の API 携帯用 GPU が広くサポート http://www.khronos.org/webgl/
  • 75. 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>
  • 76. WebGL - note The Khronos Group で API 仕様を策定 Apple, Google, Mozilla, Opera が参加 実質的には Mozilla の Vlad がリード OpenGL ES 2.0 ベースの API を JS から使う シェーダーやテクスチャなども当然利用可能 <canvas> の 3D コンテキストとして定義 Firefox 4 や WebKit Nightly でサポート Firefox ではデフォルトで有効 WebKit は --enable-glsl-translator で起動 Firefox 4~ https://developer.mozilla.org/en/WebGL
  • 77. Application Platform JS APIs for Web Apps...
  • 78. HTML5 History ページ遷移せずに履歴制御 History オブジェクトを導入 go(delta), back(), forward() pushState(), replaceState() popstate イベントで状態復元
  • 79. HTML5 History http://d.hatena.ne.jp/javascripter/20100404/ // popstate イベントで適切な状態に初期化する window.addEventListener("popstate", function (event) { // pushState の第一引数(のClone)を event.state で取得 var state = JSON.parse(event.state); // 履歴遷移時に行いたい処理を適当に }, false); // pushState(data, title, url) で履歴を追加する // 仕様上 data は任意オブジェクトだが現実装は文字列だけ? var state = { ... } // 履歴制御時に記録したいオブジェクト var serializedState = JSON.stringify(stateobj); var url = "http://dev.mozilla.jp/#history"; history.pushState(serializedState, "", url); // 履歴を追加ではなく置き換える場合 history.replaceState(serializedState, "", url);
  • 80. HTML5 History pushState/replaceState path, query, fragment 変更 http://host/path?query#fragment
  • 81. WebSockets サーバとの双方向通信 ブラウザ間の P2P 機能はない リアルタイム Web などに 通信オーバーヘッドが少ない 大半の用途は他の技術でも... SSE, multipart Ajax...
  • 82. WebSockets のサポート API 仕様は比較的安定 プロトコル仕様はまだ不安定 rev76 を各ブラウザがサポート 今後の更新時期など不透明 プロキシなどにも依存...
  • 83. WebSockets API https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/ // WebSocket の接続を開始 var socket = new WebSocket(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."); }
  • 84. HTTP Strict Transport Security 以後 HTTPS での接続を要求 認証ページなどで使う 簡単なのですぐにでも採用を 非対応ブラウザへの副作用なし Chrome でもサポート 古い Firefox は拡張機能で... http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/
  • 85. Multi-touch Windows 7 のタッチ API MozTouchDown, MozTouchUp, MozTouchMove, イベント CSS セレクタも定義 :-moz-system-metric(touch- enabled)
  • 86. Multi-touch Events http://hacks.mozilla.org/2009/10/multi-touch/ <canvas id="canvas" width="1200" height="800"/> <script type="text/javascript"> var ctx = document.getElementById("canvas").getContext('2d'); document.addEventListener("MozTouchMove", function(e) { // タッチイベントのイベントリスナ ctx.fillStyle='rgba(0,0,0,1)'; ctx.beginPath(); // タッチした位置 (clientX, clientY) を中心に円を描画 ctx.arc(e.clientX, e.clientY, 20, 0, Math.PI*2, 1); ctx.fill(); ctx.closePath(); }, false); </script>
  • 87. 今日の話の多くは... Mozilla Hacks Blog を参照 他にももっと色々書いてます 日本語訳は modest にて http://r.dynamis.jp/mozhacks 翻訳協力者も募集中
  • 88. Any Question ?
  • 89. Any Question ? end.
  • 90. Video Codec 問題は? Google の Gears は? Google の O3D は? Google の Wave は? SQL Database は? One Point Q&A
  • 91. Video Codec 問題?
  • 92. Open Video HTML5 では Codec 指定なし WebM (Web Media) が有力 VP8+Vorbis@Matroska 特許問題完全解決かは不明 H264 は特許問題で採用不可 MPEG-LA 側の問題です Theora は Firefox 3.5~, WebM は Firefox4~
  • 93. On2 Tech. VP3 Xiph.Org Google Ogg VP4Theora VP5 VP6 VP7 VP8 Container Vorbis Matroska Vorbis VP8 Audio Video WebM ロイヤリティフリー WebM プロジェクト FAQ: http://www.webmproject.org/about/faq/
  • 94. Gears は?
  • 95. Gears は終了しました 2010/02/19 開発停止 Safari はサポートも停止 Web 標準技術の採用へ
  • 96. O3D は?
  • 97. O3D は終了しました 2010/05/07 開発停止 WebGL サポートに一本化 WebGL に変換するライブラリ
  • 98. Wave は?
  • 99. Wave は終了しました 使い物にならなかったしね 8/21 に追悼会したらしいよ Wave 追悼会: http://atnd.org/events/6995
  • 100. Wave は終了しました 使い物にならなかったしね 8/21 に追悼会したらしいよ Wave 追悼会: http://atnd.org/events/6995
  • 101. SQL Database?
  • 102. SQL DB の標準化は頓挫 SQLite 実装依存では仕様には... そもそも Web に SQL が最良? シンプルな IndexedDB に移行 IndexedDB 上に SQL 構築も
  • 103. References for more information...
  • 104. references Mozilla Hacks Blog - Mozilla と Web の最新技術紹介 http://hacks.mozilla.org/ https://dev.mozilla.jp/hacksmozillaorg/ Firefox の最新機能紹介ページ https://developer.mozilla.org/en/ Upcoming_Firefox_features_for_developers https://developer.mozilla.org/ja/Firefox_3.6_for_developers WHATWG HTML5 (各機能のブラウザ実装状況含む) http://www.whatwg.org/html5 HTML5 についてのおさらい http://w3g.jp/blog/studies/html5report
  • 105. ref. - slides HTML5 の基本は矢倉さんのスライドがオススメ! http://www.slideshare.net/myakura/presentations MicroData についても矢倉さんのスライドオススメ! http://www.slideshare.net/myakura/microdata-a-primer WebFonts は仕様執筆者のプレゼンが必見! http://people.mozilla.org/~jdaggett/webfontsfuture.pdf Firefox 4: fast, powerful and empowering (英語) http://www.slideshare.net/beltzner/firefox- roadmap-2010-0510 必見スライドだけ紹介してみます
  • 106. ref. - status HTML5 の対応状況は仕様書に書かれている 各項目のタイトル左側にポップアップ表示 http://www.whatwg.org/html5 caniuse.com のまとめがオススメ http://caniuse.com/ http://caniuse.com/#cats=HTML5&statuses=rec,pr,cr,wd,ietf WHATWG の Wiki http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers SVG Test Suite の結果表 http://www.codedread.com/svg-support.php ブラウザの仕様サポート状況を比較や確認したいときにどうぞ
  • 107. ref. - demo & samples Mozilla Hacks Blog - 開発者向け最新情報とデモ http://hacks.mozilla.org/ HTML5ROCKS - チュートリアル(やや古い)など http://html5rocks.com/ Safari Technology Demos - CSS3 と Apple 独自仕様 http://developer.apple.com/safaridemos/ IE9 Test Drive - IE9 に最適なデモばかりですが http://ie.microsoft.com/testdrive/ @paulrouget - Mozilla Tech Evangelist http://twitter.com/paulrouget/ 各ベンダーの用意する Web 技術紹介サイト
  • 108. ref. - sites HTML5 導入済みサイトのギャラリー http://html5gallery.com/ ドキュメント共有サイト Scribd http://www.scribd.com/doc/30964170/Scribd-in-HTML5 プレゼン作成サイト 280slides http://280slides.com/ YouTube HTML5 動画プレイヤー http://www.youtube.com/html5
  • 109. ref. - game Mozilla Labs Gaming https://gaming.mozillalabs.com/ canvasdemos - 比較的シンプルなデモ集 http://www.canvasdemos.com/type/games/ HTML5 でゲーム - ノーコメント http://benfirshman.com/projects/jsnes/ Aves Game Engine - 本格的 Social ゲームエンジン http://www.dextrose.com/en/projects/aves-engine Akihabara - シンプルなゲーム用ライブラリ http://www.kesiev.com/akihabara/ ゲームプラットフォームとしての Web について
  • 110. ref. - tools Open Web ツール検索 http://tools.mozilla.com/ Processing.js - Canvas 上で Processing を使う http://processingjs.org/ Contextfree.js - Canvas 上で ContextFree を使う http://azarask.in/projects/algorithm-ink/ http://code.google.com/p/contextfree/source/browse/trunk/ contextfree.js Canvas でのアニメーションライブラリ http://code.google.com/p/cakejs/
  • 111. ref. - tools IE でも Canvas を描画可能にする uupaa.js http://d.hatena.ne.jp/uupaa/searchdiary?word=*[uupaa.js] JavaScript から簡単に SVG を生成 http://raphaeljs.com/ http://g.raphaeljs.com/ Web アプリケーション用のフレームワーク Cappuccino: http://objective-j.org/ Sproutcore: http://www.sproutcore.com/ JavaScriptMVC: http://javascriptmvc.com/ Ample SDK: http://www.amplesdk.com/ 一時 Gianduia も話題でしたが外部向けに公開されてないので現状論外
  • 112. ref. - web fonts CSS Fonts Module Level 3 http://www.w3.org/TR/css3-fonts/ Google の Web Font サービス http://code.google.com/webfonts Web Fonts のライセンス販売 (無償フォント含む) http://typekit.com/ http://decomoji.jp/ Web Fonts Generator - eot や WOFF フォントに変換 http://www.fontsquirrel.com/fontface/generator
  • 113. ref. - webgl The Khronos Group - WebGL http://www.khronos.org/webgl/ http://www.khronos.org/webgl/wiki/Demo_Repository WebGL セクション@MDC https://developer.mozilla.org/en/WebGL The WebGL の解説 http://www.gatk.net/webgl/ http://webos-goodies.jp/archives/ getting_started_with_webgl.html http://learningwebgl.com/cookbook/
  • 114. ref. - other spec. File API http://www.w3.org/TR/FileAPI/ http://www.w3.org/TR/file-writer-api/ Geolocation API http://www.w3.org/TR/geolocation-API/ Audio Data API https://wiki.mozilla.org/Audio_Data_API window.onmozorientation https://developer.mozilla.org/en/DOM/ window.onmozorientation
  • 115. ref. - other spec. CSS Current Work http://www.w3.org/Style/CSS/current-work WebGL Spec. https://cvs.khronos.org/svn/repos/registry/trunk/public/ webgl/doc/spec/WebGL-spec.html Typed Arrays https://cvs.khronos.org/svn/repos/registry/trunk/public/ webgl/doc/spec/TypedArray-spec.html HTML5 の定義解説から関連仕様へのリンク色々 http://www.whatwg.org/specs/web-apps/current-work/ multipage/introduction.html#is-this-html5?

×