Android の Chrome で Web のフロントエンドがどういう挙動をするかデバッグする時なんかに便利。特に Javascript でスマホ限定のイベントを扱うとかね。

今回は Android の Chrome で加速度センサーの値をリアルタイムで PC 画面に出力してみる。

マニュアルは以下より。
https://developer.chrome.com/devtools/docs/remote-debugging

01. 必要なもの

Chrome の入ってる Android 実機
Chrome の入ってる Mac (もちろん Windows でもドライバをインストールすればできる)
エディタ (Bracketsなんかだとライブリロードが標準でついていて面白い)
Terminal (ローカルサーバーを立てるため)

02. Android の準備

設定 > 開発者向けオプション > USBデバッグを ON にしておく

03. ローカルサーバーの構築

まずは Terminal を起動。以下のコマンドを打ち込み、Desktop にローカルサーバーを立てる。

mkdir ~/Desktop/test & cd ~/Desktop/test

次に ~/Desktop/test/ に index.html を作成。

index.html

<!doctype html>
<html lang="en">
    <head>
    <meta charset="UTF-8"/>
    <title>USB Debugging</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

再び Terminal で次を入力。するとブラウザで 127.0.0.1:8000 にアクセスすると無事 Hello World! されているはず。

python -m SimpleHTTPServer 8000

ちなみに Livereload ができる方は 8000 番ポートでローカルサーバーを立てると爆速デバッグが可能になる。
(↓ Python で簡単に Livereload )
https://github.com/lepture/python-livereload

04. Android で見てみる

ここで PC と Android を USB で繋ぐ。Android 側で何か出るかもしれないが、許可しておく。

次に以下 URL に Chrome でアクセス。
chrome://inspect/#devices

こんな感じの画面が表示されただろうか。自分の端末が表示されていればOK。

ここで「Open tab with url」に適当な URL を打ち込めば Android 側の Chrome でその URL にアクセスできるが、とりあえずローカルホストにアクセスできるように設定する。
をクリック。次のように入力して「Done」をクリック。

最後に「Open tab with url」に「localhost:8000」と入力して「Open」を押す。

すると Android で Chrome のタブが開かれ、Hello World を出力するはず。

05. Debug する

ここまで来れば後は簡単。まずは「inspect」をクリックすると Chrome のデバッグでお馴染みの画面が立ち上がる。

もちろんこの画面は PC 版の Chrome の「検証」と同じように扱うことができる。

index.html に以下を追記 (加速度の取得)

index.html

<script type="text/javascript">
window.addEventListener("devicemotion", function (e) {
    var x = e.acceleration.x;
    var y = e.acceleration.y;
    var z = e.acceleration.z;
    var txt = "x:" + x + " ,y:" + y + " ,z:" + z;
    console.log(txt);
});
</script>

Android の Chrome をリロードするとインスペクタのコンソールに加速度がわらわら出てくるようになる。

06. 雑感

とまあこんな感じでできますよ。一言で言えば Chrome が凄すぎた。
Javascript でセンサーの値取得とかは非常に楽なので、これを使って面白いものをガンガン開発できるといいですね。もちろん Touch イベントなんかも拾えますよ。

AndroidのChromeでフロントエンドを高速デバッグ