HTML 2012

HTML 2012
Slides @ TechBuzz HTML5 8th
by Tomoya Asai (dynamis)

Last Update: 2012/12/03

about:dynamis

Mozilla Japan
http://dynamis.jp

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

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

本日のトピック

about:
HTML5
HTML5.1
HTML2012
Pure Web Apps
Conclusion

about:foxkeh

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

ぼくフォクすけ
ぼくフォクすけ

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

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

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

今が最後の
チャンス！

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

Firefox キャンペーンで検索！

みんな大好き ""HHTTMMLL55""

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

ブラウザ戦争

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

Web 標準プラットフォーム

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

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

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

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

独自技術による囲い込み

i a f c

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

"HTML5" への期待

次世代プラットフォーム
OS に代わるプラットフォーム
安定プラットフォーム
一社依存でない標準の確立
共通プラットフォーム
どこでも共通の言語と API

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

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

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

Multi
Media Mouse,
HTML5 Key ev.
Forms
W3C
Oﬄine
HTML5 HTML5 Support
Parser

WAI-
XHTML5 ARIA
Semantic
Elements

Canvas
Web
WHATWG Messag-
ing
Multi Web
Media Mouse, Sockets
HTML5 Key ev.
Forms
W3C Server-
Oﬄine
HTML5 HTML5 Support
Sent ev.

Parser
Web
WAI-
XHTML5 Storage
ARIA
Semantic
Elements Web
Workers
Micro-
HTML Data

Canvas
Web
WHATWG Messag-
ing
Multi Web
HTML5 Key ev.
Forms
W3C Server-
Oﬄine
HTML5 HTML5 Support
Sent ev.

Parser
Web
WAI-
XHTML5 Storage
ARIA
Semantic
Elements Web Media
Workers Queries
Layout
Micro-
HTML Data
TransCSS3~
form Regions
Anim
ation Filters

Khronos SMIL Vibra-
tion
WebGL Geo-
SVG
other location
Orien-
tation
Canvas
WHATWG Web IETF
Messag-
ing Web
Multi SPDY
Web Sockets DNT
HTML5 Key ev. XHR2
FileAPI CSP
Forms
W3C Server-
Oﬄine ECMA
HTML5 HTML5 Support
Sent ev. ECMA
Script
Parser
Indexed
Web
WAI- DB
XHTML5 Storage
ARIA
Semantic
Elements Web Media
Workers Queries
Layout
Micro-
HTML Data
Trans CSS3~
OGP XPath form Regions
RSS Anim
Math
ation Filters
ML WOFF
DOM4

Khronos SMIL Vibra- MP3
WebCL Webm Opus
tion
WebGL Geo-
SVG
H.264
other location
Orien-
Web
Audio Notiﬁ-
tation Web
Canvas cation
WHATWG Web IETF RTC
Messag-
ing Web TCP Tel
Multi SPDY
Web Sockets DNT Socket
HTML5 Key ev. XHR2 Radio
FileAPI CSP
Forms Net
W3C Server- Info
Oﬄine ECMA
HTML5 HTML5 Support
Sent ev. ECMA
Script ECMA
NFC

Parser 6th
Indexed
Web Device
WAI- DB
Storage Storage
XHTML5 ARIA
Semantic Web
Elements Web Media SQL
USB
Workers Queries
Layout Flex File
Micro- Box Sys
HTML Data
Trans CSS3~
Battery
Status
OGP XPath form Regions Proxi-
Anim mity
Schema RSS Math
ation Filters
.org ML WOFF
RDF DOM4

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

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

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 = 最新の HTML
WHATWG で最新技術を議論
"HTML5" = Web 技術全部
てきとーに呼んでるバズワード

Multi
Media Mouse,
HTML5 Key ev.
Forms
W3C
Oﬄine
W3C の
HTML5 HTML5 Support

HTML5 仕様
Parser

WAI-
XHTML5 ARIA
Semantic
Elements

other

WHATWG
Canvas
Web
Messag-
WHATWG の
ing
Multi Web

HTML5
Forms
Media Mouse,
Key ev.
Sockets
最新 HTML
W3C Server-
Oﬄine
HTML5 HTML5 Support
Sent ev.

Parser
Web
WAI- Storage

W3C では
XHTML5 ARIA
Semantic
Elements Web
Workers

モジュール化
Micro-
HTML Data

