Last Update: 2012/12/03

HTML 2012Slides @ TechBuzz HTML5 8th

by Tomoya Asai (dynamis)

about:me

about:dynamisMozilla Japan

http://dynamis.jp@dynamitter

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

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

Topics

本日のトピック

about:HTML5HTML5.1HTML2012Pure Web AppsConclusion

about:foxkeh

ときどきプレゼン手伝ってくれるフォクすけを紹介します

ぼくフォクすけ

いつか僕も Firefox みたいな立派なブラウザになるんだ！

ぼくフォクすけ

サーバ (Apache Camel) の上にクライアント (Firefox)

出荷前のフォクすけたちです。

FFXXKK 4488！

FFXXKK 4488！

25 日までのキャンペーンが最後のチャンス！

今が最後のチャンス！

で検索！Firefox キャンペーン

Introduction

みんな大好き ""HHTTMMLL55""

Mozilla と Firefox もみんな大好きだよね？

IE の独占市場を Firefox が崩して Web 標準の時代へ

ブラウザ戦争

Web 標準プラットフォーム

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

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

Web 標準プラットフォームvs

独自プラットフォーム

「ブラウザ戦争」の時代はとっくに終わりました

独自技術による囲い込み

プラットフォーム毎に異なる言語で個別の専用アプリを作る必要がある

i a f c

"HTML5" への期待

次世代プラットフォームOS に代わるプラットフォーム

安定プラットフォーム一社依存でない標準の確立

共通プラットフォームどこでも共通の言語と API

Web が共通プラットフォーム

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

プラットフォームとしての 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

Layout

MediaQueries

HTML5

CSS3~Transform

Animation

Regions

Filters

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

Layout

MediaQueries

HTML5

CSS3~Transform

Animation

Regions

Filters

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

Layout

MediaQueries

HTML5

CSS3~Transform

Animation

Regions

Filters

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

FlexBox

ブラウザの技術からプラットフォームへ

僕はまず立派なブラウザになりいつかは立派な OS にならなきゃ

HTML5.1

HHTTMMLL55 の次はHHTTMMLL55..11 ？

HTML6 じゃないのはちょっと意外だったね！

HTML5 の次は HTML5.1

W3C 仕様書の話です!= バズワード "HTML5"

HTML5 は 2014 年に標準化今年中に仕様をほぼ確定に

HTML5.1 も平行して標準化HTML5 ほぼ確定後取り組み開始5.1 は 2016 年に標準化

http://dev.w3.org/html5/decision-policy/html5-2014-plan.html

HTML5 < HTML << "HTML5"

HTML5 = 安定ブランチHTML5.1 = ブランチ更新W3C でブランチをメンテ

HTML = 最新の HTMLWHATWG で最新技術を議論

"HTML5" = Web 技術全部てきとーに呼んでるバズワード

SemanticElements

MultiMedia

HTML5Forms

OfflineSupportHTML5HTML5

Parser

Mouse,Key ev.

XHTML5WAI-ARIA

W3C W3C のHTML5 仕様

SemanticElements

MultiMedia

Canvas

HTML5Forms

OfflineSupport

Micro-Data

Server-Sent ev.

WebSockets

WebStorage

HTML5HTML5Parser

Mouse,Key ev.

XHTML5

WebWorkers

WebMessag-

ing

WAI-ARIA

W3C

WHATWG

other

HTML

WHATWG の最新 HTML

W3C ではモジュール化

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

Layout

MediaQueries

HTML5

CSS3~Transform

Animation

Regions

Filters

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

FlexBox

バズワード"HTML5"

HHTTMMLL 仕様は進化と安定化が同時に続く！

HTML5.x の安定化中もHTMLの進化は止まらない

HTML2012

今の ""HHTTMMLL55"" で満足してちゃだめ！

未来に向かって走り続けなきゃ！ぼくは足短いから走るの遅いけど

Web で可能になったこと

マルチメディアAudio, Video, Animation, 3D ...

アプリケーションOffline, Storage, Indexed DB...

高度な通信制御双方向通信, Server-Sent Event...

