118
Slides @ OSC Tokyo 2012 on 2012/09/07 by Tomoya Asai (dynamis) HTML5 + Firefox OS Last Update: 2012/09/07

HTML5 + Firefox OS

Embed Size (px)

DESCRIPTION

OSC Tokyo で使用したスライド(当日使用しなかったページも少し追加)

Citation preview

Page 1: HTML5 + Firefox OS

Slides @ OSC Tokyo 2012 on 2012/09/07by Tomoya Asai (dynamis)

HTML5 + Firefox OS

Last Update: 2012/09/07

Page 2: HTML5 + Firefox OS

about:

Page 3: HTML5 + Firefox OS

about:dynamisMozilla Japan

http://dynamis.jp@dynamitter

facebook.com/dynamisレッサーパンダが好き。

mailto: Tomoya ASAI <dynamis mozilla-japan.org>@

Page 4: HTML5 + Firefox OS

8�1�2.#

�����������

�����������

��� ���

����� !"��

!"����� �

Page 5: HTML5 + Firefox OS

Foxkeh

Page 6: HTML5 + Firefox OS
Page 7: HTML5 + Firefox OS

フォクすけの誕生日は 2006/09/01

Page 8: HTML5 + Firefox OS

"HTML5"

Page 9: HTML5 + Firefox OS

������)+.�/�

フォクすけに教えて!

Page 10: HTML5 + Firefox OS

The term "HTML5" is widely

used as a buzzword to refer

to modern Web technologies...

WHATWG HTML 仕様書の解説http://whatwg.org/html - Introduction

Page 11: HTML5 + Firefox OS

"HTML5" という用語は最新Web 技術を指すバズワードとして広く使われています

WHATWG HTML 仕様書の解説http://whatwg.org/html - Introduction

Page 12: HTML5 + Firefox OS

HTML5 の生い立ちは...

"HTML5" という用語は最新Web 技術を指すバズワードとして広く使われています

Page 16: HTML5 + Firefox OS

1989: HTML の起源を提案1990: 初の Web ブラウザ公開 ブラウザ乱立・独自拡張乱立1994: W3C を発足し標準化へ1995: HTML 2.0 が RFC に1997: HTML 3.2 が W3C 勧告に HTML 4.0 が W3C 勧告に

HTML4 に至るまで

Page 17: HTML5 + Firefox OS

W3C は XHTML で再出発へ

1998: XML 1.0 勧告HTML4 の拡張は困難と判断しXML で作り直すと決定

2000: XHTML 1.0 勧告HTML4 を XML にしただけ

2001: XHTML 1.1 勧告HTML4 と後方互換性がなくなる

Page 18: HTML5 + Firefox OS

標準化の分裂

W3C は XHTML 2.0 仕様策定へ2001: IE6 リリースXHTML サポートなし! (><)2004: WHATWG 設立Mozilla & Opera が W3C で後方互換の提案をするが否決された仕方なく別組織で HTML4 に後方互換な後継仕様策定へ

Mozilla & Opera に Apple も参加する形で WHATWG 設立

Page 19: HTML5 + Firefox OS

W3C と WHATWG の和解

2006: IE7 リリース相変わらず XHTML 非サポートXHTML 2.0 は仕様策定も遅いしブラウザには実装されない状況

W3C 互換性の重要性を認める2007: 新しい HTML WG 設立WHATWG の仕様を HTML5 に

Firefox は XHTML 1.1 や XFormsなどには対応していたが IE が...

Page 20: HTML5 + Firefox OS

W3C での標準化

2008: W3C 最初の HTML5 草案中身は WHATWG のもの2009: W3C XHTML 2.0 WG 終了Web ではブラウザに実装された仕様が残ることが明らかに2011: W3C HTML5 最終草案例によって草案に差し戻されてます2014: HTML5 勧告へ (予定)

最終草案と草案を行き来するのは W3C ではよくあることです

Page 21: HTML5 + Firefox OS

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

Page 22: HTML5 + Firefox OS

"Reinventing HTML" by Tim Berners-Lee

HTML は段階的に発展させる必要がある。... すべてを一度に切り替えようという試みは成功しなかった。

Page 23: HTML5 + Firefox OS

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

Page 24: HTML5 + Firefox OS

Ian Hickson http://twitter.com/Hixie/status/4075253361

Drag & Drop API は酷いが、採用する理由がひとつある。つまり、IE6 だけでなく Safari や Firefox でも実装されているからだ。

Page 25: HTML5 + Firefox OS

HTML5 = HTML4++

再出発ではなく段階的発展HTML4 の次だから HTML5理想的転換でなく現実的発展

