HTML2013 Web=OS

HTML2013 : Web=OS
Slides @ HTML5 Carnival Fukuoka
by Tomoya Asai (dynamis)

Last Update: 2013/02/09

HTML2013 : Web=OS
Slides @ HTML5 Conference Miyazaki 2013
by Tomoya Asai (dynamis)

Last Update: 2013/02/10

WWeebb が OOSS になる
ってどういうこと？

何だか分かんないけど
とっても楽しそうだね！

about:dynamis

Mozilla Japan
http://dynamis.jp

@dynamitter
facebook.com/ dynamis
レッサーパンダが好き。

mailto: Tomoya ASAI <dynamis@mozilla-japan.org>

https://twitter.com/lindwurm_/status/288558397119397888

MMoozziillllaa ステキでしょ？

世界をもっとステキに
しようと頑張ってます

本日のトピック

ぼくおやつ Introduction
担当ねっ！
HTML2013
Firefox OS
App Dev
Marketplace

about:foxkeh

今日もプレゼンを手伝って
くれるフォクすけを紹介します

ぼくフォクすけ

いつか僕も Firefox みたいな
立派なブラウザになるんだ！

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

君と一緒にお出
かけしたいな！

ぼくのステッカーを君の
PC とスマホに貼ってね！

みんな大好き ""HHTTMMLL55""

Mozilla と Firefox も
みんな大好きだよね！

"HTML5" の目的

アプリのための HTML
HTML は文書専用じゃない
互換性のある実装に
ブラウザの挙動を厳密に定義
マルチデバイス Web
どこでも同じ Web 技術で

Web 標準プラットフォーム

プラットフォーム
としての Web

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

独自プラットフォーム

ネイティブアプリ
機能も速度もネイティブ優先
アプリエコシステム
専用のストアや課金システム
Web は WebView
Web は一機能、独自 API 推奨

独自プラットフォーム

i a f c

プラットフォーム毎に異なる言語で個別の専用アプリを作る必要がある

標準技術のオープンな世界
vs
独自技術による囲い込み

「ブラウザ戦争」の時代はとっくに終わりました

独自プラットフォームの課題

プラットフォーム依存
それぞれ異なる言語や API
不透明な継続性・再利用性
ベンダー依存の運命共同体
Fragmentation・実装依存
同一プラットフォームでも非互換

Fragmentation...

http://i0.wp.com/cerebrux.ﬁles.wordpress.com/2012/09/
androidclones.jpg

"HTML5" への期待

次世代プラットフォーム
Web 技術で何でも可能に
Web アプリ開発を簡単に
API の充実と互換性確保
マルチデバイス対応
開発言語や API の共通化

Web が共通プラットフォーム

プラットフォーム
としての Web

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

Multi
Media Mouse,
HTML5 Key ev.
Forms
W3C
Oﬄine
HTML5 HTML5 Support
Parser

WAI-
XHTML5 ARIA
Semantic
Elements

Canvas
Web
WHATWG Messag-
ing
Multi Web
Media Mouse, Sockets
HTML5 Key ev.
Forms
W3C Server-
Oﬄine
HTML5 HTML5 Support
Sent ev.

Parser
Web
WAI-
XHTML5 Storage
ARIA
Semantic
Elements Web
Workers
Micro-
HTML Data

Canvas
Web
WHATWG Messag-
ing
Multi Web
HTML5 Key ev.
Forms
W3C Server-
Oﬄine
HTML5 HTML5 Support
Sent ev.

Parser
Web
WAI-
XHTML5 Storage
ARIA
Semantic
Elements Web Media
Workers Queries
Layout
Micro-
HTML Data
TransCSS3~
form Regions
Anim
ation Filters

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

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

HTML5 = WebKit の方が良い？

それどの WebKit？
IE6 vs IE10 以上に違う現実
その API と実装で大丈夫？
複数実装でより良い標準に
イノベーションは競争から
独占が進化を止めてたよね…

I am sad that the Web didn t handle small screens ̶
and later, touch UI ̶ that well. ... snip ...
For touch, though, I wish we had done a better job of
mapping the UI to the Web s generic events. A touch
gets mapped to a click event easily enough, but
drag-and-drop never got mapped, pinch gestures
didn t get mapped to wheel events, etc. Mainly I
think this is because the first truly successful touch
browser set the standard, and it was developed
mostly in secret with a small team many of whom,
as I understand it, weren t Web veterans.
Ian Hickson のインタビューより

独占やクローズド仕様は残念…

