• Like
Firefox os app dev
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Firefox os app dev

  • 2,616 views
Published

関東 Firefox OS 勉強会 1st で使用したスライド

関東 Firefox OS 勉強会 1st で使用したスライド

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,616
On SlideShare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
38
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Firefox OS App DevFirefox OS Workshop @ Kanto 1stby Tomoya Asai (dynamis)
  • 2. about:me
  • 3. Tomoya ASAIMozilla JapanTechnical Marketing (Evangelist)dynamis @ communitydynamis.jp@dynamitterfacebook.com/dynamismailto: Tomoya ASAI <dynamis mozilla-japan.org>@
  • 4. Apps Dev
  • 5. Firefox OS のアプリWeb アプリです。Web アプリです。Web アプリです。大事なこと3回
  • 6. Firefox OS のアプリWeb アプリです。Web アプリです。Web アプリです。大事なこと3回
  • 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 のリポジトリを 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 開発者はこれ使ってます
  • 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 から WebWeb はすべて別ドメイン扱い同様に CORS で許可が必要詳しくはこちら: https://developer.mozilla.org/ja/docs/HTTP_access_control
  • 14. 2つの方式のアプリHosted (Web 読み込み型)従来の OS ではブラウザ上で動作動作や権限は従来の Web と同じオフライン対応アプリも開発可能Packaged (ダウンロード型)従来のスマホアプリに相当するマーケット審査を経て追加権限取得サイト全体を ZIP して配布する形式PackagedWeb アプリHostedWeb アプリInternetServer端末詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps
  • 15. 方式 種類 概要Hosted(Web から読み込む)Web ContentWeb サイトそのもの。ブラウザ内でアクセスして使う。Hosted(Web から読み込む) Installed WebWeb サイトをインストールしたもの。ブラウザの UI なしで単独起動する。Packaged(従来の OS 同様端末にインストールする)PlainPackagedWeb サイト全体を ZIP パッケージにしているが追加権限を要求しないものPackaged(従来の OS 同様端末にインストールする)Privilegedマーケット審査を受けて追加の権限を許可されたアプリPackaged(従来の OS 同様端末にインストールする)Certified通信事業者や端末メーカーが特別に高い権限を許可している組み込みアプリFirefox OS でのアプリの分類
  • 16. 種類 利用可能な API 例WebContentPC や Android 等のブラウザでできることそのまま位置情報、画面方向、加速度・近接・環境光センサー、電池情報、振動、データベース (IndexedDB) などInstalledWebOS に登録されることでアラーム、Push 通知、WebActivities などの API が使えるようになるPlainPackaged追加 API なし (Installed Web と同じ権限)Privilegedアドレス帳、SD カードの読み書き、CORS に関わらず任意ドメインへの XHR、TCP SocketCertified電話、SMS、ボイスメールなど料金の発生するサービスその他 Bluetooth、Background Service などアプリの分類と API 権限
  • 17. 種類 デフォルト Content Security PolicyWeb 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
  • 18. Content Security PolicySame 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-srcself; object-src none; style-src self unsafe-inlineCertified アプリのデフォルト: default-src *; script-srcself; object-src none; style-src selfJavaScript、CSS、オブジェクトファイルはパッケージ外から読み込み不可能 (画像埋め込みは可能) という設定CSP 設定変更は Manifest に記載マーケットで審査する側が確認可能アプリの種類と CSP 設定詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps