Web Technology features with Firefox 3.6 / Gecko 1.9.2

and later

Makoto KatoTechnical 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”).addEventListener("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 left -45deg,red,red 5px,white 5px,white 10px);

repeating-linear-gradient(top,blue 5px,white 20px);

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_from_web_applications

• Demo by hacks.mozilla.org

• http://hacks.mozilla.org/category/fileapi/

• http://www.youtube.com/mozhacks#p/u/2/4Us6S0fDV7U

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/cssBackground/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?