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

現状のブラウザでのレンダリング • 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>

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?

http://www.publickey1.jp	860
http://www.publickey.jp	150
http://wontfix.blogspot.com	96
http://news.livedoor.com	25
http://webcache.googleusercontent.com	8
http://onwebdev.blogspot.com	7
http://www.slideshare.net	6
http://safe.tumblr.com	2
http://74.125.153.132	2
http://trans.hiragana.jp	1

Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later

by Makoto Kato on Jan 22, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 1,157

Statistics

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