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勉強会6th 2014/02/16
Mozilla Japan テクニカルマーケティング
清水智公 (nshimizu@mozilla-japan.org)
about:me

2
清水智公(しみずのりただ)

•

Mozilla Japan 

テクニカルマーケティング

•
•

mozilla.jp の中の人

•

Twitter: @chikoski

•

http://slideshare.net/chik...
about:mozilla

4
FFiirreeffooxx  を


よろしくね!
6
7
本日の内容

9
Firefox OS の概観

•

Firefox OS ってなに?

•

Firefox OS のアプリって?

•

おそいんじゃないの?

•

アプリはどこで公開できるの?

•

開発環境はどうやってつくるの?

•

情報源には...
Firefox OS ってなに?

11
12
13
背景:
従来のアプリプラットフォームの問題

•

OS 毎のアプリ開発

•

言語、API は OS 依存

•

UI に対する厳格な規則

•

エコシステムへの制限

•

アプリ開発者確保の困難さ

14
Web こそがプラットフォーム

•

オープンで標準化された技術

•

ベンダ非依存

•

自由、持続性

•

マルチデバイス対応

•

多くの開発者

15
アプリ / UI をWeb技術で!

16
多数企業との共同開発・製品化

•

主要 18 キャリアが賛同

•

チップ&端末メーカー

•

Qualcomm, ARM

•

ZTE, Alcatel, LG, Huawei,
Sony

•

Foxconn, Panasoni...
各国で順次展開中
•

スペイン、ポーランド

•

コロンビア、ベネズエラ

•

ドイツ、ブラジル、

メキシコ、ペルー、ウルグアイ

•

ハンガリー、ギリシャ、

セルビア、モンテネグロ

•

イタリア

19
発売中の端末
•

商用端末3機種

•
•

Alcatel One Touch Fire

•
•

ZTE Open

LG Fireweb

開発端末 / PC

•

Geeksphone Keon /Peak

•

