Webフロントエンド開発者のためのAndroidエミュレータ活用術

## はじめに

※この記事は全ての動作確認をエミュレータで行うことを推奨しているわけではありません。

スマホサイトの動作確認は言わずもがな実機で確認することが最も信頼できる方法です。
しかし、スマホサイトが対応しなければならない全てのブラウザを対象に、日常的に、尚且つ気軽に動作確認をするのは経験上難しい状況が多かったように思います。

社内で検証端末の管理簿をつけて運用している会社も多いのではないでしょうか？
こういった場合、ちょっとした実機確認がしたい時にお目当ての端末が既に貸し出されていて、リリース前だからしばらく使わせて欲しいんだよーねー、なんて言われたらストレスフルですよね。

日常はエミュレータである程度の精度の高い動作確認を行いつつ、しかるべきタイミングで実機で動作確認をすると言ったワークフローであれば生産性も向上しそうだし、何より開発者のストレスが軽減されるのではないかなーと思いこの記事を書きました。

ちなみにiOSはXCode付属のiOSシミュレータ一択、Windowsは[Microsoft提供ののVMイメージ](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/)一択だと思っているので割愛しており、ややこれといったやり方が確立されていないように思うAndroidをターゲットにしました。

## 前提

Macを前提に書いていますが、Windowsにも応用できるとは思います。

## TOC

