Firefox os app dev

Firefox OS App Dev
Firefox OS Workshop @ Kanto 1st
by Tomoya Asai (dynamis)

Tomoya ASAI
Mozilla Japan
Technical Marketing (Evangelist)
dynamis @ community
dynamis.jp
@dynamitter
facebook.com/dynamis
mailto: Tomoya ASAI <dynamis mozilla-japan.org>@

Firefox OS のアプリ
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/
ﬁrefox/addon/ﬁrefox-os-simulator/
ポチッと押すだけ
Web 開発メニューに追加される
Firefox デスクトップビルド＋
プロファイル＋Alpha
詳しい解説: https://github.com/dynamis/firefoxos/wiki/simulator

Firefox Nightly でテスト
シュミレータを統合
シュミレータより高機能です
開発ツールでデバッグ可能
必要なら Firebug も使えます
現在はまだ不安定です
先月開発版に入ったばかり…

Firefox Nightly でテスト
// Gaia のリポジトリを Clone
git 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 から Web
Web はすべて別ドメイン扱い
同様に CORS で許可が必要
詳しくはこちら: https://developer.mozilla.org/ja/docs/HTTP_access_control

２つの方式のアプリ
Hosted (Web 読み込み型)
従来の OS ではブラウザ上で動作
動作や権限は従来の Web と同じ
オフライン対応アプリも開発可能
Packaged (ダウンロード型)
従来のスマホアプリに相当する
マーケット審査を経て追加権限取得
サイト全体を ZIP して配布する形式
Packaged
Web アプリ
Hosted
Web アプリ
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 同
様端末にイン
ストールする)
Certiﬁed
通信事業者や端末メーカーが特別に高
い権限を許可している組み込みアプリ
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
Certiﬁed
電話、SMS、ボイスメールなど料金の発生するサービス
その他 Bluetooth、Background Service など
アプリの分類と API 権限

種類デフォルト 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、オブジェクトは外部読み込み不可)
Certiﬁed
default-src *; script-src 'self';
object-src 'none'; style-src 'self'
(JavaScript、CSS、オブジェクトは外部読み込み不可
HTML 内に直接 JavaScript を記述できない)
アプリの分類とデフォルト CSP

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

Privileged, Certiﬁed アプリは CSP 必須
Web から JavaScript を直接読み込んで実行できない
Privileged アプリのデフォルト: default-src *; script-src
'self'; object-src 'none'; style-src 'self' 'unsafe-inline'
Certiﬁed アプリのデフォルト: 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

Firefox os app dev

More Related Content

What's hot

Similar to Firefox os app dev

More from dynamis

Firefox os app dev