Firefox OSアプリの概要

Firefox OS アプリハンズオン supported by Gunma.web2015/3/28

自己紹介

ひらとり

● @flatbirdH

● FxOS コードリーディング

● html5j Webプラットフォー

ム部

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

資料はすぐに公開します

Q1.Firefox OSアプリってどう作る

の？言語は何？

Webサイトを作るHTML/JavaScript/CSS で開発します

HTMLで画面を構成。スタイルシートでスタイルを付ける。

JavaScript で処理を実装。

Webサイトを作るHTML/JavaScript/CSS で開発します

Firefox OSアプリはブラウザをランタイムとして動くアプリ

Firefox OS Android iOS

言語（実行形式）

HTML / JavaScript

Java（Dex）

Objective-C / Swift

（ARMバイナリ）

ランタイムブラウザ（Gecko）

VM（Dalvik/ART）

プロセッサ

Q2.それって「Webサイト」と

どう違うの？？

Firefox OSアプリは「マニフェストファイル」を持つ

● Firefox OSアプリ

○ Webサーバにホストされる「ホスト型」

○ 端末にインストールされる「パッケージ型」

● ホスト型

○ アプリとしての情報を記述する「マニフェストファイル」があ

ること以外、通常の Web サイトと同じ。

● マニフェストがあることで...○ 端末に「インストール※」できる。

○ Firefox Marketplaceでの配付が可能。

※ ホスト型の場合はホーム画面へのアイコンの登録。実体は Web サーバでホスト。

パッケージ型

● ZIPで固められ端末にインストールされる。

● 構成するファイルはホスト型と同じ。

● 開発者が Web サーバを持たずに配付可能。

● オフラインでも利用できるアプリを作りやすい。

● プリインストールのアプリにも使われる。

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

アプリの属性情報を記述する 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"}

←アプリ名

←アイコン

←起動パス

←アプリのタイプ

マニフェストにはアプリ特有の

色々な設定ができます

例）

項目 説明

fullscreen アプリをフルスクリーン表示。

orientation アプリの向きを固定。(“potrait”, “landscape”, etc)

chrome 「戻る」、「進む」などのナビゲーションのソフトウェアボタンを表示。（{ "navigation": true } を指定）

activities アプリ間連携の受け口を指定。

role “system”, “homescreen” などの特殊なアプリになることを指定。

（参照）https://developer.mozilla.org/ja/Apps/Manifest

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

かえるの？

● 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 ) { // 写真のデータ

}

Web APIの例

ハードウェアバッテリー状態、位置情報、環境光センサー、近接センサー、カメラ、バイブレーション、FMラジオ

通信 Bluetooth、TCPソケット、SMS、WiFi情報

データ アドレス帳、デバイスストレージ、IndexedDB

その他アラーム、プッシュ、通知、アプリ内課金、アプリ間連携

詳しくは薮下さんの記事で！『Firefox OSアプリ開発が楽しくなるハードウェアAPIの概要と、センサーAPIや音声

APIを使った楽器アプリの作例』http://codezine.jp/article/detail/8540

● アプリの「タイプ」はマニフェストで指定。

● Web APIには「パーミッション」が必要なものが多くある。

● パーミッションはアプリのタイプに応じて利用できるものが異なる。

使えるWeb APIはアプリの「タイプ」で異なる

"type": "privileged","permissions": { "camera": { "description": "Use camera" }}

アプリのタイプ

アプリのタイプ ホスト型 パッケージ型 説明

web（通常） ○ ○ 通常のWebサイトと同レベル。

privileged（特権） × ○ Marketplaceで審査される。

certified（認定） × ○ プリインストール用。

一般のアプリ開発者は利用できない。

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

● 「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/

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

● 「Web IDE」がFirefoxブラウザに標準装備。

○ 本日のハンズオンでも使用。

● 一般的なWeb開発に使う開発環境が使えます。

○ エディタ:

■ Sublime Text, Emacs, Vim, etc.

○ IDE:

■ WebStorm, Visual Studio, etc.

○ タスクランナー:

■ grunt, gulp

開発環境

Q7.Firefox OSのアプリを作ると何

がいいの？

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

Learn once, write anyware● Windows ストア アプリ

● Chrome アプリ

● Cordova で Android, iOS

● NW.js でデスクトップアプリ

● MEAN スタックでバックエンドもフロントエンドも

○ MongoDB, Express, AngularJS, Node.js

サクッと作れて楽しい！

Thank you!