Firefox OS 勉強会 名古屋2nd 「便利な便利な開発ツール」
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 927 views

 

Statistics

Views

Total Views
927
Views on SlideShare
833
Embed Views
94

Actions

Likes
4
Downloads
6
Comments
0

2 Embeds 94

https://twitter.com 92
http://www.slideee.com 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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/chikoski/ 2013年4月より現職 3
    • 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 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
    • 2 方式のアプリ Hosted
 Web アプリ • Hosted (Web 読み込み型) • • • Packaged Web アプリ 従来のWebと同じ権限 オフライン対応アプリも開発可能 Packaged (ダウンロード型) • 従来のスマホアプリに相当 • Hostedアプリの権限+ 追加権限 • マーケット審査 7
    • 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
    • アプリジェネレータ https://marketplace.firefox.com/developers/docs/app_generator • アプリのテンプレート • 内容物 • volofile • 各種ライブラリ • HTML, JS, CSS, アイコン, manifest.webapp 16
    • volojs:Grunt + Bower http://volojs.org/ • できること • • • JavaScript のライブラリ管理 定型的作業の自動化 nodejs が必要 17
    • volojs:ライブラリのインストール % volo add jquery % volo add backbone # 依存するライブラリもインストールする % volo add requirejs / 2 % volo add amdjs/backbone 18
    • 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
    • スタブで定義されているコマンド % 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
    • スタイルエディタ CSS の記述がその場で反映される → 確認しながらスタイルの修正、記述ができる 24
    • 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
    • Mozilla Developer Network https://developer.mozilla.org/ 33
    • ご清聴ありがとうございました 34