Upload
dynamis-
View
7.174
Download
2
Embed Size (px)
DESCRIPTION
神戸ITフェスティバルのプレゼンで使用したスライド http://kobe-it-fes.org/archives/1836
Citation preview
Last Update: 2012/10/06
HTML5 = OSSlides @ Kobe IT Festival 2012
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
Agenda
本日のトピック
aboutHTML5HTML5.1Web=OSFirefox OS
about:foxkeh
ときどきプレゼン手伝ってくれるフォクすけを紹介します
ぼくフォクすけ
いつか僕も Firefox みたいな立派なブラウザになるんだ!
ぼくフォクすけ
サーバ (Apache Camel) の上にクライアント (Firefox)
9.14 からキャンペーン開始しています
フォクすけの誕生日は 2006/09/01
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 もみんな大好きだよね?
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" 以前の Web
文書のための HTML+α複雑なものは Flash で
互換性のない独自拡張仕様のない新機能ばかり
デバイス毎の Webモバイル Web は別物だった
IE の独占市場を Firefox が崩して Web 標準の時代へ
ブラウザ戦争
"HTML5" の目的
アプリのための HTMLすべてを Web 技術で実現
互換性のある実装にブラウザの挙動を厳密に定義
マルチデバイス Webどこでも同じ "One Web"
Web 標準プラットフォームvs
独自技術で囲い込んだ Web
「ブラウザ戦争」の時代はとっくに終わりました
"HTML5" への期待
次世代プラットフォームアプリ開発のプラットフォーム
Web アプリ開発を簡単に互換性のある範囲の拡大
マルチデバイス展開コード共通化でコスト削減
既存の独自プラットフォーム
現在はプラットフォーム毎に異なる言語で別々のアプリを作る必要がある
Web が共通プラットフォーム
プラットフォームとしての Web
Web がプラットフォームなら業界標準技術でアプリ環境が統一される
僕らの WWeebb を独占から守ろう!
Web はみんなのものだから独占しちゃダメだよね!
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
もっともっと 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"" で満足してちゃだめ!
未来に向かって走り続けなきゃ!ぼくは足短いから走るの遅いけど
JavaScript の進化
次世代 JS 最高!Firefox が最も実装進んでる慣れると現 JS 書くのがツライ
高速化やデバッグ容易化Class, TypedArray, ParallelArray ...静的解析でコンパイル時エラーを出しやすい言語仕様に
TypeScript ってどうなの?
JS はすべて TS だって!互換性大事だよね!
次世代 JS 使えるって!でも実装がダメ (><)
MS お得意の独自拡張お得意のインテリセンスも
たったこれだけでも非互換// JavaScript (Firefox 実装済み)(function(){ var [a, b] = [1, 2]; // 関数スコープ})();console.log(a);// -> TypeScript で変換後(function () { var __missing; [a, b] = [1, 2]; // グローバル})();console.log(a);// もしバグじゃなくて仕様なら残念すぎる
雨後の筍がポコポコ生えてる?
CoffeeScript次世代 JS の先輩的存在
Dart他人。Chrome に囲い込み?
JSX誰が書いても遅くならない
JavaScript が常に勝つ!
すべて問題解決してきた速度遅い → 高速化ミス多発 → Strict Modeスレッドがない → WorkersGPU 使えない → WebGLClass 使いたい → 入るよ
写真は JavaScript の父 Brendan Eich (Mozilla CTO) です
Web デザインの進化
フィルターSVG Filter, CSS Filter
レイアウトGrid, Regions, Exclusions...
CSS 構文の進化@document, variable ...
SVG Filter, CSS Filter
Mozilla:既にある SVG 使おうぜ!
WebKit:SVG なんてシラネ。俺は何でも CSS でやるぜ!
Mozilla:仕方ないな…
レイアウトいろいろ by Adobe
アニメーションの進化
乱立しすぎ&連携無し!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)
WebRTC (getUserMedia)
インタラクティブ系の進化
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 Info, Mobile 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
Android でも実装済み
開発版での画面です
夢が広がるね!
僕はまず立派なブラウザになりいつかは立派な OS にならなきゃ
Firefox OS
WebRT as an OS...
おーえすになる!
僕より先に OS になるんだねやっぱり Firefox って凄いや!
ステータスバーも(電波強度、電池残量...)
電話や SMS の送受信ももちろん Firefox も
カメラやラジオも
音楽やビデオの再生も
その他なんでも...
マーケットプレイスも3Dアプリも
すべて Web 技術で!
ステータスバーも(電波強度、電池残量...)
電話や SMS の送受信ももちろん Firefox も
カメラやラジオも
音楽やビデオの再生も
その他なんでも...
マーケットプレイスも3Dアプリも
開発パートナーと製品化
Telefónica が来年初め発売世界 3~4 位のキャリア最初はブラジルで発売予定Qualcomm のチップを使用端末製造は ZTE や TCL
and more...
掲載ロゴはパートナー企業の一部です: http://mozilla.jp/blog/entry/9603/
パートナー企業 (一部)
一部。配置・順序に意味はなし
楽しみ楽しみ!
僕もスマホになって君と一緒にお出かけしたいな!