Last Update: 2013/01/22

Firefox OSSlides @ html5j.org 35th

by Tomoya Asai (dynamis)

about:me

about:dynamisTomoya Asai @ Mozilla Japan

http://dynamis.jp@dynamitter

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

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

about:events

今週末は大阪でおさわり！

http://m2.cap-ut.co.jp/event/semi07.html

今週末は東京でもおさわり！

http://atnd.org/events/36267

Firefox OS イベント共催募集

2012.11.03:デザイナーズハック, Tizen Japan コンソーシアムと共催2012.12.09:HTML5＋α @福岡と共催2013.01.26:まにまにカレッジと共催

次はあなたと！

いっしょにおさわり！

about: Firefox OS group

http://FxOS.org/(https://groups.google.com/group/firefoxos にリダイレクト)コミュニティ一緒に作ってくれる人を募集しています。(・・).

みんないっしょに！

Firefox OS 情報集めてます

http://FxOS.org/wiki(https://github.com/dynamis/firefoxos/wiki にリダイレクト)随時更新しています。

みんなよろしく！

about:mozillain 2012

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

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

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

MMoozziillllaa ステキでしょ？

ステキな世界を作るためよりいっそう頑張ってます

Topics

本日のトピック

about:Why Firefox OS?Firefox OSWeb = OSMarketplaceApps Dev

Why Firefox OS?

html5j.org ですし、HTML5 的な視点から

どうして FFiirreeffooxx がOOSS になるの？

"HTML5" の目的

アプリのための HTMLすべてを Web 技術で実現

互換性のある実装にブラウザの挙動を厳密に定義

マルチデバイス Webどこでも同じ "One Web"

Web 標準プラットフォーム

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

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

独占プラットフォームの支配

ネイティブアプリ機能も速度もネイティブ優先

アプリエコシステム専用のストアや課金システム

WebViewWeb は中に取り込んでしまう

独占的プラットフォーム

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

i a f c

独占プラットフォームの問題

プラットフォーム依存それぞれ異なる言語や API

不透明な継続性・再利用性ベンダーと運命共同体

囲われた世界での自由ビジネス的な制約も多い

Web 標準のオープンな世界vs

独自技術による囲い込み

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

"HTML5" への期待

次世代プラットフォームアプリ開発のプラットフォーム

Web アプリ開発を簡単に互換性のある範囲の拡大

マルチデバイス展開言語と API を共通化

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

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

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

Web ベースで透明性や自由度の高いプラットフォームへ

開発者/OEM/キャリア

AppleApp Store

iPhone/iPad

ユーザ

GooglePlay

端末

ユーザ

MSMarketplace

端末

ユーザ

market 開発者/OEM// キャリア

ユーザ端末

既存の独占的プラットフォーム

Firefox OS によるOpen プラットフォーム

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

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

Web = OS

Web が OS となる時代が来ました

うぇぶがおーえす？

Web が OS になるってどーいうことなんでしょう？

Web で可能になったこと

マルチメディアAudio, Video, Animation, 3D ...

アプリケーションOffline, Storage, File ...

高度な通信制御双方向通信, DNT ...

Web ではできなかったこと

システムステータスWiFi 情報, モバイル通信...

各種センサー光センサー, 近接センサー...

低レベルハードウェア制御USB, BlueTooth, NFC...

SemanticElements

MultiMedia

Canvas

HTML5Forms

OfflineSupport

Micro-Data

WebGL

IndexedDB

SVG

Server-Sent ev.

WebSockets

WebSockets

Geo-location

FileAPI

WebStorage

XHR2

MathML

LayoutMedia

Queries

HTML5

CSS3~Transform

Animation Regions

FlexBox

HTML5Parser

Mouse,Key ev.

ECMAScript

CSP

SPDY

XHTML5

Orien-tation

WebWorkers

WebMessag-

ing

DOM4

SMIL Vibra-tion

XPathRSS

OGP

WAI-ARIA

W3C

WHATWG

other

Khronos

ECMA

IETF

WOFF

HTML

DNT

SemanticElements

MultiMedia

Canvas

HTML5Forms

OfflineSupport

Webm

H.264

Micro-Data

WebGL

WebSQL

IndexedDB

SVG

Server-Sent ev.

WebSockets

WebSockets

Geo-location

FileAPI

WebStorage

XHR2

MathML

WebAudio

LayoutMedia

Queries

HTML5

CSS3~Transform

Animation Regions

FlexBox

HTML5Parser

Mouse,Key ev.

Opus

ECMAScript ECMA

6th

USB

CSP

SPDY

WebCL

WebRTC

NetInfo

MP3

DeviceStorage

TCPSocket

NFC

File Sys

Notifi-cation

XHTML5

Orien-tation

WebWorkers

WebMessag-

ing

DOM4

SMIL Vibra-tion

Proxi-mity

XPathRSS

RDF

OGPSchema

.org

WAI-ARIA

W3C

WHATWG

other

Khronos

ECMA

IETF

WOFF

BatteryStatus