タッチイベントが残念…
ドラッグ＆ドロップは？
ピンチとホイールの対応は？
密室で作られたから…
最初の人気タッチブラウザ実装
Web 技術知らない奴らが作った

オープンな標準は世界の英知の結晶

The drag-and-drop API is
horrible,
but it has one thing going
for it: IE6 implements it, as
do Safari and Firefox.

by Ian Hickson: http://twitter.com/Hixie/status/4075253361

Drag & Drop API は酷いけ
ど、採用する理由がひとつ
ある。つまり、IE6 だけでな
く Safari や Firefox でも実装
されているということだ。

by Ian Hickson: http://twitter.com/Hixie/status/4075253361

オープンなモバイルで
イノベーションを加速！

オープンと競争は革新の源泉

""HHTTMMLL55"" は今年
どんな進化をするの？

未来に向かって走り続ける！
ぼくは足短いから遅いけど…

Web で可能になってたこと

マルチメディア
Audio, Video, Animation, 3D ...
アプリケーション
Ofﬂine, Storage, Indexed DB...
高度な通信制御
双方向通信, Server-Sent Event...

2011 年にはできていたことの一例

Web ではできなかったこと

システムステータス
WiFi 情報, モバイル通信...
各種センサー
光センサー, 近接センサー...
低レベルハードウェア制御
USB, BlueTooth, NFC...

2011 年にはできなかったことの一例

Opus

H.264 Web
Audio Notiﬁ-
Web cation
RTC

この辺りが SPDY
DNT
TCP
Socket
Tel

FileAPI CSP Radio
Net

2012 年の進化 ECMA
Info

6th
Indexed
Device
DB
Storage

Flex File
Box Sys
CSS3~
Battery
Status
Regions Proxi-
mity
Filters

ブラウザの技術から
プラットフォームへ

僕はまず立派なブラウザになり
いつかは立派な OS にならなきゃ

2012 年実装 Web API
Alarm File Handle Push Notiﬁcations
attention screen FM Radio Settings
Archive IdleAPI SMS
Audio Policy Mouse Lock Screen Orientation
Background Sensor Mobile Connection System XHR
Browser Network Events TCP Socket
Camera Network Stats Web Telephony
Contacts Manage Time Manager
Desktop Notiﬁcation Payment Open Web Apps
Device Storage Permissions WiFi Management
Embed Apps Power Management などなど...

実装状況などのまとめ表: https://wiki.mozilla.org/WebAPI

Next Web API
Background Services Payment
Bluetooth-*** Quota
Calendar Resource Lock
Database Migration (temp to Simple Storage
permanent storage) Social API
FileSystem? SPDY Server Push
NFC Spellcheck
HTTP-cache UDB Datagram Socket
Keyboard/IME USB (low-level)
Log USB ﬁle-reading
MPEG DASH WebRTC - Camera
Open Web Apps WebRTC - P2P
Parallel Array などなど...

どこまで今年中にサポートされるか楽しみ！

WWeebb 技術で
未来を創ろう！

未来に向かって走り続けなきゃ！
ぼくは足短いから走るの遅いけど

Web 標準を充実させよう！

Web = Native に
不足機能はすべて定義・実装
W3C の WG などで標準化
実装と平行して標準化
Device API, System Apps...
そのほか IETF などでも

https://wiki.mozilla.org/WebAPI

Web API の標準化

Device API, System Application, Web Apps WG が主
実装面では圧倒的に Firefox がリードしている
FYI: http://www.w3.org/Mobile/mobile-web-app-state/

これなら WWeebb が
OOSS になれるね！

どんなアプリでも作れそう！
ボクもいろいろ作りた∼い！

FFiirreeffooxx OOSS って
どんなん感じ？

フォクすけもわくわく。

ステータスバー (通知、
電波強度、電池残量...)も
カメラやラジオも
ビデオや音楽の再生も
マーケットプレイスも
システムの環境設定も
ホーム画面や壁紙も
電話や SMS の送受信も
もちろんブラウザも
その他なんでも...

ステータスバー (通知、
電波強度、電池残量...)も
カメラやラジオも
ビデオや音楽の再生も
マーケットプレイスも
システムの環境設定も
ホーム画面や壁紙も
電話や SMS の送受信も
もちろんブラウザも
その他なんでも...

すべて Web 技術で！

Firefox OS (Boot to Gecko)

Web 技術が「ネイティブ」
HTML5, JavaScript, Web API...
Java に匹敵する速度も目指して
Gecko エンジンだけ起動
Kernel 上に Gecko を
Java VM などの中間レイヤなし
Gecko = Firefox 描画エンジン

