Download as PDF, PPTX
![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>](https://image.slidesharecdn.com/html5infirefox4-101129010645-phpapp01/85/HTML5-in-Firefox4-72-320.jpg)
![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 も話題でしたが外部向けに公開されてないので現状論外](https://image.slidesharecdn.com/html5infirefox4-101129010645-phpapp01/85/HTML5-in-Firefox4-112-320.jpg)
Uploaded bydynamis
HTML5 in Firefox4
HTML5などなど次世代Web勉強会 in 福井での講演スライド http://kokucheese.com/event/index/5492/ # 公開用に多少編集したものです
More Related Content
![[Maker Faire Tokyo 2014] FlashAirは超ミニマイコン！ ひろがる電子工作コミュニティ](https://cdn.slidesharecdn.com/ss_thumbnails/flashairmft201420141124handsout-141125032654-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5 in Firefox4
- 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.
- 9.
- 10.
- 11. HTML5 ではありません Flash でもありません AIRでもありません Silverlight でもありません
- 12.
- 13.
- 14.
- 15. This specification evolvesHTML 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.
- 19.
- 20.
- 21. http://whatwg.org/html5 - Abstractより この仕様では Web アプリケー ションを記述しやすくするため HTML と関連 API を発展させる
- 22.
- 23. HTML の基本はタグ... マークアップ (タグと意味) (X)HTML構文とパーサ MicroData (セマンティクス) SVG や MathML との連携
- 24.
- 25. 関連 API って何？ イベントやインターフェイス Drag& Drop や Undo/Redo オフラインイベント 履歴とナビゲーション ドキュメント間通信
- 26. http://whatwg.org/html5 - Abstractより この仕様では Web アプリケー ションを記述しやすくするため HTML と関連 API を発展させる
- 27.
- 28. It is necessaryto 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 は段階的に発展さ せる必要がある。... すべて を一度に切り替えようとい う試みは成功しなかった。 TimBerners-Lee の言葉: http://dig.csail.mit.edu/breadcrumbs/node/166
- 30.
- 31. The drag-and-drop APIis 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 & DropAPI は酷いけど、採用する理由 がひとつある。つまり、IE6 だけでなく Safari や Firefox でも実装されているということだ。 Ian Hickson の言葉 http://twitter.com/Hixie/status/4075253361
- 33.
- 34.
- 35.
- 36. 仕様書に書いてあります WAHTWG の HTML5仕様書 分割して W3C でも標準化 W3C 仕様名に "HTML" を含む WHATWG は整合性重視 W3C はモジュール指向 ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
- 37. どこまで HTML5？ Web Workers WebStorage 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 WebStorage 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 WebSocketprotocol 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/ サブセットフォントを使う 必要文字だけ切り出して小さく FontSquirrel などで可能: 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 CSS3font-variant フォントの詳細な機能を制御 分数、桁揃え、合字、旧字体... 仕様のエディタ自身による実装 実装者本人の解説: http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
- 49.
- 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.
- 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.
- 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">Loremipsum 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.
- 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/ <audioid="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 TheKhronos 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 APIsfor 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 TransportSecurity 以後 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 翻訳協力者も募集中
- 89.
- 90.
- 91. Video Codec 問題は？ Googleの Gears は？ Google の O3D は？ Google の Wave は？ SQL Database は？ One Point Q&A
- 92.
- 93. Open Video HTML5 ではCodec 指定なし WebM (Web Media) が有力 VP8+Vorbis@Matroska 特許問題完全解決かは不明 H264 は特許問題で採用不可 MPEG-LA 側の問題です Theora は Firefox 3.5~, WebM は Firefox4~
- 94. 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/
- 95.
- 96. Gears は終了しました 2010/02/19 開発停止 Safariはサポートも停止 Web 標準技術の採用へ
- 97.
- 98. O3D は終了しました 2010/05/07 開発停止 WebGLサポートに一本化 WebGL に変換するライブラリ
- 99.
- 100. Wave は終了しました 使い物にならなかったしね 8/21 に追悼会したらしいよ Wave追悼会: http://atnd.org/events/6995
- 101. Wave は終了しました 使い物にならなかったしね 8/21 に追悼会したらしいよ Wave追悼会: http://atnd.org/events/6995
- 102.
- 103. SQL DB の標準化は頓挫 SQLite実装依存では仕様には... そもそも Web に SQL が最良？ シンプルな IndexedDB に移行 IndexedDB 上に SQL 構築も
- 104.
- 105. 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
- 106. 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 必見スライドだけ紹介してみます
- 107. 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 ブラウザの仕様サポート状況を比較や確認したいときにどうぞ
- 108. 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 技術紹介サイト
- 109. 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
- 110. ref. - game MozillaLabs 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 について
- 111. ref. - tools OpenWeb ツール検索 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/
- 112. 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 も話題でしたが外部向けに公開されてないので現状論外
- 113. ref. - webfonts 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
- 114. ref. - webgl TheKhronos 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/
- 115. ref. - otherspec. 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
- 116. ref. - otherspec. 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?