Upload
dynamis-
View
3.087
Download
5
Embed Size (px)
DESCRIPTION
OSC Tokyo で使用したスライド(当日使用しなかったページも少し追加)
Citation preview
Slides @ OSC Tokyo 2012 on 2012/09/07by Tomoya Asai (dynamis)
HTML5 + Firefox OS
Last Update: 2012/09/07
about:
about:dynamisMozilla Japan
http://dynamis.jp@dynamitter
facebook.com/dynamisレッサーパンダが好き。
mailto: Tomoya ASAI <dynamis mozilla-japan.org>@
8�1�2.#
�����������
�����������
��� ���
����� !"��
!"����� �
Foxkeh
フォクすけの誕生日は 2006/09/01
"HTML5"
������)+.�/�
フォクすけに教えて!
The term "HTML5" is widely
used as a buzzword to refer
to modern Web technologies...
WHATWG HTML 仕様書の解説http://whatwg.org/html - Introduction
"HTML5" という用語は最新Web 技術を指すバズワードとして広く使われています
WHATWG HTML 仕様書の解説http://whatwg.org/html - Introduction
HTML5 の生い立ちは...
"HTML5" という用語は最新Web 技術を指すバズワードとして広く使われています
HTML の誕生: 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 に後方互換な後継仕様策定へ
Mozilla & Opera に Apple も参加する形で WHATWG 設立
W3C と WHATWG の和解
2006: IE7 リリース相変わらず XHTML 非サポートXHTML 2.0 は仕様策定も遅いしブラウザには実装されない状況
W3C 互換性の重要性を認める2007: 新しい HTML WG 設立WHATWG の仕様を HTML5 に
Firefox は XHTML 1.1 や XFormsなどには対応していたが IE が...
W3C での標準化
2008: W3C 最初の HTML5 草案中身は WHATWG のもの2009: W3C XHTML 2.0 WG 終了Web ではブラウザに実装された仕様が残ることが明らかに2011: W3C HTML5 最終草案例によって草案に差し戻されてます2014: HTML5 勧告へ (予定)
最終草案と草案を行き来するのは W3C ではよくあることです
It is necessary to evolve HTML incrementally. The attempt toget 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 = HTML4++
再出発ではなく段階的発展HTML4 の次だから HTML5理想的転換でなく現実的発展
次世代 Web への第一歩HTML5 は既存技術の整理が主アプリ環境への進化も前提に
草案と最終草案を繰り返し行き来するのはよくあること
"HTML5" という用語は最新Web 技術を指すバズワードとして広く使われています
SemanticElements
MultiMedia
HTML5Forms
OfflineSupportHTML5HTML5
Parser
Mouse,Key ev.
XHTML5WAI-ARIA
W3C
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Micro-Data
Server-Sent ev.
WebSockets
WebStorage
HTML5HTML5Parser
Mouse,Key ev.
XHTML5
WebWorkers
WebMessag-
ing
WAI-ARIA
W3C
WHATWG
HTML
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Micro-Data
Server-Sent ev.
WebSockets
WebStorage
LayoutMedia
Queries
HTML5
CSS3~Transform
Animation Regions
FlexBox
HTML5Parser
Mouse,Key ev.
XHTML5
WebWorkers
WebMessag-
ing
WAI-ARIA
W3C
WHATWG
HTML
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Micro-Data
WebGL
IndexedDB
SVG
Server-Sent ev.
WebSockets
WebSockets
Geo-location
FileAPI
WebStorage
XHR2
MathML
LayoutMedia
Queries
HTML5
CSS3~Transform
Animation Regions
FlexBox
HTML5Parser
Mouse,Key ev.
ECMAScript
CSP
SPDY
XHTML5
Orien-tation
WebWorkers
WebMessag-
ing
DOM4
SMIL Vibra-tion
XPathRSS
OGP
WAI-ARIA
W3C
WHATWG
other
Khronos
ECMA
IETF
WOFF
HTML
DNT
SemanticElements
MultiMedia
Canvas
HTML5Forms
OfflineSupport
Webm
H.264
Micro-Data
WebGL
WebSQL
IndexedDB
SVG
Server-Sent ev.
WebSockets
WebSockets
Geo-location
FileAPI
WebStorage
XHR2
MathML
WebAudio
LayoutMedia
Queries
HTML5
CSS3~Transform
Animation Regions
FlexBox
HTML5Parser
Mouse,Key ev.
Opus
ECMAScript ECMA
6th
USB
CSP
SPDY
WebCL
WebRTC
NetInfo
MP3
DeviceStorage
TCPSocket
NFC
File Sys
Notifi-cation
XHTML5
Orien-tation
WebWorkers
WebMessag-
ing
DOM4
SMIL Vibra-tion
Proxi-mity
XPathRSS
RDF
OGPSchema
.org
WAI-ARIA
W3C
WHATWG
other
Khronos
ECMA
IETF
WOFF
BatteryStatus
Radio
Tel
HTML
DNT
"HTML5" が進化する方向
Web のネイティブ化Web 技術でできないことはない
マルチデバイス対応携帯、タブレット、TV、車載...
組版技術の統合HTML ではなく CSS の話です
"HTML5" という用語は最新Web 技術を指すバズワードとして広く使われています
Web 2.0 やクラウド等と同じ「バズワード」です
HTML5 < HTML << "HTML5"
HTML5 = W3C 仕様書安定化を進めるスナップショット
HTML = WHATWG 仕様書常に進化を続ける最新仕様
"HTML5" = Web 技術全部てきとーに呼んでるだけ
あるいはバズワード用のロゴ を使う
バズワードを使う時はHTML5 でなく "HTML5"と区別しましょう (・・)/
����1�����-�������1����1�������������_LOS2�
フォクすけに教えて!
OfflineSupport
UserInteraction
Canvas Microdata
Web Workers
WebSockets
CSSSemanticElements
Multimedia Elements
HTML5Parser
Web Messaging
HTML5 Forms
WebGLWebRTC
DOM
SVG
Geo-location
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 Messagin
g
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 W3C では機能毎に仕様を
モジュール化するスタイル
������1M���1�
フォクすけに教えて!
"HTML5" って美味しいの?
何処でも動作するマルチデバイス対応に便利HTML ならプラットフォーム毎に別言語でアプリを書かずに済む
スピードも機能も大幅進化できないことの方が少なく
������,FJB/`\c�
フォクすけに教えて!
ブラウザの互換性問題
新しい機能はブラウザ依存標準化が進めば互換に
実装と標準はダンスの様に仕様策定中の非互換は当然「仕様策定後に実装」ではない
No "Mobile WebKit"
WebKit 間の差が激しいPC とモバイルは完全に別物iOS と Android も全然違うAndroid 内でも端末依存あり
Firefox は PC とほぼ同じ違いを見つける方が難しいハードの違いは当然あるけど
(8)-Q/.;"-�
フォクすけに教えて!
誤解 - 拡張子は .html5?
んなわけあるか!
誤解 - HTML5 標準化が決裂?
驚くことは何も起きてない飛ばし記事を鵜呑みにしちゃダメ
進化を続ける HTML のスナップショットが HTML5標準化は時間のかかる作業進化を止めるのはナンセンス
HTML5 と HTML の関係についてはW3C, WHATWG 双方の記事を参照
誤解 - ベンチマークで…
HTML5test.comJS チェックだからウソも多い非 WebKit 先行で標準化が進む技術は殆どテストに含まれてない実質的には WebKit の比較用
誤解 - WebKit2 じゃないと…
WebKit Core は共通WebKit API 部分だけの話従来の WebKit API も継続メンテブラウザ毎に独自 API あるだけChromium や WebOS も独自 API
Web Platform
Web Platformis the
既存の独自プラットフォーム
現在はプラットフォーム毎に異なる言語で別々のアプリを作る必要がある
Web プラットフォームvs 独自プラットフォーム
「ブラウザ戦争」の時代じゃないですよ
今後は Web プラットフォーム
プラットフォームとしての Web
Web がプラットフォームなら業界標準技術でアプリ環境が統一される
FJB/, ;1�
フォクすけに教えて!
Web ではできなかったこと
システムステータスWiFi 情報, モバイル通信...
各種センサー光センサー, 近接センサー...
低レベルハードウェア制御USB, BlueTooth, NFC...
7:5#8��
)+6$9�T)+;
*** がやらないならMozilla がやるんだって
Web API
Web API
Web の限界を押し進める従来の基本的な API 以外Mozilla が勝手に呼んでる API の総称であって明確な定義はない
https://wiki.mozilla.org/WebAPI
以前からある Web API
Geolocation (位置情報)Orientation (加速度) Audio Data APIWebGL (3D グラフィック)Camera API (Media Capture)
これらはもちろん Android 版 Firefox でも実装済み
実装済みの Web API
SMS, Telephony, AlarmMobile Connection, WiFi Info,Network Info (通信速度等),Contacts, Settings, Time/ClockIdle, Battery StatusResource Lock (スリープ禁止)
まだ不完全な実装の API も一部含む
実装済みの Web API
Vibration, Pointer LockAmbient Light (環境光),Proximity (近接),Mouse Lock (移動量取得)Device Storage, BrowserOpen Web Apps, DOM Crypt
まだ不完全な実装の API も一部含む
現在実装中の Web API
WebRTC (Camera, P2P 含む)Web Activities (Intent)Push NotificationPower ManagementTCP Socket, BluetoothFM Radio, Permission
https://wiki.mozilla.org/WebAPI
実装見込みの Web API
UDB Datagram SocketHTTP-cache, LogUSB, NFC, USB file-readingBackground Service...and more...
https://wiki.mozilla.org/WebAPI
検討中の WebAPI
Magnetic FieldTime/Clock (時刻設定)CalendarSpellcheck...and more...
�����EI@BD=�G�
���������%�
Web API も Web 標準
W3C DAP (Device API) WGW3C System Apps WGIETF/W3C WebRTC WGマルチメディア系や P2P など
その他それぞれの WG で
Xd1.�Z]2bU16-')+
仕様を公開してるけど実際の実装と違うのも×
Z]1.�Xd2P[1Re')+
実装されるまで仕様が適切かどうかも判断不能
6��.:, +;�
)+������ ��T)+;
昨年末辺りから一気に実装してきてるらしい
New Firefox
%54,6>AC�
フォクすけに教えて!
Android に最適化最高のパフォーマンスFlash もサポート片手で使いやすい UIプライバシーを確保
Firefox for Android を再設計
%39#!V^,Y�7%!.)&�
)+6$9�T)+;
フィードバックの半分以上が「速くなった!」
0fps 11fps 22fps
9.6
11.9
13.9
14.2
20.5
10.2
Eideticker - cnn.com on Galaxy Nexus, Android 4.0.4
Firefox10
Firefox14
Opera
Chrome
Dolphin
Default
スクロールパフォーマンス
0fps 11fps 22fps
9.6
11.9
13.9
14.2
20.5
10.2
Eideticker - cnn.com on Galaxy Nexus, Android 4.0.4
Firefox10
Firefox14
Opera
Chrome
Dolphin
Default 1.5倍高速
スクロールパフォーマンス
0fps 10fps 20fps 30fps 40fps
12
14.1
19.6
21.6
39.3
13.2Firefox10
Firefox14
Opera
Chrome
Dolphin
Default
Eideticker - Canvas on Galaxy Nexus, Android 4.0.4
HTML5 Canvas パフォーマンス
0fps 10fps 20fps 30fps 40fps
12
14.1
19.6
21.6
39.3
13.2Firefox10
Firefox14
Opera
Chrome
Dolphin
Default
Eideticker - Canvas on Galaxy Nexus, Android 4.0.4
3倍以上高速
HTML5 Canvas パフォーマンス
再描画イベント
対象要素の再描画
GPUによる画面描画
変更をGPUに送信
メモリのデータ更新
メインスレッド
これまでの Firefox
UI の応答性はプロセス分離で実現していた
メインスレッドの話です無論他のスレッドもあり
再描画イベント
対象要素の再描画
メモリのデータ更新
メインスレッド
GPUによる画面描画
変更をGPUに送信
タッチ etcイベント
UI 周りの処理 画面の更新ゼロからJavaで書き直し
フロントエンドUIや要素の描画を別スレッドに分離して応答性向上
従来のプロセス分離は不要になったので廃止
生まれ変わった Firefox
Flash にも対応していますAPI ドキュメントなく苦労…Flash の開発は終了したけどね…
Flash もサポート
常に最新のデータを同期同期用のサービスを実装Firefox 起動せずに同期可能に
バックグラウンド同期
親指1つで快適ブラウズメニュー、タブ、バー、ページ...
見たいページに即アクセススマートスクリーンよく見るページのリストブックマークやタブも同期
片手でも使いやすい UI
親指1つで快適ブラウズメニュー、タブ、バー、ページ...
見たいページに即アクセススマートスクリーンよく見るページのリストブックマークやタブも同期
片手でも使いやすい UI
文字入力する毎に絞り込みURL やタイトルで素早く検索
Google などで Web 検索も
スマートスクリーン
パソコン側で 12 桁を入力オプション→Sync→デバイスと連携
パソコンと簡単同期
Adblock Plusお馴染みの広告ブロック
Tap Tap Wrapダブルタップでズームした部分の文字を更に大きく
Delete Cookies on Exit終了時に Cookie 削除
アドオンでカスタマイズ
Adblock Plusお馴染みの広告ブロック
Tap Tap Wrapダブルタップでズームした部分の文字を更に大きく
Delete Cookies on Exit終了時に Cookie 削除
アドオンでカスタマイズ
Do Not Track に対応Yahoo!, Twitter, 広告業界などは既に対応を開始
トラッキング拒否に対応
マスターパスワード機能パスワードを暗号化して保存
端末を紛失しても大丈夫マスターパスワードを知らないとなりすましてログインできない
パスワードの暗号化保存
��0�
フォクすけもお気に入り
Marketplace
Wa2NK#5%?HJ0
Boot to Gecko
Firefox OS
>AC����%�
フォクすけに教えて!
Firefox OS (Boot to Gecko)
Web 技術が「ネイティブ」HTML5, JavaScript, Web API...ホーム画面もすべて Web 技術で
Gecko エンジンだけ起動Linux Kernel 上に Gecko をJava VM などの中間レイヤなしGecko = Firefox 描画エンジン
プロジェクト名は今も Boot to Gecko
ステータスバーも(電波強度、電池残量...)
電話や SMS の送受信ももちろん Firefox も
カメラやラジオも
音楽やビデオの再生も
その他なんでも...
マーケットプレイスも3Dアプリも
すべて Web 技術で!
ステータスバーも(電波強度、電池残量...)
電話や SMS の送受信ももちろん Firefox も
カメラやラジオも
音楽やビデオの再生も
その他なんでも...
マーケットプレイスも3Dアプリも
Web API の標準化
不足機能は実装&標準化Web = Native とする
主に W3C の WG で標準化実装と平行して標準化を進めるDevice API, System Apps...そのほか IETF などでも
https://wiki.mozilla.org/WebAPI
開発パートナーと製品化
Telefónica: 来年始め製品化最初はブラジルで発売予定TCL (Alcatel) や ZTE が製造
掲載ロゴはパートナー企業の一部です: http://mozilla.jp/blog/entry/9603/
パートナー企業 (一部)
配置・順序に意味はなしこれ以外については非公開
乞うご期待
#*6<�:5%��
See Also...
CSS 最新機能紹介
CSS の新機能紹介新機能や昨年から変わった点
http://r.dynamis.jp/css2012
JavaScript.Next
JavaScript の最新仕様ECMAScript 5th のポイント
JavaScript 次世代仕様ECMAScript 6th や Harmony
http://r.dynamis.jp/jsnext
開発者ツール紹介
一通りの機能と使い方Firefox 標準の開発者ツール隠し設定やビルトイン関数のリファレンスなども含めています
Firebug とその拡張機能アイコンや背景画像を変更するカスタマイズにも言及してます
http://r.dynamis.jp/devtools