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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です