Web Touch Meeting × Mozilla 勉強会で使用したスライド

1. Web Technology Meeting
Slides @ Web Touch Meeting × Mozilla
by Tomoya Asai (dynamis)
Last Update: 2012/10/21

2. about:me

3. about:dynamis
Mozilla Japan
http://dynamis.jp
@dynamitter
facebook.com/ dynamis
レッサーパンダが好き。
mailto: Tomoya ASAI <dynamis@mozilla-japan.org>

4. about:mozilla

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

6. Agenda

7. 本日のトピック
about:
HTML5
HTML5.1 - Plan 2014
Web=OS
Firefox OS

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

9. ぼくフォクすけ
ぼくフォクすけ
いつか僕も Firefox みたいな
立派なブラウザになるんだ！

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

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

12. FFXXKK 4488！
取りあえず 48 人並べてみました

13. FFXXKK 4488！
しっぽの方がもふもふ！

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

15. See Also...

16. Firefox OS & Marketplace
Web プラットフォーム
Web API が進化を続けている
Marketplace
Web アプリ配信システム
Firefox OS
Web がネイティブな OS
http://r.dynamis.jp/fxos

17. CSS 最新機能紹介
CSS の新機能紹介
新機能や昨年から変わった点
http://r.dynamis.jp/css2012

18. JavaScript.Next
JavaScript の最新仕様
ECMAScript 5th のポイント
JavaScript 次世代仕様
ECMAScript 6th や Harmony
http://r.dynamis.jp/jsnext

19. 開発者ツール紹介
一通りの機能と使い方
Firefox 標準の開発者ツール
隠し設定やビルトイン関数のリ
ファレンスなども含めています
Firebug とその拡張機能
アイコンや背景画像を変更する
カスタマイズにも言及してます
http://r.dynamis.jp/devtools

20. セキュリティ関連機能紹介
セキュリティ大事！
知っておくべき機能です
Content Security Policy
次世代セキュリティポリシー
Same Origin Policy はもう古い
http://r.dynamis.jp/sec

21. "HTML5"

22. みんな大好き ""HHTTMMLL55""
Mozilla と Firefox も
みんな大好きだよね？

23. "HTML5" 以前の Web
文書のための HTML+α
複雑なものは Flash で
互換性のない独自拡張
仕様のない新機能ばかり
デバイス毎の Web
モバイル Web は別物だった

24. ブラウザ戦争
IE の独占市場を Firefox が崩して Web 標準の時代へ

25. "HTML5" の目的
アプリのための HTML
すべてを Web 技術で実現
互換性のある実装に
ブラウザの挙動を厳密に定義
マルチデバイス Web
どこでも同じ "One Web"

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

27. 独自プラットフォームの台頭
ネイティブアプリ
ハイパフォーマンス、高度な API
エコシステム
専用のアプリケーションストア
WebView
内蔵エンジンで Web も使える

28. 独自技術による囲い込み
i a f c
プラットフォーム毎に異なる言語で個別の専用アプリを作る必要がある

29. 独自プラットフォームの問題
プラットフォーム依存
プログラミング言語から違う
バージョン依存
毎年新しい OS に対応が必要
デバイス依存
独自仕様で端末依存の API

30. Web 標準プラットフォーム
vs
独自技術による囲い込み
「ブラウザ戦争」の時代はとっくに終わりました

31. "HTML5" への期待
次世代プラットフォーム
アプリ開発のプラットフォーム
Web アプリ開発を簡単に
互換性のある範囲の拡大
マルチデバイス展開
言語と API を共通化

32. Web が共通プラットフォーム
プラットフォーム
としての Web
Web がプラットフォームなら業界標準技術でアプリ環境が統一される

33. "HTML5" への期待
次世代プラットフォーム
アプリ開発のプラットフォーム
Web アプリ開発を簡単に
互換性のある範囲の拡大
マルチデバイス展開
言語と API を共通化

34. もっともっと WWeebb を
進化させなきゃ！
僕らの Web が進化しないと
闇の組織に支配されちゃう！

35. HTML5.1

36. HHTTMMLL55 の次は
HHTTMMLL55..11 ？
HTML6 じゃないのは
ちょっと意外だったね！

