Firefox OSアフ?リの概要＠gunma.web
1 like1,000 views
Firefox OSアフ?リの概要＠gunma.web 2015/3/28 https://gunmaweb.doorkeeper.jp/events/21025
![● 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 ) { // 写真のデータ
}](https://image.slidesharecdn.com/firefoxosgunma-150327234740-conversion-gate01/85/Firefox-OS-gunma-web-16-320.jpg)
More Related Content
What's hot (20)
Similar to Firefox OSアフ?リの概要＠gunma.web (20)
Recently uploaded (15)
Firefox OSアフ?リの概要＠gunma.web
- 1. Firefox OSアプリの概要 Firefox OS アプリハンズオン supported by Gunma.web 2015/3/28
- 2. 自己紹介 ひらとり ● @flatbirdH ● FxOS コードリーディング ● html5j Webプラットフォー ム部
- 3. 本日は Q&A 形式で Firefox OSアプリの 疑問にお答えします
- 4. 资料はすぐに公开します
- 8. Firefox OSアプリはブラウザをランタイム として動くアプリ Firefox OS Android iOS 言語 （実行形式） HTML / JavaScript Java （Dex） Objective-C / Swift （ARMバイナリ） ランタイム ブラウザ （Gecko） VM （Dalvik/ART） プロセッサ
- 10. Firefox OSアプリは 「マニフェストファイル」を持つ ● Firefox OSアプリ ○ Webサーバにホストされる「ホスト型」 ○ 端末にインストールされる「パッケージ型」 ● ホスト型 ○ アプリとしての情報を記述する「マニフェストファイル」があ ること以外、通常の Web サイトと同じ。 ● マニフェストがあることで... ○ 端末に「インストール※」できる。 ○ Firefox Marketplaceでの配付が可能。 ※ ホスト型の場合はホーム画面へのアイコンの登録。実体は Web サーバでホスト。
- 11. パッケージ型 ● ZIPで固められ端末にインストールされる。 ● 構成するファイルはホスト型と同じ。 ● 開発者が 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" } ←アプリ名 ←アイコン ←起動パス ←アプリのタイプ
- 14. マニフェストにはアプリ特有の 色々な設定ができます 例） 項目 説明 fullscreen アプリをフルスクリーン表示。 orientation アプリの向きを固定。(“potrait”, “landscape”, etc) chrome 「戻る」、「進む」などのナビゲーションのソフトウェアボタンを表示。 （{ "navigation": true } を指定） activities アプリ間連携の受け口を指定。 role “system”, “homescreen” などの特殊なアプリになることを指定。 （参照）https://developer.mozilla.org/ja/Apps/Manifest
- 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 （認定） × ○ プリインストール用。 一般のアプリ開発者は利用できな い。
- 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 開発環境
- 25. 広がるフォームファクター
- 26. Learn once, write anyware ● Windows ストア アプリ ● Chrome アプリ ● Cordova で Android, iOS ● NW.js でデスクトップアプリ ● MEAN スタックでバックエンドもフロントエンドも ○ MongoDB, Express, AngularJS, Node.js
- 27. サクッと作れて楽しい！
- 28. Thank you!