Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later
Upcoming SlideShare
Loading in...5
×
 

Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later

on

  • 6,595 views

Presentation of W3C HTML5 Japanese Interest Group at 22 Jan 2010

Presentation of W3C HTML5 Japanese Interest Group at 22 Jan 2010

Statistics

Views

Total Views
6,595
Views on SlideShare
4,871
Embed Views
1,724

Actions

Likes
3
Downloads
12
Comments
0

13 Embeds 1,724

http://www.publickey1.jp 1404
http://www.publickey.jp 150
http://wontfix.blogspot.com 96
http://news.livedoor.com 25
http://wontfix.blogspot.jp 20
http://webcache.googleusercontent.com 9
http://onwebdev.blogspot.com 7
http://www.slideshare.net 6
http://74.125.153.132 2
http://safe.tumblr.com 2
http://trans.hiragana.jp 1
http://onwebdev.blogspot.co.uk 1
http://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later Presentation Transcript

  • Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later Makoto Kato Technical Advisor, Mozilla Japan
  • Agenda • Firefox 3.6 / Gecko 1.9.2やそれ以降のバー ジョンでサポートされる新たな規格 • File API (Firefox 3.6 / Gecko 1.9.2) • CSS Gradients (Firefox 3.6 / Gecko 1.9.2) • Web Open Font Format (Firefox 3.6 / Gecko 1.9.2) • WebGL (Firefox.next / Gecko 1.9.3) • Demo
  • File API
  • File API • <input type=“file”>で選択されたローカル フゔ゗ルへのゕクセスを提供 • ユーザーの操作にてフゔ゗ルを指定する • valueはそもそもJavaScriptから変更不可 • FileReaderを経由したフゔ゗ルゕクセス • HTML5 Drag & Dropと組み合わせると、ブラ ウザウゖンドウへのDrag & Dropでフゔ゗ル にゕクセスすることが可能
  • File API • File゗ンターフェ゗ス • フゔ゗ル名、種類などの取得 • FileReader ゗ンターフェ゗ス • フゔ゗ルゕクセスの゗ンターフェ゗スを提供 • バ゗ナリ / テキスト / DataURLとして読み込む • エラー、進捗、完了などの゗ベントを提供 • resultプロパテゖに読み込んだ内容が入る • FileReaderSync ゗ンターフェ゗ス • 同期ゕクセス用 • 現時点でFirefox / Geckoでは未実装 • readAs*メソッドはFileException例外をスローする
  • 使い方 – File API <input type=“file” id=“upload” /> <input type=“button” onclick=“clickbutton()” /> <script type=“text/javascript”> function clickbutton() { var file = document.getElementById(“upload”).files; for (var i = 0; i < files.length; i++) { var file = files[i]; processFile(file); // フゔ゗ル処理 } } function processFile(file) { var reader = new FileReader(); reader.readAsText(file); // テキストとして読み込む reader.onload = function () { /* 完了 */ window.alert(reader.result); }; reader.onprogress = function (event) { /* 進捗゗ベント */ }; } </script>
  • 使い方 (w/ HTML5 Drag & Drop) <div id=“droptarget”>…</div> <script type=“text/javascript”> document.getElementById(“droptarget”).addEventListene r("drop", dropEvent, true); function dropEvent(event) { var files = event.dataTransfer.files; for (var i = 0; i < files.length; i++) { var file = files[i]; processFile(file); // フゔ゗ル処理 } } </script>
  • CSS Gradients
  • CSS Gradients • 現時点で定義されている形は2つ • Linear • Radial • 繰り返しの形式(repeating)もサポート • 先に実装されたWebKitでは構文が異なる • WebKitでの先に行われた実装 (例: linear) • background: -webkit-gradient(linear, left top, left bottom, from(white), to(gray)); • 現在のドラフト (例: linear) • background: linear-gradient(top, white, gray);
  • CSS Gradients • Firefox 3.6 / Gecko 1.9.2では、”-moz- ”prefixを使う必要あり (-moz-linear-gradient) • 画像を受け入れることができるCSSプロパテゖす べてで利用可能 • Firefox 3.6ではbackgroundくらいにしか動作しません
  • Linear Gradients • linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) linear-gradient( top, blue, white ); linear-gradient( 45deg, blue, white);
  • Radial Gradients • radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* ) -moz-radial-gradient( red, yellow, green );
  • Repeating Gradient • Linerやradialの記述へ”repeating-”のprefix を追加 repeating-linear-gradient( top, blue 5px, white 20px); repeating-linear-gradient( top left -45deg, red, red 5px, white 5px, white 10px);
  • Web Open Font Format - WOFF
  • Web Font Support • Firefox 3.5でWebフォントをサポート @font-face { font-family: GentiumTest; src: url(fonts.ttf); } • OpenTypeとTrueTypeフォントのみ
  • Web Font Support • Firefox 3.6では新しいWebフォント形式 (WOFF) をサポート @font-face { font-family: GentiumTest; src: url(fonts.woff) format("woff"); } • フォントベンダと共同で作成した新しいフォント 形式 • OpenTypeなどよりもサ゗ズは小さい • 現状では差分ダウンロードには対応していない • MIMEタ゗プは決まってない 16
  • WebGL
  • 現状のブラウザでのレンダリング • HTMLなどのレンダリングにはOSのAPIを利用 • GDI, Quartz, Cairo and etc… • チップのハードウェゕ・ゕクセラレーションが 使われるかどうかは、利用するAPI、OS次第 • プラグ゗ンなしでは、3D画像であってもソフ トウェゕで3D画像を計算する必要がある
  • 現在のグラフィック・ハードウェア (GPU) • 現在のAMD、NVIDIA、IntelなどのPC向けの グラフゖック・チップでは3D向けのDirectX9 やOpenGLのサポートが含まれている • モバ゗ル分野であっても、TIやQualcomm、 iPhoneの最新チップセットではOpenGL ES 2.0のサポートが含まれる
  • WebGL • The Khronos GroupでAPI仕様の策定 • Apple、Google、Mozilla、Operaが参加 • OpenGL ES 2.0ベースのAPIをJavaScriptから ゕクセス • シェーダーやテクスチャも利用可能 • Canvasへの描画 • 最新のGecko (1.9.3) やWebKitで利用可能 • Firefoxの開発版で利用する場合は、about:config でwebgl.enabled_for_all_sitesをtrueに設定する 必要あり
  • シェーダー・サポート • バーテックス・シェーダー <script type=“x-shader/x-vertex”> • フラグメント・シェーダー (ピクセル・シェー ダー) <script type=“x-shader/x-fragment”>
  • 使い方 <canvas id=“glcanvas” /> <script type=“text/javascript”> // Canvas elementの取得 var canvas = document.getElementById(“glcanvas”); // WebGLのコンテキストの取得 // Geckoでは”moz-webgl”または”experimental-webgl” // WebKitでは”webkit-3d” var gl = canvas.getContext(‘webgl’); // 描画 … </script>
  • DEMO
  • Reference – File API • File API Draft • http://dev.w3.org/2006/webapi/FileAPI/ • Using files from web applications • https://developer.mozilla.org/en/Using_files_f rom_web_applications • Demo by hacks.mozilla.org • http://hacks.mozilla.org/category/fileapi/ • http://www.youtube.com/mozhacks#p/u/2/4 Us6S0fDV7U
  • Reference – CSS Gradients • Gradients – CSS Image Values Module Level 3 Draft • http://dev.w3.org/csswg/css3-images/#gradients- • css gradients in Firefox 3.6 • http://hacks.mozilla.org/2009/11/css-gradients- firefox-36/ • Demo by hacks.mozilla.org • http://demos.hacks.mozilla.org/openweb/cssBackg round/gradients/
  • Reference - WOFF • Web Open Font Format for Firefox 3.6 • http://hacks.mozilla.org/2009/10/woff/ • CSS Fonts Module Level 3 • http://dev.w3.org/csswg/css3-fonts • WOFF File Format Draft • http://people.mozilla.com/~jkew/woff/woff- spec-latest.html
  • Referenece - WebGL • Khronos Group • http://www.khronos.org/webgl/ • WebGL Draft • https://cvs.khronos.org/svn/repos/registry/trunk/public/ webgl/doc/spec/WebGL-spec.html • Mozilla Developer Center • https://developer.mozilla.org/en/WebGL • Demo by hacks.mozilla.org • http://hacks.mozilla.org/category/webgl/ • Demo by Khronos • https://cvs.khronos.org/svn/repos/registry/trunk/public/ webgl/sdk/demos/webkit/
  • Any Question?