37. HTML5 の次は HTML5.1
W3C 仕様書の話です
!= バズワード "HTML5"
HTML5 は 2014 年に標準化
今年中に仕様をほぼ確定に
HTML5.1 も平行して標準化
5.1 は 2016 年に標準化
http://dev.w3.org/html5/decision-policy/html5-2014-plan.html

38. HTML5 < HTML << "HTML5"
HTML5 = W3C 仕様書
安定化を進めるスナップショット
HTML = WHATWG 仕様書
常に進化を続ける最新仕様
"HTML5" = Web 技術全部
てきとーに呼んでるだけ

39. HTML5 = 安定ブランチ
HTML5.x = ブランチ更新
HTML = 最新の HTML
喧嘩して分離したのではない
W3C で安定化作業を始めただけ

40. HHTTMMLL 仕様は進化と
安定化が同時に続く！
HTML5.x の安定化中も
HTMLの進化は止まらない

41. Web = OS

42. 今の ""HHTTMMLL55"" で
満足してちゃだめ！
未来に向かって走り続けなきゃ！
ぼくは足短いから走るの遅いけど

43. Web で可能になったこと
マルチメディア
Audio, Video, Animation, 3D ...
アプリケーション
Offline, Storage, File ...
高度な通信制御
双方向通信, DNT ...

44. Web ではできなかったこと
システムステータス
WiFi 情報, モバイル通信...
各種センサー
光センサー, 近接センサー...
低レベルハードウェア制御
USB, BlueTooth, NFC...

46. Multi
Media Mouse,
HTML5 Key ev.
Forms
W3C
Offline
HTML5 HTML5 Support
Parser
WAI-
XHTML5 ARIA
Semantic
Elements

47. Canvas
Web
WHATWG Messag-
ing
Multi Web
Media Mouse, Sockets
HTML5 Key ev.
Forms
W3C Server-
Offline
HTML5 HTML5 Support
Sent ev.
Parser
Web
WAI-
XHTML5 Storage
ARIA
Semantic
Elements Web
Workers
Micro-
HTML Data

48. Canvas
Web
WHATWG Messag-
ing
Multi Web
Media Mouse, Sockets
HTML5 Key ev.
Forms
W3C Server-
Offline
HTML5 HTML5 Support
Sent ev.
Parser
Web
WAI-
XHTML5 Storage
ARIA
Semantic
Elements Web Media
Workers Layout Queries
Micro-
HTML Data
TransCSS3~ Flex
Box
form
Anim
Regions
ation

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

50. Khronos SMIL Vibra- MP3
WebCL Webm Opus
tion
WebGL Geo-
SVG
H.264
other location
Orien-
Web
Audio Notifi-
tation Web
Canvas cation
WHATWG Web IETF RTC
Messag-
ing Web TCP Tel
Multi SPDY
Web Sockets DNT Socket
Media Mouse, Sockets
HTML5 Key ev. XHR2 Radio
FileAPI CSP
Forms Net
W3C Server- Info
Offline 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 SQL
Media
USB
Workers Layout Queries
File
Micro- Sys
HTML Data
Trans CSS3~ Flex
Box
Battery
Status
OGP XPath form Proxi-
Anim mity
Schema RSS Math Regions
.org ation
ML WOFF
RDF DOM4

51. JavaScript の進化
次世代 JS 最高！
Firefox が最も実装進んでる
慣れると現 JS 書くのがツライ
高速化やデバッグ容易化
Class, TypedArray, ParallelArray ...
静的解析でコンパイル時エラーを
出しやすい言語仕様に

52. JavaScript が常に勝つ！
すべて問題解決してきた
速度遅い → 高速化
ミス多発 → Strict Mode
スレッドがない → Workers
GPU 使えない → WebGL, WebCL
Class 使いたい → 入るよ
*** できない → API 増加中
写真は JavaScript の父 Brendan Eich (Mozilla CTO) です

53. Web デザインの進化
レイアウト
Grid, Regions, Exclusions...
フィルター
SVG Filter, CSS Filter
CSS 構文の進化
@document, variable ...

54. レイアウトいろいろ by Adobe

55. SVG Filter, CSS Filter
Mozilla:
既にある SVG 使おうぜ！
WebKit:
SVG なんてシラネ。
俺は何でも CSS でやるぜ！
Mozilla:
仕方ないな…

