[Tips] 【Remote Debugging on Android】が超便利!

アプリ公開のお知らせ記事から2週間ほど間が開きました。

この間、本業の方の仕事でWEBサーバ上のプログラムをぽそぽそと修正することが多かったのですが、この作業中に1つ、ものすごく便利なツールを発見したので使い方などをまとめておきます。

そのツールというのが、タイトルにも書いた「Remote Debugging on Android」です。

まぁ、ツールというか、正確には機能ですね。
知ってる人は知っている機能なんでしょうけど、意外と日本語では解説した記事が少なかったので、自分のメモ的な意味も込めて使い方を書いておきます。

名前の通り、リモートでAndroidのデバッグをする機能なのですが、この機能、スマートフォンやタブレット向けのWEBページを作るときに超便利なのです!

一般的に、WEBデザイナーの方々などは、スマートフォンなどの端末向けページを作るとき、ChromeやFirefoxにアドオンなどで機能追加し、スマホ向けデザインをPC上に表示しながら修正作業などを行うかと思います。
が、これだと操作がどうしてもマウスになってしまい、実際の端末の操作感やサイズ感を見ながら作業するには若干不便です。

そういう時に使えるのがこの機能です。

Android端末上のChromeでWEBページを表示しているとき、そのページの要素画面(PCのChrome上でWEBページを表示しているときに右クリックをし「要素を検証」とやった時に表示されるあの画面)だけをPC上に表示させることが出来るのです!

本家本元のGoogleが機能解説するページがこちら。
https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=ja

英語なので、簡単に使い方をまとめておきますと、まず、前提条件として以下の環境がそろっていることが必要になります。
・PCにAndroidSDKがインストールされている事。
・PCとタブレットの両方で、Chromeが使える事。
・タブレット端末がUSBでバッギングモードが利用でき、PCに端末のドライバがインストールされている事。

Androidアプリ作成をしている人であれば、既に環境はばっちり整っているはずです。
そうではない方の場合、SDKのインストールおよび環境整備が、以前はEclipseをインストールしてADBマネージャーから云々・・・と面倒だったのですが、今は、Googleが先日発表した、AndroidStudioをインストールするだけでいけるはずだと思います。
http://developer.android.com/sdk/installing/studio.html

上記の環境が整っているかどうかを確認するには、WindowsPCの場合、
・Android端末の「設定」→「開発者向けオプション」→「USBデバッグ」にチェックを入れる。
・Android端末とPCをUSBで接続し、パソコンの「スタートメニュー」→「すべてのプログラム」→「アクセサリ」→「コマンドプロンプト」とすすみコマンドプロンプトを起動。「adb devices」と打ち込み、デバイス名が表示されればOK。device not foundといったたぐいのメッセージが表示される、またはリストに何も表示されないようなら、何か設定がうまくいっていないので、環境を見直しましょう。(但し、私の場合、このタイミングでAndroid端末画面に「デバッグ操作を受け入れるか」というメッセージが表示されることがあり、このダイアログに「OK」と答えて初めて端末が反応するようになることがありました。そのまま使えるときもあるので、何が違うのかは良くわかっていないのですが…)

さて、ここまでの準備が出来ている、という前提で、リモートデバッグの具体的な使用方法です。

まず、Androidの端末でChromeを起動し、自分が修正作業をしたいWebページを開きましょう。

次に、PC上で、先ほど起動したコマンドプロンプトから、以下のコマンドを入力します。
adb forward tcp:9222 localabstract:chrome_devtools_remote

コマンドプロンプト上に、何も表示されなければOKです。エラーメッセージが出たら、それに従い対処しましょう。

そして最後に、PCのChromeで、
localhost:9222
というURLを開きます。

すると、次の画像のように、Android端末のChromeが開いているタブの数分だけウィンドウが表示される画面が出てきます。



PCのChrome画面AndroidのChrome画面
画像



この画面で、自分が作業をしたいタブのウィンドウをクリックすると、下の図のように、PC上でWEBサイトをする方にとっては見慣れた要素画面が表示されることになります。
画像


これ、PCの場合とまったく同じように、要素項目にマウスカーソルを充てるとAndroid端末の画面上でその要素位置が色つきになって表示されたり、一部要素を書き換えた場合にどのような表示になるのかを、実際にリアルタイムで画面を書き換えて見せてくれたりと、まったく同じ機能が実現されていますので、デザインの微調整などをする際、かなり重宝するはずです。
画像

PC上で要素にマウスを合わせると、Android端末上でその要素が色塗りされてわかりやすく表示
画像


意外と知らない方も多い機能のようですので、ぜひぜひ、使ってみてください。


===============================気になる情報

大辞泉がソーシャルゲームになった理由
http://hmdt.jp/blog/?p=857

既存のスティック型 Android 端末より一回り小さい「SmartCandy Android TV Stick」登場、価格35ドル(約3,500円)
http://gpad.tv/tv/smartcandy-android-tv-stick-m500/

ビームフォーミング 再まとめ
http://wnyan.jp/3732

iPad&iPodが大幅値上がりしちゃいました
http://www.gizmodo.jp/2013/05/ipadipod_price_up.html

■[アプリ]人気ゲーム「ぐんまのやぼう」とコラボした「上毛新聞のやぼう」
http://d.hatena.ne.jp/edgefirst/20130530/1369870825

手塚治虫 電子書籍店4月分ランキング
http://tezukaosamu.net/jp/news/n_1166.html



HTML5+CSS3で作る スマートフォンサイト実践デザイン入門
ソフトバンククリエイティブ
林 久純

amazon.co.jpで買う
Amazonアソシエイト by HTML5+CSS3で作る スマートフォンサイト実践デザイン入門 の詳しい情報を見る / ウェブリブログ商品ポータル



スマートフォンサイトのためのHTML5+CSS3 (Web Designing BOOKS)
マイナビ
エ・ビスコム・テック・ラボ

amazon.co.jpで買う
Amazonアソシエイト by スマートフォンサイトのためのHTML5+CSS3 (Web Designing BOOKS) の詳しい情報を見る / ウェブリブログ商品ポータル



iPhone+Android スマートフォンサイト制作入門[改訂新版] (WEB PROFESSIONAL)
アスキー・メディアワークス
たにぐちまこと

amazon.co.jpで買う
Amazonアソシエイト by iPhone+Android スマートフォンサイト制作入門[改訂新版] (WEB PROFESSIONAL) の詳しい情報を見る / ウェブリブログ商品ポータル


この記事へのコメント

この記事へのトラックバック

  • [Tips] 【Remote Debugging on Android】アップデート

    Excerpt: 以前、こんなエントリーを書いていたのですが、いつの間にか、使い方が結構変わっていたので、またまとめておきます。 Weblog: ヤメ記者SEの徒然なるままに… racked: 2013-10-31 01:22

テーマ別記事