Radio

Tel

HTML

DNT

Web APIsAlarmattention screenAudio PolicyBackground SensorBackground servicesBrowserCameraContactsDesktop Notification

Device StorageEmbed Apps FM RadioGeolocationIdleAPIMobile ConnectionNetwork EventsNetwork Stats ManagePower Management

SettingsWeb SMSStorageSystem XHRTCP SocketWeb TelephonyTime ManagerVoicemailOpen Web AppsWiFi Managementなどなど...

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

Web API は標準化

不足機能は実装＆標準化Web ＝ Native とする

W3C などで標準化実装と平行して標準化Device API, System Apps...そのほか IETF などでも

http://bit.ly/systemlevelapi

これなら WWeebb で大丈夫だね！

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

Firefox OS

Web = OS を現実に実装

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

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

Web Browser/ Platform

Native API-based UI

Kernel (e.g. Android, iOS,

Win7, etc.)

Device (phone, tablet,

desktop)

APIs

Firefox OS = スマート(軽量) OS

HTML5 User Experience/

Content

Kernel

Device

Web Engine/ Standard Device

APIs

Firefox OS既存プラットフォーム

Firefox OS エコシステムの魅力

ネイティブに負けない提供される API も充実一部処理は速度面でも匹敵

スリムな HTML5 実行環境$100 スマホでも十分動作$100 タブレットは当たり前

圧倒的な開発者数...

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

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

800万人

45万人10万人

Global アプリパートナー

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

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

"まずインストール" は古いディレクトリ(紹介)だけのマーケットでは Google 以前の Web と同じ

動的な Web アプリ環境Web サイトや Web アプリはアクセスするだけで使えるアプリを検索してまず試し、気に入ったらホームに追加する

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

*1

Firefox OS とセキュリティ

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

開発パートナーと製品化

Telefónica が最初に製品化世界 5 位のキャリア最初はブラジルで発売予定Qualcomm ローエンドチップ

現在は Dev Phone by ZTEコードネームは「うなぎ」

Open Web Device パートナー

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

スマホ OS の Web 度

iOS:WebView は速度 1/3 制限ありAndroid:WebView 埋め込みでハイブリッドTizen, Ubuntu:HTML5 でもアプリ開発可能Firefox OS:HTML5 に最適化設計された OS

？下に行くほど Web 技術の活用範囲が広い

ステキなモバイル OS はどれ？

Web 技術の最適化 ◎ ○ ×マーケットの自由度 ◎ ○ ×製品化の自由度 ◎ ○ ×オープン ◎ ○ ×

アプリの権限管理 ◎ × ○PC/Mobile 共通アプリ ◎ × ×ネイティブアプリ × ◎ ◎開発者コミュニティ 8000K 450K 100K*1 タブ毎のプロセス分離の弊害 *2 デフォルトブラウザは OS 側に含まれるため*1 できあがってから部分的にだけ公開する Delayed Open

*1

ステキ。

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

Marketplace

Open Web Apps...

まーけっと？

Web アプリの配信方法は？

Firefox Marketplace

Device, OS 横断マーケットWeb Platform のためのストアFirefox 限定にならない設計

現在テスター向け公開中対象は Firefox OS と Android 版 Firefox Aurora/NightlyPC で見るには UA 書き換え...

https://marketplace.firefox.com/

オープンなアプリストア

全てを Web 技術で実装安定・平等な環境を提供どこでも配信＆インストール

ベンダー非依存Firefox Marketplace 以外にもストア、認証、課金も自由に

https://marketplace.firefox.com/

Android に HTML5 アプリ環境

マルチデバイスマーケットPC, Android, Firefox OS...

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

Firefox = WebRT for Android

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

WWeebb だからどこにでも！

Web らしいシステムだね！

Apps Dev

Open Web Apps...

Firefox OS のアプリ開発

Web アプリです。Web アプリです。Web アプリです。

大事なこと３回いつもと一緒であんしんだね！

Firefox OS Simulator

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

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

GAIA Building Blocks (UI 部品)

Gaia (Firefox OS 標準) Appsのデザインを簡単に作れるhttps://wiki.mozilla.org/Gaia/Design/BuildingBlocks

使っても使わなくても OK好きな SDK/Library 使える自由な Web ですから！

http://mozilla-b2g.github.com/Gaia-UI-Building-Blocks/

実機で開発したい？

僕の手でも使えるかな？

Developer Preview Phone

Telefónica と Geeksphone で作られた開発者向けテスト端末

Developer Preview Phone

2013/02 発売予定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/firefoxos にリダイレクト)

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

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

See Also...

開発者ツール紹介

一通りの機能と使い方Firefox 標準の開発者ツール隠し設定やビルトイン関数のリファレンスなども含めています

Firebug とその拡張機能アイコンや背景画像を変更するカスタマイズにも言及してます

http://r.dynamis.jp/devtools

CSS 最新機能紹介

CSS の新機能紹介新機能や昨年から変わった点

http://r.dynamis.jp/css2012

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