FirefoxOSアプリをリモートインスペクションする。

Firefox OSの開発環境が少しずつリッチになっています。
だいぶ前に個人的な趣味として試していたのですが、エントリを書いていなかったのでメモをアップします。

■必要なもの

・PC:Macが楽ですね。
・Firefoxブラウザ(PC上):バージョン26以上必須
・Firefox OS実機 or Firefox OSシミュレータ
 ★今回は実機を用いる場合の手順を中心に紹介します。ただ、シミュレータでもほぼ同様の手順です。

■操作の流れ

  • (1)必要なソフトウェアをインストールする
  • (2)アプリマネージャを起動する
  • (3)リモートインスペクションする

■具体的な手順

  • (1)必要なソフトウェアをインストールする
    最初に、以下を確認します。
    ・PCと実機がADB接続できること
     (必要に応じて、PCに端末のドライバーをインストールしておくこと&実機のUSBデバッグ設定を有効にしておくこと)
     ※実機のUSBデバッグ設定は、以下にあります。
      Settings->More Information->Developer->Remote DebuggingのチェックをONにする。

     ・PCのFirefoxブラウザから、アドオンのインストールページにアクセスします。
     実機がある場合は、ADB HelperのみインストールすればOKです。
     ただし、Simulatorも入れておいた方が便利だと思います。
    app2

  • (2)アプリマネージャを起動する
    PCのFirefoxブラウザから
    ツール->Web開発->アプリマネージャを選択します。

    app1

 アプリマネージャが起動します。
 PCと実機をUSBケーブルで接続した状態であれば、アプリマネージャの下側に
 デバイス名(以下の例では、full_keon)が表示されています。それをクリックします。

app3
 すると、実機側では、「リモートデバッグのための接続を許可してよいか?」の確認ダイアログが表示されるので、「OK」を選択します。これで下準備は完了です。

0

  • (3)リモートインスペクションする
    あとは適当にCSSをいじくると、実機上にインストールしたFirefoxOSアプリの画面にリアルタイムに反映されるといったことをできます。

    【CSS編集前】

    1-1a1-1b
    【CSS編集後】
    1-2a1-2b

このエントリーをはてなブックマークに追加
はてなブックマーク - FirefoxOSアプリをリモートインスペクションする。
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
[`tweetmeme` not found]

korodroid の紹介

Android大好きな開発者です。 Twitterをやっています(@korodroid)。お気軽にフォローお願いします。 セカイフォン/SekaiPhone(MWC 2015/CES 2015/IFA 2013/MWC 2013 Exhibition、Droidcon Stockholm 2014, Spain 2014, Amsterdam 2013、Paris 2013、London 2012、ABC 2014 Winter Speaker、GDD 2011 Tokyo基調講演デモ、Googleタブレットアプリコンテスト5位入賞、i*deal Competition 2010 finalist) Androidプログラミング入門改訂2版(共著)、Android APIプログラミングリファレンス(共著)、Androidテスト技法(共著)、iPhone&Android通知機能プログラミング徹底ガイド(共著)著者。ニッポン放送のapp10.jpに出演させていただきました。 神原 健一
カテゴリー: FirefoxOS パーマリンク