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

1. Firefox OS 1.0 App Dev
Web Platform Workshop 1307
by Tomoya Asai (dynamis)
Last Update: 2013/07/06

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. about:topics

5. 今日の話題
Released!
Hello FxOS Apps
Open Web Apps
FxOS App Dev
ユーザや業界への影響については全体にわたって話します

6. Released！

7. ZTE Open & Alcatel One Touch Fire

8. ７月から各国で順次発売
7月2日にスペインで発売
Telefónica が ZTE Open を発売
実質 5000円 の誰でもスマホ
€69 (税込) プリペイド €30 含む
コロンビアやベネズエラも近日…
Deutsche Telekom も続く
7/11 にポーランドで記者会見…
日本や北米では 2013~2014 年中の見込み http://mozilla.jp/blog/entry/10310/

9. 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

10. 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

11. 価格帯別出荷台数予測
"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~

12. 価格帯別出荷台数予測
"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~

13. 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

14. 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% 以上)

15. Hello FxOS Apps

16. Firefox OS のアプリ
Web アプリです。
Web アプリです。
Web アプリです。
大事なこと３回

17. Firefox OS のアプリ開発
いつもの開発ツール
いつものエディタ
いつものライブラリ

18. Firefox OS のアプリ
Web アプリそのもの
OS 専用のアプリではない
すべての API は Web 標準化
メタ情報を用意するだけ
Web サイト + manifest.webapp
→ Firefox OS アプリ

19. index.html

20. manifest.webapp
https://developer.mozilla.org/en-US/docs/Apps/Manifest

21. アプリ開発の流れ
普通に Web 開発
デバッグもいつも通り
manifest ファイルを用意
メタ情報を JSON 形式で記載
シミュレータや実機テスト
一部の API は実機で確認が必要
Android 版 Firefox でのテストも
https://github.com/dynamis/firefoxos/wiki/simulator

22. Firefox OS Simulator
再起動不要の拡張機能
https://addons.mozilla.org/ja/
firefox/addon/firefox-os-simulator/
ポチッと押すだけ
Web 開発メニューに追加される
Firefox デスクトップビルド＋
プロファイル＋Alpha
詳しい解説: https://github.com/dynamis/firefoxos/wiki/simulator

23. Firefox OS Simulator
プロファイル付きデスクトップビルドにホームボタンを追加
コンソールやディレクトリからアプリケーションを読み込む機能も

24. 全言語版シュミレータ
非公式ですがあります
http://r2d2b2g.flod.org/
起動したら言語設定を変更
Settings → Languages
Gaia アプリの UI だけでなく
Accept-Languages HTTP ヘッダ
なども切り変わります

25. シミュレータにインストール
Add Directory ボタン
manifest ファイルを選択
zip されて packaged app として
インストールされ、起動する
Update ボタンで更新
同じディレクトリのファイルを
zip し直して、起動する
https://github.com/dynamis/firefoxos/wiki/simulator

26. Open Web Apps

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

28. Firefox Nightly でテスト
先週入った機能なのでまだ不安定ですが Gaia 開発者はこれ使ってます

29. 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/

30. Developer Preview Phone
Telefónica と Geeksphone が作る開発者向けテスト端末

31. 端末にインストール
Push ボタン
リモートデバッグをオンにした端
末を USB 接続すると表示
リモートデバッグの有効化
Settings → Device Information →
More Information → Developer →
Remote debugging
Console enabled などの設定も
https://github.com/dynamis/firefoxos/wiki/simulator

32. manifest のその他重要項目
csp
Content Security Policy の設定変更
fullscreen, orientation
フルスクリーン起動するか？縦横回転どうするか？
installs_allowed_from
インストール元として許可するサイト (Market)
type, permissions
デフォルト許可以外の API 使用許可を求める
詳細はこちら: https://developer.mozilla.org/en-US/docs/Apps/Manifest

33. manifest.webapp (再掲)
https://developer.mozilla.org/en-US/docs/Apps/Manifest

34. 追加権限の要求
https://developer.mozilla.org/en-US/docs/Apps/Manifest

35. アプリ間連携 (Activities) の登録
https://developer.mozilla.org/en-US/docs/Apps/Manifest

36. Firefox ＝ WebRT (WebRunTime)
Gecko = アプリ環境
Firefox = Gecko で XUL/JS
WebApps = Gecko で HTML/JS
マルチデバイス対応
PC, Android, Firefox OS...
同じコードでどこでも動く
マーケットもマルチデバイス

