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