Embed Size (px)
DESCRIPTION
Web Platform 勉強会 1307 で使用したスライド http://atnd.org/events/40801
Citation preview
Firefox OS 1.0 App DevWeb Platform Workshop 1307
by Tomoya Asai (dynamis)
Last Update: 2013/07/06
about:me
Tomoya ASAI
Mozilla JapanTechnical Marketing (Evangelist)
dynamis @ communitydynamis.jp
@dynamitter
facebook.com/dynamis
mailto: Tomoya ASAI <dynamis mozilla-japan.org>@
about:topics
今日の話題
Released!Hello FxOS AppsOpen Web AppsFxOS App Dev
ユーザや業界への影響については全体にわたって話します
Released！
ZTE Open & Alcatel One Touch Fire
７月から各国で順次発売
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 mmCPU: Snapdragon 1 GHzRAM 256 MBROM: 512 MBDisplay: 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 mmDisplay: 3.5" HVGACPU: Snapdragon 1 GHzRAM 256 MBROM: 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
M U
nits
Feature phone Smart-feature phoneSmartphone 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
M U
nits
Feature phone Smart-feature phoneSmartphone 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
M U
nits
Other OSBlackberryFirefox OSTizenBadaWindows PhoneiOSAndroidSymbian
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
M U
nits
Other OSBlackberryFirefox OSTizenBadaWindows PhoneiOSAndroidSymbian
Firefox OS
iOS
Android
Android がシェアを伸ばす一方でiOS は 2013 年以降シェア低下Firefox OS は iOS 程度まで増加(2018 年にはシェア 10% 以上)
Hello FxOS Apps
Firefox OS のアプリ
Web アプリです。Web アプリです。Web アプリです。
大事なこと３回
Firefox OS のアプリ開発
いつもの開発ツールいつものエディタいつものライブラリ
����� ���!��
Firefox OS のアプリ
Web アプリそのものOS 専用のアプリではないすべての API は Web 標準化
メタ情報を用意するだけWeb サイト + manifest.webapp→ Firefox OS アプリ
�% "��
index.html��� ����2�"����"�������22���"�2��� !�"��#"�����22�"�"��-/(0(.+��"�"��22�!� ��"2"&�����������"������$�!� ��"�2! ����!�!� ��"��!���!� ��"22�����2 ����!"&��!���"�2"&����"�%"��!!�2� ����!"&���!"&����!!�2�����������&22��)1,*-)1,*-'��������&���"��
manifest.webapp&((������N�@=?2/;AB��((��� ����!����N�+7@=?2/-J6;AB6)��((���"������!��N������$��!����((����� �N&((((����N������ ���$�����������(('�((���#�������N&((((������N��%���� ��((((�"���N��!!����%���� �����(('�((�����"�!��������N����'��NKFND*>C@:<C4N�N��N�����$��!��NMI85,
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 → LanguagesGaia アプリの 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 でテスト��q����q9MLEHM?q� #"���(q� #"�q��(����(�)���#!�!#.� ������������(�q��q����
��q����q9GIFDKPJ@BN?Y_�������q!�����q$&#�� �qGAOCHM2`_3>=
��q��&��#,q����( -q?KPJ@BNZc6Vd��q����( -q�(($��"���( -�!#.� ��#&����&��#,q�$&#�� �q�$�(��(#������$&#�� �
先週入った機能なのでまだ不安定ですが Gaia 開発者はこれ使ってます
Developer Preview Phone
4/23 発売 (入荷後即完売続き)Keon: 91€+tax+shippingSnapdragon 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 debuggingConsole enabled などの設定も
https://github.com/dynamis/firefoxos/wiki/simulator
manifest のその他重要項目
cspContent Security Policy の設定変更
fullscreen, orientationフルスクリーン起動するか？縦横回転どうするか？
installs_allowed_fromインストール元として許可するサイト (Market)
type, permissionsデフォルト許可以外の API 使用許可を求める
詳細はこちら: https://developer.mozilla.org/en-US/docs/Apps/Manifest
manifest.webapp (再掲)&((������N�@=?2/;AB��((��� ����!����N�+7@=?2/-J6;AB6)��((���"������!��N������$��!����((����� �N&((((����N������ ���$�����������(('�((���#�������N&((((������N��%���� ��((((�"���N��!!����%���� �����(('�((�����"�!��������N�����NN��N���N006,9,9LG13,.N���'
https://developer.mozilla.org/en-US/docs/Apps/Manifest
追加権限の要求/qq��qq���qSQq���qq�(-$��q�$&�*� ������qq�$�&!�''�#"'�q/qqqq��#"(��('�q/qqqqqq���'�&�$(�#"�q�WmRk6lb9jaep?\diT4=Uf95;8hn87<:4��qqqqqq�����''�q�&����&��(��qqqq0qq00
https://developer.mozilla.org/en-US/docs/Apps/Manifest
アプリ間連携 (Activities) の登録&NN��NN���NHEN���NN���!�#�!�� �N&NNNN������N&NNNNNN������N���������!����NNNNNN��� �� �!����N���������NNNNNN����!�� �N&NNNNNNNN�!%���N �����������������������������������NNNNNN'�NNNNNN���!"�����"��N!�"�NNNN'NN''
https://developer.mozilla.org/en-US/docs/Apps/Manifest
Firefox ＝ WebRT (WebRunTime)
Gecko = アプリ環境Firefox = Gecko で XUL/JSWebApps = 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)*�&q $$'q�q"�*���(#&�!#. $$'�*�&q!�"���'()& qqqq�q��(($���,#'�#&��!�"���'(�+���$$��
*�&q&�%)�'(q�q $$'��"'(� �!�"���'()& ��&�%)�'(�#"')���''q�q�)"�(�#"��q/11��q_X[9^o0�&�%)�'(�#"�&&#&q�q�)"�(�#"��q/11��q]g[9^o0�
パッケージ型の場合 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アプリ
ブラウザアプリ
NativeLibrary
Webアプリ
WebKit
Webアプリ
Nativeアプリ
OSPetc...
DeviceAPIWebRT
Webアプリ
PackagedWebアプリ
コアサービスGeckoDeviceAPI SystemAPI
Web に最適化シンプル＆スマート
ライブラリSGL etc.
NativeInterface
カーネル & HAL カーネル & HAL
X.org etc.
左上のアプリが Web 読み込み型、右上のアプリがダウンロード型
日経コミュニケーション 201305 への寄稿原稿から引用
２つの方式のアプリ
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
Device API の使い方
ドキュメント見てねhttps://developer.mozilla.org/docs/WebAPIBoilerplate 見てね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 例
TelephonyWebSMSWebBluetoothAmbient LightProximityNetwork InformationVibrationオフラインイベント
タッチイベントは Windows 7 以降のマルチタッチディスプレイで動作します
クロスドメイン通信について
XHR は同一ドメインが原則CORS で制限解除できるAccess-Control-Allow-Origin ヘッダを送信することで別ドメインからの XHR を許可できますPackaged App から WebWeb はすべて別ドメイン扱い同様に 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本！
貴重な情報も満載日本語は勿論英語でもまとまってない情報まで書かれています
私も全体の構成や内容の確認など協力させて頂きました
