Kilimanjaro Event
- 1. Kilimanjaro Event
Slides @ OSC Nagoya 2012
by Tomoya ASAI (dynamis)
last update on 2012.05.12
see also: http://dynamis.jp/r
- 2. about:me
http:// dynamis.jp
@dynamitter
facebook.com/ dynamis
mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
- 4. Windows 8 のアプリ
Classic アプリ
従来の Win32 API アプリ
Metro アプリ
新しい WinRT API アプリ
Metro 対応 Desktop ブラウザ
規定のブラウザのみ Win32 API
も使える Metro ブラウザ
- 6. Windows RT での制限
Classic アプリのブラウザ
許可しません。
Metro アプリのブラウザ
ご自由に。WinRT API で作れる
ものなら作ってみやがれ。
MS のブラウザ (IE10)
API 制限のない特権あり
- 9. Agenda
WebRT
Boot to Gecko
Marketplace
Persona
Kilimanjaro
furfox アイコン: http://kaishinlab.com/furfox/
- 12. 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
- 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
Internet Explorer
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
Chrome
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
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
- 16. "HTML5" の現状
"HTML5" >> HTML > HTML5
実装や仕様策定に伴い "HTML5"
の領域は広がり続けている
Web もプラットフォームに
本格的アプリ開発が可能に
- 18. "HTML5" ではまだできない
システムステータス
WiFi 情報, モバイル通信...
各種センサー
光センサー, 近接センサー...
低レベルハードウェア制御
USB, BlueTooth, NFC...
- 21. Web API
Web の限界を押し進める
HTML5 などの基本 API 以外
API の総称であって定義はない
W3C では DAP などで標準化
実装と共に標準化も進めていく
一部別の WG に分かれるかも?
https://wiki.mozilla.org/WebAPI
- 22. 昔からある Web API
Geolocation (位置情報)
Orientation (加速度センサー)
Audio Data API
WebGL (3D グラフィック)
Camera API (WebRTC へ移行)
これらは既に Android 版 Firefox でも実装済み
- 23. 実装済みの Web API
SMS, Telephony, Contacts
Settings, Network Information
Vibration, Pointer Lock
Battery Status (電池や充電)
Resource Lock (スリープ禁止)
Light Sensor (環境光センサー),
Proximity Sensor (近接センサー)
まだ不完全な実装の API も一部含む
- 24. 現在実装中の Web API
WebRTC (Camera, P2P など含む)
Open Web Apps (アプリ管理)
Device Storage
Idle, Power Management
Mobile Connection,
WiFi Information (無線情報)
TCP Socket
- 25. 実装見込みの Web API
UDB Datagram Socket
Bluetooth, USB, NFC
WebSocket 的な API になる?
Background Service
USB file-reading (B2G 専用)
...and more...
ネイティブアプリにできることは何でも可能に
- 26. Web API も Web 標準
W3C DAP (Device API) WG
ハードウェア操作やセンサー系
IETF/W3C WebRTC WG
マルチメディア系や P2P など
Notification なども個別 WG
また別の WG 増えるかも?
NFC, USB など低レベル系
- 30. Boot to Gecko
Gecko WebRT を起動する OS
Linux Kernel 上に Gecko を
Java VM などの中間レイヤなし
Web 技術が「ネイティブ」に
HTML5, JavaScript, Web API...
Gecko は Firefox の描画エンジン、WebRT = Web Runtime
- 33. ステータスバーも
(電波強度、電池残量...)
電話や SMS の送受信も
もちろん Firefox も
カメラを使うのも
写真やビデオを見るのも
その他いろんなアプリも
マーケットプレイスも
すべて Web 技術で!
- 34. Boot to Gecko の3要素
Gaia
ユーザインターフェイス
Gecko
アプリケーションランタイム
Gonk
低レベルの OS 層
シンプルなカスタム Linux
- 35. Status
2012/03/09 - M2.1
Dogfood Release
2012/03/26 M2.5
Developer Preview Phone
JSConf にて開発端末配布
- 36. 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
あくまでもスケジュールの「プラン」です
- 37. 開発パートナーと製品化
Telefónica は本年中に製品化
世界 3∼4 位のキャリア
ホーム画面やアプリはカスタム
Deutsche Telekom (T-Mobile)
Innovation Labs が開発に参加
Adobe, Qualcomm らも協力
PhoneGap の B2G 対応など
- 42. Web がプラットフォーム
プラットフォーム
としての Web
Web がプラットフォームになれば業界標準技術でどこでも動作するアプリ環境に
- 43. Mozilla Marketplace
デバイス・OS 横断マーケット
Web Platform のためのストア
Firefox 限定とかじゃない
現在コミュニティ向けベータ
Firefox 開発版ユーザ向けテスト
今年中に正式リリースを予定
http://hacks.mozilla.org/2012/02/mozillamarketplace-open-for-app-submissions/
- 44. オープンなアプリストア
全てを Web 技術で実装
安定・平等な環境を提供
ベンダー非依存
アプリストア、認証、課金 ...
ブラウザ非依存
後方互換ダッシュボード
https://developer.mozilla.org/en/apps
- 49. アプリの登録
マニフェスト書いて登録
Content-Type: application/x-
web-app-manifest+json
Chrome との書式統一は議論中
Widget などとの関係も議論中
スクリーンショットも必須
- 50. manifest.webapp
# 最低限 name, description があればいい
{
"version": "1.0",
"name": "SampleApp",
"description": "サンプルアプリ",
"icons": { "48": "/img/icon-48.png" },
"developer": {
"name": "dynamis",
"url": "http://dynamis.jp/"
},
"installs_allowed_from": [
"https://appstore.mozillalabs.com"
]
}
Content-Type は application/x-web-app-manifest+json で送信
- 51. manifest.webapp
{
"version": "1.0",
"name": "SampleApp",
"description": "サンプルアプリ",
"icons": { "48": "/img/icon-48.png" },
"widget": {
"path": "/widget.html",
"width": 100, "height": 200
},
"developer": {
"name": "dynamis",
"url": "http://dynamis.jp/"
},
"installs_allowed_from": ["https://appstore.mozillalabs.com"]
}
その他の項目は https://developer.mozilla.org/en/OpenWebApps/The_Manifest 参照
- 54. レビューシステム
現在公開前のレビューあり
Mozilla スタッフによるレビュー
将来は AMO のようになる?
コミュニティボランティアによる
レビューへの移行なども検討中
基本的チェックだけ
ルールなど詳細は未確定
- 56. これまでのユーザID
サービス別のユーザID
個別のユーザ名とパスワード...
普通の人は管理しきれない
大手ベンダー提供のID
Google, Facebook, Twitter...
ベンダーロックイン
- 57. 求められるユーザID
安全かつ簡単に
プライバシーの確保
ベンダー非依存
ブラウザ非依存
シンプルな API
- 58. Mozilla Persona
ID = メールアドレス
普通の人でも理解・記憶可能
大半のサービスが要求する
ブラウザが直接サポートする
前提で設計し直された
ブラウザへの UI 組み込み
DOM API の定義と標準化
- 63. Persona と BrowserID
Mozilla Persona
認証サービス名
BrowserID
Mozilla Persona の開発時名称
プロトコル等は今も BrowserID
https://browserid.org/
- 64. Verified Email Protocol
メールアドレスの所有を確認
Primary Identity Authority
メールサービス自身が認証
メールサーバのパスワードで OK
Secondary Identity Authority
第三者が認証サーバを提供
確認メールを送信して所有確認
https://developer.mozilla.org/en/BrowserID/Protocol_Overview
- 65. Persona (BrowserID)
<!-- API の後方互換実装ライブラリを読み込む -->
<script src="https://browserid.org/include.js"></script>
<script>
navigator.id.get(function(assertion) {
if (assertion) {
// assertion は暗号化された認証情報
// assertion 得られた場合の処理
} else {
// エラーハンドリング
}
});
</script>
https://github.com/mozilla/browserid/wiki/How-to-Use-BrowserID-on-Your-Site
- 66. Persona (BrowserID)
navigator.id.get(function(assertion) {
if (assertion) {
// browserid.org で認証情報を検証する場合
jQuery.post("https://browserid.org/verify",
{ assertion: assertion, // 暗号化された認証情報
audience: "http://dynamis.jp" }, // 対象サイト
function(session){
// session は認証されたユーザ情報
alert(session.email);
});
} else { ... }
});
https://github.com/mozilla/browserid/wiki/How-to-Use-BrowserID-on-Your-Site
- 67. 得られる認証データ
// 認証成功時に得られるセッション情報
{
"status": "okay",
"email": "dynamis@mozilla",
"audience": "http://dynamis.jp",
"expires": 1308859352261,
"issuer": "browserid.org"
}
// 認証失敗時は reason 文字列だけが返される
{
"status": "failure",
"reason":"verification failure"
}
https://github.com/mozilla/browserid/wiki/How-to-Use-BrowserID-on-Your-Site
- 69. Kilimanjaro Event
Mozilla の今年の統合プラン
「Web がプラットフォーム」
実現に向けたマイルストーン
早ければ 9 月をターゲットに
高速リリースで Firefox にコード
ネーム付けなくなったから…
公園じゃなく山でシリーズ化?
- 70. Kilimanjaro Event
Web がプラットフォーム
API の追加: WebAPI
アプリ配信: Marketplace
OS の提供: Boot to Gecko
認証: Persona
- 73. 前日は CSS Nite in Osaka
http://osaka.cssnite.jp/vol31
6/29 & 6/30 には大阪で!