次世代 Web への第一歩HTML5 は既存技術の整理が主アプリ環境への進化も前提に

草案と最終草案を繰り返し行き来するのはよくあること

Page 26: HTML5 + Firefox OS

"HTML5" という用語は最新Web 技術を指すバズワードとして広く使われています

Page 27: HTML5 + Firefox OS
Page 29: HTML5 + Firefox OS

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

Page 30: HTML5 + Firefox OS

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

Page 31: HTML5 + Firefox OS

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

Page 32: HTML5 + Firefox OS

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

Page 33: HTML5 + Firefox OS

"HTML5" が進化する方向

Web のネイティブ化Web 技術でできないことはない

マルチデバイス対応携帯、タブレット、TV、車載...

組版技術の統合HTML ではなく CSS の話です

Page 34: HTML5 + Firefox OS

"HTML5" という用語は最新Web 技術を指すバズワードとして広く使われています

Web 2.0 やクラウド等と同じ「バズワード」です

Page 35: HTML5 + Firefox OS

HTML5 < HTML << "HTML5"

HTML5 = W3C 仕様書安定化を進めるスナップショット

HTML = WHATWG 仕様書常に進化を続ける最新仕様

"HTML5" = Web 技術全部てきとーに呼んでるだけ

Page 36: HTML5 + Firefox OS

あるいはバズワード用のロゴ を使う

バズワードを使う時はHTML5 でなく "HTML5"と区別しましょう (・・)/

Page 37: HTML5 + Firefox OS

����1�����-�������1����1�������������_LOS2�

フォクすけに教えて!

Page 38: HTML5 + Firefox OS

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(主な)仕様策定の場:

Page 39: HTML5 + Firefox OS

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

Page 40: HTML5 + Firefox OS

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 では機能毎に仕様を

モジュール化するスタイル

Page 41: HTML5 + Firefox OS

������1M���1�

フォクすけに教えて!

Page 42: HTML5 + Firefox OS

"HTML5" って美味しいの?

何処でも動作するマルチデバイス対応に便利HTML ならプラットフォーム毎に別言語でアプリを書かずに済む

スピードも機能も大幅進化できないことの方が少なく

Page 43: HTML5 + Firefox OS

