about:html&firefox

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 週 = 約１年

検証・導入にはそれぞれ 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 勘違い Best５拡張子は .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 を