to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

iOS6から使えるWebインスペクタは、もともとAndroidにも。設定も簡単。

こんにちは。x-fitチーム・エバンジェリストの渡辺です。
 
iOS6がリリースされ、Webインスペクタが使えるようになりました。とても簡単に使えるようですね。翻って、Androidはどうなっているのかというと、Android4.0以降であれば、Chromeを使ってリモートデバッグを行うことができます。今日はそのAndroidでのWebサイトリモートデバッグの方法をご紹介します。Windows7上で行いましたが、基本的にはそれ以外のOSでも同じようにできると思いますので参考にしてください。
 
 
 

AndroidSDKの導入

リモートデバッグを行うには、AndroidSDKが必要です。ここからダウンロードできますので、インストールしましょう。
 

ADB、USBドライバの導入

リモートデバッグでは、adb(Android Debug Bridge)というツールが必要になりますが、SDKの導入だけではインストールされません。SDKをインストールした後、SDKManagerを起動して、Toolsの中にある、Android SDK Tools、Android SDK Platform-toolsを選択してください。
 
Android SDK Tools、Android SDK Platform-toolsを選択
 
USBドライバは、Extrasの中に、Google USB Driverがありますので、それを選択します。install packagesボタンを押して、インストールします。adbはのちほどコマンドとして使うようになりますので、必要に応じて、adb.exeのパス(<SDK_INSTALL_DIR>\platform-tools)を環境変数に加えておきましょう。
 
Extrasの中に、Google USB Driverがあります
 

AndroidをUSBでPCとつなぐ

ドライバがあれば、デバイスを自動的に認識すると思います。もし認識しない場合は、デバイスマネージャから、Androidのドライバをアップデートします。usbドライバは、<SDK_INSTALL_DIR>\extras\google\usb_driverにありますので、パスを指定してインストールしてください。正しくデバイスとして認識していれば、adbコマンドで以下のように実行すると、認識されたデバイスが出力されます。(XXXX・・・の部分は、ユニークなIDが出力されるようです)
 
adb device
List of devices attached
XXXXXXXXXXXXXXXX        device

Android側で、USBデバックを有効にする

Android上で、USBデバックを有効にする設定を行います。設定個所は2か所。設定アプリのシステム>開発者オプション>USBデバッグと、Chromeの設定>デベロッパーツール>USBウェブデバッグを有効化です。
 
設定アプリのシステム>開発者オプション>USBデバッグ Chromeの設定>デベロッパーツール>USBウェブデバッグを有効化
 

Androidでデバッグ対象のページを開く

デバッグ対象のページを開いておきます。
 

adbコマンドの実行

PC上で、以下のコマンドを実行します。
 
adb forward tcp:9222 localabstract:chrome_devtools_remote
 

PCでChromeを使ってデバッグする

PCでChromeを起動し、localhost:9222にアクセスします。
 
すると、Androidで開いているページの一覧が表示されますので、デバッグ対象のページを選択します。
 
デバッグ対象のページを選択
 
すると、Chromeで見慣れたdeveloperツールの画面が表示され、デバッグが可能になります。
 
developerツールの画面
 
PCでのデバッグと同じように、ソース上の任意の部分を選択すると、ページ上の該当部分がハイライトしたり、CSSなどを書き換えて表示を確認したり、といったことが可能になります。
 
ページ上の該当部分がハイライト
 
実機を使ったWebサイトのリモートデバッグでは、Adobe Shadow(Edge Inspectと名前が変わったようですね)のようなツールもありますが、iOSのwebインスペクタが出たことで、Android、iOSともに、ツールなしでもリモートデバッグできる環境は一通り整ったことになりますね。
 
Webサイトの表示検証には実機での確認が欠かせません。x-fitは、国内全スマートフォンでの実機表示確認済みのスマートフォン向けWebサイト構築ライブラリです。是非製品情報デモをご覧ください。
 
 
タグ: 
このエントリーをはてなブックマークに追加