APC (VI...
Firefox OS 端末販売状況

•

ベネズエラ(Telefónica@2013/10)

スマートフォン販売の12%

•

コロンビア(Telefónica@2013/10)

スマートフォン販売の9%

•

ウルグアイ(Movis...
12週ペースで更新中
ベース

リリース日

1.0.1

Firefox 18

2013/07/02

1.1

Firefox 18

2013/10/21

1.2

Firefox 26

2013/12/09

1.3

Firef...
Firefox OS アプリって?

23
全部 Web 技術でできてます!

24
HTML + CSS + JS + マニフェスト

Web サイト + マニフェストファイル
でアプリになる!

25
2 方式のアプリ
Hosted

Web アプリ

•

Hosted (Web 読み込み型)

•
•
•

Packaged
Web アプリ

従来のWebと同じ権限
オフライン対応アプリも開発可能

Packaged (ダウンロード型)
...
Web API

•

Firefox OS の管理する

リソースに対する操作

•
•

通知のコントロール

•
•

ハードウェアの操作

etc

JavaScript から呼び出す

28
Web API(つづき)
•

コミュニケーション

Network Information API, Bluetooth, Mobile Connection
API, Network Stats API, TCP Socket API, T...
Web API(つづき)

•

データ管理

FileHandle API, IndexedDB, Contacts API, Device
Storage API, Settings API

•

その他

Alarm API, Simp...
権限によるアプリの分類
Hosted

Web アプリ

•

Hosted (Web 読み込み型)

•

Packaged (ダウンロード型)

•
•
Packaged
Web アプリ

Privileged(特権付き)
Certified...
日経コミュニケーション 201305 への寄稿原稿から引用
32
権限と利用できるAPI
https://developer.mozilla.org/Apps/Developing/App_permissions

33
アプリマネージャからも確認できます

34
Web Activities:アプリ間連携

•

インテント

•

利用方法

•

他のアプリの呼び出し

•

アクティビティへの対応

•

ハンドラを書く

•

アプリへの登録
35
おそいんじゃないの?

36
ZTE Open

•

Qualcomm MSM7225A 1.0Ghz

•

256 MB (RAM)

•

Screen 3.5" HVGA

•

Camera 2 MP (back)

•

Battery 1200 mAh

3...
Firefox OS vs TAIZEN vs Android
Web
アプリ
Web
アプリ
Web
Framework
Web
アプリ

Packaged
Webアプリ

Web Platform
DeviceAPI

SystemAPI
...
JS の高速化

39
http://emscripten.org

•

C / C++ のソースコードをJavaScript に変換するツール

•
•
•

C / C++ の資産を利用可能
高速なJavaScriptコードの生成が可能

利用例:Unreal ...
アプリを
どこで公開できるの?

41
配布方法

•

ホスト型アプリ

•
•
•

自由に公開できます
さくら VPS, heroku, github pages, etc

パッケージ型アプリ

•

Firefox Marketplace

•

自己配布 / 自分でのマー...
https://marketplace.firefox.com/

•

Mozilla の提供するマーケットプレース

•

特権付きアプリを提供するにはここ

•

アプリ公開には審査が必要

•

ポルノではないか、などなど

•

特権付...
インストールサイトを作り自己配布
https://developer.mozilla.org/ja/docs/Web/API/Apps.install

クリック

44
アプリ開発環境は
どうつくるの?

45
アプリ開発の流れ

•

Web サイトと同様の開発

•

manifest ファイルを用意

•
•
•

アプリのメタ情報
JSON 形式

シミュレータ / 実機テスト

47
Firefox OS のアプリ開発環境

•

専用の IDE、ライブラリはない

•

Firefox のインストールで開発が始められる

•

シミュレータはFirefoxのアドオンとして提供

•

デバッガはFirefoxの標準機能とし...
アプリマネージャ
https://developer.mozilla.org/docs/Mozilla/Firefox_OS/Using_the_App_Manager

•

Firefox OSアプリ開発・管理ツール

•

標準で利用でき...
アプリマネージャ
https://developer.mozilla.org/docs/Mozilla/Firefox_OS/Using_the_App_Manager

50
Firefox OS シミュレータ:

アプリマネージャのアドオン

ADB Helper もインストールしておくと実機でのデバッグに便利

51
端末パネル:接続中の端末を制御

52
許可設定で権限を確認できる

53
Firefox OS シミュレータ

•

マウスカーソルが指

•
•
•

クリックでタップ

•
ホームボタン

ドラッグでスワイプ

長押しでロングタップ

ホームボタン長押しで、

アプリきりかえ&停止

54
開発ツール

クリックで開発ツールが起動し、そのアプリをデバッグできる

55
インスペクタ

シミュレータの画面をクリックして要素を選択できる

56
スタイルエディタ:

確認しながらスタイルの修正

CSS への変更が反映される

57
Web コンソール
https://developer.mozilla.org/ja/docs/Tools/Web_Console

•

Firebug のコンソールに相当するツール

•

エラー、警告、ログの出力

•

JavaScri...
JavaScriptデバッガ

59
デバッガ:ブレークポイントの設定

処理を中断したい行をクリック

60
デバッガ:ウォッチ式の追加

•

変数ペインに式を追加できる

•

任意の式を記述できる

•

×ボタンで式を削除

•

ブレーク時の環境で評価

•

値を変数ペインに出力

61
プロファイラ:ボトルネックの発見

記録開始→処理の実行→記録停止→結果の分析

62
実機でもシミュレータと同様に

デバッグできる

•

端末側の条件

•
•
•

Firefox OS 1.2 以上であること
Geeksphone はイメージが公開されている

デスクトップ側の条件

•

ADB Helper Add-...
Firefox OS端末がなくても大丈夫

•

FirefoxのインストールされたAndroid端末で

実機同様のテストが可能

•
•
•

アプリのインストールができる
ほとんどのWeb APIは動作する

リモートデバッグ:

シミュ...
リモートデバッグ
https://developer.mozilla.org/docs/Tools/Remote_Debugging

開発ツールを使って、Android端末で動作するコードを
リアルタイムにデバッグできる

65
情報源は何があるの?

66
Firefox OS コミュニティ
http://fxos.org/

67
Mozilla Developer Network
https://developer.mozilla.org/

68
Firefox Marketplace Developer Hub
https://marketplace.firefox.com/developers/

69
まとめ

70
今日の内容

•

Firefox OS ってなに?

•

Firefox OS のアプリって?

•

おそいんじゃないの?

•

アプリはどこで公開できるの?

•

開発環境はどうやってつくるの?

•

情報源にはなにがあるの?
7...
まとめ

•
•
•
•
•
•

Firefox OS は標準化されオープンなOSです
Web 技術のみでFirefox OS アプリを作れます
そんなに遅くありません
アプリはMarketplaceで公開します。自己配布も可
Firefox...
コミュニティメンバー募集中!
http://fxos.org/

73
翻訳者と記事執筆者を募集してます!
https://developer.mozilla.org/

74
Firefox OS コードリーディング #4
2014/02/22 @ Mozilla Japan オフィス

75
ご清聴ありがとうございました

76
関東Firefox OS勉強会6th「Firefox OS」
関東Firefox OS勉強会6th「Firefox OS」
関東Firefox OS勉強会6th「Firefox OS」
関東Firefox OS勉強会6th「Firefox OS」
Upcoming SlideShare
Loading in …5
×

関東Firefox OS勉強会6th「Firefox OS」

5,847 views

Published on

関東Firefox OS 6thでお話しした、Firefox OSの概要です。アプリ開発部分を中心に、Firefox OSの状況について概観できます。

Published in: Technology
  • Be the first to comment

関東Firefox OS勉強会6th「Firefox OS」

  1. 1. Firefox OS 関東Firefox OS勉強会6th 2014/02/16 Mozilla Japan テクニカルマーケティング 清水智公 (nshimizu@mozilla-japan.org)
  2. 2. about:me 2
  3. 3. 清水智公(しみずのりただ) • Mozilla Japan 
 テクニカルマーケティング • • mozilla.jp の中の人 • Twitter: @chikoski • http://slideshare.net/chikoski/ 2013年4月より現職 3
  4. 4. about:mozilla 4
  5. 5. FFiirreeffooxx を よろしくね!
  6. 6. 6
  7. 7. 7
  8. 8. 本日の内容 9
  9. 9. Firefox OS の概観 • Firefox OS ってなに? • Firefox OS のアプリって? • おそいんじゃないの? • アプリはどこで公開できるの? • 開発環境はどうやってつくるの? • 情報源にはなにがあるの? 10
  10. 10. Firefox OS ってなに? 11
  11. 11. 12
  12. 12. 13
  13. 13. 背景: 従来のアプリプラットフォームの問題 • OS 毎のアプリ開発 • 言語、API は OS 依存 • UI に対する厳格な規則 • エコシステムへの制限 • アプリ開発者確保の困難さ 14
  14. 14. Web こそがプラットフォーム • オープンで標準化された技術 • ベンダ非依存 • 自由、持続性 • マルチデバイス対応 • 多くの開発者 15
  15. 15. アプリ / UI をWeb技術で! 16
  16. 16. 多数企業との共同開発・製品化 • 主要 18 キャリアが賛同 • チップ&端末メーカー • Qualcomm, ARM • ZTE, Alcatel, LG, Huawei, Sony • Foxconn, Panasonic 18
  17. 17. 各国で順次展開中 • スペイン、ポーランド • コロンビア、ベネズエラ • ドイツ、ブラジル、
 メキシコ、ペルー、ウルグアイ • ハンガリー、ギリシャ、
 セルビア、モンテネグロ • イタリア 19
  18. 18. 発売中の端末 • 商用端末3機種 • • Alcatel One Touch Fire • • ZTE Open LG Fireweb 開発端末 / PC • Geeksphone Keon /Peak • APC (VIA) Paper /Rock 20
  19. 19. Firefox OS 端末販売状況 • ベネズエラ(Telefónica@2013/10)
 スマートフォン販売の12% • コロンビア(Telefónica@2013/10)
 スマートフォン販売の9% • ウルグアイ(Movistar@2013/12)
 スマートフォン販売の30% 21
  20. 20. 12週ペースで更新中 ベース リリース日 1.0.1 Firefox 18 2013/07/02 1.1 Firefox 18 2013/10/21 1.2 Firefox 26 2013/12/09 1.3 Firefox 28 2014/03/17 22
  21. 21. Firefox OS アプリって? 23
  22. 22. 全部 Web 技術でできてます! 24
  23. 23. HTML + CSS + JS + マニフェスト Web サイト + マニフェストファイル でアプリになる! 25
  24. 24. 2 方式のアプリ Hosted
 Web アプリ • Hosted (Web 読み込み型) • • • Packaged Web アプリ 従来のWebと同じ権限 オフライン対応アプリも開発可能 Packaged (ダウンロード型) • 従来のスマホアプリに相当 • Hostedアプリの権限+ 追加権限 • マーケット審査 26
  25. 25. Web API • Firefox OS の管理する
 リソースに対する操作 • • 通知のコントロール • • ハードウェアの操作 etc JavaScript から呼び出す 28
  26. 26. Web API(つづき) • コミュニケーション
 Network Information API, Bluetooth, Mobile Connection API, Network Stats API, TCP Socket API, Telephony, WebSMS, WiFi Information API • ハードウェアアクセス
 Ambient Light Sensor API, Battery Status API, Geolocation API, Pointer Lock API, Proximity API, Device Orientation API, Screen Orientation API, Vibration API, WebFM API, Camera API, Power Management API 29
  27. 27. Web API(つづき) • データ管理
 FileHandle API, IndexedDB, Contacts API, Device Storage API, Settings API • その他
 Alarm API, Simple Push, Web Notifications, Apps API, Web Activities, WebPayment API, Browser API, Idle API, Permissions API, Time/Clock API 30
  28. 28. 権限によるアプリの分類 Hosted
 Web アプリ • Hosted (Web 読み込み型) • Packaged (ダウンロード型) • • Packaged Web アプリ Privileged(特権付き) Certified(認証済み) • 認証された開発者のみ • キャリアなど 31
  29. 29. 日経コミュニケーション 201305 への寄稿原稿から引用 32
  30. 30. 権限と利用できるAPI https://developer.mozilla.org/Apps/Developing/App_permissions 33
  31. 31. アプリマネージャからも確認できます 34
  32. 32. Web Activities:アプリ間連携 • インテント • 利用方法 • 他のアプリの呼び出し • アクティビティへの対応 • ハンドラを書く • アプリへの登録 35
  33. 33. おそいんじゃないの? 36
  34. 34. ZTE Open • Qualcomm MSM7225A 1.0Ghz • 256 MB (RAM) • Screen 3.5" HVGA • Camera 2 MP (back) • Battery 1200 mAh 37
  35. 35. Firefox OS vs TAIZEN vs Android Web アプリ Web アプリ Web Framework Web アプリ Packaged Webアプリ Web Platform DeviceAPI SystemAPI Native アプリ Native Framework DeviceAPI OSP WebRT etc... WebKit X.org etc. ブラウザ アプリ Java アプリ Native Library ! Native Dalvik ! Interface Android
 App Framework Runtime WebKit SGL etc. Gecko コアサービス ライブラリ カーネル & HAL カーネル & HAL カーネル & HAL 38
  36. 36. JS の高速化 39
  37. 37. http://emscripten.org • C / C++ のソースコードをJavaScript に変換するツール • • • C / C++ の資産を利用可能 高速なJavaScriptコードの生成が可能 利用例:Unreal Engine 3 の移植 • 100万行以上のC & Open GL コードを4、5日で • http://www.unrealengine.com/html5/  40
  38. 38. アプリを どこで公開できるの? 41
  39. 39. 配布方法 • ホスト型アプリ • • • 自由に公開できます さくら VPS, heroku, github pages, etc パッケージ型アプリ • Firefox Marketplace • 自己配布 / 自分でのマーケット開設可 42
  40. 40. https://marketplace.firefox.com/ • Mozilla の提供するマーケットプレース • 特権付きアプリを提供するにはここ • アプリ公開には審査が必要 • ポルノではないか、などなど • 特権付きアプリにはコードレビューが入る 43
  41. 41. インストールサイトを作り自己配布 https://developer.mozilla.org/ja/docs/Web/API/Apps.install クリック 44
  42. 42. アプリ開発環境は どうつくるの? 45
  43. 43. アプリ開発の流れ • Web サイトと同様の開発 • manifest ファイルを用意 • • • アプリのメタ情報 JSON 形式 シミュレータ / 実機テスト 47
  44. 44. Firefox OS のアプリ開発環境 • 専用の IDE、ライブラリはない • Firefox のインストールで開発が始められる • シミュレータはFirefoxのアドオンとして提供 • デバッガはFirefoxの標準機能として提供 • プロファイラ、ネットワークモニタも
 標準標準機能として提供される 48
  45. 45. アプリマネージャ https://developer.mozilla.org/docs/Mozilla/Firefox_OS/Using_the_App_Manager • Firefox OSアプリ開発・管理ツール • 標準で利用できるようになった • Firefox 26 以降 • 複数バージョンのシミュレータを利用可能 • 開発ツールを利用したテスト、デバッグ可能 49
  46. 46. アプリマネージャ https://developer.mozilla.org/docs/Mozilla/Firefox_OS/Using_the_App_Manager 50
  47. 47. Firefox OS シミュレータ:
 アプリマネージャのアドオン ADB Helper もインストールしておくと実機でのデバッグに便利 51
  48. 48. 端末パネル:接続中の端末を制御 52
  49. 49. 許可設定で権限を確認できる 53
  50. 50. Firefox OS シミュレータ • マウスカーソルが指 • • • クリックでタップ • ホームボタン ドラッグでスワイプ 長押しでロングタップ ホームボタン長押しで、
 アプリきりかえ&停止 54
  51. 51. 開発ツール クリックで開発ツールが起動し、そのアプリをデバッグできる 55
  52. 52. インスペクタ シミュレータの画面をクリックして要素を選択できる 56
  53. 53. スタイルエディタ:
 確認しながらスタイルの修正 CSS への変更が反映される 57
  54. 54. Web コンソール https://developer.mozilla.org/ja/docs/Tools/Web_Console • Firebug のコンソールに相当するツール • エラー、警告、ログの出力 • JavaScriptの実行 58
  55. 55. JavaScriptデバッガ 59
  56. 56. デバッガ:ブレークポイントの設定 処理を中断したい行をクリック 60
  57. 57. デバッガ:ウォッチ式の追加 • 変数ペインに式を追加できる • 任意の式を記述できる • ×ボタンで式を削除 • ブレーク時の環境で評価 • 値を変数ペインに出力 61
  58. 58. プロファイラ:ボトルネックの発見 記録開始→処理の実行→記録停止→結果の分析 62
  59. 59. 実機でもシミュレータと同様に
 デバッグできる • 端末側の条件 • • • Firefox OS 1.2 以上であること Geeksphone はイメージが公開されている デスクトップ側の条件 • ADB Helper Add-onのインストール • もしくはadbがインストールされていること 63
  60. 60. Firefox OS端末がなくても大丈夫 • FirefoxのインストールされたAndroid端末で
 実機同様のテストが可能 • • • アプリのインストールができる ほとんどのWeb APIは動作する リモートデバッグ:
 シミュレータと同様のデバッグが可能 64
  61. 61. リモートデバッグ https://developer.mozilla.org/docs/Tools/Remote_Debugging 開発ツールを使って、Android端末で動作するコードを リアルタイムにデバッグできる 65
  62. 62. 情報源は何があるの? 66
  63. 63. Firefox OS コミュニティ http://fxos.org/ 67
  64. 64. Mozilla Developer Network https://developer.mozilla.org/ 68
  65. 65. Firefox Marketplace Developer Hub https://marketplace.firefox.com/developers/ 69
  66. 66. まとめ 70
  67. 67. 今日の内容 • Firefox OS ってなに? • Firefox OS のアプリって? • おそいんじゃないの? • アプリはどこで公開できるの? • 開発環境はどうやってつくるの? • 情報源にはなにがあるの? 71
  68. 68. まとめ • • • • • • Firefox OS は標準化されオープンなOSです Web 技術のみでFirefox OS アプリを作れます そんなに遅くありません アプリはMarketplaceで公開します。自己配布も可 Firefox+αで開発環境はそろいます コミュニティ、MDNなどで情報を得られます 72
  69. 69. コミュニティメンバー募集中! http://fxos.org/ 73
  70. 70. 翻訳者と記事執筆者を募集してます! https://developer.mozilla.org/ 74
  71. 71. Firefox OS コードリーディング #4 2014/02/22 @ Mozilla Japan オフィス 75
  72. 72. ご清聴ありがとうございました 76

×