Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Firefox OSアプリの概要
Firefox OS アプリハンズオン supported by Gunma.web
2015/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バイ...
Q2.
それって「Webサイト」と
どう違うの??
Firefox OSアプリは
「マニフェストファイル」を持つ
● Firefox OSアプリ
○ Webサーバにホストされる「ホスト型」
○ 端末にインストールされる「パッケージ型」
● ホスト型
○ アプリとしての情報を記述する「マニフェスト...
パッケージ型
● ZIPで固められ端末にインストールされる。
● 構成するファイルはホスト型と同じ。
● 開発者が Web サーバを持たずに配付可能。
● オフラインでも利用できるアプリを作りやすい。
● プリインストールのアプリにも使われる。
Q3.
マニフェストファイルって?
アプリの属性情報を記述する
JSON形式のファイル
ファイル名
● manifest.webapp
{
"name": "Hello App",
"description": "A Hello World app",
"version": "1...
マニフェストにはアプリ特有の
色々な設定ができます
例)
項目 説明
fullscreen アプリをフルスクリーン表示。
orientation アプリの向きを固定。(“potrait”, “landscape”, etc)
chrome 「戻...
Q4.
Webアプリでネイティブアプ
リのようなデバイスの機能つ
かえるの?
● Geckoが提供するAPI。
● 例) Camera API
Web API
navigator.mozCameras.getCamera(cameraOptions, onSuccess);
function onSuccess( cam...
Web APIの例
ハードウェア
バッテリー状態、位置情報、環境光センサー、近
接センサー、カメラ、バイブレーション、FMラジオ
通信 Bluetooth、TCPソケット、SMS、WiFi情報
データ アドレス帳、デバイスストレージ、Index...
● アプリの「タイプ」はマニフェストで指定。
● Web APIには「パーミッション」が必要なものが多く
ある。
● パーミッションはアプリのタイプに応じて利用できる
ものが異なる。
使えるWeb APIは
アプリの「タイプ」で異なる
"typ...
アプリのタイプ
アプリのタイプ ホスト型 パッケージ型 説明
web
(通常) ○ ○
通常のWebサイトと同レベル。
privileged
(特権) × ○
Marketplaceで審査される。
certified
(認定) × ○
プリイン...
Q5.
ネイティブコードは使える?
● 「Emscripten」というので C/C++ のコードを
JavaScript に変換できます。
○ 既存のコード資産も使えるかも。
● パフォーマンスも asm.js で
アプリでは
ネイティブコードは使えません!
https://ha...
Q6.
アプリの開発環境は?
● 「Web IDE」がFirefoxブラウザに標準装備。
○ 本日のハンズオンでも使用。
● 一般的なWeb開発に使う開発環境が使えます。
○ エディタ:
■ Sublime Text, Emacs, Vim, etc.
○ IDE:
■ W...
Q7.
Firefox OSのアプリを作ると何
がいいの?
広がるフォームファクター
Learn once, write anyware
● Windows ストア アプリ
● Chrome アプリ
● Cordova で Android, iOS
● NW.js でデスクトップアプリ
● MEAN スタックでバックエンドもフロ...
サクッと作れて楽しい!
Thank you!
Upcoming SlideShare
Loading in …5
×

Firefox OSアプリの概要@gunma.web

882 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Firefox OSアプリの概要@gunma.web

  1. 1. Firefox OSアプリの概要 Firefox OS アプリハンズオン supported by Gunma.web 2015/3/28
  2. 2. 自己紹介 ひらとり ● @flatbirdH ● FxOS コードリーディング ● html5j Webプラットフォー ム部
  3. 3. 本日は Q&A 形式で Firefox OSアプリの 疑問にお答えします
  4. 4. 資料はすぐに公開します
  5. 5. Q1. Firefox OSアプリってどう作る の?言語は何?
  6. 6. Webサイトを作る HTML/JavaScript/CSS で開発します HTMLで画面を構成。スタイルシートでスタイルを付ける。
  7. 7. JavaScript で処理を実装。 Webサイトを作る HTML/JavaScript/CSS で開発します
  8. 8. Firefox OSアプリはブラウザをランタイム として動くアプリ Firefox OS Android iOS 言語 (実行形式) HTML / JavaScript Java (Dex) Objective-C / Swift (ARMバイナリ) ランタイム ブラウザ (Gecko) VM (Dalvik/ART) プロセッサ
  9. 9. Q2. それって「Webサイト」と どう違うの??
  10. 10. Firefox OSアプリは 「マニフェストファイル」を持つ ● Firefox OSアプリ ○ Webサーバにホストされる「ホスト型」 ○ 端末にインストールされる「パッケージ型」 ● ホスト型 ○ アプリとしての情報を記述する「マニフェストファイル」があ ること以外、通常の Web サイトと同じ。 ● マニフェストがあることで... ○ 端末に「インストール※」できる。 ○ Firefox Marketplaceでの配付が可能。 ※ ホスト型の場合はホーム画面へのアイコンの登録。実体は Web サーバでホスト。
  11. 11. パッケージ型 ● ZIPで固められ端末にインストールされる。 ● 構成するファイルはホスト型と同じ。 ● 開発者が Web サーバを持たずに配付可能。 ● オフラインでも利用できるアプリを作りやすい。 ● プリインストールのアプリにも使われる。
  12. 12. Q3. マニフェストファイルって?
  13. 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. 14. マニフェストにはアプリ特有の 色々な設定ができます 例) 項目 説明 fullscreen アプリをフルスクリーン表示。 orientation アプリの向きを固定。(“potrait”, “landscape”, etc) chrome 「戻る」、「進む」などのナビゲーションのソフトウェアボタンを表示。 ({ "navigation": true } を指定) activities アプリ間連携の受け口を指定。 role “system”, “homescreen” などの特殊なアプリになることを指定。 (参照)https://developer.mozilla.org/ja/Apps/Manifest
  15. 15. Q4. Webアプリでネイティブアプ リのようなデバイスの機能つ かえるの?
  16. 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. 17. Web APIの例 ハードウェア バッテリー状態、位置情報、環境光センサー、近 接センサー、カメラ、バイブレーション、FMラジオ 通信 Bluetooth、TCPソケット、SMS、WiFi情報 データ アドレス帳、デバイスストレージ、IndexedDB その他 アラーム、プッシュ、通知、アプリ内課金、アプリ 間連携 詳しくは薮下さんの記事で! 『Firefox OSアプリ開発が楽しくなるハードウェアAPIの概要と、センサーAPIや音声 APIを使った楽器アプリの作例』http://codezine.jp/article/detail/8540
  18. 18. ● アプリの「タイプ」はマニフェストで指定。 ● Web APIには「パーミッション」が必要なものが多く ある。 ● パーミッションはアプリのタイプに応じて利用できる ものが異なる。 使えるWeb APIは アプリの「タイプ」で異なる "type": "privileged", "permissions": { "camera": { "description": "Use camera" } }
  19. 19. アプリのタイプ アプリのタイプ ホスト型 パッケージ型 説明 web (通常) ○ ○ 通常のWebサイトと同レベル。 privileged (特権) × ○ Marketplaceで審査される。 certified (認定) × ○ プリインストール用。 一般のアプリ開発者は利用できな い。
  20. 20. Q5. ネイティブコードは使える?
  21. 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. 22. Q6. アプリの開発環境は?
  23. 23. ● 「Web IDE」がFirefoxブラウザに標準装備。 ○ 本日のハンズオンでも使用。 ● 一般的なWeb開発に使う開発環境が使えます。 ○ エディタ: ■ Sublime Text, Emacs, Vim, etc. ○ IDE: ■ WebStorm, Visual Studio, etc. ○ タスクランナー: ■ grunt, gulp 開発環境
  24. 24. Q7. Firefox OSのアプリを作ると何 がいいの?
  25. 25. 広がるフォームファクター
  26. 26. Learn once, write anyware ● Windows ストア アプリ ● Chrome アプリ ● Cordova で Android, iOS ● NW.js でデスクトップアプリ ● MEAN スタックでバックエンドもフロントエンドも ○ MongoDB, Express, AngularJS, Node.js
  27. 27. サクッと作れて楽しい!
  28. 28. Thank you!

×