56. アニメーションの進化
乱立しすぎ＆連携無し！
JavaScript Animation
Canvas 2D, WebGL
SVG & SMIL
CSS Transisions, Animations
Web Animations へ

57. Web Animations へ
Apple (Flash 代替技術として):
CSS でアニメーション！
Mozilla & Opera:
クソ構文は直して標準化
Mozilla, Google, Adobe:
JS と一括管理できる API 作ろう
Web Animations は Mozilla Japan の Brian さん頑張ってます

58. マルチメディアの進化
Audio Data, Web Audio
Camera API (Media Capture)
WebRTC - getUserMedia
電話会議などは簡単に

59. WebRTC (getUserMedia)
about:config - media.navigator.enabled=true
https://people.mozilla.com/~anarayanan/webrtc/

60. WebRTC (getUserMedia)
about:config - media.navigator.enabled=true
https://people.mozilla.com/~anarayanan/webrtc/

61. インタラクティブ系の進化
Touch Event
Vibration
Gamepad
Pointer Lock
Resource Lock
Idle

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

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

64. ネットワーク系の進化
Server-Sent Event
WebSocket
SPDY v2, v3 ... HTTP 2.0?
WebRTC - P2P
TCP Socket
UDP Datagram Socket

65. デバイス間連携の進化
Web Intents
Web Activities
Push Notification
この辺の話はカエルさん(小松さん)に聞きましょう

66. デバイス間連携はこれから本番
Mozilla:
Web Activities!
Google:
Web Intents!
Mozilla & Google:
WHATWG で標準化議論中
共に将来非互換になる見込み
この辺の話はカエルさん(小松さん)に聞きましょう

67. ステータス系の進化
WiFi Info
Mobile Connection
Network Info (通信速度等)
Battery Status

68. センサー系の進化
Geolocation (位置情報)
Orientation (加速度)
Ambient Light (環境光)
Proximity (近接)

69. ハードウェア系の進化
Bluetooth
USB, USB file-reading
NFC
FM Radio

70. スマホ系の進化
SMS, Telephony (電話)
Contacts, Settings
UDB Datagram Socket
HTTP-cache, Log
Background Service

71. アプリとしての進化
Open Web Apps
アプリとしてインストール
FileReader, FileHandle
Device Storage

72. ホンモノの Web "アプリ"
ブラウザという枠を飛び出して動作

73. Android でも実装済み
開発版での画面です

74. Web API は標準化
不足機能は実装＆標準化
Web ＝ Native とする
W3C の WG などで標準化
実装と平行して標準化
Device API, System Apps...
そのほか IETF などでも
https://wiki.mozilla.org/WebAPI

75. これなら WWeebb で
大丈夫だね！
僕はまず立派なブラウザになり
いつかは立派な OS にならなきゃ

76. Firefox OS
WebRT as an OS...

77. おーえすになる！
僕より先に OS になるんだね
やっぱり Firefox って凄いや！

81. ステータスバーも
(電波強度、電池残量...)
カメラやラジオも
電話や SMS の送受信も
もちろん Firefox も
音楽やビデオの再生も
マーケットプレイスも
３Dアプリも
その他なんでも...

82. ステータスバーも
(電波強度、電池残量...)
カメラやラジオも
電話や SMS の送受信も
もちろん Firefox も
音楽やビデオの再生も
マーケットプレイスも
３Dアプリも
その他なんでも...
すべて Web 技術で！

83. Firefox OS (Boot to Gecko)
Web 技術が「ネイティブ」
HTML5, JavaScript, Web API...
ホーム画面もすべて Web 技術で
Gecko エンジンだけ起動
Linux Kernel 上に Gecko を
Java VM などの中間レイヤなし
Gecko = Firefox 描画エンジン
プロジェクト名は今も Boot to Gecko

85. 開発パートナーと製品化
Telefónica が来年初め発売
世界 3∼4 位のキャリア
最初はブラジルで発売予定
Qualcomm のチップを使用
端末製造は ZTE や TCL
掲載ロゴはパートナー企業の一部です: http://mozilla.jp/blog/entry/9603/

86. パートナー企業 (一部)
一部。配置・順序に意味はなし

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