HTML5 Conference 2012 で使用したスライド

1. HTML Web Platform
Slides @ HTML5 Conf. 2012 on 2012/09/08
by Tomoya Asai (dynamis)
Last Update: 2012/09/08

2. about:

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

4. きょうのおはなし
ぷらっとふぉーむ
うぇぶおーえす
うぇぶえーぴーあい
キツネさんのおーえす

5. Foxkeh

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

8. Web Platform

9. Web is the Platform

10. みんな ""HHTTMMLL55"" に
何を期待してるの？
フォクすけに教えて！

11. "HTML5" への期待
次世代プラットフォーム
マルチデバイス対応
アプリ開発を簡単に
組版技術を Web に
などなど…

12. ぷらっとふぉーむ？
Web はもう見るだけの
ものじゃないんだって！

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

15. 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

16. 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
Trans
CSS3~ Flex
Box
form
Anim
Regions
ation

17. 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

18. 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 Battery
Status
Box
OGP XPath form Proxi-
Anim mity
Schema RSS Math Regions
.org ation
ML WOFF
RDF DOM4

19. HTML5 なんてもう古い
HTML5 = 安定ブランチ
2014 W3C 勧告に向けて標準化中
HTML = 最新の HTML
日々進化を続ける最新 HTML
最新 Web != HTML5
遙かに多くの技術が進化してる

20. 既存の独自プラットフォーム
現在はプラットフォーム毎に異なる言語で別々のアプリを作る必要がある

21. Web プラットフォーム
vs 独自プラットフォーム
「ブラウザ戦争」の時代じゃないですよ

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

23. ホントにできるの？
フォクすけに教えて！

24. Web OS

25. Web is the OS

26. みんな ""HHTTMMLL55"" 大好き
フォクすけも好きだよ

27. "HTML5" プラットフォーム
Windows 8, RT, Phone
BlackBerry 10 - WebWorks
Tizen (MeeGo+LiMo+Bada)
Firefox OS (Boot to Gecko)
2013 年には出 う感じ

28. Windows 8, RT, Phone
HTML でモダン？アプリ
かつてメトロと呼ばれていたもの
HTML は形式的に使うだけ
独自属性付 div 要素を乱発
JS API も完全に独自
2012/10/26 リリース

29. (旧)Metro アプリの HTML
<!-- data-win-* 属性の嵐になります
JavaScript では WinJS.* の嵐 -->
<div class="itemtemplate"
data-win-control="WinJS.Binding.Template">
<div class="item">
<h4 class="item-title"
data-win-bind="textContent: title"></h4>
<div class="item-overlay">
<h6 class="item-subtitle win-type-ellipsis"
data-win-bind="textContent: updated"></h6>
</div>
</div>
</div>
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh974582.aspx

30. (旧)Metro は Web と非互換
IE10 スーパーセット？
MS の人はそう説明しますが…
実は非互換の挙動あり
API が追加されるだけじゃない
innerHTML とかフィルタされる
alert, open, moveTo とか使えない

31. Windows Store について
UI ガイド守らないと不可
ex: 設定はチャームで
→ Web アプリは全滅
Web 読み込むだけは不可
それはアプリじゃないとのこと
Web アプリはブラウザで。
MS の人に聞いた話

32. …�MMSS の人いますか？
いるならスライド
少し飛ばします(笑)

33. ずっとあたしのこと
だけを愛してね
ってなかんじ？

34. Windows 専用アプリ
だけを作ってね
ってなかんじ？

35. WWeebb と違うなら
HHTTMMLL 使ってる
意味ないよぉ
フォクすけも残念です

36. BlackBerry 10 - WebWorks
HTML でもアプリ開発可能
メインはネイティブっぽい
W3C 仕様があるものは実装
無いものは実装を追加、標準化
正直あまり標準化目立たない…
2013Q1 にリリース？

37. Tizen
HTML でもアプリ開発可能
メインは EFL のネイティブ？
参加企業の連携状況が
W3C 仕様があるものは実装
無いものは実装を追加、標準化
2013Q1 にリリース？

38. Firefox OS (Boot to Gecko)
Web がネイティブ
アプリ開発は HTML のみ
OS の UI も全部 HTML
実装と平行して標準化
それが Web 標準化のルール！

39. Firefox OS は Web と互換
Web アプリがそのまま動く
ブラウザと同じ動作
セキュリティモデルも同じ
PC やスマホにも同じアプリ
Firefox OS のアプリは Firefox OS
専用ではありません
ハードの違いとかで API の追加はあるが恣意的制約や非互換はない

40. "HTML5" プラットフォーム
HTML は形式上だけ
Windows
HTML でも開発可能
BlackBerry, Tizen
HTML がネイティブ
Firefox OS
2013 年には出 う感じ

