Try Firefox OS
-
Upload
dynamis- -
Category
Technology
-
view
1.737 -
download
1
description
Transcript of Try Firefox OS
Firefox OSProduct Summary
by Tomoya Asai (dynamis)
about:me
Tomoya ASAI
Mozilla Japan Technical Marketing (Evangelist)
dynamis @ community dynamis.jp
@dynamitter
facebook.com/dynamis
mailto: Tomoya ASAI <dynamis mozilla-japan.org>@
Firefox OS
ホーム画面
アプリのグリッド表示
写真ギャラリー
写真の編集画面
音楽再生アプリ
ビデオ再生アプリ
アドレス帳
メールアプリ
Firefox
Firefox Marketplace
!
Firefox OS - Web is the Platform
Web = アプリ環境 アプリはすべて Web 技術で ドメイン = アプリの1:1対応 Web を進化させる 不足機能は API を定義・標準化 Web のセキュリティモデルなども実装・標準化していく
Web 技術をネイティブに
Web 技術が「ネイティブ」 HTML/CSS/JS ですべて可能に 新しい API は W3C 標準化
速度も C 言語に迫る asm.js により大幅高速化を実現 WebGL や DOMCrypt なども活用
Web 技術だけですべてが済むプラットフォームとなるよう発展中
Semantic Elements
Multi Media
Canvas
HTML5 Forms
Offline Support
Micro- Data
WebGL
Indexed DB
SVG
Server- Sent ev.
Web Sockets
Web Sockets
Geo- location
FileAPI
Web Storage
XHR2
Math ML
Layout
Media Queries
HTML5
CSS3~Trans form
Anim ation
Regions
Filters
HTML5 Parser
Mouse, Key ev.
ECMA Script
CSP
SPDY
XHTML5
Orien- tation
Web Workers
Web Messag-
ing
DOM4
SMIL Vibra- tion
XPathRSS
OGP
WAI- ARIA
W3C
WHATWG
other
Khronos
ECMA
IETF
WOFF
HTML
DNT
Semantic Elements
Multi Media
Canvas
HTML5 Forms
Offline Support
Webm
H.264
Micro- Data
WebGL
Web SQL
Indexed DB
SVG
Server- Sent ev.
Web Sockets
Web Sockets
Geo- location
FileAPI
Web Storage
XHR2
Math ML
Web Audio
Layout
Media Queries
HTML5
CSS3~Trans form
Anim ation
Regions
Filters
HTML5 Parser
Mouse, Key ev.
Opus
ECMA Script ECMA
6th
USB
CSP
SPDY
WebCL
Web RTC
Net Info
MP3
Device Storage
TCP Socket
NFC
File Sys
Notifi- cation
XHTML5
Orien- tation
Web Workers
Web Messag-
ing
DOM4
SMIL Vibra- tion
Proxi- mity
XPathRSS
RDF
OGP
Schema .org
WAI- ARIA
W3C
WHATWG
other
Khronos
ECMA
IETF
WOFF
Battery Status
Radio
Tel
HTML
DNT
Flex Box
ステータスバー (通知、電波強度、電池残量...)も カメラやラジオも ビデオや音楽の再生も マーケットプレイスも システムの環境設定も ホーム画面や壁紙も 電話や SMS の送受信も もちろん ブラウザ も
その他なんでも...
すべて Web 技術で!
Firefox OS : Tizen : Android
Native Framework
カーネル & HAL
Web Platform
Web Framework
App Framework
Android Runtime
Dalvik
WebKit
Java アプリ
ブラウザ アプリ
Native Library
Web アプリ
WebKit
Web アプリ
Native アプリ
OSetc..
DeviceAPI
WebRT
Web アプリ
Packaged Webアプリ
コアサービスGeckoDeviceAPI SystemAPI
Web に最適化 シンプル&スマート
ライブラリSGL etc.
Native Interface
カーネル & HAL カーネル & HAL
X.org etc.
左上のアプリが Web 読み込み型、右上のアプリがダウンロード型
C 言語に迫る高速化 (asm.js)
asm.js 導入時点で JavaScript は C の 2 倍遅い程度 (Java や C# の処理速度と同程度以上の水準に)
2013/03 - http://kripken.github.io/mloc_emscripten_talk/#/19
C 言語に迫る高速化 (asm.js)
Firefox の JavaScript (asm.js 形式) コード実行速度は C 言語より数割遅い程度まで迫ってきている
2013/09 - http://kripken.github.io/mloc_emscripten_talk/sloop.html#/7
実レベル: Box2D 物理演算エンジン
Box2D では C 言語の 2 倍遅い程度の速度 !
Chrome や IE でも通常の JS より asm.js が高速 Java や CrossBridge (Flash C++ Compiler) と同等以上
2013/07 - http://kripken.github.io/mloc_emscripten_talk/sloop.html#/8
実用例: Unreal Engine 3
100 万行以上の C & OpenGL コードを 5 日で移植 LLVM + Emscripten で JavaScript (asm.js) に変換
epic CITADEL http://www.unrealengine.com/html5/
!
多数企業との共同開発・製品化
主要 18 キャリアが賛同 KDDI, Telefónica, Deutsche Telekom、Telenor...
チップ&端末メーカー Qualcomm, ARM ZTE, Alcatel, LG, Huawei, Sony Foxconn...
もちろん発表している企業がすべてではない
7月、8月に最初の販売開始
7月2日にスペインで発売 Telefónica が ZTE Open を発売 €69 (税込) プリペイド €30 含む
順次世界各国に展開 7月12日にポーランドで発売 8月1日にコロンビア、ベネズエラ
まずは今後の成長が見込まれる新興国市場を中心に展開 (キャリアの戦略)
ワルシャワやマドリッドでは…
ZTE Open & Alcatel One Touch Fire
!
ZTE Open
主な仕様: Size: 114 x 62 x 12.5 mmDisplay: 3.5 inch HVGACPU: MSM7225A 1 GHz (Cortex-A5, Adreno 200)RAM: 256 MBROM: 512 MB
スペインなどで発売
http://www.ztedevices.com/product/smart_phone/2bcf2d56-0c9a-4129-a25c-acce58c8e502.html
!
Alcatel One Touch Fire
主な仕様: Size: 115 x 62.3 x 12.2 mmDisplay: 3.5 inch HVGACPU: MSM7227A 1 GHz (Cortex-A5, Adreno 200)RAM: 256 MBROM: 512 MB
ポーランドなどで発売
http://www.alcatelonetouch.com/global-en/products/smartphones/one_touch_fire.html
10月から更に多くの市場へ展開
Firefox OS 1.1 端末のリリース Telefónica 10/22: ブラジル10/31: メキシコ、ペルー、ウルグアイ Deutsche Telekom ドイツ、ギリシャ、ハンガリー Telenor ハンガリー、セルビア、モンテネグロ
日本や北米では 2013~2014 年中の見込み http://mozilla.jp/blog/entry/10310/
LG Fireweb (D300)
主な仕様: Size: 113.8 x 66.5 x 9 mmDisplay: 4 inch HVGACPU: 1 GHz (型番未確認)Memory: 2 GB (4GB?)
ブラジルなどで発売
http://www.vivo.com.br/firefoxos/
Firefox OS ロードマップ
12 週間毎にアップデート 既存端末も順次更新される
Firefox OS 1.2 Android 4.3 × Firefox 26 ベース
Firefox OS 1.3 WebRTC, NFC, DataStore etc
UX 刷新プロジェクト進行中https://wiki.mozilla.org/B2G/Roadmap
App Manager & Simulator
アプリマネージャ
アプリ開発・管理環境 Firefox 標準搭載の開発環境 Firefox Nightly などに搭載済み
シュミレータ・実機両対応 Firefox OS 1.2 以降の実機またはシュミレータと接続して開発 10 月時点で Firefox OS 1.2, 1.3 のシュミレータが公開中
リリース版やベータ版には未搭載ですので Nightly で開発してください
アプリマネージャ
Web アプリ開発統合環境が Firefox 26 から標準搭載 アプリのインストールやリモートデバッグも
アプリマネージャ
Web Developer → App Manager メニューで起動 ヘルプのリンクからシュミレータをインストール
アドオンをインストール
Firefox OS 1.2, 1.3 の Simulator と ADB Helper https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/
シュミレータを起動
画面下部の [Start Simulator] ボタンで起動 起動したいバージョンを選択
Firefox OS 1.2 Simulator
デフォルトホームにアプリ検索フォームが移動
Firefox OS 1.3 Simulator
カテゴリ別アプリフォルダ復活
Apps Dev
Firefox OS のアプリ開発
Web アプリです。 Web アプリです。 Web アプリです。 !
!
大事なこと3回
Firefox OS のアプリ開発
いつもの開発ツール いつものエディタ いつものライブラリ
�������� ���
アプリ開発の流れ
普通に Web 開発 アプリマネージャ or Firebug etc.
manifest ファイルを用意 メタ情報を JSON 形式で記載
シミュレータや実機テスト Android Firefox でもテスト
https://github.com/dynamis/firefoxos/wiki/simulator
アプリ情報ファイル書くだけ
サイト + manifest.webapp 1. manifest.webapp 作成 アプリ情報書くだけで終了
!
アプリ情報 (manifest.webapp).�00�!� �� V�B?A76>CD���00���&�%�#'�"!� V�3<B?A765N;>CD;1���00���(!���#�'�� V���!��+��' ����00���"!&� V.�0000���� V����"!&��"+�������#!���00/��00���)��"#�%� V.�0000�!� �� V��,!� �&���0000�(%�� V��''# ���,!� �&��#���00/�/���VPG VF2@E8V�V��V��!��+��' �VTI=:4
https://developer.mozilla.org/en-US/docs/Apps/Manifest
独自アプリのインストール
Apps パネル左下の Add ~ App から追加 新規アプリ開発はここからしましょう
独自アプリの管理
UPDATE ボタンで端末のアプリを更新 DEBUG ボタンでリモートデバッグ開始
いろいろ 作ってみてね!
Appendix
Install on Android
Android に Web アプリ環境を
Web App = Native App に ホームスクリーンへの追加 独立してフル画面起動 ネイティブ同様の利用体験
Firefox = WebRT (RunTime) OS に依らない Web アプリ環境
ホームにインストール、アプリを起動した画面、マーケットをブラウズ
Android 版 Firefox で動作確認
1. インストールページ用意 2. Firefox でページを開く 3. アプリをインストール 4. アプリを起動してテスト アプリマネージャは未対応
Hosted App なら Android Firefox で直接アプリを開いてテストするのもアリ
インストールページを作る
install() 関数を使う var Apps = navigator.mozApps;Apps.install(url) manifest ファイル URL を渡す
その他の Apps API: Apps.getSelf(), Apps.getInstalled() Apps.installPackage(url)
https://developer.mozilla.org/en-US/docs/Apps/Apps_JavaScript_API
navigator.mozApps.install)�%V�##&V�V!�)���'"%� "-�##&��)�%V �!���&'(%��VVVV�V��''# ���+"&�"%�� �!���&'�*���##���!
)�%V%�$(�&'V�V�##&��!&'���� �!���&'(%����%�$(�&'�"!&(���&&V�V�(!�'�"!�%�&(�'�V.�00��VOJK<MU�/��%�$(�&'�"!�%%"%V�V�(!�'�"!��%%"%�V.�00��VLSK<MU�/�
https://developer.mozilla.org/en-US/docs/Apps/Apps_JavaScript_API
Hosted App & Packaged App
2つの方式のアプリ
Hosted (Web 読み込み型) 従来の OS ではブラウザ上で動作 動作や権限は従来の Web と同じ オフライン対応アプリも開発可能
Packaged (ダウンロード型) 従来のスマホアプリに相当する マーケット審査を経て追加権限取得 サイト全体を ZIP して配布する形式
Packaged Web アプリ
HostedWeb アプリ
Internet
Server
端末
詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps
ZIP して Packaged App に
ZIP + package.manifest 1. manifest.webapp 作成 Hosted Apps の時と同じ
2. サイト全体を ZIP する manifest.webapp も含める
3. package.manifest を作成 mini manifest が別途必要
!
mini manifest (package.manifest).�00�!� �� V�B?A76>CD���00�#�������#�'�� V��#�������-�#���VV�)�%&�"!� V�����00���)��"#�%� V.�0000�!� �� V��,!� �&���0000�(%�� V��''# ���,!� �&��#���00/�/���VPG V#�������-�#VR<V �!���&'�*���##V9V!� ��V)�%&�"!�V��)��"#�%�V�"����&V=QH;1
https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps
インストールページ (Packaged)
installPackage() 関数を使う var Apps = navigator.mozApps;Apps.installPackage(url) mini manifest URL を渡す
https://developer.mozilla.org/en-US/docs/Apps/Apps_JavaScript_API
!
navigator.mozApps.installPackage)�%V�##&V�V!�)���'"%� "-�##&��)�%V �!���&'(%��VVVV�V��''# ���+"&�"%��#������� �!���&'���!
)�%V%�$(�&'V�V�##&��!&'����������� �!���&'(%����%�$(�&'�"!&(���&&V�V�(!�'�"!�%�&(�'�V.�00��VOJK<MU�/��%�$(�&'�"!�%%"%V�V�(!�'�"!��%%"%�V.�00��VLSK<MU�/�
https://developer.mozilla.org/en-US/docs/Apps/Apps_JavaScript_API
More about App Dev
ブラウザ機能はない 戻るボタンはありません 別ドメインには別ウィンドウで Firefox 1.1 からは UI 追加可能
Content Security Policy Privileged 以上では CSP 必須 制限緩和は許可されていません
アプリ開発の注意事項
Firefox OS 1.1 からは manifest の chrome で戻るなどのボタン追加可能(非推奨)
Simulator では使えない API
Telephony WebSMS WebBluetooth Ambient Light Proximity Network Information Vibration オフラインイベント
タッチイベントはエミュレーションされますが他のハード依存は未対応
アプリの種類と権限
ブラウザと一緒が基本 追加権限を求めない限りブラウザ内でできることと一緒
権限に応じた制限 SD カード読み書きなどの権限を得るには Package アプリとして Marketplace での審査が必要
方式 種類 概要
Hosted !
(Web から 読み込む)
Web Content Web サイトそのもの。ブラウザ内でアクセスして使う。
Installed Web Web サイトをインストールしたもの。 ブラウザの UI なしで単独起動する。
Packaged !
(従来の OS 同様端末にインストールする)
Plain Packaged
Web サイト全体を ZIP パッケージにしているが追加権限を要求しないもの
Privileged マーケット審査を受けて追加の権限を許可されたアプリ
Certified 通信事業者や端末メーカーが特別に高い権限を許可している組み込みアプリ
Firefox OS でのアプリの分類
種類 利用可能な API 例Web Content
PC や Android 等のブラウザでできることそのまま 位置情報、画面方向、加速度・近接・環境光センサー、電池情報、振動、データベース (IndexedDB) など
Installed Web
OS に登録することでアラーム、Push 通知、Web Activities などの API が使えるようになる
Plain Packaged 追加 API なし (Installed Web と同じ権限)
Privileged アドレス帳、SD カードの読み書き、CORS に関わらず任意ドメインへの XHR、TCP Socket
Certified 電話、SMS、ボイスメールなど料金の発生するサービスその他 Bluetooth、Background Service など
アプリの分類と権限
Content Security Policy
Same Origin Policy (同一生成源ポリシー) ● 従来からの Web のセキュリティポリシー ● スクリプトからは他のドメインにアクセス不可(CORS で明示的に許可しているドメインは除く)
● ドメイン=セキュリティ境界=アプリの境界
Content Security Policy ● 安全性を高める新しいセキュリティポリシー ● JavaScript、CSS、画像、オブジェクト、フォントなどファイルの種類毎にドメイン制限が可能
● インラインスクリプト禁止により XSS も防止可能
詳細: https://developer.mozilla.org/en-US/docs/Security/CSP
アプリの種類と CSP 設定
Privileged, Certified アプリは CSP 必須 ● Web から JavaScript を直接読み込んで実行できない ● Privileged アプリのデフォルト: default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'
● Certified アプリのデフォルト: default-src *; script-src 'self'; object-src 'none'; style-src 'self'
● JavaScript、CSS、オブジェクトファイルはパッケージ外から読み込み不可能 (画像埋め込みは可能) という設定
CSP 設定変更は Manifest に記載 ● 厳格化はできても緩和する設定は許可されないことに注意
詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps
Building Blocks
Building Blocks (UI 部品)
Gaia (Firefox OS 標準) Appsのデザインを簡単に作れる http://buildingfirefoxos.com/
使っても使わなくても OK 好きな SDK/Library 使える 自由な Web ですから!
http://buildingfirefoxos.com/