Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,885 views

Published on

Presentation of W3C HTML5 Japanese Interest Group at 22 Jan 2010

Published in: Technology
  • Be the first to comment

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?

×