More Related Content Similar to Firefox OSアプリの概要@gunma.web (20) Firefox OSアプリの概要@gunma.web10. Firefox OSアプリは
「マニフェストファイル」を持つ
● Firefox OSアプリ
○ Webサーバにホストされる「ホスト型」
○ 端末にインストールされる「パッケージ型」
● ホスト型
○ アプリとしての情報を記述する「マニフェストファイル」があ
ること以外、通常の Web サイトと同じ。
● マニフェストがあることで...
○ 端末に「インストール※」できる。
○ Firefox Marketplaceでの配付が可能。
※ ホスト型の場合はホーム画面へのアイコンの登録。実体は Web サーバでホスト。
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"
}
←アプリ名
←アイコン
←起動パス
←アプリのタイプ
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 ) { // 写真のデータ
}
18. ● アプリの「タイプ」はマニフェストで指定。
● Web APIには「パーミッション」が必要なものが多く
ある。
● パーミッションはアプリのタイプに応じて利用できる
ものが異なる。
使えるWeb APIは
アプリの「タイプ」で異なる
"type": "privileged",
"permissions": {
"camera": {
"description": "Use camera"
}
}
19. アプリのタイプ
アプリのタイプ ホスト型 パッケージ型 説明
web
(通常) ○ ○
通常のWebサイトと同レベル。
privileged
(特権) × ○
Marketplaceで審査される。
certified
(認定) × ○
プリインストール用。
一般のアプリ開発者は利用できな
い。
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/
23. ● 「Web IDE」がFirefoxブラウザに標準装備。
○ 本日のハンズオンでも使用。
● 一般的なWeb開発に使う開発環境が使えます。
○ エディタ:
■ Sublime Text, Emacs, Vim, etc.
○ IDE:
■ WebStorm, Visual Studio, etc.
○ タスクランナー:
■ grunt, gulp
開発環境
26. Learn once, write anyware
● Windows ストア アプリ
● Chrome アプリ
● Cordova で Android, iOS
● NW.js でデスクトップアプリ
● MEAN スタックでバックエンドもフロントエンドも
○ MongoDB, Express, AngularJS, Node.js