Presentation of W3C HTML5 Japanese Interest Group at 22 Jan 2010

1. Web Technology features with
Firefox 3.6 / Gecko 1.9.2
and later
Makoto Kato
Technical Advisor, Mozilla Japan

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

3. File API

4. File API
• <input type=“file”>で選択されたローカル
フゔ゗ルへのゕクセスを提供
• ユーザーの操作にてフゔ゗ルを指定する
• valueはそもそもJavaScriptから変更不可
• FileReaderを経由したフゔ゗ルゕクセス
• HTML5 Drag & Dropと組み合わせると、ブラ
ウザウゖンドウへのDrag & Dropでフゔ゗ル
にゕクセスすることが可能

5. File API
• File゗ンターフェ゗ス
• フゔ゗ル名、種類などの取得
• FileReader ゗ンターフェ゗ス
• フゔ゗ルゕクセスの゗ンターフェ゗スを提供
• バ゗ナリ / テキスト / DataURLとして読み込む
• エラー、進捗、完了などの゗ベントを提供
• resultプロパテゖに読み込んだ内容が入る
• FileReaderSync ゗ンターフェ゗ス
• 同期ゕクセス用
• 現時点でFirefox / Geckoでは未実装
• readAs*メソッドはFileException例外をスローする

6. 使い方 – 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>

7. 使い方 (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>

8. CSS Gradients

9. 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);

10. CSS Gradients
• Firefox 3.6 / Gecko 1.9.2では、”-moz-
”prefixを使う必要あり (-moz-linear-gradient)
• 画像を受け入れることができるCSSプロパテゖす
べてで利用可能
• Firefox 3.6ではbackgroundくらいにしか動作しません

11. Linear Gradients
• linear-gradient( [<point> || <angle>,]?
<stop>, <stop> [, <stop>]* )
linear-gradient(
top,
blue,
white
);
linear-gradient(
45deg,
blue,
white);

12. Radial Gradients
• radial-gradient( [<position> || <angle>,]?
[<shape> || <size>,]? <stop>, <stop>[,
<stop>]* )
-moz-radial-gradient(
red,
yellow,
green
);

13. 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);

14. Web Open Font
Format - WOFF

15. Web Font Support
• Firefox 3.5でWebフォントをサポート
@font-face { font-family: GentiumTest; src: url(fonts.ttf); }
• OpenTypeとTrueTypeフォントのみ

16. Web Font Support
• Firefox 3.6では新しいWebフォント形式
(WOFF) をサポート
@font-face { font-family: GentiumTest; src: url(fonts.woff)
format("woff"); }
• フォントベンダと共同で作成した新しいフォント
形式
• OpenTypeなどよりもサ゗ズは小さい
• 現状では差分ダウンロードには対応していない
• MIMEタ゗プは決まってない
16

17. WebGL

18. 現状のブラウザでのレンダリング
• HTMLなどのレンダリングにはOSのAPIを利用
• GDI, Quartz, Cairo and etc…
• チップのハードウェゕ・ゕクセラレーションが
使われるかどうかは、利用するAPI、OS次第
• プラグ゗ンなしでは、3D画像であってもソフ
トウェゕで3D画像を計算する必要がある

19. 現在のグラフィック・ハードウェア (GPU)
• 現在のAMD、NVIDIA、IntelなどのPC向けの
グラフゖック・チップでは3D向けのDirectX9
やOpenGLのサポートが含まれている
• モバ゗ル分野であっても、TIやQualcomm、
iPhoneの最新チップセットではOpenGL ES
2.0のサポートが含まれる

20. 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に設定する
必要あり

21. シェーダー・サポート
• バーテックス・シェーダー
<script type=“x-shader/x-vertex”>
• フラグメント・シェーダー (ピクセル・シェー
ダー)
<script type=“x-shader/x-fragment”>

22. 使い方
<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>

23. DEMO

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

25. 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/

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

27. 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/

28. Any Question?