Firefox OS 1.0 App Dev
Web Platform Workshop 1307
by Tomoya Asai (dynamis)
Last Update: 2013/07/06
about:me
Tomoya ASAI
Mozilla Japan
Technical Marketing (Evangelist)
dynamis @ community
dynamis.jp
@dynamitter
facebook.com/dynamis...
about:topics
今日の話題
Released!
Hello FxOS Apps
Open Web Apps
FxOS App Dev
ユーザや業界への影響については全体にわたって話します
Released!
ZTE Open & Alcatel One Touch Fire
7月から各国で順次発売
7月2日にスペインで発売
Telefónica が ZTE Open を発売
実質 5000円 の誰でもスマホ
€69 (税込) プリペイド €30 含む
コロンビアやベネズエラも近日…
Deutsche Telekom...
ZTE の誰でもスマホ
ZTE Open:
Size: 114 x 62 x 12.5 mm
CPU: Snapdragon 1 GHz
RAM 256 MB
ROM: 512 MB
Display: 3.5" HVGA
スペインなどで発売
h...
Alcatel (TCL) の誰でもスマホ
One Touch Fire:
Size: 115 x 62.3 x 12.2 mm
Display: 3.5" HVGA
CPU: Snapdragon 1 GHz
RAM 256 MB
ROM: ...
価格帯別出荷台数予測
"1st half 2013 Mobile Phone Platform Market & Development - Market Report Summary" - TSR 2013/05
http://slidesh...
価格帯別出荷台数予測
"1st half 2013 Mobile Phone Platform Market & Development - Market Report Summary" - TSR 2013/05
http://slidesh...
OS 別スマホ台数予測
"1st half 2013 Mobile Phone Platform Market & Development - Market Report Summary" -TSR 2013/05
http://slidesh...
OS 別スマホ台数予測
"1st half 2013 Mobile Phone Platform Market & Development - Market Report Summary" -TSR 2013/05
http://slidesh...
Hello FxOS Apps
Firefox OS のアプリ
Web アプリです。
Web アプリです。
Web アプリです。
大事なこと3回
Firefox OS のアプリ開発
いつもの開発ツール
いつものエディタ
いつものライブラリ
Firefox OS のアプリ
Web アプリそのもの
OS 専用のアプリではない
すべての API は Web 標準化
メタ情報を用意するだけ
Web サイト + manifest.webapp
→ Firefox OS アプリ
index.html
manifest.webapp
https://developer.mozilla.org/en-US/docs/Apps/Manifest
アプリ開発の流れ
普通に Web 開発
デバッグもいつも通り
manifest ファイルを用意
メタ情報を JSON 形式で記載
シミュレータや実機テスト
一部の API は実機で確認が必要
Android 版 Firefox でのテストも
h...
Firefox OS Simulator
再起動不要の拡張機能
https://addons.mozilla.org/ja/
firefox/addon/firefox-os-simulator/
ポチッと押すだけ
Web 開発メニューに追加される...
Firefox OS Simulator
プロファイル付きデスクトップビルドにホームボタンを追加
コンソールやディレクトリからアプリケーションを読み込む機能も
全言語版シュミレータ
非公式ですがあります
http://r2d2b2g.flod.org/
起動したら言語設定を変更
Settings → Languages
Gaia アプリの UI だけでなく
Accept-Languages HTTP ヘ...
シミュレータにインストール
Add Directory ボタン
manifest ファイルを選択
zip されて packaged app として
インストールされ、起動する
Update ボタンで更新
同じディレクトリのファイルを
zip し...
Open Web Apps
Firefox Nightly でテスト
シュミレータを統合
シュミレータより高機能です
開発ツールでデバッグ可能
必要なら Firebug も使えます
現在はまだ不安定です
最近 Nightly に入ったばかり…
Firefox Nightly でテスト
先週入った機能なのでまだ不安定ですが Gaia 開発者はこれ使ってます
Developer Preview Phone
4/23 発売 (入荷後即完売続き)
Keon: 91€+tax+shipping
Snapdragon 1GHz, 4GB ROM,
512MB RAM, 3.5" HVGA
Peak: 149...
Developer Preview Phone
Telefónica と Geeksphone が作る開発者向けテスト端末
端末にインストール
Push ボタン
リモートデバッグをオンにした端
末を USB 接続すると表示
リモートデバッグの有効化
Settings → Device Information →
More Information → Develope...
manifest のその他重要項目
csp
Content Security Policy の設定変更
fullscreen, orientation
フルスクリーン起動するか?縦横回転どうするか?
installs_allowed_from
...
manifest.webapp (再掲)
https://developer.mozilla.org/en-US/docs/Apps/Manifest
追加権限の要求
https://developer.mozilla.org/en-US/docs/Apps/Manifest
アプリ間連携 (Activities) の登録
https://developer.mozilla.org/en-US/docs/Apps/Manifest
Firefox = WebRT (WebRunTime)
Gecko = アプリ環境
Firefox = Gecko で XUL/JS
WebApps = Gecko で HTML/JS
マルチデバイス対応
PC, Android, Firef...
Android に Web アプリ環境を
Web App = Native App に
ホームスクリーンへの追加
独立してフル画面起動
ネイティブ同様の利用体験
Firefox = WebRT for Android
ホームにインストール、アプ...
PC にも Web アプリ環境を
Web App = Native App に
プログラムフォルダ (アプリケー
ションディレクトリ) への追加
ウィンドウはもちろんプロセスも
データも全て独立
Firefox = WebRT for PC
Firefox Marketplace
Device, OS 横断マーケット
Web Platform のためのストア
Firefox OS はもちろん Android や
PC の Firefox もターゲット
課金 API については現時点...
オープンなアプリストア
全てを Web 技術で実装
安定・平等な環境を提供
Marketplace のソースも公開
ベンダー非依存
Firefox Marketplace 以外にも
ストア、認証、課金も自由に
https://marketpla...
オープンなレビューシステム
コミュニティレビュー
Firefox のアドオンと同じに
レビュー基準もレビュアーもすべ
てオープンで公平なマーケット
レビュアー随時募集
https://blog.mozilla.org/apps/
2013/05...
権限に応じたレビュー
一般のアプリ
デフォルト安全なので公序良俗
に反しないなど簡単な確認だけ
特権を持つアプリ
追加で特別な権限を求める場合
フルソースコードチェック対象
Privileged or Certified アプリ
アプリの公開
a. Marketplace に登録
Firefox Marketplace
b. 独自にアプリを配布
自分のサイトで配布
c. Web に公開するだけ
Web = Marketplace
Marketplace に登録
1. アカウント作成 (無料)
2. manifest.webapp を登録
3. アプリ情報を記載
4. レビュー完了を待つ
自分のサイトで配布
install() 関数を使う
var Apps = navigator.mozApps;
Apps.install(url)
manifest ファイル URL を渡す
その他の Apps API:
Apps.getSel...
navigator.mozApps.install(url)
パッケージ型の場合 Apps.installPackage(url) を使う
Apps Dev
Firefox OS - Web is the Platform
Web = アプリ環境
アプリはすべて Web 技術で
ドメイン=アプリの単位と定義
Web を進化させる
不足機能は API を定義・標準化
セキュリティモデルやアプリ間連
携...
Firefox OS : Tizen : Android
Native
Framework
カーネル & HAL
Web Platform
Web
Framework
App Framework
Android
Runtime
Dalvik
W...
日経コミュニケーション 201305 への寄稿原稿から引用
2つの方式のアプリ
Hosted (Web 読み込み型)
従来の OS ではブラウザ上で動作
動作や権限は従来の Web と同じ
オフライン対応アプリも開発可能
Packaged (ダウンロード型)
従来のスマホアプリに相当する
マーケット審査...
方式 種類 概要
Hosted
(Web から
読み込む)
Web Content
Web サイトそのもの。
ブラウザ内でアクセスして使う。Hosted
(Web から
読み込む) Installed Web
Web サイトをインストールしたも...
種類 利用可能な API 例
Web
Content
PC や Android 等のブラウザでできることそのまま
位置情報、画面方向、加速度・近接・環境光センサー、
電池情報、振動、データベース (IndexedDB) など
Installed...
種類 デフォルト Content Security Policy
Web Content, Installed Web, Plain Packaged
アプリでは CSP はデフォルト無効
Web Content, Installed Web,...
Content Security Policy
Same Origin Policy (同一生成源ポリシー)
従来からの Web のセキュリティポリシー
スクリプトからは他のドメインにアクセス不可
(CORS で明示的に許可しているドメインは除...
Privileged, Certified アプリは CSP 必須
Web から JavaScript を直接読み込んで実行できない
Privileged アプリのデフォルト: default-src *; script-src
'self'; ...
Device API の使い方
ドキュメント見てね
https://developer.mozilla.org/docs/
WebAPI
Boilerplate 見てね
http://robnyman.github.io/Firefox-
OS...
ブラウザ機能はない
戻るボタンはありません
別ドメインには別ウィンドウで
User Agent が異なる
"Android;" は含みません
Content Security Policy
一部 API 使うには CSP が必須
アプリ開発の注...
Simulator で使えない API 例
Telephony
WebSMS
WebBluetooth
Ambient Light
Proximity
Network Information
Vibration
オフラインイベント
タッチイベン...
クロスドメイン通信について
XHR は同一ドメインが原則
CORS で制限解除できる
Access-Control-Allow-Origin ヘッダ
を送信することで別ドメインからの
XHR を許可できます
Packaged App から We...
For More Info
Firefox OS コミュニティ!
http://FxOS.org/
イベントやドキュメントをご案内
http://FxOS.org/ml
(https://groups.google.com/group/
firefoxos にリダイレクト)
Firefox OS アプリ開発ガイド
日本初の Firefox OS 書籍
Mozilla コミュニティが誇るテク
ノロジーエバンジェリスト達が贈
る日本初の Firefox OS本!
貴重な情報も満載
日本語は勿論英語でもまとまっ
てない情...
Firefox OS 1.0 Application Development
Upcoming SlideShare
Loading in …5
×

Firefox OS 1.0 Application Development

3,886
-1

Published on

Web Platform 勉強会 1307 で使用したスライド
http://atnd.org/events/40801

Firefox OS 1.0 Application Development

  1. 1. Firefox OS 1.0 App Dev Web Platform Workshop 1307 by Tomoya Asai (dynamis) Last Update: 2013/07/06
  2. 2. about:me
  3. 3. Tomoya ASAI Mozilla Japan Technical Marketing (Evangelist) dynamis @ community dynamis.jp @dynamitter facebook.com/dynamis mailto: Tomoya ASAI <dynamis mozilla-japan.org>@
  4. 4. about:topics
  5. 5. 今日の話題 Released! Hello FxOS Apps Open Web Apps FxOS App Dev ユーザや業界への影響については全体にわたって話します
  6. 6. Released!
  7. 7. ZTE Open & Alcatel One Touch Fire
  8. 8. 7月から各国で順次発売 7月2日にスペインで発売 Telefónica が ZTE Open を発売 実質 5000円 の誰でもスマホ €69 (税込) プリペイド €30 含む コロンビアやベネズエラも近日… Deutsche Telekom も続く 7/11 にポーランドで記者会見… 日本や北米では 2013~2014 年中の見込み http://mozilla.jp/blog/entry/10310/
  9. 9. ZTE の誰でもスマホ ZTE Open: Size: 114 x 62 x 12.5 mm CPU: Snapdragon 1 GHz RAM 256 MB ROM: 512 MB Display: 3.5" HVGA スペインなどで発売 http://www.ztedevices.com/product/smart_phone/2bcf2d56-0c9a-4129-a25c-acce58c8e502.html
  10. 10. Alcatel (TCL) の誰でもスマホ One Touch Fire: Size: 115 x 62.3 x 12.2 mm Display: 3.5" HVGA CPU: Snapdragon 1 GHz RAM 256 MB ROM: 512 MB ポーランドなどで発売 http://www.alcatelonetouch.com/global-en/products/smartphones/one_touch_fire.html
  11. 11. 価格帯別出荷台数予測 "1st half 2013 Mobile Phone Platform Market & Development - Market Report Summary" - TSR 2013/05 http://slideshare.net/TSR_Niwa/tsr1304-1-h13-mobile-platform-slide-20257030/4 Mobile Phone and Smartphone Market Forecast by Price-tier, 2011-2018 0.0 200.0 400.0 600.0 800.0 1,000.0 1,200.0 1,400.0 1,600.0 1,800.0 2,000.0 2,200.0 2,400.0 2011 2012 2013 2014 2015 2016 2017 2018 MUnits Feature phone Smart-feature phone Smartphone Low end Smartphone Mid-low Smartphone Mid-high Smartphone High end $100~200 ~$100 $200~400 $400~
  12. 12. 価格帯別出荷台数予測 "1st half 2013 Mobile Phone Platform Market & Development - Market Report Summary" - TSR 2013/05 http://slideshare.net/TSR_Niwa/tsr1304-1-h13-mobile-platform-slide-20257030/4 Mobile Phone and Smartphone Market Forecast by Price-tier, 2011-2018 0.0 200.0 400.0 600.0 800.0 1,000.0 1,200.0 1,400.0 1,600.0 1,800.0 2,000.0 2,200.0 2,400.0 2011 2012 2013 2014 2015 2016 2017 2018 MUnits Feature phone Smart-feature phone Smartphone Low end Smartphone Mid-low Smartphone Mid-high Smartphone High end Feature phone の多くは $200 以下のスマートフォンに 置き換えられるという予測 (2018 年には 40% 以上) $100~200 ~$100 $200~400 $400~
  13. 13. OS 別スマホ台数予測 "1st half 2013 Mobile Phone Platform Market & Development - Market Report Summary" -TSR 2013/05 http://slideshare.net/TSR_Niwa/tsr1304-1-h13-mobile-platform-slide-20257030/7 Smartphone Market Forecast by OS Platform, 2011-2018 0.0 200.0 400.0 600.0 800.0 1000.0 1200.0 1400.0 1600.0 1800.0 2011 2012 2013 2014 2015 2016 2017 2018 MUnits Other OS Blackberry FirefoxOS Tizen Bada Windows Phone iOS Android Symbian Firefox OS iOS Android
  14. 14. OS 別スマホ台数予測 "1st half 2013 Mobile Phone Platform Market & Development - Market Report Summary" -TSR 2013/05 http://slideshare.net/TSR_Niwa/tsr1304-1-h13-mobile-platform-slide-20257030/7 Smartphone Market Forecast by OS Platform, 2011-2018 0.0 200.0 400.0 600.0 800.0 1000.0 1200.0 1400.0 1600.0 1800.0 2011 2012 2013 2014 2015 2016 2017 2018 MUnits Other OS Blackberry FirefoxOS Tizen Bada Windows Phone iOS Android Symbian Firefox OS iOS Android Android がシェアを伸ばす一方で iOS は 2013 年以降シェア低下 Firefox OS は iOS 程度まで増加 (2018 年にはシェア 10% 以上)
  15. 15. Hello FxOS Apps
  16. 16. Firefox OS のアプリ Web アプリです。 Web アプリです。 Web アプリです。 大事なこと3回
  17. 17. Firefox OS のアプリ開発 いつもの開発ツール いつものエディタ いつものライブラリ
  18. 18. Firefox OS のアプリ Web アプリそのもの OS 専用のアプリではない すべての API は Web 標準化 メタ情報を用意するだけ Web サイト + manifest.webapp → Firefox OS アプリ
  19. 19. index.html
  20. 20. manifest.webapp https://developer.mozilla.org/en-US/docs/Apps/Manifest
  21. 21. アプリ開発の流れ 普通に Web 開発 デバッグもいつも通り manifest ファイルを用意 メタ情報を JSON 形式で記載 シミュレータや実機テスト 一部の API は実機で確認が必要 Android 版 Firefox でのテストも https://github.com/dynamis/firefoxos/wiki/simulator
  22. 22. Firefox OS Simulator 再起動不要の拡張機能 https://addons.mozilla.org/ja/ firefox/addon/firefox-os-simulator/ ポチッと押すだけ Web 開発メニューに追加される Firefox デスクトップビルド+ プロファイル+Alpha 詳しい解説: https://github.com/dynamis/firefoxos/wiki/simulator
  23. 23. Firefox OS Simulator プロファイル付きデスクトップビルドにホームボタンを追加 コンソールやディレクトリからアプリケーションを読み込む機能も
  24. 24. 全言語版シュミレータ 非公式ですがあります http://r2d2b2g.flod.org/ 起動したら言語設定を変更 Settings → Languages Gaia アプリの UI だけでなく Accept-Languages HTTP ヘッダ なども切り変わります
  25. 25. シミュレータにインストール Add Directory ボタン manifest ファイルを選択 zip されて packaged app として インストールされ、起動する Update ボタンで更新 同じディレクトリのファイルを zip し直して、起動する https://github.com/dynamis/firefoxos/wiki/simulator
  26. 26. Open Web Apps
  27. 27. Firefox Nightly でテスト シュミレータを統合 シュミレータより高機能です 開発ツールでデバッグ可能 必要なら Firebug も使えます 現在はまだ不安定です 最近 Nightly に入ったばかり…
  28. 28. Firefox Nightly でテスト 先週入った機能なのでまだ不安定ですが Gaia 開発者はこれ使ってます
  29. 29. Developer Preview Phone 4/23 発売 (入荷後即完売続き) Keon: 91€+tax+shipping Snapdragon 1GHz, 4GB ROM, 512MB RAM, 3.5" HVGA Peak: 149€+税+送料 Snapdragon 1.2GHz x2, 4GB ROM, 512MB RAM, 4.3" qHD http://www.geeksphone.com/
  30. 30. Developer Preview Phone Telefónica と Geeksphone が作る開発者向けテスト端末
  31. 31. 端末にインストール Push ボタン リモートデバッグをオンにした端 末を USB 接続すると表示 リモートデバッグの有効化 Settings → Device Information → More Information → Developer → Remote debugging Console enabled などの設定も https://github.com/dynamis/firefoxos/wiki/simulator
  32. 32. manifest のその他重要項目 csp Content Security Policy の設定変更 fullscreen, orientation フルスクリーン起動するか?縦横回転どうするか? installs_allowed_from インストール元として許可するサイト (Market) type, permissions デフォルト許可以外の API 使用許可を求める 詳細はこちら: https://developer.mozilla.org/en-US/docs/Apps/Manifest
  33. 33. manifest.webapp (再掲) https://developer.mozilla.org/en-US/docs/Apps/Manifest
  34. 34. 追加権限の要求 https://developer.mozilla.org/en-US/docs/Apps/Manifest
  35. 35. アプリ間連携 (Activities) の登録 https://developer.mozilla.org/en-US/docs/Apps/Manifest
  36. 36. Firefox = WebRT (WebRunTime) Gecko = アプリ環境 Firefox = Gecko で XUL/JS WebApps = Gecko で HTML/JS マルチデバイス対応 PC, Android, Firefox OS... 同じコードでどこでも動く マーケットもマルチデバイス
  37. 37. Android に Web アプリ環境を Web App = Native App に ホームスクリーンへの追加 独立してフル画面起動 ネイティブ同様の利用体験 Firefox = WebRT for Android ホームにインストール、アプリを起動した画面、マーケットをブラウズ
  38. 38. PC にも Web アプリ環境を Web App = Native App に プログラムフォルダ (アプリケー ションディレクトリ) への追加 ウィンドウはもちろんプロセスも データも全て独立 Firefox = WebRT for PC
  39. 39. Firefox Marketplace Device, OS 横断マーケット Web Platform のためのストア Firefox OS はもちろん Android や PC の Firefox もターゲット 課金 API については現時点では Firefox OS 限定になっています https://marketplace.firefox.com/
  40. 40. オープンなアプリストア 全てを Web 技術で実装 安定・平等な環境を提供 Marketplace のソースも公開 ベンダー非依存 Firefox Marketplace 以外にも ストア、認証、課金も自由に https://marketplace.firefox.com/
  41. 41. オープンなレビューシステム コミュニティレビュー Firefox のアドオンと同じに レビュー基準もレビュアーもすべ てオープンで公平なマーケット レビュアー随時募集 https://blog.mozilla.org/apps/ 2013/05/20/become-a- marketplace-app-reviewer/ https://developer.mozilla.org/en-US/docs/Apps/Marketplace_review_criteria
  42. 42. 権限に応じたレビュー 一般のアプリ デフォルト安全なので公序良俗 に反しないなど簡単な確認だけ 特権を持つアプリ 追加で特別な権限を求める場合 フルソースコードチェック対象 Privileged or Certified アプリ
  43. 43. アプリの公開 a. Marketplace に登録 Firefox Marketplace b. 独自にアプリを配布 自分のサイトで配布 c. Web に公開するだけ Web = Marketplace
  44. 44. Marketplace に登録 1. アカウント作成 (無料) 2. manifest.webapp を登録 3. アプリ情報を記載 4. レビュー完了を待つ
  45. 45. 自分のサイトで配布 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
  46. 46. navigator.mozApps.install(url) パッケージ型の場合 Apps.installPackage(url) を使う
  47. 47. Apps Dev
  48. 48. Firefox OS - Web is the Platform Web = アプリ環境 アプリはすべて Web 技術で ドメイン=アプリの単位と定義 Web を進化させる 不足機能は API を定義・標準化 セキュリティモデルやアプリ間連 携なども実装・標準化していく
  49. 49. Firefox OS : Tizen : Android Native Framework カーネル & HAL Web Platform Web Framework App Framework Android Runtime Dalvik WebKit Java アプリ ブラウザ アプリ Native Library Web アプリ WebKit Web アプリ Native アプリ OSP etc... DeviceAPI WebRT Web アプリ Packaged Webアプリ コアサービスGecko DeviceAPI SystemAPI Web に最適化 シンプル&スマート ライブラリ SGL etc. Native Interface カーネル & HAL カーネル & HAL X.org etc. 左上のアプリが Web 読み込み型、右上のアプリがダウンロード型
  50. 50. 日経コミュニケーション 201305 への寄稿原稿から引用
  51. 51. 2つの方式のアプリ Hosted (Web 読み込み型) 従来の OS ではブラウザ上で動作 動作や権限は従来の Web と同じ オフライン対応アプリも開発可能 Packaged (ダウンロード型) 従来のスマホアプリに相当する マーケット審査を経て追加権限取得 サイト全体を ZIP して配布する形式 Packaged Web アプリ Hosted Web アプリ Internet Server 端末 詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps
  52. 52. 方式 種類 概要 Hosted (Web から 読み込む) Web Content Web サイトそのもの。 ブラウザ内でアクセスして使う。Hosted (Web から 読み込む) Installed Web Web サイトをインストールしたもの。 ブラウザの UI なしで単独起動する。 Packaged (従来の OS 同 様端末にイン ストールする) Plain Packaged Web サイト全体を ZIP パッケージに しているが追加権限を要求しないもの Packaged (従来の OS 同 様端末にイン ストールする) Privileged マーケット審査を受けて追加の権限を 許可されたアプリ Packaged (従来の OS 同 様端末にイン ストールする) Certified 通信事業者や端末メーカーが特別に高 い権限を許可している組み込みアプリ Firefox OS でのアプリの分類
  53. 53. 種類 利用可能な 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 など アプリの分類と API 権限
  54. 54. 種類 デフォルト Content Security Policy Web Content, Installed Web, Plain Packaged アプリでは CSP はデフォルト無効 Web Content, Installed Web, Plain Packaged アプリでは CSP はデフォルト無効 Privileged default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline' (JavaScript、CSS、オブジェクトは外部読み込み不可) Certified default-src *; script-src 'self'; object-src 'none'; style-src 'self' (JavaScript、CSS、オブジェクトは外部読み込み不可 HTML 内に直接 JavaScript を記述できない) アプリの分類とデフォルト CSP
  55. 55. Content Security Policy Same Origin Policy (同一生成源ポリシー) 従来からの Web のセキュリティポリシー スクリプトからは他のドメインにアクセス不可 (CORS で明示的に許可しているドメインは除く) ドメイン=セキュリティ境界=アプリの境界 Content Security Policy 安全性を高める新しいセキュリティポリシー JavaScript、CSS、画像、オブジェクト、フォントなど ファイルの種類毎にドメイン制限が可能 インラインスクリプト禁止により XSS も防止可能 詳細: https://developer.mozilla.org/en-US/docs/Security/CSP
  56. 56. 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 に記載 マーケットで審査する側が確認可能 アプリの種類と CSP 設定 詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps
  57. 57. Device API の使い方 ドキュメント見てね https://developer.mozilla.org/docs/ WebAPI Boilerplate 見てね http://robnyman.github.io/Firefox- OS-Boilerplate-App/ https://github.com/robnyman/ Firefox-OS-Boilerplate-App
  58. 58. ブラウザ機能はない 戻るボタンはありません 別ドメインには別ウィンドウで User Agent が異なる "Android;" は含みません Content Security Policy 一部 API 使うには CSP が必須 アプリ開発の注意事項 https://developer.mozilla.org/ja/docs/Mozilla/Firefox_OS/Application_development
  59. 59. Simulator で使えない API 例 Telephony WebSMS WebBluetooth Ambient Light Proximity Network Information Vibration オフラインイベント タッチイベントは Windows 7 以降のマルチタッチディスプレイで動作します
  60. 60. クロスドメイン通信について XHR は同一ドメインが原則 CORS で制限解除できる Access-Control-Allow-Origin ヘッダ を送信することで別ドメインからの XHR を許可できます Packaged App から Web Web はすべて別ドメイン扱い 同様に CORS で許可が必要 詳しくはこちら: https://developer.mozilla.org/ja/docs/HTTP_access_control
  61. 61. For More Info
  62. 62. Firefox OS コミュニティ! http://FxOS.org/ イベントやドキュメントをご案内 http://FxOS.org/ml (https://groups.google.com/group/ firefoxos にリダイレクト)
  63. 63. Firefox OS アプリ開発ガイド 日本初の Firefox OS 書籍 Mozilla コミュニティが誇るテク ノロジーエバンジェリスト達が贈 る日本初の Firefox OS本! 貴重な情報も満載 日本語は勿論英語でもまとまっ てない情報まで書かれています 私も全体の構成や内容の確認など協力させて頂きました

×