2011 年にはできていたことの一例

Web ではできなかったこと

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

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

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

2011 年にはできなかったことの一例

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

Layout

MediaQueries

HTML5

CSS3~Transform

Animation

Regions

Filters

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

FlexBox

H.264

IndexedDB

FileAPI

WebAudio

CSS3~

Opus

ECMA6th

CSP

WebRTC

NetInfo

DeviceStorage

TCPSocket

File Sys

Notifi-cation

Proxi-mity

BatteryStatus

Radio

TelDNT

SPDYこの辺りが2012 年の進化

Regions

Filters

FlexBox

WWeebb 技術で未来を創ろう！

未来に向かって走り続けなきゃ！ぼくは足短いから走るの遅いけど

Web 標準を充実させよう！

不足機能は実装＆標準化Web ＝ Native とする

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

https://wiki.mozilla.org/WebAPI

Web API の標準化

Device API, System Application, Web Apps WG が主実装面では圧倒的に Firefox がリードしている

FYI: http://www.w3.org/Mobile/mobile-web-app-state/

JavaScript の進化

次世代 JS への移行Firefox が最も実装進んでる慣れると現 JS 書くのがツライ

高速化やデバッグ容易化Class, TypedArray, ParallelArray ...静的解析でコンパイル時エラーを出しやすい言語仕様に

JavaScript が常に勝つ！

すべて問題解決してきた速度遅い → 高速化ミス多発 → Strict Modeスレッドがない → WorkersGPU 使えない → WebGL, WebCLClass 使いたい → 入るよ*** できない → API 増加中

写真は JavaScript の父 Brendan Eich (Mozilla CTO) です

ストレージ系の進化

IndexedDBLocal Storage は縮小化の方向

FileReader, FileHandleFileWriter, FileSystem も？

Device StorageArchive (ZIP 読み出し)

File System API 周りの話

Google:ネイティブと一緒で良いじゃんファイルシステム使おうぜ！

Mozilla:ファイルシステムなんて前近代的抽象化したコレクションにすべき

いまのところ平行線

Web デザインの進化

レイアウトGrid, Regions, Exclusions...Flexbox (XUL 的レイアウト)

フィルターSVG Filter, CSS Filter

CSS 構文の進化@document, variable ...

CSS Exclusions

自由な形の領域にテキストを流し込めますChrome Canary - http://html.adobe.com/webstandards/cssexclusions/

CSS Regions

複数領域にテキストを流し込み方向やサイズに応じたレイアウトも簡単

Chrome Canary - http://html.adobe.com/webstandards/cssregions/

CSS Filters

ぼかしや色調整などのフィルタ効果や曲げたり回したり変形も自由自在に

Chrome Canary - http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/

SVG Filter & CSS Filter

Mozilla:既にある SVG 使おうぜ！

WebKit:SVG なんてシラネ。俺は何でも CSS でやるぜ！

Mozilla:仕方ないな…

アニメーションの進化

乱立しすぎ＆連携無しJavaScript AnimationCanvas 2D, WebGLSVG & SMILCSS Transisions, Animations

Web Animations で連携へ

Web Animations へ

Apple (Flash 代替技術として):CSS でアニメーション！

Mozilla & Opera:ダメ構文は直して標準化

Mozilla, Google, Adobe:JS と一括管理できる API 作ろう

Web Animations は Mozilla Japan の Brian さん頑張ってます

マルチメディアの進化

Opus Audio Codec (RFC6716)Web Audio, Audio DataWeb Audio にも Firefox 近日対応

Camera API (Media Capture)WebRTC - getUserMedia電話会議などは簡単に

WebRTC (getUserMedia)

カメラを使ったデータ処理も可能ビデオ会議やリアルタイム動画分析に

Nightly (要設定変更) - https://people.mozilla.com/~anarayanan/webrtc/

インタラクティブ系の進化

Touch EventVibrationGamepadPointer Lockポインタを隠して移動量を取得

インタラクティブ系の進化

Touch EventVibrationGamepadPointer Lockポインタを隠して移動量を取得

Banana Bread

３D ゲームも普通に作れるプラットフォームファーストパーソンシューティングの例

https://developer.mozilla.org/ja/demos/detail/bananabread

センサー系の進化

従来からの Web APIGeolocation (位置情報)Orientation (加速度)

Sensor APIAmbient Light (環境光)Proximity (近接)Android 版 Firefox は実装済み

ネットワーク系の進化

WebSocketServer-Sent EventSPDY v2, v3 ... HTTP 2.0WebRTC - Peer to PeerTCP Socket, HTTP-cacheUDP Datagram Socket

Browser Quest

リアルタイムに多人数で同時プレイ (MMORPG)柔軟な画面サイズ対応と双方向通信による

http://browserquest.mozilla.org/

デバイス間連携の進化

Web IntentsWeb ActivitiesPush Notification

この辺の話はカエルさん(小松さん)に聞きましょう

デバイス間連携はこれから本番

Mozilla:Web Activities!

Google:Web Intents!

Mozilla & Google:WHATWG で標準化議論中共に将来非互換になる見込み

この辺の話はカエルさん(小松さん)に聞きましょう

Web Intents×TCP Socket

Web Intents でデバイス間連携 (PC - TV)TCP Socket 開いて家電と通信 (DLNA)

http://www.youtube.com/watch?v=hjUhSWKiwmw

Social 連携の進化

Social APIFirefox×Facebook 導入済みまもなくマルチプロバイダ対応用途は "Social" に限らないある意味サイドバー API...

Social API×WebRTC

https://blog.mozilla.org/futurereleases/2012/11/30/webrtc-makes-social-api-even-more-social/

ステータス系の進化

WiFi InformationMobile ConnectionNetwork Info (通信速度等)Battery Status電池残量に応じた処理を

ハードウェア系の進化

BluetoothUSBUSB file-readingFM RadioNFC

これなら WWeebb で大丈夫だね！

どんなアプリでも作れそう！ボクもいろいろ作りた～い！

Pure Web Apps

WebRT as an OS...

システムレベルまですべて WWeebb 技術で！

システム系の API もあればすべて Web 技術にできるよね

System 系の進化

Resource Lockスリープや WiFi オフなどの禁止

Settings (システム設定)Alarm (時刻指定処理)Background ServiceIdle, Log

アプリプラットフォーム化

Open Web Appsアプリとしてインストール

Paymentいわゆる課金システム

ホンモノの Web "アプリ"

ブラウザという枠を飛び出して動作

Android にもインストール

Firefox Marketplace は現在テスター向けに公開中

セキュリティ面での進化

Content Security Policy特に XSS 対策に有効Firefox 4~ や Chrome 実装済み

Permission APIアプリが使える API も管理アプリ毎の権限を制御可能に

アプリの権限管理はユーザが自由に制御可能重要な API は実行時にユーザに許可を求める

アプリの権限管理

スマホ系の進化

SMS (ショートメッセージ)Telephony (電話)Contacts (電話帳)

Firefox OS (Boot to Gecko)

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

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

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

ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も

その他なんでも...

ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も

その他なんでも...

すべて Web 技術で実現済み！

iOS のようなハイエンド端末専用 OS ではない

Firefox OSミニなのは、要求仕様だけ

See Also: Firefox OS Group

Google Group ありますhttps://groups.google.com/group/firefoxos参加歓迎。(・・).

Wiki にまとめてますhttps://github.com/dynamis/firefoxos/wiki

楽しみ楽しみ！

僕もスマホになって君と一緒にお出かけしたいな！

Summary

WebRT as an OS...

ブラウザの技術からプラットフォームへ

僕はまず立派なブラウザになりいつかは立派な OS にならなきゃ

See Also...

Firefox OS & Marketplace

Web プラットフォームWeb API が進化を続けている

MarketplaceWeb アプリ配信システム

Firefox OSWeb がネイティブな OS

http://r.dynamis.jp/fxos

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

セキュリティ関連機能紹介

セキュリティ大事！知っておくべき機能です

Content Security Policy次世代セキュリティポリシーSame Origin Policy はもう古い

http://r.dynamis.jp/sec