プロジェクト名は今でも Boot to Gecko

Firefox OS = スマート(軽量) OS
既存プラットフォーム Firefox OS

Web Browser/
Platform

Native API- HTML5 User
based UI Experience/
Content
APIs Web Engine/
Standard Device
APIs
Kernel
(e.g. Android, iOS, Kernel
Win7, etc.)

Device
(phone, tablet, Device
desktop)

Web プラットフォームの実行環境としては圧倒的にスマート！

Firefox OS エコシステムの魅力

ネイティブに負けない
提供される API も充実
一部処理は速度面でも匹敵
スリムな HTML5 実行環境
$100 スマホでも十分動作
$100 タブレットは当たり前
圧倒的な開発者数...
急速な高速化が続き、型推論の効く処理は既に Dalvik/Java にも匹敵

開発者の多いプラットフォーム
800万人

10万人 45万人

Web プラットフォームの開発者は iOS の 80 倍、Android の 18 倍！

透明性や自由度の
高いプラットフォーム

既存の独占的 Firefox OS による
プラットフォーム Open プラットフォーム
開発者/OEM/キャリア market 開発者/OEM/
/ キャリア

Apple Google MS
App Store Play Marketplace

iPhone/iPad 端末端末

ユーザ

ユーザユーザユーザ端末

Global アプリパートナー

まだまだあるけど入り切りません。一部ロゴ古いかも。ゴメンね。

*1
アプリも「ぐぐる」時代へ

"まずインストール" は古い
ディレクトリ(紹介)だけのマーケッ
トでは Google 以前の Web と同じ
動的な Web アプリ環境
Web サイトや Web アプリはアク
セスするだけで使える
アプリを検索してまず試し、
気に入ったらホームに追加する

*1 everything.me ってサービスだから正確には「えぶる」かも？

Firefox OS とセキュリティ

ユーザがアプリ権限管理可
「インストール時に全て許可」の
モデルではプライバシー守れない
インストール時と実行時に権限を
許可するハイブリッド方式
ユーザが理解できるか。プライバ
シーに関わるかなどで分類。

開発パートナーと製品化

Telefónica が最初に製品化
世界 4 位のキャリア
最初はブラジルで発売予定
Qualcomm ローエンド∼ミッド
現在は Dev Phone by ZTE
コードネームは「うなぎ」

Softbank の Sprint 買収が確定したら Telefónica は 5 位になる

Firefox OS のパートナー

現時点で公表済みの一部パートナーのみ。続報は 24 日にね。

ステキ。

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

Firefox OS のアプリ開発

Web アプリです。

大事なこと３回

Firefox OS のアプリ開発

いつもの開発ツール
いつものエディタ
いつものライブラリ

いつもと一緒だ
から安心だね！

アプリ開発の流れ

普通に Web 開発
デバッグもいつも通り
manifest ファイルを用意
メタ情報を JSON 形式で記載
シミュレータや実機テスト
PC で動かない API は実機で確認
Vibration, Touch, Sensor...

https://github.com/dynamis/firefoxos/wiki/simulator

manifest ファイル
{
  "name": "フォクすけアプリ",
  "description": "あのフォクすけが遂にアプリに！",
  "launch_path": "/index.html",
  "icons": {
    "128": "/icons/foxkeh-128.png"
  },
  "developer": {
    "name": "dynamis",
    "url": "http://dynamis.jp/"
  },
  "default_locale": "ja"
}
// 注意: ローカルファイルで / -> /index.html 変換はない

https://developer.mozilla.org/en-US/docs/Apps/Manifest

Firefox OS Simulator

再起動不要の拡張機能
https://addons.mozilla.org/ja/
ﬁrefox/addon/ﬁrefox-os-simulator/
ポチッと押すだけ
Web 開発メニューに追加される
Firefox デスクトップビルド＋
プロファイル＋Alpha

詳しい解説: https://github.com/dynamis/firefoxos/wiki/simulator

Firefox OS Simulator (r2d2b2g)

プロファイル付きデスクトップビルドにホームボタンを追加
コンソールやディレクトリからアプリケーションを読み込む機能も

シミュレータにインストール

Add Directory ボタン
manifest ファイルを選択
zip されて packaged app として
インストールされ、起動する
Update ボタンで更新
同じディレクトリのファイルを
zip し直して、起動する

https://github.com/dynamis/firefoxos/wiki/simulator

つーるきっととかは？

