Last Update: 2012/10/21

Web Technology MeetingSlides @ Web Touch Meeting × Mozilla

by Tomoya Asai (dynamis)

about:me

about:dynamisMozilla Japan

http://dynamis.jp@dynamitter

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

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

about:mozilla

http://www.mozilla.jp/videos/

Agenda

本日のトピック

about:HTML5HTML5.1 - Plan 2014Web=OSFirefox OS

about:foxkeh

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

ぼくフォクすけ

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

ぼくフォクすけ

フォクすけ のぬいぐるみです

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

取りあえず 48 人並べてみました

FFXXKK 4488！

しっぽの方がもふもふ！

FFXXKK 4488！

キャンペーン第 2 弾は 10/23 (火) から！

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

"HTML5"

みんな大好き ""HHTTMMLL55""

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

"HTML5" 以前の Web

文書のための HTML+α複雑なものは Flash で

互換性のない独自拡張仕様のない新機能ばかり

デバイス毎の Webモバイル Web は別物だった

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

ブラウザ戦争

"HTML5" の目的

アプリのための HTMLすべてを Web 技術で実現

互換性のある実装にブラウザの挙動を厳密に定義

マルチデバイス Webどこでも同じ "One Web"

Web 標準プラットフォーム

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

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

独自プラットフォームの台頭

ネイティブアプリハイパフォーマンス、高度な API

エコシステム専用のアプリケーションストア

WebView内蔵エンジンで Web も使える

独自技術による囲い込み

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

i a f c

独自プラットフォームの問題

プラットフォーム依存プログラミング言語から違う

バージョン依存毎年新しい OS に対応が必要

デバイス依存独自仕様で端末依存の API

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

独自技術による囲い込み

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

"HTML5" への期待

次世代プラットフォームアプリ開発のプラットフォーム

Web アプリ開発を簡単に互換性のある範囲の拡大

マルチデバイス展開言語と API を共通化

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

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

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

"HTML5" への期待

次世代プラットフォームアプリ開発のプラットフォーム

Web アプリ開発を簡単に互換性のある範囲の拡大

マルチデバイス展開言語と API を共通化

もっともっと WWeebb を進化させなきゃ！

僕らの Web が進化しないと闇の組織に支配されちゃう！

HTML5.1

HHTTMMLL55 の次はHHTTMMLL55..11 ？

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

HTML5 の次は HTML5.1

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

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

HTML5.1 も平行して標準化5.1 は 2016 年に標準化

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

HTML5 < HTML << "HTML5"

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

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

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

HTML5 = 安定ブランチHTML5.x = ブランチ更新

HTML = 最新の HTML

喧嘩して分離したのではないW3C で安定化作業を始めただけ

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

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

Web = OS

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

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

Web で可能になったこと

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

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

高度な通信制御双方向通信, DNT ...

Web ではできなかったこと

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

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

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

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

JavaScript の進化

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

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

JavaScript が常に勝つ！

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

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

Web デザインの進化

レイアウトGrid, Regions, Exclusions...

フィルターSVG Filter, CSS Filter

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

レイアウトいろいろ by Adobe

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 さん頑張ってます

マルチメディアの進化

Audio Data, Web AudioCamera API (Media Capture)WebRTC - getUserMedia電話会議などは簡単に

WebRTC (getUserMedia)

about:config - media.navigator.enabled=truehttps://people.mozilla.com/~anarayanan/webrtc/

WebRTC (getUserMedia)

about:config - media.navigator.enabled=truehttps://people.mozilla.com/~anarayanan/webrtc/

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

Touch EventVibrationGamepadPointer LockResource LockIdle

BananaBread

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

BananaBread

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

ネットワーク系の進化

Server-Sent EventWebSocketSPDY v2, v3 ... HTTP 2.0?WebRTC - P2PTCP SocketUDP Datagram Socket

デバイス間連携の進化

Web IntentsWeb ActivitiesPush Notification

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

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

Mozilla:Web Activities!

Google:Web Intents!

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

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

ステータス系の進化

WiFi InfoMobile ConnectionNetwork Info (通信速度等)Battery Status

センサー系の進化

Geolocation (位置情報)Orientation (加速度)Ambient Light (環境光)Proximity (近接)

ハードウェア系の進化

BluetoothUSB, USB file-readingNFCFM Radio

スマホ系の進化

SMS, Telephony (電話)Contacts, SettingsUDB Datagram SocketHTTP-cache, LogBackground Service

アプリとしての進化

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

FileReader, FileHandleDevice Storage

ホンモノの Web "アプリ"

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

Android でも実装済み

開発版での画面です

Web API は標準化

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

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

https://wiki.mozilla.org/WebAPI

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

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

Firefox OS

WebRT as an OS...

おーえすになる！

僕より先に OS になるんだねやっぱり Firefox って凄いや！

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

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

カメラやラジオも

音楽やビデオの再生も

その他なんでも...

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

すべて Web 技術で！

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

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

カメラやラジオも

音楽やビデオの再生も

その他なんでも...

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

Firefox OS (Boot to Gecko)

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

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

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

開発パートナーと製品化

Telefónica が来年初め発売世界 3～4 位のキャリア最初はブラジルで発売予定Qualcomm のチップを使用端末製造は ZTE や TCL

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

パートナー企業 (一部)

一部。配置・順序に意味はなし

楽しみ楽しみ！

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