Firefox os app dev
- 1. Firefox OS App Dev Firefox OS Workshop @ Kanto 1st by Tomoya Asai (dynamis)
- 2. about:me
- 3. Tomoya ASAI Mozilla Japan Technical Marketing (Evangelist) dynamis @ community dynamis.jp @dynamitter facebook.com/dynamis mailto: Tomoya ASAI <dynamis mozilla-japan.org>@
- 4. Apps Dev
- 5. Firefox OS のアプリ Web アプリです。 Web アプリです。 Web アプリです。 大事なこと３回
- 6. Firefox OS のアプリ Web アプリです。 Web アプリです。 Web アプリです。 大事なこと３回
- 7. Firefox OS のアプリ Web アプリそのもの OS 専用のアプリではない すべての API は Web 標準化 メタ情報を用意するだけ Web サイト + manifest.webapp → Firefox OS アプリ 55分で 対応！
- 8. 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
- 9. Firefox OS Simulator 再起動不要の拡張機能 https://addons.mozilla.org/ja/ firefox/addon/firefox-os-simulator/ ポチッと押すだけ Web 開発メニューに追加される Firefox デスクトップビルド＋ プロファイル＋Alpha 詳しい解説: https://github.com/dynamis/firefoxos/wiki/simulator
- 10. Firefox Nightly でテスト シュミレータを統合 シュミレータより高機能です 開発ツールでデバッグ可能 必要なら Firebug も使えます 現在はまだ不安定です 先月開発版に入ったばかり…
- 11. 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 開発者はこれ使ってます
- 12. ブラウザ機能はない 戻るボタンはありません 別ドメインには別ウィンドウで User Agent が異なる "Android;" は含みません Content Security Policy 一部 API 使うには CSP が必須 アプリ開発の注意事項 https://developer.mozilla.org/ja/docs/Mozilla/Firefox_OS/Application_development これだけ 注意！
- 13. クロスドメイン通信について XHR は同一ドメインが原則 CORS で制限解除できる Access-Control-Allow-Origin ヘッダ を送信することで別ドメインからの XHR を許可できます Packaged App から Web Web はすべて別ドメイン扱い 同様に CORS で許可が必要 詳しくはこちら: https://developer.mozilla.org/ja/docs/HTTP_access_control
- 14. ２つの方式のアプリ Hosted (Web 読み込み型) 従来の OS ではブラウザ上で動作 動作や権限は従来の Web と同じ オフライン対応アプリも開発可能 Packaged (ダウンロード型) 従来のスマホアプリに相当する マーケット審査を経て追加権限取得 サイト全体を ZIP して配布する形式 Packaged Web アプリ Hosted Web アプリ Internet Server 端末 詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps
- 15. 方式 種類 概要 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 でのアプリの分類
- 16. 種類 利用可能な 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 権限
- 17. 種類 デフォルト 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
- 18. Content Security Policy Same Origin Policy (同一生成源ポリシー) 従来からの Web のセキュリティポリシー スクリプトからは他のドメインにアクセス不可 (CORS で明示的に許可しているドメインは除く) ドメイン＝セキュリティ境界＝アプリの境界 Content Security Policy 安全性を高める新しいセキュリティポリシー JavaScript、CSS、画像、オブジェクト、フォントなど ファイルの種類毎にドメイン制限が可能 インラインスクリプト禁止により XSS も防止可能 詳細: https://developer.mozilla.org/en-US/docs/Security/CSP
- 19. 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