Firefox OSアプリの概要＠gunma.web 2015/3/28 https://gunmaweb.doorkeeper.jp/events/21025

1. Firefox OSアプリの概要
Firefox OS アプリハンズオン supported by Gunma.web
2015/3/28

2. 自己紹介
ひらとり
● @flatbirdH
● FxOS コードリーディング
● html5j Webプラットフォー
ム部

3. 本日は Q&A 形式で
Firefox OSアプリの
疑問にお答えします

4. 資料はすぐに公開します

5. Q1.
Firefox OSアプリってどう作る
の？言語は何？

6. Webサイトを作る
HTML/JavaScript/CSS で開発します
HTMLで画面を構成。スタイルシートでスタイルを付ける。

7. JavaScript で処理を実装。
Webサイトを作る
HTML/JavaScript/CSS で開発します

8. Firefox OSアプリはブラウザをランタイム
として動くアプリ
Firefox OS Android iOS
言語
（実行形式）
HTML /
JavaScript
Java
（Dex）
Objective-C /
Swift
（ARMバイナリ）
ランタイム
ブラウザ
（Gecko）
VM
（Dalvik/ART）
プロセッサ

9. Q2.
それって「Webサイト」と
どう違うの？？

10. Firefox OSアプリは
「マニフェストファイル」を持つ
● Firefox OSアプリ
○ Webサーバにホストされる「ホスト型」
○ 端末にインストールされる「パッケージ型」
● ホスト型
○ アプリとしての情報を記述する「マニフェストファイル」があ
ること以外、通常の Web サイトと同じ。
● マニフェストがあることで...
○ 端末に「インストール※」できる。
○ Firefox Marketplaceでの配付が可能。
※ ホスト型の場合はホーム画面へのアイコンの登録。実体は Web サーバでホスト。

11. パッケージ型
● ZIPで固められ端末にインストールされる。
● 構成するファイルはホスト型と同じ。
● 開発者が Web サーバを持たずに配付可能。
● オフラインでも利用できるアプリを作りやすい。
● プリインストールのアプリにも使われる。

12. Q3.
マニフェストファイルって？

13. アプリの属性情報を記述する
JSON形式のファイル
ファイル名
● manifest.webapp
{
"name": "Hello App",
"description": "A Hello World app",
"version": "1.0.0",
"launch_path": "/index.html",
"icons": {
"16": "/icons/icon16x16.png",
"48": "/icons/icon48x48.png",
"60": "/icons/icon60x60.png",
"128": "/icons/icon128x128.png"
},
"developer": {
"name": "flatbird",
"url": "https://github.com/flatbird"
},
"default_locale": "en",
"type": "web"
}
←アプリ名
←アイコン
←起動パス
←アプリのタイプ

14. マニフェストにはアプリ特有の
色々な設定ができます
例）
項目 説明
fullscreen アプリをフルスクリーン表示。
orientation アプリの向きを固定。(“potrait”, “landscape”, etc)
chrome 「戻る」、「進む」などのナビゲーションのソフトウェアボタンを表示。
（{ "navigation": true } を指定）
activities アプリ間連携の受け口を指定。
role “system”, “homescreen” などの特殊なアプリになることを指定。
（参照）https://developer.mozilla.org/ja/Apps/Manifest

15. Q4.
Webアプリでネイティブアプ
リのようなデバイスの機能つ
かえるの？

16. ● Geckoが提供するAPI。
● 例) Camera API
Web API
navigator.mozCameras.getCamera(cameraOptions, onSuccess);
function onSuccess( camera ) {
options.pictureSize = camera.capabilities.pictureSizes[0];
options.fileformat = camera.capabilities.fileFormats[0];
camera.takePicture(options, onPictureTaken);
};
function onPictureTaken( blob ) { // 写真のデータ
}

17. Web APIの例
ハードウェア
バッテリー状態、位置情報、環境光センサー、近
接センサー、カメラ、バイブレーション、FMラジオ
通信 Bluetooth、TCPソケット、SMS、WiFi情報
データ アドレス帳、デバイスストレージ、IndexedDB
その他
アラーム、プッシュ、通知、アプリ内課金、アプリ
間連携
詳しくは薮下さんの記事で！
『Firefox OSアプリ開発が楽しくなるハードウェアAPIの概要と、センサーAPIや音声
APIを使った楽器アプリの作例』http://codezine.jp/article/detail/8540

18. ● アプリの「タイプ」はマニフェストで指定。
● Web APIには「パーミッション」が必要なものが多く
ある。
● パーミッションはアプリのタイプに応じて利用できる
ものが異なる。
使えるWeb APIは
アプリの「タイプ」で異なる
"type": "privileged",
"permissions": {
"camera": {
"description": "Use camera"
}
}

19. アプリのタイプ
アプリのタイプ ホスト型 パッケージ型 説明
web
（通常） ○ ○
通常のWebサイトと同レベル。
privileged
（特権） × ○
Marketplaceで審査される。
certified
（認定） × ○
プリインストール用。
一般のアプリ開発者は利用できな
い。

20. Q5.
ネイティブコードは使える？

21. ● 「Emscripten」というので C/C++ のコードを
JavaScript に変換できます。
○ 既存のコード資産も使えるかも。
● パフォーマンスも asm.js で
アプリでは
ネイティブコードは使えません！
https://hacks.mozilla.org/2013/12/gap-between-asm-js-and-native-performance-gets-even-narrower-with-float32-optimizations/

22. Q6.
アプリの開発環境は？

23. ● 「Web IDE」がFirefoxブラウザに標準装備。
○ 本日のハンズオンでも使用。
● 一般的なWeb開発に使う開発環境が使えます。
○ エディタ:
■ Sublime Text, Emacs, Vim, etc.
○ IDE:
■ WebStorm, Visual Studio, etc.
○ タスクランナー:
■ grunt, gulp
開発環境

24. Q7.
Firefox OSのアプリを作ると何
がいいの？

25. 広がるフォームファクター

26. Learn once, write anyware
● Windows ストア アプリ
● Chrome アプリ
● Cordova で Android, iOS
● NW.js でデスクトップアプリ
● MEAN スタックでバックエンドもフロントエンドも
○ MongoDB, Express, AngularJS, Node.js

27. サクッと作れて楽しい！

28. Thank you!