Firefox OS 1.0 Application Development
Upcoming SlideShare
Loading in...5
×
 

Firefox OS 1.0 Application Development

on

  • 3,958 views

Web Platform 勉強会 1307 で使用したスライド

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

Statistics

Views

Total Views
3,958
Slideshare-icon Views on SlideShare
3,858
Embed Views
100

Actions

Likes
11
Downloads
52
Comments
0

2 Embeds 100

https://twitter.com 98
http://localhost 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Firefox OS 1.0 Application Development Firefox OS 1.0 Application Development Presentation Transcript

    • 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 mailto: Tomoya ASAI <dynamis mozilla-japan.org>@
    • 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 も続く 7/11 にポーランドで記者会見… 日本や北米では 2013~2014 年中の見込み http://mozilla.jp/blog/entry/10310/
    • 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
    • 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
    • 価格帯別出荷台数予測 "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~
    • 価格帯別出荷台数予測 "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~
    • 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
    • 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% 以上)
    • 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 でのテストも https://github.com/dynamis/firefoxos/wiki/simulator
    • Firefox OS Simulator 再起動不要の拡張機能 https://addons.mozilla.org/ja/ firefox/addon/firefox-os-simulator/ ポチッと押すだけ Web 開発メニューに追加される Firefox デスクトップビルド+ プロファイル+Alpha 詳しい解説: https://github.com/dynamis/firefoxos/wiki/simulator
    • Firefox OS Simulator プロファイル付きデスクトップビルドにホームボタンを追加 コンソールやディレクトリからアプリケーションを読み込む機能も
    • 全言語版シュミレータ 非公式ですがあります http://r2d2b2g.flod.org/ 起動したら言語設定を変更 Settings → Languages Gaia アプリの UI だけでなく Accept-Languages HTTP ヘッダ なども切り変わります
    • シミュレータにインストール Add Directory ボタン manifest ファイルを選択 zip されて packaged app として インストールされ、起動する Update ボタンで更新 同じディレクトリのファイルを zip し直して、起動する https://github.com/dynamis/firefoxos/wiki/simulator
    • 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€+税+送料 Snapdragon 1.2GHz x2, 4GB ROM, 512MB RAM, 4.3" qHD http://www.geeksphone.com/
    • Developer Preview Phone Telefónica と Geeksphone が作る開発者向けテスト端末
    • 端末にインストール Push ボタン リモートデバッグをオンにした端 末を USB 接続すると表示 リモートデバッグの有効化 Settings → Device Information → More Information → Developer → Remote debugging Console enabled などの設定も https://github.com/dynamis/firefoxos/wiki/simulator
    • manifest のその他重要項目 csp Content Security Policy の設定変更 fullscreen, orientation フルスクリーン起動するか?縦横回転どうするか? installs_allowed_from インストール元として許可するサイト (Market) type, permissions デフォルト許可以外の API 使用許可を求める 詳細はこちら: https://developer.mozilla.org/en-US/docs/Apps/Manifest
    • 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, Firefox OS... 同じコードでどこでも動く マーケットもマルチデバイス
    • 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 については現時点では Firefox OS 限定になっています https://marketplace.firefox.com/
    • オープンなアプリストア 全てを Web 技術で実装 安定・平等な環境を提供 Marketplace のソースも公開 ベンダー非依存 Firefox Marketplace 以外にも ストア、認証、課金も自由に https://marketplace.firefox.com/
    • オープンなレビューシステム コミュニティレビュー 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
    • 権限に応じたレビュー 一般のアプリ デフォルト安全なので公序良俗 に反しないなど簡単な確認だけ 特権を持つアプリ 追加で特別な権限を求める場合 フルソースコードチェック対象 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.getSelf(), Apps.getInstalled() Apps.installPackage(url) https://developer.mozilla.org/en-US/docs/Apps/Apps_JavaScript_API
    • 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 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 読み込み型、右上のアプリがダウンロード型
    • 日経コミュニケーション 201305 への寄稿原稿から引用
    • 2つの方式のアプリ 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 同 様端末にイン ストールする) 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 はデフォルト無効 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
    • 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
    • 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
    • ブラウザ機能はない 戻るボタンはありません 別ドメインには別ウィンドウで User Agent が異なる "Android;" は含みません Content Security Policy 一部 API 使うには CSP が必須 アプリ開発の注意事項 https://developer.mozilla.org/ja/docs/Mozilla/Firefox_OS/Application_development
    • Simulator で使えない API 例 Telephony WebSMS WebBluetooth Ambient Light Proximity Network Information Vibration オフラインイベント タッチイベントは Windows 7 以降のマルチタッチディスプレイで動作します
    • クロスドメイン通信について XHR は同一ドメインが原則 CORS で制限解除できる Access-Control-Allow-Origin ヘッダ を送信することで別ドメインからの XHR を許可できます Packaged App から Web Web はすべて別ドメイン扱い 同様に CORS で許可が必要 詳しくはこちら: https://developer.mozilla.org/ja/docs/HTTP_access_control
    • 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本! 貴重な情報も満載 日本語は勿論英語でもまとまっ てない情報まで書かれています 私も全体の構成や内容の確認など協力させて頂きました