第4回 HTML5など勉強会 まにフェス前夜祭 特別企画 で使用したスライド

1. Web on Kernel
for HTML5-NADO @ 201204
by Tomoya ASAI (dynamis)
last update on 2012.04.12

2. about:me
http:// dynamis.jp
@dynamitter
facebook.com/ dynamis
mailto: Tomoya ASAI <dynamis@mozilla-japan.org>

3. きょうのおはなし
ばずわーど
さいしんのぎじゅつ
うぇぶですまほ
あぷりをくばろう

4. Agenda
HTML5
WebAPI
Boot to Gecko
Marketplace

5. "HTML5"
Review the Buzzword...

6. ""HHTTMMLL55"" ってなぁに？
フォクすけに教えて！

7. The term "HTML5" is widely
used as a buzzword to refer to
modern Web technologies...
HTML 仕様書に書いてるよ！
http://whatwg.org/html - Introduction

8. "HTML5" という用語は最新
Web 技術を指すバズワード
として広く使われています
HTML 仕様書に書いてるよ！
http://whatwg.org/html - Introduction

9. "HTML5" という用語は最新
Web 技術を指すバズワード
として広く使われています
最新技術って何処までかな？

10. Semantic Multimedia HTML5
CSS Geolocation
Elements Elements Forms
Offline User HTML5
DOM MathML
Support Interaction Parser
Web
Canvas Microdata SVG XHR
Messaging
Web Web
WebRTC WebGL ECMA5th
Workers Sockets
(主な)仕様策定の場: WHATWG W3C Other

11. HTML Living Standard - WHATWG
W3C 仕様書名に "HTML" を含む
Semantic Multimedia HTML5
HTML5 - W3C
CSS
Elements Elements Forms
Offline User HTML5
DOM
Support Interaction Parser
Web
Canvas Microdata SVG
Messaging
Web Web
more...
Workers Sockets WebRTC WebGL

12. 今の ""HHTTMMLL55"" は？
フォクすけに教えて！

13. Semantic Elements CSS Transforms ECMA5th
Multimedia Elements CSS Animations WebM Codec
Canvas 2D API SVG WebGL
Forms WOFF (Web Fonts) WebCL
Offline Events Event Listener (DOM) Typed Array
Drag & Drop API XHR Level 2 Audio Data API
Web Storage Indexed DB SQL DB (obsolate)
HTML5 Parser File API River Trail
Web Workers Geolocation SPDY
Microdata Device Orientation ContentSecurityPolicy
Web Sockets API Server-Sent Events Web Socket Protocol
Web RTC Battery Status ICC Color Profile

14. Semantic Elements CSS Transforms ECMA5th
Multimedia Elements CSS Animations WebM Codec
Canvas 2D API SVG WebGL
Forms WOFF (Web Fonts) WebCL
Offline Events Event Listener (DOM) Typed Array
W3C HTML5
Drag & Drop API XHR Level 2 Audio Data API
Web Storage Indexed DB SQL DB (obsolate)
HTML5 Parser File API River Trail
Web Workers Geolocation SPDY
Microdata Device Orientation ContentSecurityPolicy
Web Sockets API Server-Sent Events Web Socket Protocol
Web RTC Battery Status ICC Color Profile

15. Semantic Elements CSS Transforms ECMA5th
Multimedia Elements CSS Animations WebM Codec
Canvas 2D API SVG WebGL
Forms WOFF (Web Fonts) WebCL
Offline Events Event Listener (DOM) Typed Array
WHATWG HTML
Drag & Drop API XHR Level 2 Audio Data API
Web Storage Indexed DB SQL DB (obsolate)
HTML5 Parser File API River Trail
Web Workers Geolocation SPDY
Microdata Device Orientation ContentSecurityPolicy
Web Sockets API Server-Sent Events Web Socket Protocol
Web RTC Battery Status ICC Color Profile

16. Semantic Elements CSS Transforms ECMA5th
Multimedia Elements CSS Animations WebM Codec
Canvas 2D API SVG WebGL
Forms WOFF (Web Fonts) WebCL
Offline Events Event Listener (DOM) Typed Array
Firefox
Drag & Drop API XHR Level 2 Audio Data API
Web Storage Indexed DB SQL DB (obsolate)
HTML5 Parser File API River Trail
Web Workers Geolocation SPDY
Microdata Device Orientation ContentSecurityPolicy
Web Sockets API Server-Sent Events Web Socket Protocol
Web RTC 点線は標準非搭載や限定的実装
Battery Status ICC Color Profile

17. "HTML5" の現状
"HTML5" >> HTML > HTML5
実装や仕様策定に伴い "HTML5"
の領域は広がり続けている
Web がプラットフォームに
本格的アプリ開発が可能に

18. これで十分なの？
フォクすけに教えて！

19. "HTML5" ではまだできない
システムステータス
電源, WiFi 情報, モバイル通信...
各種センサー
光センサー, 近接センサー...
低レベルハードウェア制御
USB, BlueTooth, NFC

20. ボクもいろいろ
使ってみた〜い！

21. やりましょう。
あの人の写真は無断で
使わないでおきます…

22. Web API
No More Native Apps...

23. http://arewemobileyet.com/

24. Web API
Web の限界を押し進める
HTML5 などの基本 API 以外
API の総称であって定義はない
W3C では DAP などで標準化
実装と共に標準化も進めていく
一部別の WG に分かれるかも？
https://wiki.mozilla.org/WebAPI

25. 昔からある Web API
Geolocation (位置情報)
Orientation (加速度センサー)
Audio Data API
WebGL (3D グラフィック)
Camera API (WebRTC へ統合)
これらは既に Android 版 Firefox で実装済み

26. 実装済みの Web API
モバイル端末の基本機能中心
SMS, Telephony
Settings, Contacts
Vibration, Pointer Lock
Battery Status (電池や充電)
Resource Lock (スリープ禁止)
Network Information
実装がまだ一部不完全な API も含む

27. 現在実装中の Web API
WebRTC (Camera, P2P など含む)
Open Web Apps (アプリ管理)
Idel, Power Management
Mobile Connection,
WiFi Information (無線情報)
Light Sensor (環境光センサー),
Proximity Sensor (近接センサー)
...and more...

28. ex. 環境光を確認してみる
var count = 0;
function output(ambient) {
// ambient.value 属性で lux 単位の光強度が得られる
var d = document.getElementById("d");
d.innerHTML = "<p> 計測回数: " + count++
+ "<p> 現在値: " + ambient.value
}
// devicelight イベントにリスナを追加する
window.addEventListener("devicelight", output, true);
// Firefox 14 か 15 から利用可能になる見込み

29. 実装予定の Web API
Device Storage
USB file-reading も
低レベルハードウェア
Bluetooth, USB, NFC
WebSocket 的になりそう
...and more...
ネイティブアプリにできることは何でも可能に

30. 検討中の WebAPI
Socket API (低レベル TCP)
Time/Clock (時刻設定)
Alarm
Calendar
Spellcheck
...and more...

31. もちろん API は標準化
W3C DAP (Device API) WG
ハードウェア操作やセンサー系
IETF/W3C WebRTC WG
マルチメディア系や P2P など
Notification なども個別 WG
また別の WG 増えるかも？
NFC, USB など低レベル系

32. the Web is the Platform
Web こそがプラットフォーム
端末、OS、ブラウザに閉じない
Write Once Run Anywhere?

33. これだけあれば…�
もちろん＊＊＊ができる

34. Boot to Gecko
Web Platform OS...

37. ステータスバーも
(電波強度、電池残量...)
電話や SMS の送受信も
もちろん Firefox も
カメラを使うのも
写真やビデオを見るのも
その他いろんなアプリも
マーケットプレイスも

38. ステータスバーも
(電波強度、電池残量...)
電話や SMS の送受信も
もちろん Firefox も
カメラを使うのも
写真やビデオを見るのも
その他いろんなアプリも
マーケットプレイスも
すべて Web 技術で！

39. Boot to Gecko
Gecko を起動する OS
Linux Kernel 上に Gecko を
Java VM などの中間レイヤなし
Web 技術が「ネイティブ」に
HTML5, JavaScript, Web API...
Gecko は Firefox の描画エンジン、WebRT = Web Runtime

41. Boot to Gecko の３要素
Gaia
ユーザインターフェイス
Gecko
アプリケーションランタイム
Gonk
低レベルの OS 層
シンプルなカスタム Linux

42. Status
2012/03/09 - M2.1
Dogfood Release
2012/03/26 M2.5
Developer Preview Phone
JSConf にて開発端末配布

43. Roadmap
2012/06/01 - M3
functional/Gecko complete
2012/06/29 - M4
feature/Gaia complete and
code freeze
(これはダミー) TBD - M4.5
major bug fixing / UI freeze

44. 開発パートナーと製品化
Telefónica は本年中に製品化
世界 3∼4 位のキャリア
ホーム画面やアプリはカスタム
Deutsche Telekom (T-Mobile)
Innovation Labs が開発に参加
Adobe, Qualcomm らも協力
PhoneGap の B2G 対応など

45. Mozilla Marketplace
the Web is the Platform

46. 既存のプラットフォーム
現在のアプリケーションはそれぞれのプラットフォーム毎に作る必要がある

47. Web がプラットフォーム
プラットフォーム
としての Web
Web がプラットフォームになれば業界標準技術でどこでも動作するアプリ環境に

48. Mozilla Marketplace
デバイス・OS 横断マーケット
Web をアプリマーケットに
マーケットで Web を分断しない
Web アプリの事前登録受付中
今年中に正式リリースを予定
http://hacks.mozilla.org/2012/02/mozillamarketplace-open-for-app-submissions/

49. Web アプリの登録
0. アプリを作る
1. AppManifest を書く
2. Marketplace に登録

50. 0. アプリを作る
てきとーに作ってね。

51. 1. AppManifest を書く
// 最小限これくらいの JSON 書くだけ。
{
"version": "0.1",
"name": "DNT Checker",
"description": "行動追跡を拒否しているか確認できます",
"developer": {
"name": "dynamis",
"url": "http://dynamis.jp"
}
}

52. 2. Marketplace に登録

55. 4/26 からユーザ向けの
ベータを開始予定
あくまでも予定。
ずれても知りません。

56. 続きは DevCon@Osaka で
http://mozilla.jp/devcon
6/30 にまた大阪で！

57. 続きは DevCon@Osaka で
http://mozilla.jp/devcon