ローカルMacで起動しているWEBアプリケーションへGenymotion上のAndroid OSからアクセスする


想定するケースとしては、開発中のWEBアプリケーションがAndroid端末で正しく動くか挙動を確認したいけど、実機を用意するのは面倒（＆色々な端末を用意できない）という場合。[Genymotion](http://www.genymotion.com/)を利用すると、簡単に実機のシミュレートができます。

モバイルWEBの場合、Android端末できちんと動作するか、はやめに確認したいですよね。

今回、Genymotion（VirtualBoxのゲストOSとして動作）からMac（ホストOS）上で起動するWEBサーバに接続する設定をしてみたのですが、ちょっと手間取った（試行錯誤に時間かかったけど、結果、一瞬でできた）ので、メモがてらここに書きます。

## 前提

- 開発環境 は Mac OS X (Mavericks)とします。

## Genymotionのインストール

- Macへのインストール方法を以前に投稿しましたので、こちらを参考に。
	- [[初心者向け] Androidアプリ開発@Mac 〜②Genymotionセットアップ〜](http://qiita.com/hkusu/items/b0b02dafa9de2e7a2943)
	- 手順の途中でもでてきますが、Genymotion への会員登録が必要です。

## 確認手順

### ① 適当にWEBアプリケーションを localhost(127.0.0.1) で立ち上げる

この例は、Yeomanの雛型から作ったAngularJSアプリケーションを `grunt serve` で立ち上げたもの。デフォルトでは `9000` 番ポートで立ち上がる模様。

![スクリーンショット 2014-06-24 13.07.02.png](https://qiita-image-store.s3.amazonaws.com/0/35733/cb0dad1b-9b9e-1d7a-d2ac-3c515af8046b.png "スクリーンショット 2014-06-24 13.07.02.png")

### ② GenymotionでAndroidを起動

適当にデバイスを作成して起動します。

![スクリーンショット 2014-06-24 13.15.04.png](https://qiita-image-store.s3.amazonaws.com/0/35733/54a8a76f-4197-c086-5c3e-a40a441edd3e.png "スクリーンショット 2014-06-24 13.15.04.png")

Android標準ブラウザ（他のブラウザで試したい場合は後述の方法でアプリを追加する）を立ち上げ、URLに `10.0.3.2` を指定、ポートは先程とあわせて `9000` を指定します。

![スクリーンショット 2014-06-24 13.17.23.png](https://qiita-image-store.s3.amazonaws.com/0/35733/2522904f-6c58-0856-fa40-235564c93fc9.png "スクリーンショット 2014-06-24 13.17.23.png")

上図の右側が Genymotion なのですが、ちゃんと表示できました^^

ちなみに、`10.0.3.2` は Genymotion が自動で割り当てた、ホストOSの localhost を指すアドレスのようです。
もしかして VirtualBox の環境や Genymotion のバージョンによって異なる（私のは version 2.2.0）かも。ただ 10.0.3.X 系ぽいので、いろいろ試してみてください。

## ほか

### Android標準ブラウザのデバッグモードを起動したい場合

より細かくデバッグできるようになります。URL欄に `about:debug` と入力します。

![スクリーンショット 2014-06-24 14.19.42.png](https://qiita-image-store.s3.amazonaws.com/0/35733/d1e2606b-8931-8317-563d-983783b3c75a.png "スクリーンショット 2014-06-24 14.19.42.png")

するとブラウザ上部に「JAVASCRIPT CONSOLE」と表示されるので、タップするとコンソールの内容が表示されます。

![スクリーンショット 2014-06-24 14.21.23.png](https://qiita-image-store.s3.amazonaws.com/0/35733/1750e7d7-2a36-0368-e059-c766f7c53aa8.png "スクリーンショット 2014-06-24 14.21.23.png")

![スクリーンショット 2014-06-24 14.20.46.png](https://qiita-image-store.s3.amazonaws.com/0/35733/4b51370a-743e-3984-ebba-e9821232c4e5.png "スクリーンショット 2014-06-24 14.20.46.png")

標準ブラウザの設定メニューに「デバッグ」が追加されているので、さらに細かく設定することができます。

### 他のAndroidアプリを追加したい場合

[このサイト](http://blog.yohei.org/android-genymotion2-x-install-googleplay/)に書かれてる手順にしたがって、zipファイルをドラッグすれば Google Play がインストールされるので、そこからアプリをインストールすればOKです。

私は Chrome を追加してみました。Chromeからも `10.0.3.2` で、ホストOSの localhost へ接続できました^^

![スクリーンショット 2014-06-24 14.01.11.png](https://qiita-image-store.s3.amazonaws.com/0/35733/1fb03fa1-ded0-8400-d615-afb23a756ed4.png "スクリーンショット 2014-06-24 14.01.11.png") ![スクリーンショット 2014-06-24 14.01.24.png](https://qiita-image-store.s3.amazonaws.com/0/35733/326d3ffa-52cb-f271-fc88-b5f84b86b910.png "スクリーンショット 2014-06-24 14.01.24.png")

### iPhone/iPadのシミュレートは？

普通に Xcode に付属の iOSシミュレータを使えばよいかと。

![スクリーンショット 2014-06-24 15.53.37.png](https://qiita-image-store.s3.amazonaws.com/0/35733/fe943e80-fece-f3fd-650d-e934a95d89bf.png "スクリーンショット 2014-06-24 15.53.37.png")

### ひとりごと

Macにメモリを積んでないと、Genymotion（VirtualBox）の立ち上げはなかなか厳しいものがある..