about:html&firefox
DESCRIPTION
WDF vol.3 で使用したスライドTRANSCRIPT
about:HTML&Firefox—Past, Now & Future—
Slides @ WDF vol.3by Tomoya ASAI (dynamis)
last update on 2011.12.10see also: http://dynamis.jp/r
ブラウザと Web 技術の過去・現在・未来
see also: http://dynamis.jp/r
about:me http:// dynamis.jp
@dynamitter
facebook.com/ dynamismailto: Tomoya ASAI (dynamis) <dynamis mozilla-japan.org>@
他の講演資料@SlideShare Firefox with HTML+CSS
最近の HTML/CSS 機能紹介 Security Features
最近のセキュリティ関連技術 Developer Tools
Firefox の開発者ツール
その他 SlideShare にいろいろ。メモ集は github にあります
http://firefoxhacks.org/発行/オライリー・ジャパン 発売/オーム社 定価(本体3,400円+税) オライリー・ジャパン
Firefox Hacks RebootedISBN978-4-87311-497-2
Mozilla Japan
推薦書!
Mozilla Japan代表理事 瀧田佐登子
ウェブを使い倒すテクニック満載! ●新しいユーザーインタフェース ●タブグループ ●アプリタブ●Firefox Syncを使ってブラウザ情報の同期を取ろう ●テキスト領域のリサイズ ●Personasで実現する着せ替えブラウザ ●ユーザープロファイルの基本 ●Vimperator ●KeySnail ●VimperatorとKeySnailの設計の違いからくる設計手法 ●Firefox Home ●FirefoxとTwitter ●Facebook関連 ●Add-on SDKとは何か ●Add-on SDKのセットアップ ●拡張機能の開発(基礎編) ●addon-kitライブラリ●api-utilsライブラリ ●拡張機能の開発(応用編) ●拡張機能のローカライズ ●拡張機能の自動テスト●再起動不要な拡張機能「Bootstrapped Extensions」の作り方 ●Bootstrapped Extensionsの制限●
外部スクリプトをBootstrapped Extensionsで読み込む ●FirefoxのUIをBootstrapped Exten-sionsで変更する ●Bootstrapped Extensionsの設定UI ●Bootstrapped ExtensionsでのResource URLの登録 ●Bootstrapped Extensionsと非同期な初期化処理や終了処理 ●XPCOMコンポーネントをBootstrapped Extensionsに組み込む ●Bootstrapped Extensionsでのchrome.manifestの利用 ●Bootstrapped ExtensionsのFirefox 3.6対応 ●e10sにおけるプロセス間通信の基本 ●メッセージマネージャのAPI詳説 ●コンテントスクリプト用のAPI詳説 ●Chromeスクリプトからコンテントスクリプトへ同期的にメッセージを送る ●Bootstrapped Extensionsでコンテントスクリプトを使う ●非同期処理のすすめ ●MozStorageの非同期API ●アドオンマネージャの非同期API●ワーカーによるマルチスレッド処理 ●JSDeferredで非同期処理をスッキリ書く ●Firefoxの非同期処理をDeferred化する ●HTML5再入門 ●ECMAScript5 ●ECMAScript for XML ●E4X 応用●CSS3時代のデザイン ●Webフォント徹底活用 ●テキスト領域のリサイズ ●Canvas入門 ●SVGとSMILによるアニメーション ●新しいアニメーション技術比較 ●コンテンツセキュリティポリシー ●イマドキのセキュリティ機能を活用する ●AndroidでもFirefox ●デバイスセンサーを活用する ●プラグインプロセスの分離 ●js-ctypesとXPConnectの違いを理解する ●js-ctypesの基本的な使い方 ●js-ctypesで自力でメモリを管理する ●Firefox.Future
最新のWeb技術、新世代Add-on SDKはもちろん、FirefoxとWebの未来がこの一冊に集約!日本のMozillaドリームチームが綴ったこの本がバイブルになることは間違いない!次はあなたがHackにチャレンジする番です。
Rapid Release & ESRKey Point HTML5Firefox in 2011Firefox in 2012
Agenda
Rapid ReleaseRelease every 6 weeks...
http://mozilla.jp/firefox/preview/faq/
http://mozilla.jp/firefox/preview/faq/
高速リリースプロセス 原則 6 週間毎にリリース
Nightly Aurora Beta Release
Fx 9 08/16 09/27 11/08 12/20Fx10 09/27 11/08 12/20 01/31Fx11 11/08 12/20 01/31 03/13Fx12 12/20 01/31 03/13 04/24Fx13 01/31 03/13 04/24 06/05
http://mozilla.jp/firefox/preview/faq/
◎ 最新機能・技術をすぐ利用可能◎ Web 技術の発達を促進◎ より広く早いフィードバック◎ リリース日が事前に予期可能× バイナリアドオンの互換性× 一部 Web サイトの互換性
高速リリースの利点と欠点
http://mozilla.jp/firefox/preview/faq/
ESR Proposalfor Enterprise Users...
延長サポートリリース (案) セキュリティ・安定性修正のみ サポート期間は 54 週 = 約1年
検証・導入にはそれぞれ 12 週間 Firefox 10 = ESR 10
2012/01/31 から開始 Firefox 17 = ESR 17
https://wiki.mozilla.org/Enterprise/Firefox/ExtendedSupport:Proposal
Key Point "HTML5"understanding html5...
HTML5 勘違い Best5拡張子は .html5!WebM 使えるのが HTML5!SVG 使えるのが HTML5!IE で SVG アニメーション!Web 技術は何でも HTML5!
選択基準: 独断と偏見
拡張子は .html5?
んなわけあるか! (ノ><)ノ
WebM 使えるのが HTML5? 動画や音声のコーデックは仕様
では指定されていません コーデックは時代と共に変わる 全ベンダーの合意は不可能
WebM でなく H.264, Ogg, MP3, Opus などでも同じ話です
補足: Opus は IETF で仕様策定中の特許フリーな次世代音声コーデック
SVG 使えるのが HTML5? サポートする画像もやはり仕様
では規定されていません <img src="*.svg"> は仕様上
HTML4 でも HTML5 でも可 Firefox は 2005 年の 1.5 から XHTML+SVG をサポート
名前空間なしで直接 SVG タグを書けるのは HTML5 からで正しい
HTML5 パーサにより SVG タグ埋め込めるというのと SVG 使えるというのは別問題
IE で SVG アニメーション SVG Animation は SVG 1.1 に
含まれる機能の一つ IE9 も IE10 も未サポート
IE9 用デモ SVG Girl は「SVG を使った JS アニメーション」 SVG Girl を "SVG Animation"
と呼ばれていたが、SVG の機能でなく JS で実現した力業...
大人の事情で技術的に正しい用語が使われなかっただけ...ですよね?
Web 技術は何でも HTML5?
んなわけあるか! (ノ><)ノ
���������� �
フォクすけに教えて!
The term "HTML5" is widely
used as a buzzword to refer to
modern Web technologies...
WHATWG HTML 仕様書の解説http://whatwg.org/html - Introduction
WHATWG HTML 仕様書の解説http://whatwg.org/html - Introduction
"HTML5" という用語は最新Web 技術を指すバズワードとして広く使われています
"HTML5" という用語は最新Web 技術を指すバズワードとして広く使われています
HTML5 の生い立ちは...
1989年に Tim Berners-Lee が提案
http://foxkeh.jp/downloads/
http://foxkeh.jp/downloads/
1989: HTML の起源を提案 1990: 初の Web ブラウザ公開 ブラウザ乱立・独自拡張乱立 1994: W3C を発足し標準化へ 1995: HTML 2.0 が RFC に 1997: HTML 3.2 が W3C 勧告に HTML 4.0 が W3C 勧告に
HTML4 に至るまで
W3C は XHTML で再出発へ 1998: XML 1.0 勧告
HTML4 の拡張は困難と判断しXML で作り直すと決定
2000: XHTML 1.0 勧告 HTML4 を XML にしただけ
2001: XHTML 1.1 勧告 HTML4 と後方互換性がなくなる
標準化の分裂 W3C は XHTML 2.0 仕様策定へ 2001: IE6 リリース
XHTML サポートなし! (><) 2004: WHATWG 設立
Mozilla & Opera が W3C で後方互換の提案をするが否決された
仕方なく別組織で HTML4 に後方互換な後継仕様策定へ
W3C と WHATWG の和解 2006: IE7 リリース
相変わらず XHTML 非サポート XHTML 2.0 は仕様策定も遅いし
ブラウザには実装されない状況 W3C 互換性の重要性を認める 2007: 新しい HTML WG 設立
WHATWG の仕様を HTML5 にFirefox は XHTML 1.1 や XForms などには対応していたが...
W3C での標準化 2008: W3C 最初の HTML5 草案
中身は WHATWG のもの 2009: W3C XHTML 2.0 WG 終了
Web ではブラウザに実装された仕様が残ることが明らかに
2011: W3C HTML5 最終草案 20??: HTML5 勧告
HTML5 = HTML4 の後継 再出発ではなく段階的発展
HTML4 の次だから HTML5 理想的転換でなく現実的発展
次世代技術への第一歩 HTML5 は既存技術の整理が主
Web アプリケーション向け 本格的なアプリ環境へ
It is necessary to evolve HTML incrementally. The attempt to
get the world to switch to XML,... all at once didn't work.
"Reinventing HTML" by Tim Berners-Lee
"Reinventing HTML" by Tim Berners-Lee
HTML は段階的に発展させる必要がある。... すべてを一度に切り替えようという試みは成功しなかった。
The drag-and-drop API is horrible,but it has one thing going for it: IE6
implements it, as do Safari and Firefox.
Ian Hickson http://twitter.com/Hixie/status/4075253361
Ian Hickson http://twitter.com/Hixie/status/4075253361
Drag & Drop API は酷いけど、採用する理由がひとつある。つまり、IE6 だけでなく Safari や Firefox でも実装されているということだ。
"HTML5" という用語は最新Web 技術を指すバズワードとして広く使われています
Web 2.0 やクラウドと一緒です
OfflineSupport
UserInteraction
Canvas Microdata
Web Workers
WebSockets
CSSSemanticElements
Multimedia Elements
HTML5Parser
Web Messaging
HTML5 Forms
WebGLWebRTC
DOM
SVG
Geolocation
ECMA5th
MathML
XHR
WHATWG W3C Other(主な)仕様策定の場:
W3C 仕
様書名に
"HTML" を
含む
HTML - W
3C
HTML Living Standard - WHATWG
OfflineSupport
UserInteraction
Canvas Microdata
Web Workers
WebSockets
CSSSemanticElements
Multimedia Elements
HTML5Parser
Web Messaging
more...
HTML5 Forms
WebGLWebRTC
DOM
SVG
HTML Living Standard - WHATWG
OfflineSupport
UserInteraction
Canvas Microdata
Web Workers
WebSockets
HTML5SemanticElements
Multimedia Elements
HTML5Parser
Web Messaging
more...
HTML5 Forms
HTML Canvas 2D
Context
HTML5 Microdata
HTML5 Web Messaging
Web Workers The WebSocket API
WAHTWG & W3C 仕様の対応
W3C の視点 モジュール化を重視
WHATWG の仕様を機械的分割 確定した標準が必要
スナップショットを HTML5 に 特許問題のためにも勧告へ
HTML.Next も平行して取り組む HTML6 と呼ぶかどうかは未定
標準化団体として参加する大企業などが求める事が反映される
WHATWG の視点 全体の整合性を重視
基本的に分割せず一つの仕様に これからも進化を続ける標準
実装と仕様は乖離すべきでない HTML Living Standard
HTML5 は既に Live な標準 HTML にバージョンは付けない
ブラウザベンダーなど変化を続ける現場からの視点
Semantic Elements CSS Transforms ECMA5th
Multimedia Elements CSS Animations WebM Codec
Canvas 2D API SVG WebGL
Forms WOFF (Web Fonts) WebCL
Offline Events Event Listener (DOM) Typed Array
Drag & Drop API XHR Level 2 Audio Data API
Web Storage Indexed DB SQL DB (obsolate)
HTML5 Parser File API River Trail
Web Workers Geolocation SPDY
Web Sockets API Server-Sent Events Web Socket Protocol
Microdata Device Orientation ContentSecurityPolicy
Web RTC Device API ICC Color Profile
Semantic Elements CSS Transforms ECMA5th
Multimedia Elements CSS Animations WebM Codec
Canvas 2D API SVG WebGL
Forms WOFF (Web Fonts) WebCL
Offline Events Event Listener (DOM) Typed Array
Drag & Drop API XHR Level 2 Audio Data API
Web Storage Indexed DB SQL DB (obsolate)
HTML5 Parser File API River Trail
Web Workers Geolocation SPDY
Web Sockets API Server-Sent Events Web Socket Protocol
Microdata Device Orientation ContentSecurityPolicy
Web RTC Device API ICC Color Profile
WHATWG HTML
Semantic Elements CSS Transforms ECMA5th
Multimedia Elements CSS Animations WebM Codec
Canvas 2D API SVG WebGL
Forms WOFF (Web Fonts) WebCL
Offline Events Event Listener (DOM) Typed Array
Drag & Drop API XHR Level 2 Audio Data API
Web Storage Indexed DB SQL DB (obsolate)
HTML5 Parser File API River Trail
Web Workers Geolocation SPDY
Web Sockets API Server-Sent Events Web Socket Protocol
Microdata Device Orientation ContentSecurityPolicy
Web RTC Device API ICC Color Profile
W3C HTML5
Semantic Elements CSS Transforms ECMA5th
Multimedia Elements CSS Animations WebM Codec
Canvas 2D API SVG WebGL
Forms WOFF (Web Fonts) WebCL
Offline Events Event Listener (DOM) Typed Array
Drag & Drop API XHR Level 2 Audio Data API
Web Storage Indexed DB SQL DB (obsolate)
HTML5 Parser File API River Trail
Web Workers Geolocation SPDY
Web Sockets API Server-Sent Events Web Socket Protocol
Microdata Device Orientation ContentSecurityPolicy
Web RTC Device API ICC Color Profile
Internet Explorer
点線は標準非搭載や限定的実装
Semantic Elements CSS Transforms ECMA5th
Multimedia Elements CSS Animations WebM Codec
Canvas 2D API SVG WebGL
Forms WOFF (Web Fonts) WebCL
Offline Events Event Listener (DOM) Typed Array
Drag & Drop API XHR Level 2 Audio Data API
Web Storage Indexed DB SQL DB (obsolate)
HTML5 Parser File API River Trail
Web Workers Geolocation SPDY
Web Sockets API Server-Sent Events Web Socket Protocol
Microdata Device Orientation ContentSecurityPolicy
Web RTC Device API ICC Color Profile
Chrome
点線は標準非搭載や限定的実装
Semantic Elements CSS Transforms ECMA5th
Multimedia Elements CSS Animations WebM Codec
Canvas 2D API SVG WebGL
Forms WOFF (Web Fonts) WebCL
Offline Events Event Listener (DOM) Typed Array
Drag & Drop API XHR Level 2 Audio Data API
Web Storage Indexed DB SQL DB (obsolate)
HTML5 Parser File API River Trail
Web Workers Geolocation SPDY
Web Sockets API Server-Sent Events Web Socket Protocol
Microdata Device Orientation ContentSecurityPolicy
Web RTC Device API ICC Color Profile
Firefox
点線は標準非搭載や限定的実装
IE9... http://caniuse.com/
IE9... http://caniuse.com/
IE10 に期待しましょう!
"HTML5" という用語は最新Web 技術を指すバズワードとして広く使われています
"Web 2.0" や "クラウド" と一緒...
技術用語は正しく (・・). 誤用する場合も理解した上で...
HTML5 = W3C の仕様書 HTML = WHATWG の仕様書 "HTML5" = ALL (バズワード)
バズワードとして使う時はHTML5 でなく "HTML5"と区別しましょう (・・)/
あるいはバズワード用ロゴ を使う
Firefox in 2011Firefox 5, 6, 7, 8, 9
細部にこだわる UI 改良 更に見やすいロケーションバー
利用統計に基づくシンプル化 進むボタンのデフォルト非表示 戻った時には滑らかに自動表示
アドオン管理機能の強化 外部プログラムが追加したアド
オンの利用をユーザに確認 インストール後の起動時に確認 クラッシュや重たい最大の原因
は一部のプラグイン&拡張機能 既存アドオンは初回起動時確認
Firefox 8 以降への更新時に
パフォーマンス 起動時間短縮・終了時間短縮
タブの遅延読み込み設定も ブックマーク編集なども即時同期 描画も JavaScript も高速化
型推論で JavaScript 高速化 Azure API で Canvas 高速化 WebGL で GPU を活用
メモリ使用量の削減 環境によっては 50% 以上削減
Fx6→Fx7 では平均 20~30% Fx10→Fx11 では 10% 程度
MemShrink プロジェクト 時間ベース GC、細分化防止、確保サイズ修正、正規表現や JIT の遅延コンパイル、32bit 固定長配列、JSObject & JSFunction 縮小、jemalloc on Mac, more and more...
HTML Living Standard <progress> 進捗状況バー <menu> コンテキストメニュー data-* カスタムデータ属性 Server-Sent Events Web Socket などなどなど...
WHATWG HTML 仕様に含まれる範囲
More CSS & DOM CSS Animations text-overflow: ellipsis text-decoration: wavy font-stretch hyphen などなどなど...
W3C の CSS や DOM で標準化されているもの
CSS Animations Transitions を連続する機能
Transitions の拡張として定義 キーフレーム毎のスタイルを指定
CSS だけでアニメーション GPU を用いた高速処理
Firefox 5~ https://developer.mozilla.org/en/CSS/CSS_animations
復習: CSS Transitions スタイル遷移をなめらかに 簡単にアニメーションできる GPU を用いた高速処理
Firefox 4~ https://developer.mozilla.org/en/CSS/CSS_transitions
CSS Transitions 使用例
http://hacks.mozilla.org/2010/07/firefox4-beta2/
#somebox { color: black; background-color: yellow; /* すべてのスタイルを2秒かけて変化、開始はなめらかに */ -moz-transition: all 2s ease-in; transition: all 2s ease-in;}#somebox:hover { /* マウスオーバーで配色、サイズ、角度を変化 */ color: white; background-color: red; -moz-transform: rotate(-60deg) scale(1.5); transform: rotate(-60deg) scale(1.5);}
CSS Transitions 発動条件 「スタイルの変更」時に発動
変更前の状態が一度描画されている必要がある
ページロード時に遷移するなら onload 後にスタイル指定が必要
left など一部スタイルは変化前にも left: 0px; などの指定が必要
CSS Animationsに話を戻して...
CSS Animations 使用例 ��$W����"� ��"�� ���$� !"'�������(���'� ���!W���������� W)W��W5<=+8>AOFW��WW� ��W)WW*W��WBI-4MD2EN:;6?133W��WW��WW)W����� �#���W�# ����W*W��WST1KD.J0W��WW"�WWW)W����� �#���W� �����W*W��WHLP07@A90W��*�"� ��"W)WW����� �#���W��#��W%��"��W����&�W�����"�W����&�*�"� ��"���$� W)WW���(������"����W���������� W!�W��W5<=+8>AQUW��* �!"'���
CSS Animations の注意 完了後は元のスタイルに戻る
to スタイルは維持されない 開始前と from, to と完了後の
スタイルは一瞬で切り替わる 滑らかに変化して維持するなら:
from は既存スタイルと同じに to は完了後スタイルと同じに
滑らかに変化して維持する ��$W����"� ��"�� ���$� !"'�������(���'� ���!W���������� W)WW� ��W)W����� �#���W��#��W*WWW��WEN:;6?/R,W��WW��WW)W����� �#���W�# ����W*WW"�WWW)W����� �#���W� �����W*W��WCVG/R,W��*�"� ��"W)WW����� �#���W��#��W%��"��W����&�W�����"�W����&�*�"� ��"���$� W)WW���(������"����W���������� W!�WW����� �#���W� �����W��W"�W)*W/R,W��* �!"'���
CSS Animations 発動条件 -moz-animation 設定するだけ
onload 前でも問題なし 一定時間後にアニメーションし
たい場合は animation-delay を使って遅延時間を指定する
More Standards Camera Capture API (Android) Device Orientation (W3C 仕様に) XMLHttpRequest Level 2 WebGL サポート強化 ICC v4 (default off) Navigation Timing などなどなど...
その他 W3C や IETF や Khronos とかで標準化...
Security & Privacy Web Socket (最新仕様) WebGL × CORS <img crossorigin="..."> Content Security Policy Do Not Track (ユーザ追跡拒否) などなど...
WebDev 向けセキュリティ機能: http://www.slideshare.net/dynamis/firefox-security-features
Developer Tools Firefox 標準の開発者ツール Web Console
エラーコンソール HTTP ヘッダの確認にも
Scratchpad 複数行 JavaScript コンソール インスペクトなどもできる
Firefox in 2012Firefox 10 & later
生まれ変わる Android 版 Native UI (Java で再実装)
一瞬で起動するように 高速スクロール&ズーム Flash もサポート
片手で使いやすい UI へ タブレット専用の UI も
Firefox 11 で Native UI に切り替わる予定
タブレットにも縦横それぞれに最適化した UI を用意しています
Firefox Sync の強化 インストールアドオンの同期 セットアップをより簡単に タブグループに別マシンのタブ タブをデバイスに送信 などなど...
Firefox Home 2 履歴からも Web からも検索
情報取得の出発点に Web アプリ版も提供
最初はまた iPhone 専用の予定 詳細は来年の発表を待ってね。
Firefox Share 現在ページを簡単に共有
ロケーションバーにアイコン Twitter, Facebook, Gamil etc... F1 プロジェクトの後継
黙って静かに自動更新 ダイアログ表示を無くす
更新時の進捗ダイアログ Windows の UAC も非表示
拡張機能はデフォルト互換に バイナリアドオンなどは例外
起動時でなく終了時に更新 What's New ページなど少なく
パフォーマンス関係 使用メモリ削減 (MemShrink)
機能は増えてもメモリは少なく 応答性向上 (Snappy)
プチフリをどんどん削減 JavaScript 高速化 (IonMonkey)
型推論フル活用、中間言語変更 SPDY 対応 (既にほぼ完了) etc...
Developer Tools Inspector Eclipse Orion Graphical Command Line Style Editor Source Map Tilt などなど...
まだまだ進化する Web 技術 CSS 3D Transform Full Screen, DOMCrypt... Camera, Game Pad, Vibrator Battery Status, SMS... などなど...
http://arewemobileyet.com/
PDF.js プロジェクト ネイティブコードなしで PDF を
Open Web 技術の結晶 現在 Web アプリ or 拡張機能
Web 技術も DTP レベルに... PDF に必要な Web 技術も実装
していく (ex. CSS font-stretch)
https://github.com/mozilla/pdf.js
Firefox Hacks Rebooted のサンプル PDF 読み込み例
Boot to Gecko ブラウザエンジンを起動する OS すべてのアプリは Web 技術で
HTML+JavaScript & Web APIs ネイティブアプリに比べて足りな
い API は順次追加 Android のコードを一部利用
多様なドライバサポートのためhttps://wiki.mozilla.org/B2G
超初期のスクリーンショット。UI は API 動作検証用のサンプルレベルです
詳細は来年1月を待て!
UStream も流すことになりそうです。
Open Web AppsWeb Apps Ecosystem
Web アプリの課題 マーケットがオープンでない
完全にベンダーロックイン 自分でアプリ配信できない
ユーザ認証にプライバシー問題 ベンダーに全情報提供してよい? OpenID も使用アプリの情報を
全てプロバイダに知られてしまう
Open Web Apps Store ベンダー非依存アプリカタログ
誰もが自分のストアを開設可能 マルチプラットフォーム対応
インストールしたアプリも同期 マルチブラウザ対応
Open Web 技術だけで実現 認証には BrowserID を