Firefox OS 標準の
ライブラリとかあるの？

GAIA Building Blocks (UI 部品)

Gaia (Firefox OS 標準) Apps
のデザインを簡単に作れる
http://buildingﬁrefoxos.com/
使っても使わなくても OK
好きな SDK/Library 使える
自由な Web ですから！

http://buildingfirefoxos.com/

まーけっと？

Web アプリの配信方法は？

Firefox Marketplace

Device, OS 横断マーケット
Web Platform のためのストア
Firefox 限定にならない設計
現在テスター向け公開中
対象は Firefox OS と Android 版
Firefox Aurora/Nightly
PC で見るには UA 書き換え...

https://marketplace.firefox.com/

オープンなアプリストア

全てを Web 技術で実装
安定・平等な環境を提供
Marketplace のソースも公開
ベンダー非依存
Firefox Marketplace 以外にも
ストア、認証、課金も自由に

https://marketplace.firefox.com/

オープンなレビューシステム

コミュニティレビュー
Firefox のアドオンと同じ
レビュー基準もレビュアーもすべ
てオープンなマーケット
動作まではレビューしない
あくまで最低限のフィルタ

https://developer.mozilla.org/en-US/docs/Apps/Marketplace_review_criteria

自分のサイトで配布

install() 関数使うだけ
navigator.mozApps.install()
manifest ファイル URL を渡す
その他の Apps API:
navigator.mozApps.getSelf()
navigator.mozApps.getInstalled()
installPackage() は FxOS 限定

https://developer.mozilla.org/en-US/docs/Apps/Apps_JavaScript_API

navigator.mozApps.install()
var Apps = navigator.mozApps;
var manifest
= "http://apps.dynamis.jp/manifest.webapp";

var request = Apps.install(manifest);
request.onsuccess = function() {
// 成功時の処理
};
request.onerror = function() {
// 失敗時の処理
};

Firefox ＝ WebRT (WebRunTime)

どろいど君 Gecko は Web エンジン
とも仲良し！
Firefox = Gecko で XUL/JS
WebApps = Gecko で HTML/JS
マルチデバイス対応
PC, Android, Firefox OS...
同じコードでどこでも動く
マーケットもマルチデバイス

Android に Web アプリ環境を

Web App = Native App に
ホームスクリーンへの追加や
独立してフル画面起動など
ネイティブ同様の利用体験
Firefox = WebRT for Android

ホームにインストール、アプリを起動した画面、マーケットをブラウズ

PC にも Web アプリ環境を

Web App = Native App に
プログラムフォルダ (アプリケー
ションディレクトリ) への追加
ウィンドウはもちろんプロセスも
データも全て独立
Firefox = WebRT for PC

WWeebb だから
どこにでも！

Web らしいシステムだね！

実機で開発したい？

僕の手でも使えるかな？

Developer Preview Phone

Telefónica と Geeksphone が作る開発者向けテスト端末

Developer Preview Phone

近日発売予定
Keon:
Snapdragon 1GHz, 4GB ROM,
512MB RAM, 3.5" HVGA
Peak:
Snapdragon 1.2GHz x2, 4GB ROM,
512MB RAM, 4.3" qHD

http://www.geeksphone.com/

もっと知りたい？

僕はもっと知りたい！

Firefox OS コミュニティを！

http://FxOS.org/
(https://groups.google.com/group/
ﬁrefoxos にリダイレクト)

http://FxOS.org/wiki
(https://github.com/dynamis/ﬁrefoxos/
wiki にリダイレクト)

みんな参加してね。
みんなよろしく！

Summary

WebRT as an OS...

今年 WWeebb 技術が

いつか立派な OS になるんだ！

今年 WWeebb 技術が
OOSS になる！

いつか立派な OS になるんだ！

質問ある？

ぼくには難しいことは
分からないけど許してね。

開発者ツール紹介

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

http://r.dynamis.jp/devtools

JavaScript.Next

JavaScript の最新仕様
ECMAScript 5th のポイント
JavaScript 次世代仕様
ECMAScript 6th や Harmony

http://r.dynamis.jp/jsnext

セキュリティ関連機能紹介

セキュリティ大事！
知っておくべき機能です
Content Security Policy
次世代セキュリティポリシー
Same Origin Policy はもう古い

http://r.dynamis.jp/sec

HTML2013 Web=OS

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a HTML2013 Web=OS

Similar a HTML2013 Web=OS (20)

Más de dynamis

Más de dynamis (20)

Último

Último (9)

HTML2013 Web=OS