������,FJB/`\c�

フォクすけに教えて!

Page 44: HTML5 + Firefox OS

ブラウザの互換性問題

新しい機能はブラウザ依存標準化が進めば互換に

実装と標準はダンスの様に仕様策定中の非互換は当然「仕様策定後に実装」ではない

Page 45: HTML5 + Firefox OS

No "Mobile WebKit"

WebKit 間の差が激しいPC とモバイルは完全に別物iOS と Android も全然違うAndroid 内でも端末依存あり

Firefox は PC とほぼ同じ違いを見つける方が難しいハードの違いは当然あるけど

Page 46: HTML5 + Firefox OS

(8)-Q/.;"-�

フォクすけに教えて!

Page 47: HTML5 + Firefox OS

誤解 - 拡張子は .html5?

んなわけあるか!

Page 48: HTML5 + Firefox OS

誤解 - HTML5 標準化が決裂?

驚くことは何も起きてない飛ばし記事を鵜呑みにしちゃダメ

進化を続ける HTML のスナップショットが HTML5標準化は時間のかかる作業進化を止めるのはナンセンス

HTML5 と HTML の関係についてはW3C, WHATWG 双方の記事を参照

Page 49: HTML5 + Firefox OS

誤解 - ベンチマークで…

HTML5test.comJS チェックだからウソも多い非 WebKit 先行で標準化が進む技術は殆どテストに含まれてない実質的には WebKit の比較用

Page 50: HTML5 + Firefox OS

誤解 - WebKit2 じゃないと…

WebKit Core は共通WebKit API 部分だけの話従来の WebKit API も継続メンテブラウザ毎に独自 API あるだけChromium や WebOS も独自 API

Page 51: HTML5 + Firefox OS

Web Platform

Page 52: HTML5 + Firefox OS

Web Platformis the

Page 53: HTML5 + Firefox OS

既存の独自プラットフォーム

現在はプラットフォーム毎に異なる言語で別々のアプリを作る必要がある

Page 54: HTML5 + Firefox OS

Web プラットフォームvs 独自プラットフォーム

「ブラウザ戦争」の時代じゃないですよ

Page 55: HTML5 + Firefox OS

今後は Web プラットフォーム

プラットフォームとしての Web

Web がプラットフォームなら業界標準技術でアプリ環境が統一される

Page 56: HTML5 + Firefox OS

FJB/, ;1�

フォクすけに教えて!

Page 57: HTML5 + Firefox OS

Web ではできなかったこと

システムステータスWiFi 情報, モバイル通信...

各種センサー光センサー, 近接センサー...

低レベルハードウェア制御USB, BlueTooth, NFC...

Page 58: HTML5 + Firefox OS

7:5#8��

)+6$9�T)+;

*** がやらないならMozilla がやるんだって

Page 59: HTML5 + Firefox OS

Web API

Page 60: HTML5 + Firefox OS

http://arewemobileyet.com/

Page 61: HTML5 + Firefox OS

Web API

Web の限界を押し進める従来の基本的な API 以外Mozilla が勝手に呼んでる API の総称であって明確な定義はない

https://wiki.mozilla.org/WebAPI

Page 62: HTML5 + Firefox OS

以前からある Web API

Geolocation (位置情報)Orientation (加速度) Audio Data APIWebGL (3D グラフィック)Camera API (Media Capture)

これらはもちろん Android 版 Firefox でも実装済み

Page 64: HTML5 + Firefox OS

実装済みの Web API

Vibration, Pointer LockAmbient Light (環境光),Proximity (近接),Mouse Lock (移動量取得)Device Storage, BrowserOpen Web Apps, DOM Crypt

まだ不完全な実装の API も一部含む

Page 65: HTML5 + Firefox OS

現在実装中の Web API

WebRTC (Camera, P2P 含む)Web Activities (Intent)Push NotificationPower ManagementTCP Socket, BluetoothFM Radio, Permission

https://wiki.mozilla.org/WebAPI

Page 66: HTML5 + Firefox OS

実装見込みの Web API

UDB Datagram SocketHTTP-cache, LogUSB, NFC, USB file-readingBackground Service...and more...

https://wiki.mozilla.org/WebAPI

Page 67: HTML5 + Firefox OS

検討中の WebAPI

Magnetic FieldTime/Clock (時刻設定)CalendarSpellcheck...and more...

Page 68: HTML5 + Firefox OS

�����EI@BD=�G�

Page 69: HTML5 + Firefox OS

���������%�

Page 71: HTML5 + Firefox OS

Xd1.�Z]2bU16-')+

仕様を公開してるけど実際の実装と違うのも×

Page 72: HTML5 + Firefox OS

Z]1.�Xd2P[1Re')+

実装されるまで仕様が適切かどうかも判断不能

Page 73: HTML5 + Firefox OS

6��.:, +;�

)+������ ��T)+;

昨年末辺りから一気に実装してきてるらしい

Page 74: HTML5 + Firefox OS

New Firefox

Page 75: HTML5 + Firefox OS

%54,6>AC�

フォクすけに教えて!

Page 76: HTML5 + Firefox OS

Android に最適化最高のパフォーマンスFlash もサポート片手で使いやすい UIプライバシーを確保

Firefox for Android を再設計

Page 77: HTML5 + Firefox OS

%39#!V^,Y�7%!.)&�

)+6$9�T)+;

フィードバックの半分以上が「速くなった!」

Page 78: HTML5 + Firefox OS

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

スクロールパフォーマンス

Page 79: HTML5 + Firefox OS

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倍高速

スクロールパフォーマンス

Page 80: HTML5 + Firefox OS

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 パフォーマンス

Page 81: HTML5 + Firefox OS

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 パフォーマンス

Page 82: HTML5 + Firefox OS

再描画イベント

対象要素の再描画

GPUによる画面描画

変更をGPUに送信

メモリのデータ更新

メインスレッド

これまでの Firefox

UI の応答性はプロセス分離で実現していた

メインスレッドの話です無論他のスレッドもあり

Page 83: HTML5 + Firefox OS

再描画イベント

対象要素の再描画

メモリのデータ更新

メインスレッド

GPUによる画面描画

変更をGPUに送信

タッチ etcイベント

UI 周りの処理 画面の更新ゼロからJavaで書き直し

フロントエンドUIや要素の描画を別スレッドに分離して応答性向上

従来のプロセス分離は不要になったので廃止

生まれ変わった Firefox

Page 84: HTML5 + Firefox OS

Flash にも対応していますAPI ドキュメントなく苦労…Flash の開発は終了したけどね…

Flash もサポート

Page 85: HTML5 + Firefox OS

常に最新のデータを同期同期用のサービスを実装Firefox 起動せずに同期可能に

バックグラウンド同期

Page 86: HTML5 + Firefox OS

親指1つで快適ブラウズメニュー、タブ、バー、ページ...

見たいページに即アクセススマートスクリーンよく見るページのリストブックマークやタブも同期

片手でも使いやすい UI

Page 87: HTML5 + Firefox OS

親指1つで快適ブラウズメニュー、タブ、バー、ページ...

見たいページに即アクセススマートスクリーンよく見るページのリストブックマークやタブも同期

片手でも使いやすい UI

Page 88: HTML5 + Firefox OS

文字入力する毎に絞り込みURL やタイトルで素早く検索

Google などで Web 検索も

スマートスクリーン

Page 89: HTML5 + Firefox OS
Page 90: HTML5 + Firefox OS
Page 91: HTML5 + Firefox OS
Page 92: HTML5 + Firefox OS

パソコン側で 12 桁を入力オプション→Sync→デバイスと連携

パソコンと簡単同期

Page 93: HTML5 + Firefox OS

Adblock Plusお馴染みの広告ブロック

Tap Tap Wrapダブルタップでズームした部分の文字を更に大きく

Delete Cookies on Exit終了時に Cookie 削除

アドオンでカスタマイズ

Page 94: HTML5 + Firefox OS

Adblock Plusお馴染みの広告ブロック

Tap Tap Wrapダブルタップでズームした部分の文字を更に大きく

Delete Cookies on Exit終了時に Cookie 削除

アドオンでカスタマイズ

Page 95: HTML5 + Firefox OS

Do Not Track に対応Yahoo!, Twitter, 広告業界などは既に対応を開始

トラッキング拒否に対応

Page 96: HTML5 + Firefox OS

マスターパスワード機能パスワードを暗号化して保存

端末を紛失しても大丈夫マスターパスワードを知らないとなりすましてログインできない

パスワードの暗号化保存

Page 97: HTML5 + Firefox OS

��0�

フォクすけもお気に入り

Page 98: HTML5 + Firefox OS

Marketplace

Page 99: HTML5 + Firefox OS

Wa2NK#5%?HJ0

Page 100: HTML5 + Firefox OS

Boot to Gecko

Page 101: HTML5 + Firefox OS

Firefox OS

Page 102: HTML5 + Firefox OS

>AC����%�

フォクすけに教えて!

Page 103: HTML5 + Firefox OS
Page 104: HTML5 + Firefox OS
Page 105: HTML5 + Firefox OS

Firefox OS (Boot to Gecko)

Web 技術が「ネイティブ」HTML5, JavaScript, Web API...ホーム画面もすべて Web 技術で

Gecko エンジンだけ起動Linux Kernel 上に Gecko をJava VM などの中間レイヤなしGecko = Firefox 描画エンジン

プロジェクト名は今も Boot to Gecko

Page 106: HTML5 + Firefox OS
Page 107: HTML5 + Firefox OS
Page 108: HTML5 + Firefox OS

ステータスバーも(電波強度、電池残量...)

電話や SMS の送受信ももちろん Firefox も

カメラやラジオも

音楽やビデオの再生も

その他なんでも...

マーケットプレイスも3Dアプリも

Page 109: HTML5 + Firefox OS

すべて Web 技術で!

ステータスバーも(電波強度、電池残量...)

電話や SMS の送受信ももちろん Firefox も

カメラやラジオも

音楽やビデオの再生も

その他なんでも...

マーケットプレイスも3Dアプリも

Page 110: HTML5 + Firefox OS

Web API の標準化

不足機能は実装&標準化Web = Native とする

主に W3C の WG で標準化実装と平行して標準化を進めるDevice API, System Apps...そのほか IETF などでも

https://wiki.mozilla.org/WebAPI

Page 111: HTML5 + Firefox OS

開発パートナーと製品化

Telefónica: 来年始め製品化最初はブラジルで発売予定TCL (Alcatel) や ZTE が製造

掲載ロゴはパートナー企業の一部です: http://mozilla.jp/blog/entry/9603/

Page 112: HTML5 + Firefox OS

パートナー企業 (一部)

配置・順序に意味はなしこれ以外については非公開

Page 113: HTML5 + Firefox OS

乞うご期待

Page 114: HTML5 + Firefox OS

#*6<�:5%��

Page 115: HTML5 + Firefox OS

See Also...

Page 116: HTML5 + Firefox OS

CSS 最新機能紹介

CSS の新機能紹介新機能や昨年から変わった点

http://r.dynamis.jp/css2012

Page 117: HTML5 + Firefox OS

JavaScript.Next

JavaScript の最新仕様ECMAScript 5th のポイント

JavaScript 次世代仕様ECMAScript 6th や Harmony

http://r.dynamis.jp/jsnext

Page 118: HTML5 + Firefox OS

開発者ツール紹介

一通りの機能と使い方Firefox 標準の開発者ツール隠し設定やビルトイン関数のリファレンスなども含めています

Firebug とその拡張機能アイコンや背景画像を変更するカスタマイズにも言及してます

http://r.dynamis.jp/devtools