firefox & html5
DESCRIPTION
201002 OSC Tokyo/Spring でのプレゼン資料TRANSCRIPT
Firefox & HTML5Presentation @ OSC 2010 Tokyo/Spring
by Tomoya Asai (aka. dynamis)
about:me
浅井 智也 ＝ dynamis (でゅなみす)
Mozilla Japan テクニカルマーケティング
Mozilla Product & Technology Evangelist
slides: http://r.dynamis.jp/presen
mail: dynamis mozilla-japan.org
twitter: @dynamitter
@
Firefox & HTML5
Web Design
Web Applications
Yet Another Platform
Agenda:
StatisticsBrowser Share
2002/01
2009/07
Browser MarketShare Graph by AXIIShttp://www.axiis.org/examples/BrowserMarketShare.html
Browser MarketShare Graph by AXIIShttp://www.axiis.org/examples/BrowserMarketShare.html
Opera2%
Safari4%
Chrome5%
Firefox25% Internet Explorer
63%
世界のブラウザシェア (2009/12)
Opera2%
Safari4%
Chrome5%
Firefox25% Internet Explorer
63%
世界のブラウザシェア (2009/12)
Browser MarketShare Data by NetApplicationshttp://marketshare.hitslink.com/
Firefox & HTML5Browser Platform
2004
Web 2.0
Google Suggest
Google Maps
Gmail
Firefox 1.0
ブラウザ業界に再び競争を
シンプルで高速なブラウザ
Web 標準準拠を推進
Browser = Web Viewer
Browser = Web Platform
But...
ブラウザ間の互換性...
不安定、低機能、低速...
XHTML 2.0 なども普及せず...
5 years later...
HTML5
次世代 Web 標準
Web Application 1.0
CSS3 など関連仕様も
Browsers
Safari, Chrome, Firefox ...
Web 標準を共にサポート
安定性、機能、速度も改善
ApplicationsDesktop
ApplicationsWeb
Web DesignCSS, Image, Fonts...
text-shadow
Firefox3.5̃ http://hacks.mozilla.org/2009/06/text-shadow-spotlight/
text-shadow
Firefox3.5̃ https://developer.mozilla.org/ja/CSS/Text-shadow
要素のテキストと text-decoration に影を付ける
text-shadow: black 2px 2px 5px;
影の色、水平距離、垂直距離、ぼかし半径を指定
複数の影を列挙指定することも可能
text-shadow: black 0 0 4px, red 2px 2px 4px;
下線などに対しても影がつく
同様にボックス要素には box-shadow
box-shadow はまだ仕様が Draft なので注意
http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html
window.onload = function () { document.getElementById('text-shadow-box').onmousemove = onMouseMove; text = document.getElementById('tsb-text'); spot = document.getElementById('tsb-spot');}function onMouseMove(e) { // マウスポインタの中心からの距離に応じて影の位置を変更 var xm = e.clientX - 300, ym = e.clientY - 175; var d = Math.sqrt(xm*xm + ym*ym); text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d / 5 + 10) + 'px black'; // 中心だけ透明な画像をマウスポインタの位置に表示 xm = e.clientX - 600, ym = e.clientY - 450; spot.style.backgroundPosition = xm + 'px ' + ym + 'px';}
CSS Gradients
Firefox3.6̃ http://hacks.mozilla.org/2009/06/text-shadow-spotlight/
CSS Gradients
線形 (linear) と放射状 (radial) の２種類
linear-gradient(top, black 0%, white 100%)
radial-gradient(circle, yellow, green)
繰り返し形式もサポート
repeating-linear-gradient(red 10px, blue 10px)
CSS3 Images で画像の一種として定義
Draft なので -webkit-, -moz- prefix が必要
Firefox 3.6 では background に対してのみ
WebKit の構文は古い仕様のものなので注意
Firefox3.6̃ http://dev.w3.org/csswg/css3-images/#gradients-
http://people.mozilla.org/~blizzard/2009-11-gradient-button/sample.html
<style>.gradationbutton { display: block; /* a タグをボックス要素に */ font: bold 138.5% Helvetica,Arial,sans-serif; text-align: center; text-decoration: none; /* リンクの下線解除 */ color: #ffffff; /* 白抜き文字 */ text-shadow: -1px -1px 2px #777777; /* エンボス */
padding: 10px; border: 1px solid #659635; -moz-border-radius: 10px; /* 角を丸める */ background: #99ca28; /* 非サポートブラウザ向けのフォールバック */ background: -moz-linear-gradient(top, #CFE782 0%, #9BCB2A 2%, #5DA331 97%, #659635 100%);}.info { font-size: 81%; font-weight: normal;}</style><p style="width: 300px;"> <a class="gradationbutton" href="http://hacks.mozilla.org"> <span>hacks.mozilla.org</span><br/> <span class="info">HTML5 の最新情報はこちら!</span> </a></p>
Multiple Backgrounds
Firefox3.6̃ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
Multiple Backgrounds
background に複数の画像を指定可能に
background: <image1>, <image2>, <image3>...
CSS3 Images の gradation も組み合わせ可能
半透明なグラデーションでフェード効果も
画像の数、ファイルサイズ削減にも繋がる
Firefox 3.6 以降でサポート
WebKit は未サポートなので注意
Firefox3.6̃ https://developer.mozilla.org/ja/Using_gradients
http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
<style>.fadedflower { background: /* 左が白、右が無色透明となるグラデーション */ -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), /* その後ろに表示する画像 */ url(flowers-pattern.jpg);}</style>
<div class="fadedflower"> <!-- グラデーション背景画像つき要素 --></div>
Web Fonts
Firefox3.5̃ http://www.alistapart.com/articles/cssatten
Web Fonts
CSS3 Web Fonts
@font-face でダウンロードフォントを定義
@font-face { font-family: Koburina; src url(Koburina.woff) format("woff"); }
Firefox 3.5 で OpenType, TrueType をサポート
Firefox 3.6 からは WOFF もサポート
Web Open Font Format
フォントベンダと共に作った新フォント形式
グリフ部分のデータは圧縮して小さく
Firefox3.5̃ https://developer.mozilla.org/ja/CSS/@font-face
sample css style rules
/* Internet Explorer 用フォント設定 (必ず最初に) */@font-face { font-family: Sawarabi; src: url(Sawarabi.eot) /* format() 非サポート */;}/* 他のブラウザ向けフォント設定 */@font-face { font-family: Sawarabi; src: url(Sawarabi.otf) format("opentype");}/* Firefox 3.6 以降には WOFF を */@font-face { font-family: Sawarabi; src: url(Sawarabi.woff) format("woff");}body { font-family: Sawarabi, sans-serif; }
Firefox3.5̃ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
CSS Transitions
Firefox.next̃ http://24ways.org/2009/going-nuts-with-css-transitions
CSS Transitions
Firefox.next̃ http://24ways.org/2009/going-nuts-with-css-transitions
CSS3 Transitions
transition: all 0.5s ease-in;
transition: color 1s linear, width 1s ease-in;
Draft なので -webkit-, -moz- prefix が必要
一部プロパティの変化をなめらかにする
動的擬似クラスや JavaScirpt 書き換え時に
位置、サイズ、カラー、シャドウなどが対象
変化の時間や速度なども制御可能
linear, ease, ease-in, ease-out など
http://media.24ways.org/2009/14/5/index.htmla.polaroid { /* ... font-size とか省略 ... */ z-index: 2; -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; transition: all 0.5s ease-in;}a.polaroid:hover,a.polaroid:focus,a.polaroid:active { z-index: 999; border-color: #6A6A6A; -webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); -moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); -webkit-transform: rotate(0deg) scale(1.05); -moz-transform: rotate(0deg) scale(1.05); transform: rotate(0deg) scale(1.05);}
box-shadow
✴ 影はボックス要素にも付けられます
CSS Transforms
✴ CSS で要素の回転、変形、拡大縮小、平行移動
SVG Filter for HTML
✴ ぼかしや切り取りなどの SVG フィルタ
SMIL アニメーション (Firefox.next̃)
✴ SVG の SMIL アニメーションをサポート
その他色々... https://developer.mozilla.org/en/Upcoming_Firefox_features_for_developers
Web ApplicationsUser Interface, File...
File API
photo by californiaAmy http://www.flickr.com/photos/amyandthomas/3865411819/
File API
ローカルファイルの読み込み専用 API
Mozilla が中心に標準化、Firefox 3.6 で実装
書き込みは File API: Writer という別仕様
<input type="file"> 経由でのアクセスが一番基本
value は初期値設定や JS から文字列指定不可
XMLHttpRequest や Workers などでも利用可
Drag & Drop API との組み合わせも可能
Blob, File, FileReader などのインターフェイス
Firefox3.6̃ https://developer.mozilla.org/en/Using_files_from_web_applications
https://developer.mozilla.org/en/Using_files_from_web_applications
<input type="file" id="fileInput" multiple="true"/><script><!--var fileInput = document.getElementById("fileInput"); fileInput.addEventListener("change", handleFiles);
// onchange イベントハンドラfunction handleFiles() { var fileList = this.files; for (var i = 0; i < files.length; i++) { alert("ファイル名: " + files[i].name); alert("内容: " + files[i].getAsText("UTF-8")); } // close や lock は不要 (try-catch すれば OK)}--></script>
Drag & Drop API
Firefox3.6̃ http://r.dynamis.jp/fontdropdemo
Drag & Drop API
HTML5 の Drag & Drop API
DOM 要素などは Firefox 3.5 からサポート
addEventListener("drop", function(event) { ... },true)
dragstart, dragover, dragend などのイベント
ローカルファイルの扱いは File API
File API との組み合わせは Firefox 3.6 から
event.dataTransfer.files でファイルを受け取る
あとは File API で自由に読み取る
Firefox3.5̃ https://developer.mozilla.org/Ja/DragDrop/Drag_and_Drop
http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/
reader.onload = function(e) { var bin = e.target.result; //binaryString // 読み取ったファイルをアップロード var xhr = new XMLHttpRequest(); xhr.open("POST", "upload.php"); xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); xhr.sendAsBinary(bin);};
dropzone.addEventListener("drop", function(event) { event.preventDefault(); // ドロップイベントの dataTransfer でファイルアクセス var allTheFiles = event.dataTransfer.files; alert("ドロップしたファイル数: " + allTheFiles.length); for (var i = 0; i < files.length; i++) { // バイナリファイルとして読み込み reader.readAsBinaryString(files[i]); }}, true);
onhashchange イベント
✴ URL #anchor 部の変化を検出
Cross Domain XHTMLRequest
✴ 別ドメインにも Ajax 通信
<input type=file multiple>
✴ 複数ファイルの一括アップロード
<checkbox checked=indeterminate/>
✴ True/False どちらでもない状態
Web Workers - close()
✴ ワーカースレッドが自己終了可能に
その他色々... https://developer.mozilla.org/en/Upcoming_Firefox_features_for_developers
Yet Another PlatformLocation, Orientation, 3D...
Geolocation API
Firefox3.5̃ http://maps.google.com/
Geolocation API
W3C の Geolocation API
navigator.geolocation.getCurrentPosition()
navigator.geolocation.watchPosition()
Firefox 3.5 以降や iPhone の Safari などが対応
Chrome はネイティブサポートしないので注意
位置検出アルゴリズムはブラウザや端末次第
Firefox3.5̃ https://developer.mozilla.org/ja/Using_geolocation
http://r.dynamis.jp/geolocationdemo<!-- Google Maps API 使用例 --><script src="http://maps.google.com/maps.google.commaps?file=api& ... " type="text/javascript"></script><script type="text/javascript">window.onload = function() { // 現在位置を取得リクエスト (ユーザが許可したら関数実行) navigator.geolocation.getCurrentPosition(displayLocation);}
function displayLocation(loc) { // 引数 loc から中心地の座標を取得 var LatLng = new GLatLng(loc.coords.latitude, loc.coords.longitude);
// Google Maps API を使って地図を描画 var map = new GMap2(document.getElementById("gmap")); map.addControl(new GScaleControl()); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl()); map.setCenter(LatLng, 15); // 取得した座標に中央合わせ map.addOverlay(new GMarker(LatLng)); // 取得した座標にマーカー追加}</script>
Orientation
Firefox3.6̃ http://r.dynamis.jp/oryzeademo
Orientation
CSS と JavaScript の両方で利用可能
メディアクエリーで縦横画面別の CSS を指定
@media all and (orientation: portrait) { ... }
MozOrientation イベントで JavaScript 処理
window.addEventListener("MozOrientation", orientationHandler, true);定期的に加速度センサーからのイベント発生
Firefox3.6̃ http://hacks.mozilla.org/2009/10/orientation-for-firefox/
https://developer.mozilla.org/en/Detecting_device_orientation
<!-- 縦方向 (portrait) と横方向 (landscape) の CSS --><link rel="stylesheet" href="portrait.css" media="all and (orientation:portrait)"><link rel="stylesheet" href="landscape.css" media="all and (orientation:landscape)"><style>@media all and (orientation: portrait) { ... }@media all and (orientation: landscape) { ... }</style><script type="text/javascript">window.addEventListener("MozOrientation", handleOrientation);function handleOrientation(orientData) { var x = orientData.x; // デバイスの法線ベクトル X 成分 var y = orientData.y; // デバイスの法線ベクトル Y 成分 var z = orientData.z; // デバイスの法線ベクトル Z 成分 // デバイスの傾きに応じた適当な処理を行う}</script>
WebGL
Firefox.next̃ http://www.khronos.org/webgl/wiki/Demo_Repository
WebGL
The Khronos Group で API 仕様を策定
Apple, Google, Mozilla, Opera が参加
OpenGL ES 2.0 ベースの API を JS から使う
シェーダーやテクスチャなども当然利用可能
<canvas> を描画領域として利用
Firefox.next や WebKit Nightly でサポート
開発版 Firefox では about:config で設定が必要
webgl.enabled_for_all_sites = true
Firefox.next̃ https://developer.mozilla.org/en/WebGL
https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL
<canvas id="glcanvas" width="640" height="480"/><script type="text/javascript">var canvas = document.getElementById("glcanvas");// Web GL コンテキストを取得// Firefox では "moz-webgl" または "experimantal-webgl"// WebKit では "webkit-gl"var gl = canvas.getContext("webgl");if (gl) { // WebGL コンテキストの初期化 gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); // ... 色々描画処理を ...}</script>
HTML5 & FirefoxPlatforms Browser
HTML5 & Safari
デザイン周りの機能に強い
Apple 独自拡張も多い
デザイナー向けブラウザ？
HTML5 & Chrome
アプリ実行速度が最優先
プロトコルなども積極的
Web アプリ実行用ブラウザ？
HTML5 & Firefox
制約をなくす技術に積極的？
実装のバグは比較的少ない
Web の未来を創るブラウザ？
やっぱいいよね Firefox
Tips & HacksWeb Only Contents (・・).
Native JSON
ブラウザネイティブ実装の JSON 変換メソッド
JSON.parse(), JSON.stringfy()
セキュアかつ高速な変換処理が可能
IE8 も今月 (2010/02) のアップデートで対応
IE はバージョンあげずに機能追加もするみたい...
http://support.microsoft.com/kb/976662/en-us/
これまでは json2.js などのライブラリを利用
http://www.json.org/js.html
ECMA 5th の trim() などもネイティブメソッド...Firefox.3.5̃ https://developer.mozilla.org/en/Using_native_JSON
https://developer.mozilla.org/ja/Using_native_JSON
var foo = {};foo.str = "some string";foo.num = 3;foo.func = function(){ alert('(・・).'); };
var jsonString = JSON.stringify(foo);// jsonString = '{"str":"some string","num":3}'// リテラルと違いキー名も引用符で括られる// 関数のプロパティは JSON 仕様外なので無視される
var foo2 = JSON.parse(jsonString); // foo2 = {str: "some string", num: 3}
foo2.toJSON = function(){ return "bar"; }var jsonString2 = JSON.stringify(foo2)// jsonString2 = "bar";// toJSON() メソッドがあればその結果が使われる
about: <Video>
HTML5 では <video> や <audio> タグを追加
サポート Codec の違いには注意が必要
Firefox は特許問題のない Ogg 形式に対応
H.264 特許権利者の Apple は H.264 のみ対応
特許権利者でない Google は Ogg/H.264 両対応
体感速度向上につながる属性に注意
ポスターフレーム画像を poster 属性に指定
自動バッファ設定は autobuffer 属性で指定
フルスクリーン対応は今のところ Firefox のみ
Firefox.3.5̃ http://hacks.mozilla.org/category/video/
http://hacks.mozilla.org/2009/12/autobuffering-video-in-firefox/
<video controls> <!-- 各コーデックと、非対応ブラウザ向けを列挙 --> <source src="video.ogg" type="video/ogg"/> <source src="video.mp4" type="video/mp4"/> <embed src="video.swf" width="500" height="396" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"/></video>
<!-- 自動バッファオン、ポスターフレームあり --><video controls autobuffer poster="posterframe.jpg"> ...</video><!-- 自動バッファのデフォルト動作はブラウザ次第です - デスクトップ Safari/Chrome はデフォルトでオン - Firefox/Opera, iPhone Safari はデフォルトオフ - 但し Opera はその予定なだけで autobuffer 未対応 -->
Pointer Events
SVG 用 CSS pointer-events を HTML にも導入
Firefox 3.6 では auto と none だけ対応
pointer-events: auto; で従来通りの挙動
pointer-events: none; でマウスイベントを透過
例: 半透明画像下にあるリンクもクリック可能に
Firefox.3.6̃ https://developer.mozilla.org/en/CSS/pointer-events
http://demos.hacks.mozilla.org/openweb/pointer-events/<div class="boxContainer"> <div class="layer1"> クリックしたい下レイヤ <a href="a.html">リンクテキスト</a> </div> <!-- 半透明背景画像だけの上レイヤ --> <div class="layer2"></div></div><style>.layer1 { background-color: rgb(221, 238, 246); position: absolute;}.layer2 { /* 右端をフェードアウトさせる半透明レイヤ */ position: absolute; right: -15px; width: 155px; height: 120px; background: -moz-linear-gradient(right, rgba(0,34,51,1) 40px, rgba(0,34,51,0));}</style>
Selectors API
✴ querySelector() で DOM 要素を高速取得
classList
✴ 要素のクラス名を簡単かつ高速に操作
CSS rem (root em) Unit
✴ ルート要素に対する文字サイズを指定可能
CSS3 Values - calc() (Firefox.next̃)
✴ サイズなどの値に計算式を導入可能に
pushState() & popstate イベント (Firefox.next̃)
✴ URL 変更を伴わない履歴操作なども可能に
その他色々... https://developer.mozilla.org/en/Upcoming_Firefox_features_for_developers
Referencesfor more information...
ref.
hacks.mozilla.org - Mozilla と Web の最新技術紹介
http://hacks.mozilla.org/
Firefox の最新機能紹介ページ
https://developer.mozilla.org/en/Upcoming_Firefox_features_for_developers
https://developer.mozilla.org/ja/Firefox_3.6_for_developers
HTML5 Specifications (ブラウザの実装状況含む)
http://www.whatwg.org/specs/web-apps/current-work/
HTML5 の基本は矢倉さんのスライドがオススメ
http://www.slideshare.net/myakura/presentations
ref. - demo - design
Text Shadow で作るスポットライト
http://hacks.mozilla.org/2009/06/text-shadow-spotlight/
CSS Gradients で作る美しいボタン
http://hacks.mozilla.org/2009/11/building-beautiful-buttons-with-css-gradients/
CSS Gradients + 複数背景画像の使用例
http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
Web Fonts を使った美しいテキスト
http://www.alistapart.com/articles/cssatten
CSS Transition で作るフォトビューア
http://24ways.org/2009/going-nuts-with-css-transitions
ref. - demo - apps
File API + Drag & Drop API で作るフォントビューア
http://hacks.mozilla.org/2009/10/font_dragr-a-drag-and-drop-preview-tool-for-fonts/
File API + Drag & Drop API で作るファイルビューア
http://demos.hacks.mozilla.org/openweb/DnD/
http://demos.hacks.mozilla.org/openweb/FileAPI/
ファイルアップローダ
http://demos.hacks.mozilla.org/openweb/uploadingFiles/
http://demos.hacks.mozilla.org/openweb/imageUploader/
ref. - demo - platform
Canvas を使ったアプリケーション例
http://9elements.com/io/projects/html5/canvas/
http://mugtug.com/sketchpad/
Geolocation API の使用例
http://r.dynamis.jp/geolocationdemo
加速度センサーでオリゼーを動かすサンプル
http://r.dynamis.jp/oryzeademo
WebGL で描画する地球と火星のアニメーション
https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/webkit/Earth.html
ref. - tools
Canvas を使った Open Web ツール検索
http://tools.mozilla.com/
Web Fonts Generator - eot や WOFF フォントに変換
http://www.fontsquirrel.com/fontface/generator
Processing.js - Canvas によるアニメーション
http://processingjs.org/
IE でも Canvas を Flash/Silverlight で実行
http://code.google.com/p/uupaa-js/
ref. - spec.
File API
http://dev.w3.org/2006/webapi/FileAPI/
Geolocation API
http://www.w3.org/TR/geolocation-API/
window.onmozorientation
https://developer.mozilla.org/en/DOM/window.onmozorientation
WebGL
https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html
ref. - webgl
WebGL セクション@MDC
https://developer.mozilla.org/en/WebGL
The WebGL Cookbook
http://learningwebgl.com/cookbook/
Khronos - WebGL
http://www.khronos.org/webgl/
http://www.khronos.org/webgl/wiki/Demo_Repository