モーグルとカバとパウダーの日記

モーグルやカバ(EXカービング)山スキー(BC)などがメインの日記でした。今は仕事のコンピュータ系のネタが主になっています。以前はスパム対策関連が多かったのですが最近はディープラーニング関連が多めです。

スマホ用ページのデバッグを仮想Android端末を使ってホストPCのChromeから行う

スマホ用のWebサイトを作成しているとき、Androidでの表示をテストするのに、実機で行うか、eclipseに入れたAndroid仮想デバイスから行っていました。


しかしAndroid仮想デバイスは遅いし起動も時間が掛かるのでもうちょいマシなエミュレータがないか、と思っていたところ、Genymotionというエミュレータがあることがわかりました。

超高速なAndroidエミュレータ「Genymotion」を試す | TeraDas−テラダス


Genymotion

個人利用ならば無料で利用できます。
商用利用だと月24.99ユーロ(約3400円)なので結構高いかも。


Genymotionをインストールしたばかりだと仮想マシンがないため、「Add」からターゲットとなる端末、例えば「Google Nexus 5 - 5.1.0」などを選択して作成し、起動します。

最初は言語が標準で英語になっているため、「Settings」から「Language&input」を選択し「Language」で「日本語」を選択すると日本語表示になります。


GenymotionはそのままだとGoogle Playストアが入っていないため、ARM TranslationとGoogle Playストア本体(gapps)を入れることでGoogle Playも使えるようになります。

手順は上記サイトにも書いてあるのですが


1. [GUIDE] Genymotion | Installing ARM Translat… | Android Development and Hacking | XDA Forums より「ARM Translation Installer v1.1」をダウンロード
2. ダウンロードした「Genymotion-ARM-Translation_v1.1.zip」を、Genymotion上の仮想Android上にドラッグアンドドロップ
3. 仮想Andriodを再起動
4. Google Apps (Gapps) - Download Latest Gapps for Android などから、例えば仮想Androidのバージョンが5.1の場合「gapps-lp-20150314-signed.zip」をダウンロード
5. ダウンロードした「gapps-lp-20150314-signed.zip」を、Genymotion上の仮想Android上にドラッグアンドドロップ
6. 仮想Andriodを再起動
7. 途中開発者サービスが停止とか起こるが「OK」で進めて良い


これでPlayストアからChromeなどのブラウザを入れて、ページの確認ができるようになります。


このままでもページの確認は出来るのですが、リモートデバッグを使うとPCのChromeデベロッパーツールと同等のことが出来るようになるので、次は仮想Androidに対してリモートデバッグが出来るようにします。


1. PlayストアからChromeをインストールする
2. 「Dev Settings」から「USBデバッグ」をチェックする
3. ホストPCでChromeを起動して「chrome://inspect」にアクセスする
4. Devicesの「Descover USB devices」にチェックが入っていると仮想Androidのリストが出てくる
5. 該当仮想Androidの「inspect」を開く


これでPCのChromeに仮想と同じページと開発用の情報が表示されるようになります。


リモートデバッグについては下記Chromeのページに詳細があります。

Remote Debugging on Android with Chrome - Google Chrome