37. Android に Web アプリ環境を
Web App = Native App に
ホームスクリーンへの追加
独立してフル画面起動
ネイティブ同様の利用体験
Firefox = WebRT for Android
ホームにインストール、アプリを起動した画面、マーケットをブラウズ

38. PC にも Web アプリ環境を
Web App = Native App に
プログラムフォルダ (アプリケー
ションディレクトリ) への追加
ウィンドウはもちろんプロセスも
データも全て独立
Firefox = WebRT for PC

39. Firefox Marketplace
Device, OS 横断マーケット
Web Platform のためのストア
Firefox OS はもちろん Android や
PC の Firefox もターゲット
課金 API については現時点では
Firefox OS 限定になっています
https://marketplace.firefox.com/

40. オープンなアプリストア
全てを Web 技術で実装
安定・平等な環境を提供
Marketplace のソースも公開
ベンダー非依存
Firefox Marketplace 以外にも
ストア、認証、課金も自由に
https://marketplace.firefox.com/

41. オープンなレビューシステム
コミュニティレビュー
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

42. 権限に応じたレビュー
一般のアプリ
デフォルト安全なので公序良俗
に反しないなど簡単な確認だけ
特権を持つアプリ
追加で特別な権限を求める場合
フルソースコードチェック対象
Privileged or Certified アプリ

43. アプリの公開
a. Marketplace に登録
Firefox Marketplace
b. 独自にアプリを配布
自分のサイトで配布
c. Web に公開するだけ
Web = Marketplace

44. Marketplace に登録
1. アカウント作成 (無料)
2. manifest.webapp を登録
3. アプリ情報を記載
4. レビュー完了を待つ

45. 自分のサイトで配布
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

46. navigator.mozApps.install(url)
パッケージ型の場合 Apps.installPackage(url) を使う

47. Apps Dev

48. Firefox OS - Web is the Platform
Web = アプリ環境
アプリはすべて Web 技術で
ドメイン＝アプリの単位と定義
Web を進化させる
不足機能は API を定義・標準化
セキュリティモデルやアプリ間連
携なども実装・標準化していく

49. 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 読み込み型、右上のアプリがダウンロード型

50. 日経コミュニケーション 201305 への寄稿原稿から引用

51. ２つの方式のアプリ
Hosted (Web 読み込み型)
従来の OS ではブラウザ上で動作
動作や権限は従来の Web と同じ
オフライン対応アプリも開発可能
Packaged (ダウンロード型)
従来のスマホアプリに相当する
マーケット審査を経て追加権限取得
サイト全体を ZIP して配布する形式
Packaged
Web アプリ
Hosted
Web アプリ
Internet
Server
端末
詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps

52. 方式 種類 概要
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 でのアプリの分類

53. 種類 利用可能な 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 権限

54. 種類 デフォルト 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

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

56. 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

57. 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

58. ブラウザ機能はない
戻るボタンはありません
別ドメインには別ウィンドウで
User Agent が異なる
"Android;" は含みません
Content Security Policy
一部 API 使うには CSP が必須
アプリ開発の注意事項
https://developer.mozilla.org/ja/docs/Mozilla/Firefox_OS/Application_development

59. Simulator で使えない API 例
Telephony
WebSMS
WebBluetooth
Ambient Light
Proximity
Network Information
Vibration
オフラインイベント
タッチイベントは Windows 7 以降のマルチタッチディスプレイで動作します

60. クロスドメイン通信について
XHR は同一ドメインが原則
CORS で制限解除できる
Access-Control-Allow-Origin ヘッダ
を送信することで別ドメインからの
XHR を許可できます
Packaged App から Web
Web はすべて別ドメイン扱い
同様に CORS で許可が必要
詳しくはこちら: https://developer.mozilla.org/ja/docs/HTTP_access_control

61. For More Info

62. Firefox OS コミュニティ！
http://FxOS.org/
イベントやドキュメントをご案内
http://FxOS.org/ml
(https://groups.google.com/group/
firefoxos にリダイレクト)

63. Firefox OS アプリ開発ガイド
日本初の Firefox OS 書籍
Mozilla コミュニティが誇るテク
ノロジーエバンジェリスト達が贈
る日本初の Firefox OS本！
貴重な情報も満載
日本語は勿論英語でもまとまっ
てない情報まで書かれています
私も全体の構成や内容の確認など協力させて頂きました