Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
- 1. Firefox OS の便利な便利な 開発ツール Firefox OS 勉強会 名古屋 2nd (2014/02/09) Mozilla Japan テクニカルマーケティング 清水智公 (nshimizu@mozilla-japan.org)
- 2. about:me 2
- 3. 清水智公（しみずのりただ） • Mozilla Japan テクニカルマーケティング • • mozilla.jp の中の人 • Twitter: @chikoski • http://slideshare.net/chikoski/ 2013年4月より現職 3
- 4. Firefox OS 4
- 5. Web 技術 (HTML, CSS, JavaScript) で 作成されたアプリ / UI 5
- 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. 2 方式のアプリ Hosted Web アプリ • Hosted (Web 読み込み型) • • • Packaged Web アプリ 従来のWebと同じ権限 オフライン対応アプリも開発可能 Packaged (ダウンロード型) • 従来のスマホアプリに相当 • Hostedアプリの権限+ 追加権限 • マーケット審査 7
- 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. 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
- 12. もっと気楽に開発したい 12
- 14. 最近よくやるパターン 1. アプリジェネレータを使ってスタブを生成 2. Firefox の上で Web サイトとして開発 • • スタイルエディタ×レスポンシブデザインビュー JavaScript デバッガ 3. シミュレータの上で諸々確認 4. Android 端末の上で使用感を試す 14
- 15. 楽な最初の一歩 15
- 16. アプリジェネレータ https://marketplace.firefox.com/developers/docs/app_generator • アプリのテンプレート • 内容物 • volofile • 各種ライブラリ • HTML, JS, CSS, アイコン, manifest.webapp 16
- 17. volojs：Grunt + Bower http://volojs.org/ • できること • • • JavaScript のライブラリ管理 定型的作業の自動化 nodejs が必要 17
- 18. volojs：ライブラリのインストール % volo add jquery % volo add backbone # 依存するライブラリもインストールする % volo add requirejs / 2 % volo add amdjs/backbone 18
- 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. スタブで定義されているコマンド % volo add <library> # ライブラリを js/lib にインストール % volo build # 最適化されたものを www-built に作成 % volo ghdeploy # www-built の内容を github に配置 20
- 21. 楽に変更を確認したい 21
- 22. ローカルのHTTPサーバ起動 • volo serve で起動 • • • www フォルダがドキュメントルート http://localhost:8008/ でアクセスできる スタブコードに含まれる volofile に設定済み！ 変更の反映がブラウザのリロードで済む → 開発効率が激烈にアップ！ 22
- 31. まとめ 31
- 32. 便利なツールを使って気軽にアプリを！ • アプリジェネレータ • volojs • Firefox 標準付属の開発ツール • アプリマネージャ / Firefox OS シミュレータ • リモートデバッグ 32