- [Android Studio付属のエミュレータを使おう](#android-studio付属のエミュレータを使おう)
- [基本設定](#基本設定)
- [より効率的に使うために](#より効率的に使うために)
- [Android Chromeでの確認](#android-chromeでの確認)
  - [OpenGapps](#opengapps)
- [Browsersyncを使おう](#browsersyncを使おう)
- [最後に](#最後に)

## Android Studio付属のエミュレータを使おう

- なぜAndroid Studio付属のエミュレータ？  
   世にGoogle以外が作ったAndroidエミュレータが出回ってはいますが、大体が有料であったり、個人での利用は無料でも商用利用では有料であったりします。  
   ということで会社にAndroidでの確認のためにエミュレータを買ってくださいと言っても「実機あるでしょ？」と返されぐぬぬとなることが予想されます。  
   Genymotionが商用利用無料になる世の中になるまであてもなく実機で確認しながら待つより、Android Studioのエミュレータでなんとかなります。

## 基本設定

1. Android Studioのインストール  
   普通にインストールしてください。   
   https://developer.android.com/studio/index.html
2. Android Studioを起動する  
   普通に起動してください。
3. 新規プロジェクトを作成する  
   我々はAndroidのネイティブアプリを作るわけではありませんが、エミュレータのイメージを作るために、
   何かしらプロジェクトを適当に作ってください。
4. AVD Managerを起動する   
   IDEが開いているはずなので、そのツールバーから紫色っぽいスマホのアイコンをクリックして下さい。  
   ![2016_06_27_2_59.png](https://qiita-image-store.s3.amazonaws.com/0/31639/bdfcf5c8-e5ce-117d-c2f9-9811798d3583.png)
5. エミュレータのイメージを作成します  
   AVD Managerのダイアログが開いているはずなので、ダイアログ下部の`Create Virtual Device`ボタンを押してエミュレータイメージを作成してください。  
   ![2016_06_27_3_02.png](https://qiita-image-store.s3.amazonaws.com/0/31639/44639976-bdc5-ee35-2b3d-0a36557df8e6.png)  
   ウィザード形式になっており、最初にスクリーンサイズやピクセル密度などいわゆるガワを設定します。![2016_06_27_3_05.png](https://qiita-image-store.s3.amazonaws.com/0/31639/0311b22d-3c3f-e632-4c76-2e439f428504.png)  
   次に`system image`を作成します。   
   `system image`は必ず`x86`もしくあは`x86_64｀（CPUのアーキテクチャー）を選択します。   
   `arm`など他のCPUアーキテクチャーだとホストOSとの相性かなんとかで使用に耐えないくらい重いのでオススメしません。     
   その他、`(With Google API)`付きのイメージはあっても害はありませんが基本的に必要ないでしょう。   
   作りたいイメージが決まればリンクをクリックしてイメージをダウンロードしてから設定が可能となります。  
   ![2016_06_27_3_06.png](https://qiita-image-store.s3.amazonaws.com/0/31639/f0737d41-b07d-a130-eab6-b3f512f122da.png)  
   最後にエミュレータのオプションを指定して完了です。  
   ![2016_06_27_3_08.png](https://qiita-image-store.s3.amazonaws.com/0/31639/6236faf3-2e9a-7cea-fa0a-368ed0bf90d8.png)  
   あとで動作確認したいOSバージョン分のエミュレータイメージを上記手順で作成しましょう。
6. エミュレータを起動する  
   AVD Managerに戻ってエミュレータイメージを起動してみましょう。  
   ![Android_Virtual_Device_Manager_と_5554_Nexus_5_Android_6_0.png](https://qiita-image-store.s3.amazonaws.com/0/31639/e94de3b4-3e6c-cb4f-d1b6-dd30b63f9533.png)  
   とりあえこれで最低限の設定は終了です。

## より効率的に使うために

エミュレータを起動するためにいちいちAndroid Studio起動してAVD Mangerたちあげて。。という作業はWebフロントエンジニアにとっては不毛な作業です。
ここではAndroid SDK付属のCLIツールからエミュレータを直接起動する方法を説明します。

1． エミュレータ起動コマンドのPATHを通す  
   ターミナルを開いて下記コマンドを実行して下さい。  

   ```bash
   $ echo 'export PATH=~/Library/Android/sdk/tools:$PATH' >>~/.bash_profile
   $ source ~/.bash_profile
   ```
2． 起動したいデバイスを一覧する   
   複数のエミュレータイメージを管理することになるためそれぞれの名前を確認しておきます。  
   ターミナルを開いて下記コマンドを実行します。 

   ```bash
   $ emulator -list-avds
   Galaxy_Nexus
   Nexus_5_Android_6_0
   ```
3． エミュレータを起動する  
   先程確認したイメージ名を`-avd`オプションで指定して`emulator`コマンド実行します。 

   ```bash
   $ emulator -avd Nexus_5_Android_6_0 
   ```
   ターミナルさえ立ち上げたくない場合は上記コマンドをAutomatorのシェルスクリプト実行アクションでApp化すると良いでしょう。

## Android Chromeでの確認

残念ながらエミュレーターイメージにはChromeが同梱されていません。
`With Google API`のイメージでもPlayStoreが同梱されていないため、PlayStore経由でChromeをインストールするもできません。

ということで、手持ちの端末からAndroid SDKの`adb`コマンドで`Chrome.apk`をpullしてエミュレータにインストールすれば良いでしょう。
ただし、先程エミュレータを作成した際、CPUアーキテクチャに`x86`を指定しているため手持ちの端末が同じように`x86`アーキテクチャの端末である必要があります。

もし`x86`ではなく`arm`などの端末であるなら以下の方法を試してください。
くれぐれもよく分からない怪しいサイトからChromeの`apk`ファイルをダウンロードして使用しないようにして下さい。

### OpenGapps

[Open Gapps](https://github.com/opengapps/opengapps)は通常Android端末にプリインストールされているGoogleのアプリを`CyanogenMod`などのカスタムROMを使用しているユーザーでも使えるようにするためのプロジェクトのようです。

このプロジェクトの詳細は[ここ](https://github.com/opengapps/opengapps/wiki/FAQ#1-what-are-gapps))を参照して下さい。  

ここで配布されているコードをもとにビルドしたモジュールの中にあるChromeAppを利用しようという寸法です。
ちなみにここでは日々最新のGappsが管理されている模様です。

自分でビルドすることもできますが既にビルドしたモジュールは[ここ](http://opengapps.org/)からダウンロードできます。  

![The_Open_GApps_Project_と_Dropbox.png](https://qiita-image-store.s3.amazonaws.com/0/31639/f1482157-8c84-fbb1-35f7-3a991568cda2.png)


ダウンロード時のオプションは下記を指定して下さい。

| Platform | Android | Variant |
| --- | --- | --- |
| x86 or x86_64 | 4.4 〜 6.0 | full |

ダウンロードしたモジュールを展開して、その中の`/GApps/chrome-x86.tar.xz`もさらに展開します。

この中に入っている`Chrome.apk`が求めていたのものになります。 
エミュレータのウィンドウにこのファイルをドラッグアンドドロップすることによって簡単にインストールができます。

![2016_06_27_3_16.png](https://qiita-image-store.s3.amazonaws.com/0/31639/0c24bf2b-1eba-f2a2-11d1-d6fa88415617.png)

ちなみにChromeは実機と同様USB経由で行うリモートデバッグが可能です。
[Remote Debugging on Android with Chrome](https://developer.chrome.com/devtools/docs/remote-debugging)  
![5554_Nexus_5_Android_6_0_と_Developer_Tools_-_qiita_com_ 2.png](https://qiita-image-store.s3.amazonaws.com/0/31639/f315d6fb-4742-b862-3c57-ef7e09e7c52a.png)

## Browsersyncを使おう

[Browsersync](https://www.browsersync.io/)は`livereoload` + クリックやスクロールなどのユーザーイベントを複数のWebブラウザ間で同期することができるnodejs製のデバッグ用Webサーバーです。
GrunやGulpなどのタスクランナーから利用することもできます。

動作検証用のWebサーバーにBrowsersyncを使うことによってiOS SimulatorやAndroidエミュレータを複数立ち上げながら効率よく動作確認ができるので生産性が非常に高まります。

以下はCLIで気軽に使う利用例です。

```bash
# Browsersyncをglobalにインストールします。
$ npm instal browser-sync -g

# ./wwwをドキュメントルートにWebサーバーをポート8888番で起動します。
# また、./www配下のファイルの変更を監視し、変更があればWebブラウザを自動的にリロードします。
$ browser-sync start --server './www' --files './www' --port 8888
# 短縮記法
$ browser-sync start -s './www' -f './www' -port 8888
```

また、Browsersyncはデフォルトではポート3001番で管理ページを起動しており、こちらの方で各端末で開いているページの状態をGUIで管理することができます。

その他、この管理ページからWebkitベースのリモートデバッグツールの[weinre](https://people.apache.org/~pmuellr/weinre/docs/latest/Home.html)をページに組み込むことができるので、Androidの標準ブラウザでWebkitのDevToolを使ってデバッグすることができるでしょう。

## 最後に

フロントエンド開発はストレスがたまる泥臭い作業を強いられることが多いように思います。 
この記事によって少しでもあなたのストレスが軽減できる手助けになれば幸いです。