Firefox OS App DevFirefox OS Workshop @ Kanto 1st

by Tomoya Asai (dynamis)

about:me

Tomoya ASAI

Mozilla JapanTechnical Marketing (Evangelist)

dynamis @ communitydynamis.jp

@dynamitter

facebook.com/dynamis

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

Apps Dev

Firefox OS のアプリ

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

大事なこと３回

Firefox OS のアプリ

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

大事なこと３回

Firefox OS のアプリ

Web アプリそのものOS 専用のアプリではないすべての API は Web 標準化

メタ情報を用意するだけWeb サイト + manifest.webapp→ Firefox OS アプリ

55分で対応！

manifest.webapp ファイル{  "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/firefox/addon/firefox-os-simulator/ポチッと押すだけWeb 開発メニューに追加されるFirefox デスクトップビルド＋プロファイル＋Alpha

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

Firefox Nightly でテスト

シュミレータを統合シュミレータより高機能です

開発ツールでデバッグ可能必要なら Firebug も使えます

現在はまだ不安定です先月開発版に入ったばかり…

Firefox Nightly でテスト// Gaia のリポジトリを Clonegit clone git://github.com/mozilla-b2g/gaia.git; cd gaia

// Gaia のデバッグプロファイルを作成DEBUG=1 make// profile ディレクトリが生成される

// Firefox Nightly をプロファイル指定で起動// Nightly: http://nightly.mozilla.org/firefox -profile /path/to/gaia/profile

先週入った機能なのでまだ不安定ですが Gaia 開発者はこれ使ってます

ブラウザ機能はない戻るボタンはありません別ドメインには別ウィンドウで

User Agent が異なる"Android;" は含みません

Content Security Policy一部 API 使うには CSP が必須

アプリ開発の注意事項

https://developer.mozilla.org/ja/docs/Mozilla/Firefox_OS/Application_development

これだけ注意！

クロスドメイン通信について

XHR は同一ドメインが原則CORS で制限解除できるAccess-Control-Allow-Origin ヘッダを送信することで別ドメインからの XHR を許可できます

Packaged App から WebWeb はすべて別ドメイン扱い同様に CORS で許可が必要

詳しくはこちら: https://developer.mozilla.org/ja/docs/HTTP_access_control

２つの方式のアプリ

Hosted (Web 読み込み型)従来の OS ではブラウザ上で動作動作や権限は従来の Web と同じオフライン対応アプリも開発可能

Packaged (ダウンロード型)従来のスマホアプリに相当するマーケット審査を経て追加権限取得サイト全体を ZIP して配布する形式

PackagedWeb アプリ

HostedWeb アプリ

Internet

Server

端末

詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps

方式 種類 概要

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 でのアプリの分類

種類 利用可能な 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 権限

種類 デフォルト Content Security Policy

Web Content, Installed Web, Plain Packagedアプリでは CSP はデフォルト無効

Web Content, Installed Web, Plain Packagedアプリでは CSP はデフォルト無効

Privilegeddefault-src *; script-src 'self'; object-src 'none';

style-src 'self' 'unsafe-inline'(JavaScript、CSS、オブジェクトは外部読み込み不可)

Certifieddefault-src *; script-src 'self'; object-src 'none'; style-src 'self'

(JavaScript、CSS、オブジェクトは外部読み込み不可HTML 内に直接 JavaScript を記述できない)

アプリの分類とデフォルト CSP

Content Security Policy

Same Origin Policy (同一生成源ポリシー)従来からの Web のセキュリティポリシースクリプトからは他のドメインにアクセス不可(CORS で明示的に許可しているドメインは除く)ドメイン＝セキュリティ境界＝アプリの境界Content Security Policy安全性を高める新しいセキュリティポリシーJavaScript、CSS、画像、オブジェクト、フォントなどファイルの種類毎にドメイン制限が可能インラインスクリプト禁止により XSS も防止可能

詳細: https://developer.mozilla.org/en-US/docs/Security/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 に記載マーケットで審査する側が確認可能

アプリの種類と CSP 設定

詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps