20140531 firefox os
TRANSCRIPT
![Page 1: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/1.jpg)
Firefox OS アプリクイックツアー
Mozilla Japan テクニカルマーケティング 清水智公 ([email protected])
中国Firefox OS勉強会 1st 2014/05/31
![Page 2: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/2.jpg)
about:me
2
![Page 3: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/3.jpg)
清水智公(しみずのりただ)
• Mozilla Japan テクニカルマーケティング
• 慶應義塾大学政策・メディア研究科非常勤
• @chikoski • https://slideshare.net/chikoski/
3
![Page 4: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/4.jpg)
about:mozilla
4
![Page 5: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/5.jpg)
FFiirreeffooxx をよろしくね!
![Page 6: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/6.jpg)
6
![Page 7: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/7.jpg)
7
![Page 8: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/8.jpg)
![Page 9: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/9.jpg)
アプリ=タブ
9
![Page 10: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/10.jpg)
Firefox OS
10
![Page 11: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/11.jpg)
Firefox OS の動作する最小構成
11
ハードウェア 最小構成
CPU 1GHz, single-core, ARM Cortex A5 互換
ストレージ 汎用:オンボード256MB、スマホ:トータルで4G
システムRAM 128MB
ディスプレイ 262K色、HVGA、マルチタッチ(2点は必要)
GPU WebGLが利用可能、H.264動画を30FPSで描画可能
物理ボタン ホーム、電源、ボリューム
![Page 12: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/12.jpg)
Firefox OS のアーキテクチャ
12
![Page 13: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/13.jpg)
より詳細なアーキテクチャ
13
![Page 14: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/14.jpg)
Firefox OS アプリの実行
14日経コミュニケーション 201305 への寄稿原稿から引用
![Page 15: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/15.jpg)
Firefox OS アプリ
15
![Page 16: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/16.jpg)
HTML5でアプリが作成できる
• 音楽プレーヤアプリとそのソースコード
16
![Page 17: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/17.jpg)
アプリ=HTML+JS+アプリマニフェスト
17
Web サイト + マニフェストファイル でアプリになる!
![Page 18: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/18.jpg)
{ "launch_path":"/index.html", "installs_allowed_from":["*"], "version":"0.0.1", "name":"HelloCordova"}
18
![Page 19: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/19.jpg)
アプリの種類
• ホスト型アプリ • Webサイトから読み込んで実行 • オフライン対応アプリも実装可能
• パッケージ型アプリ • 従来のスマホアプリに対応 • 起動にネットワークを必要としない
19
パッケージ型アプリ
ホスト型アプリ
![Page 20: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/20.jpg)
権限によるアプリの分類
20
分類 説明
通常アプリ 通常のアプリ。ホスト型、パッケージ型ともにこの権限で動作する。
特権アプリ (Privileged)
パッケージ型アプリのみ。通常アプリより使用できるAPIが増える。コードレビューによる審査が行われ、Marketplaceによってデジタル署名が付加される。
認定アプリ (Certified)
パッケージ型アプリのみ。全てのAPIが利用できる。キャリア、もしくはそれに準じる主体のみが作成可能。システムアプリなどが対象。
![Page 21: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/21.jpg)
Web API
• アプリは Web API を通じて、資源やハードウェアへアクセスする
21
![Page 22: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/22.jpg)
通常アプリで利用できるAPI
22
分類 使用できるAPI
コミュニケーション Network Information API
ハードウェアアクセス
Ambient Light Sensor API, Battery Status API, Pointer Lock API, Proximity API, Screen Orientation API, Vibration API, Geolocation API
データ管理 Indexed DB, FileHandle API
その他Alarm API, Simple Push API, Web Notifications, App API, Web Activities, Web Payment API, WebAudio, WebGL, getUserMedia, Audio recording
Firefox OS version 1.3 での場合
![Page 23: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/23.jpg)
特権アプリで利用できるAPI
23
分類 使用できるAPI
コミュニケーション Network Information API, NFC API, SystemXHR
ハードウェアアクセス
Ambient Light Sensor API, Battery Status API, Pointer Lock API, Proximity API, Screen Orientation API, Vibration API, Web FM API, SpeakerManager API, Geolocation API
データ管理 Indexed DB, FileHandle API, Contacts API, Device Storage API, Browser API, TCP Socket API
その他Alarm API, Simple Push API, Web Notifications, App API, Web Activities, Web Payment API, WebAudio, WebGL, getUserMedia, Audio recording
Firefox OS version 1.3 での場合
![Page 24: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/24.jpg)
Web アクティビティ
• 他のアプリケーションの機能を呼び出すAPI • 例 • ギャラリーから画像を選ぶ • PDFを表示する • activietyRequest / activityResponse
24
![Page 25: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/25.jpg)
ギャラリーから画像選択
var activity = new MozActivity({ name: "pick", data: { type: "image/jpeg" }});
25
![Page 26: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/26.jpg)
レスポンスの処理
activity.onsuccess = function() {
var picture = this.result;
console.log("A picture has been retrieved");
};
!
activity.onerror = function() {
console.log(this.error);
};
26
![Page 27: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/27.jpg)
アプリの公開・配布
27
![Page 28: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/28.jpg)
配布方法
• ホスト型アプリの配布方法 • 通常のWebサイトと同様に公開 • パッケージ型アプリへの導線としての利用 • パッケージ型アプリの配布方法 • Firefox Marketplace での公開 • 自己配布も可能(通常アプリのみ) • 独自マーケットプレースを開設し、配布
28
パッケージ型アプリ
ホスト型アプリ
![Page 29: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/29.jpg)
• https://marketplace.firefox.com/ • Mozilla の提供するマーケットプレース • 特権アプリはここで公開できる • アプリ公開には審査が必要
29
![Page 30: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/30.jpg)
自己配布
• 通常アプリは自己配布できる
30
クリック
![Page 31: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/31.jpg)
アプリ開発環境
31
![Page 32: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/32.jpg)
開発環境:Firefox が動作する環境
32
ツール 説明
専用IDE なし
専用ライブラリ なし
デバッガ Firefox 付属の開発ツールを利用
プロファイラ Firefox 付属の開発ツールを利用
ネットワークモニタ Firefox 付属の開発ツールを利用
シミュレータ Firefox 付属の開発ツールにアドオンを追加
![Page 33: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/33.jpg)
アプリマネージャ
• 開発中のアプリとシミュレータの管理ツール • Firefox の標準機能
33
![Page 34: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/34.jpg)
Firefox OS シミュレータ
• Firefox OS のバージョンごとに独立したアドオンとして提供される
• アプリマネージャからインストール、起動
34
![Page 35: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/35.jpg)
デバッガの起動
• アプリマネージャから起動できる • 起動すると開発ツールのデバッガが起動する
35
![Page 36: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/36.jpg)
実機でのデバッグ
• シミュレータと同様のデバッグが可能 • 利用条件 • 端末側はFirefox OS 1.2 以上であれば利用可能 • デスクトップ側の条件 • ADB Helper Add-onのインストール • もしくはadbがインストールされていること
• USBで接続をすると自動認識される36
![Page 37: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/37.jpg)
Firefox OS の開発者メニュー
• メモリ使用量、FPS、ロード時間、再描画回数をOSの画面内に表示させられる
37
![Page 38: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/38.jpg)
Firefox Powertool: 電力使用量の測定
• https://github.com/JonHylands/fxos-powertool
38
![Page 39: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/39.jpg)
開発者向け端末• TELEC, JATEなどの認証予定 • http://www.mozilla.jp/firefox/os/devices/flame/ • スペック • MSM8210 Snapdragon, 1.2GHZ Dual core • 4.5 inch, FWVGA • 8GB メモリ • NFC, Bluetooth 3.0, 802.11 b/g/n • 5MP AF, flash (rear) / 2MP (front)
39
![Page 40: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/40.jpg)
Androidのアレって どうつくるんだろう?
40
![Page 41: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/41.jpg)
Foxroid
• http://foxroid.com/
41
![Page 42: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/42.jpg)
Foxroid Tips
• http://tasdg.co.jp/fxos/tips/
42
![Page 43: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/43.jpg)
レファレンス
43
![Page 44: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/44.jpg)
Firefox OS コミュニティ
• http://fxos.org/ • メーリングリストベースのユーザコミュニティ • 技術的な質問が可能
44
![Page 45: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/45.jpg)
Mozilla Developer Network
• https://developer.mozilla.org/
45
![Page 46: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/46.jpg)
MDN内のAppsセンター
• https://developer.mozilla.org/docs/Web/Apps • アプリ開発者向けドキュメント
46
![Page 47: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/47.jpg)
レファレンスアプリ• https://developer.mozilla.org/docs/Web/Apps/Reference_apps • アプリケーションの説明とサンプルコード集
47
![Page 48: 20140531 firefox os](https://reader034.vdocuments.mx/reader034/viewer/2022042715/559c047f1a28ab98188b45bc/html5/thumbnails/48.jpg)
システムアプリのソースコード
• https://github.com/mozilla-b2g/gaia
48