Firefox OS の便利な便利な
開発ツール
Firefox OS 勉強会 名古屋 2nd (2014/02/09)
Mozilla Japan テクニカルマーケティング 

清水智公 (nshimizu@mozilla-japan.org...
about:me

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

•

Mozilla Japan 

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

•
•

mozilla.jp の中の人

•

Twitter: @chikoski

•

http://slideshare.net/chik...
Firefox OS

4
Web 技術 (HTML, CSS, JavaScript) で

作成されたアプリ / UI

5
Firefox OS vs TAIZEN vs Android
Web
アプリ
Web
アプリ
Web
Framework
Web
アプリ

Packaged
Webアプリ

Web Platform
DeviceAPI

SystemAPI
...
2 方式のアプリ
Hosted

Web アプリ

•

Hosted (Web 読み込み型)

•
•
•

Packaged
Web アプリ

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

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

コミュニケーション

Network Information API, Bluetooth, Mobile Connection
API, Network Stats API, TCP Socket API, Teleph...
Web API(続き)

•

データ管理

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

•

その他

Alarm API, Simpl...
本日の内容

10
アプリマネージャ
https://developer.mozilla.org/docs/Mozilla/Firefox_OS/Using_the_App_Manager

11
もっと気楽に開発したい

12
やる気をそぐものたち

•

manifestやアイコンの用意が面倒

•

変更がすぐに反映されない

•
•
•

シミュレータに再インストールが必要
CSS の修正が面倒

console.log 以上のデバッグがしたい

13
最近よくやるパターン
1. アプリジェネレータを使ってスタブを生成
2. Firefox の上で Web サイトとして開発

•
•

スタイルエディタ×レスポンシブデザインビュー
JavaScript デバッガ

3. シミュレータの上で諸々...
楽な最初の一歩

15
アプリジェネレータ
https://marketplace.firefox.com/developers/docs/app_generator

•

アプリのテンプレート

•

内容物

•

volofile

•

各種ライブラリ

•

...
volojs:Grunt + Bower
http://volojs.org/

•

できること

•
•
•

JavaScript のライブラリ管理
定型的作業の自動化

nodejs が必要

17
volojs:ライブラリのインストール
% volo add jquery
% volo add backbone
# 依存するライブラリもインストールする
% volo add requirejs / 2
% volo add amdjs/b...
volojs:定型作業の自動化
https://github.com/volojs/volo/wiki/Creating-a-volofile

module.exports = {

% volo clean

clean: {

→ a.mi...
スタブで定義されているコマンド
% volo add <library>

# ライブラリを js/lib にインストール
% volo build

# 最適化されたものを www-built に作成
% volo ghdeploy

# w...
楽に変更を確認したい

21
ローカルのHTTPサーバ起動

•

volo serve で起動

•
•
•

www フォルダがドキュメントルート
http://localhost:8008/ でアクセスできる

スタブコードに含まれる volofile に設定済み!
変...
レスポンシブデザインビュー
https://developer.mozilla.org/docs/Tools/Responsive_Design_View

•
•

サイズの変更
タッチイベントの

エミュレーション

•

スクリーンショッ...
スタイルエディタ

CSS の記述がその場で反映される
→ 確認しながらスタイルの修正、記述ができる

24
console.log 以上のデバッグ

25
JavaScript デバッガ
https://developer.mozilla.org/ja/docs/Tools/Web_Console

•

ブレークポイントの指定、ステップ実行

•

変数値の確認

•

難読化されたソースコード...
ブレークポイントの設定

設定したい行をクリック

27
コールスタックの表示

ブレークした時点でのコールスタック

28
ウオッチ式:デバッグ用の式

•

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

•

任意の式を記述できる

•

×ボタンで式を削除

•

ブレーク時の環境で評価

•

値を変数ペインに出力

29
実機での同様にデバッグできます!
https://developer.mozilla.org/ja/docs/Mozilla/Firefox_OS/Debugging

開発ツールを使って、実機で動作中のコードを
リアルタイムにデバッグできる
...
まとめ

31
便利なツールを使って気軽にアプリを!

•

アプリジェネレータ

•

volojs

•

Firefox 標準付属の開発ツール

•

アプリマネージャ / Firefox OS シミュレータ

•

リモートデバッグ

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

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

34
Upcoming SlideShare
Loading in …5
×

Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」

1,108 views
989 views

Published on

Published in: Technology, News & Politics

Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」

  1. 1. Firefox OS の便利な便利な 開発ツール Firefox OS 勉強会 名古屋 2nd (2014/02/09) 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. Firefox OS 4
  5. 5. Web 技術 (HTML, CSS, JavaScript) で
 作成されたアプリ / UI 5
  6. 6. 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 6
  7. 7. 2 方式のアプリ Hosted
 Web アプリ • Hosted (Web 読み込み型) • • • Packaged Web アプリ 従来のWebと同じ権限 オフライン対応アプリも開発可能 Packaged (ダウンロード型) • 従来のスマホアプリに相当 • Hostedアプリの権限+ 追加権限 • マーケット審査 7
  8. 8. 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 8
  9. 9. 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 9
  10. 10. 本日の内容 10
  11. 11. アプリマネージャ https://developer.mozilla.org/docs/Mozilla/Firefox_OS/Using_the_App_Manager 11
  12. 12. もっと気楽に開発したい 12
  13. 13. やる気をそぐものたち • manifestやアイコンの用意が面倒 • 変更がすぐに反映されない • • • シミュレータに再インストールが必要 CSS の修正が面倒 console.log 以上のデバッグがしたい 13
  14. 14. 最近よくやるパターン 1. アプリジェネレータを使ってスタブを生成 2. Firefox の上で Web サイトとして開発 • • スタイルエディタ×レスポンシブデザインビュー JavaScript デバッガ 3. シミュレータの上で諸々確認 4. Android 端末の上で使用感を試す 14
  15. 15. 楽な最初の一歩 15
  16. 16. アプリジェネレータ https://marketplace.firefox.com/developers/docs/app_generator • アプリのテンプレート • 内容物 • volofile • 各種ライブラリ • HTML, JS, CSS, アイコン, manifest.webapp 16
  17. 17. volojs:Grunt + Bower http://volojs.org/ • できること • • • JavaScript のライブラリ管理 定型的作業の自動化 nodejs が必要 17
  18. 18. volojs:ライブラリのインストール % volo add jquery % volo add backbone # 依存するライブラリもインストールする % volo add requirejs / 2 % volo add amdjs/backbone 18
  19. 19. volojs:定型作業の自動化 https://github.com/volojs/volo/wiki/Creating-a-volofile module.exports = { % volo clean clean: { → a.min.js が削除 summary: 'removes a.min.js', run: 'v.rm a.min.js' } }; volofile に記述することで、 コマンドを定義できる 19
  20. 20. スタブで定義されているコマンド % volo add <library>
 # ライブラリを js/lib にインストール % volo build
 # 最適化されたものを www-built に作成 % volo ghdeploy
 # www-built の内容を github に配置 20
  21. 21. 楽に変更を確認したい 21
  22. 22. ローカルのHTTPサーバ起動 • volo serve で起動 • • • www フォルダがドキュメントルート http://localhost:8008/ でアクセスできる スタブコードに含まれる volofile に設定済み! 変更の反映がブラウザのリロードで済む → 開発効率が激烈にアップ! 22
  23. 23. レスポンシブデザインビュー https://developer.mozilla.org/docs/Tools/Responsive_Design_View • • サイズの変更 タッチイベントの
 エミュレーション • スクリーンショットの 撮影 23
  24. 24. スタイルエディタ CSS の記述がその場で反映される → 確認しながらスタイルの修正、記述ができる 24
  25. 25. console.log 以上のデバッグ 25
  26. 26. JavaScript デバッガ https://developer.mozilla.org/ja/docs/Tools/Web_Console • ブレークポイントの指定、ステップ実行 • 変数値の確認 • 難読化されたソースコードの整形 26
  27. 27. ブレークポイントの設定 設定したい行をクリック 27
  28. 28. コールスタックの表示 ブレークした時点でのコールスタック 28
  29. 29. ウオッチ式:デバッグ用の式 • 変数ペインに式を追加できる • 任意の式を記述できる • ×ボタンで式を削除 • ブレーク時の環境で評価 • 値を変数ペインに出力 29
  30. 30. 実機での同様にデバッグできます! https://developer.mozilla.org/ja/docs/Mozilla/Firefox_OS/Debugging 開発ツールを使って、実機で動作中のコードを リアルタイムにデバッグできる 30
  31. 31. まとめ 31
  32. 32. 便利なツールを使って気軽にアプリを! • アプリジェネレータ • volojs • Firefox 標準付属の開発ツール • アプリマネージャ / Firefox OS シミュレータ • リモートデバッグ 32
  33. 33. Mozilla Developer Network https://developer.mozilla.org/ 33
  34. 34. ご清聴ありがとうございました 34

×