Web Technology features with
  Firefox 3.6 / Gecko 1.9.2
          and later

          Makoto Kato
Technical Advisor, Moz...
Agenda

• Firefox 3.6 / Gecko 1.9.2やそれ以降のバー
  ジョンでサポートされる新たな規格
 •   File API (Firefox 3.6 / Gecko 1.9.2)
 •   CSS Gradient...
File API
File API

• <input type=“file”>で選択されたローカル
  フゔ゗ルへのゕクセスを提供
 •   ユーザーの操作にてフゔ゗ルを指定する
 •   valueはそもそもJavaScriptから変更不可
• FileRe...
File API
•       File゗ンターフェ゗ス
    •    フゔ゗ル名、種類などの取得
•       FileReader ゗ンターフェ゗ス
    •    フゔ゗ルゕクセスの゗ンターフェ゗スを提供
    •    バ゗...
使い方 – File API
<input type=“file” id=“upload” />
<input type=“button” onclick=“clickbutton()” />

<script type=“text/javas...
使い方 (w/ HTML5 Drag & Drop)
<div id=“droptarget”>…</div>

<script type=“text/javascript”>
document.getElementById(“droptarg...
CSS Gradients
CSS Gradients

• 現時点で定義されている形は2つ
 •       Linear
 •       Radial
• 繰り返しの形式(repeating)もサポート
• 先に実装されたWebKitでは構文が異なる
 •     ...
CSS Gradients

• Firefox 3.6 / Gecko 1.9.2では、”-moz-
  ”prefixを使う必要あり (-moz-linear-gradient)
• 画像を受け入れることができるCSSプロパテゖす
  べて...
Linear Gradients

• linear-gradient( [<point> || <angle>,]?
  <stop>, <stop> [, <stop>]* )


       linear-gradient(
     ...
Radial Gradients

• radial-gradient( [<position> || <angle>,]?
  [<shape> || <size>,]? <stop>, <stop>[,
  <stop>]* )

    ...
Repeating Gradient

• Linerやradialの記述へ”repeating-”のprefix
  を追加

  repeating-linear-gradient(
   top,
   blue 5px,
   whit...
Web Open Font
Format - WOFF
Web Font Support

• Firefox 3.5でWebフォントをサポート
 @font-face { font-family: GentiumTest; src: url(fonts.ttf); }

 •   OpenType...
Web Font Support

• Firefox 3.6では新しいWebフォント形式
  (WOFF) をサポート
     @font-face { font-family: GentiumTest; src: url(fonts.wo...
WebGL
現状のブラウザでのレンダリング

• HTMLなどのレンダリングにはOSのAPIを利用
 •   GDI, Quartz, Cairo and etc…
• チップのハードウェゕ・ゕクセラレーションが
  使われるかどうかは、利用するAPI、O...
現在のグラフィック・ハードウェア (GPU)

• 現在のAMD、NVIDIA、IntelなどのPC向けの
  グラフゖック・チップでは3D向けのDirectX9
  やOpenGLのサポートが含まれている
• モバ゗ル分野であっても、TIやQ...
WebGL

• The Khronos GroupでAPI仕様の策定
 •   Apple、Google、Mozilla、Operaが参加
• OpenGL ES 2.0ベースのAPIをJavaScriptから
  ゕクセス
 •   シェー...
シェーダー・サポート

• バーテックス・シェーダー
 <script type=“x-shader/x-vertex”>
• フラグメント・シェーダー (ピクセル・シェー
  ダー)
 <script type=“x-shader/x-fra...
使い方
<canvas id=“glcanvas” />

<script type=“text/javascript”>
// Canvas elementの取得
var canvas = document.getElementById(“g...
DEMO
Reference – File API

• File API Draft
  •   http://dev.w3.org/2006/webapi/FileAPI/
• Using files from web applications
  ...
Reference – CSS Gradients

• Gradients – CSS Image Values Module Level
  3 Draft
  •   http://dev.w3.org/csswg/css3-images...
Reference - WOFF

• Web Open Font Format for Firefox 3.6
 •   http://hacks.mozilla.org/2009/10/woff/
• CSS Fonts Module Le...
Referenece - WebGL
•       Khronos Group
    •     http://www.khronos.org/webgl/
•       WebGL Draft
    •     https://cvs...
Any Question?
Upcoming SlideShare
Loading in …5
×

Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later

5,680 views
5,567 views

Published on

Presentation of W3C HTML5 Japanese Interest Group at 22 Jan 2010

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,680
On SlideShare
0
From Embeds
0
Number of Embeds
1,840
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later

  1. 1. Web Technology features with Firefox 3.6 / Gecko 1.9.2 and later Makoto Kato Technical Advisor, Mozilla Japan
  2. 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. 3. File API
  4. 4. File API • <input type=“file”>で選択されたローカル フゔ゗ルへのゕクセスを提供 • ユーザーの操作にてフゔ゗ルを指定する • valueはそもそもJavaScriptから変更不可 • FileReaderを経由したフゔ゗ルゕクセス • HTML5 Drag & Dropと組み合わせると、ブラ ウザウゖンドウへのDrag & Dropでフゔ゗ル にゕクセスすることが可能
  5. 5. File API • File゗ンターフェ゗ス • フゔ゗ル名、種類などの取得 • FileReader ゗ンターフェ゗ス • フゔ゗ルゕクセスの゗ンターフェ゗スを提供 • バ゗ナリ / テキスト / DataURLとして読み込む • エラー、進捗、完了などの゗ベントを提供 • resultプロパテゖに読み込んだ内容が入る • FileReaderSync ゗ンターフェ゗ス • 同期ゕクセス用 • 現時点でFirefox / Geckoでは未実装 • readAs*メソッドはFileException例外をスローする
  6. 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. 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. 8. CSS Gradients
  9. 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. 10. CSS Gradients • Firefox 3.6 / Gecko 1.9.2では、”-moz- ”prefixを使う必要あり (-moz-linear-gradient) • 画像を受け入れることができるCSSプロパテゖす べてで利用可能 • Firefox 3.6ではbackgroundくらいにしか動作しません
  11. 11. Linear Gradients • linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) linear-gradient( top, blue, white ); linear-gradient( 45deg, blue, white);
  12. 12. Radial Gradients • radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* ) -moz-radial-gradient( red, yellow, green );
  13. 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. 14. Web Open Font Format - WOFF
  15. 15. Web Font Support • Firefox 3.5でWebフォントをサポート @font-face { font-family: GentiumTest; src: url(fonts.ttf); } • OpenTypeとTrueTypeフォントのみ
  16. 16. Web Font Support • Firefox 3.6では新しいWebフォント形式 (WOFF) をサポート @font-face { font-family: GentiumTest; src: url(fonts.woff) format("woff"); } • フォントベンダと共同で作成した新しいフォント 形式 • OpenTypeなどよりもサ゗ズは小さい • 現状では差分ダウンロードには対応していない • MIMEタ゗プは決まってない 16
  17. 17. WebGL
  18. 18. 現状のブラウザでのレンダリング • HTMLなどのレンダリングにはOSのAPIを利用 • GDI, Quartz, Cairo and etc… • チップのハードウェゕ・ゕクセラレーションが 使われるかどうかは、利用するAPI、OS次第 • プラグ゗ンなしでは、3D画像であってもソフ トウェゕで3D画像を計算する必要がある
  19. 19. 現在のグラフィック・ハードウェア (GPU) • 現在のAMD、NVIDIA、IntelなどのPC向けの グラフゖック・チップでは3D向けのDirectX9 やOpenGLのサポートが含まれている • モバ゗ル分野であっても、TIやQualcomm、 iPhoneの最新チップセットではOpenGL ES 2.0のサポートが含まれる
  20. 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. 21. シェーダー・サポート • バーテックス・シェーダー <script type=“x-shader/x-vertex”> • フラグメント・シェーダー (ピクセル・シェー ダー) <script type=“x-shader/x-fragment”>
  22. 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. 23. DEMO
  24. 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. 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. 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. 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. 28. Any Question?

×