Khronos SMIL Vibra- MP3
WebCL Webm Opus
tion
WebGL Geo-
SVG
H.264
other location
Orien-
Web
Audio Notiﬁ-
tation Web
Canvas cation
WHATWG Web IETF RTC
Messag-
ing Web TCP Tel
Multi SPDY
Web Sockets DNT Socket
HTML5 Key ev. XHR2 Radio
FileAPI CSP
Forms
W3C
Oﬄine
Server- バズワード ECMA
Net
Info

HTML5 HTML5 Support
Sent ev. ECMA
Script ECMA
NFC
6th

"HTML5"
Parser
Indexed
Web Device
WAI- DB
Storage Storage
XHTML5 ARIA
Semantic Web
Elements Web Media SQL
USB
Workers Queries
Layout Flex File
Micro- Box Sys
HTML Data
Trans CSS3~
Battery
Status
OGP XPath form Regions Proxi-
Anim mity
Schema RSS Math
ation Filters
.org ML WOFF
RDF DOM4

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

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

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

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

Web で可能になったこと

マルチメディア
Audio, Video, Animation, 3D ...
アプリケーション
Ofﬂine, Storage, Indexed DB...
高度な通信制御
双方向通信, Server-Sent Event...

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

Web ではできなかったこと

システムステータス
WiFi 情報, モバイル通信...
各種センサー
光センサー, 近接センサー...
低レベルハードウェア制御
USB, BlueTooth, NFC...

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

Opus

H.264 Web
Audio Notiﬁ-
Web cation
RTC

この辺りが SPDY
DNT
TCP
Socket
Tel

FileAPI CSP Radio
Net

2012 年の進化 ECMA
Info

6th
Indexed
Device
DB
Storage

Flex File
Box Sys
CSS3~
Battery
Status
Regions Proxi-
mity
Filters

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
スレッドがない → Workers
GPU 使えない → WebGL, WebCL
Class 使いたい → 入るよ
*** できない → API 増加中

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

ストレージ系の進化

IndexedDB
Local Storage は縮小化の方向
FileReader, FileHandle
FileWriter, FileSystem も？
Device Storage
Archive (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 Animation
Canvas 2D, WebGL
SVG & SMIL
CSS 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 Data
Web Audio にも Firefox 近日対応
Camera API (Media Capture)
WebRTC - getUserMedia
電話会議などは簡単に

WebRTC (getUserMedia)

カメラを使ったデータ処理も可能
ビデオ会議やリアルタイム動画分析に
Nightly (要設定変更) - https://people.mozilla.com/~anarayanan/webrtc/

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

Touch Event
Vibration
Gamepad
Pointer Lock
ポインタを隠して移動量を取得

Banana Bread

３D ゲームも普通に作れるプラットフォーム
ファーストパーソンシューティングの例
https://developer.mozilla.org/ja/demos/detail/bananabread

センサー系の進化

従来からの Web API
Geolocation (位置情報)
Orientation (加速度)
Sensor API
Ambient Light (環境光)
Proximity (近接)
Android 版 Firefox は実装済み

ネットワーク系の進化

WebSocket
Server-Sent Event
SPDY v2, v3 ... HTTP 2.0
WebRTC - Peer to Peer
TCP Socket, HTTP-cache
UDP Datagram Socket

Browser Quest

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

デバイス間連携の進化

Web Intents
Web Activities
Push Notiﬁcation

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

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

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 API
Firefox×Facebook 導入済み
まもなくマルチプロバイダ対応
用途は "Social" に限らない
ある意味サイドバー API...

Social API×WebRTC

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

ステータス系の進化

WiFi Information
Mobile Connection
Network Info (通信速度等)
Battery Status
電池残量に応じた処理を

ハードウェア系の進化

Bluetooth
USB
USB ﬁle-reading
FM Radio
NFC

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

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

Pure Web Apps

WebRT as an OS...

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

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

System 系の進化

Resource Lock
スリープや WiFi オフなどの禁止
Settings (システム設定)
Alarm (時刻指定処理)
Background Service
Idle, 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 技術で実現済み！

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

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

See Also: Firefox OS Group

Google Group あります
https://groups.google.com/group/
ﬁrefoxos
参加歓迎。(・・).
Wiki にまとめてます
https://github.com/dynamis/
ﬁrefoxos/wiki

楽しみ楽しみ！

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

Summary

WebRT as an OS...

Firefox OS & Marketplace

Web プラットフォーム
Web API が進化を続けている
Marketplace
Web アプリ配信システム
Firefox OS
Web がネイティブな 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

HTML 2012

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a HTML 2012

Semelhante a HTML 2012 (20)

Mais de dynamis

Mais de dynamis (20)

Último

Último (9)

HTML 2012