41. やっぱりフォクすけは
キツネさんが好き
みんなも応援してね

42. あいふぉ〜んと
どろいどくんは？
ちなみにどーなの？

43. iOS (iPhone, iPad)
ネイティブアプリ限定
Objective-C
ブラウザエンジン掲載不可
WebView で読み込むのは可
機能制限版の WebKit
JIT 無効の低速 JS エンジン

44. Android
ネイティブアプリ限定
Java (+ NDK)
独自ブラウザエンジンも可
Firefox 入れれば Web アプリ
配信＆実行環境にもなります
WebView で読み込むのも可

45. Web API

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

47. やりましょう！
ってもじらが言ってる
＊＊＊ がやらないなら
Mozilla がやるんだって

48. http://arewemobileyet.com/

49. モバイルが WWeebb に
向�かわないなら
WWeebb をモバイルに
ってもじらが言ってる
＊＊＊ がやらないなら
Mozilla がやるんだって

50. Web API
Web の限界を押し進める
従来の基本的な API 以外
Mozilla が勝手に呼んでる API の
総称であって明確な定義はない
https://wiki.mozilla.org/WebAPI

51. 以前からある Web API
Geolocation (位置情報)
Orientation (加速度)
Audio Data API
WebGL (3D グラフィック)
Camera API (Media Capture)
これらはもちろん Android 版 Firefox でも実装済み

52. 実装済みの Web API
SMS, Telephony, Alarm
Mobile Connection, WiFi Info,
Network Info (通信速度等),
Contacts, Settings, Time/Clock
Idle, Battery Status
Resource Lock (スリープ禁止)
まだ不完全な実装の API も一部含む

53. 実装済みの Web API
Vibration, Pointer Lock
Ambient Light (環境光),
Proximity (近接),
Mouse Lock (移動量取得)
Device Storage, Browser
Open Web Apps, DOM Crypt
まだ不完全な実装の API も一部含む

54. 現在実装中の Web API
WebRTC (Camera, P2P 含む)
Web Activities (Intent)
Push Notification
Power Management
TCP Socket, Bluetooth
FM Radio, Permission
https://wiki.mozilla.org/WebAPI

55. 実装見込みの Web API
UDB Datagram Socket
HTTP-cache, Log
USB, NFC, USB file-reading
Background Service
...and more...
https://wiki.mozilla.org/WebAPI

56. 検討中の WebAPI
Magnetic Field
Time/Clock (時刻設定)
Calendar
Spellcheck
...and more...

57. Web API も Web 標準
W3C DAP (Device API) WG
W3C System Apps WG
IETF/W3C WebRTC WG
マルチメディア系や P2P など
その他それぞれの WG で

58. 仕様のない実装は
不幸のもとだって
仕様を公開してるけど
実際の実装と違うのも×

59. 実装のない仕様は
机上の空論だって
実装されるまで仕様が
適切かどうかも判断不能

60. もうかなりできてる！
って MMoozziillllaa が言ってる
昨年末辺りから一気に
実装してきてるらしい

61. Boot to Gecko

62. Firefox OS

63. キツネがおーえす？
フォクすけに教えて！

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

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

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

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

72. 開発パートナーと製品化
Telefónica: 来年始め製品化
最初はブラジルで発売予定
TCL (Alcatel) や ZTE
掲載ロゴはパートナー企業の一部です: http://mozilla.jp/blog/entry/9603/

73. パートナー企業 (一部)
配置・順序に意味はなし
これ以外については非公開

74. 乞うご期待

75. Marketplace

76. まーけっとぷれいす？
フォクすけに教えて！

77. Firefox Marketplace
Device, OS 横断マーケット
Web Platform のためのストア
Firefox 限定とかじゃない
今年中に正式リリース予定
現在コミュニティメンバー限定、
Firefox 開発版ユーザ向け
http://marketplace.mozilla.org/

78. どんなかんじ？
フォクすけに教えて！

79. http://marketplace.mozilla.org/

80. http://marketplace.mozilla.org/

81. ですくとっぷアプリも
これからは WWeebb 技術で！
ブラウザの枠にはもう
縛られない時代ですね

82. すまほではどうなの？
フォクすけに教えて！

83. Java アプリ同様インストール
ホームスクリーンに追加
ネイティブアプリと同じ
ブラウザと独立して起動
省メモリのためプロセスは共有

84. マルチデバイス対応
マルチデバイスマーケット
PC, Android, Firefox OS...
Web App = Native App に
ホームスクリーンに追加や
ブラウザと独立して起動など
ネイティブ同様の利用体験
ISW11F での画面サンプル

85. ほんとに WWeebb が
まるちプラットフォーム
PC もスマホも1つの
アプリを配信できる！

86. しつもんありますか？

87. See Also...

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

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

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