Frontend開発でのマークアップについて、コーディング中のスタイルやJSのリアルタイムでのブラウザ確認について、前回はiPhoneシミュレータを使った確認方法をご紹介しました。
今回はAndroidでの（シミュレータを使った）確認方法をご紹介します。
webpack-dev-server を使い、http://localhost:8085/ などをアドレスバーに打ち込んで、PC（主にChrome）でマークアップをしています。
iPhoneでの確認は前回ご紹介したシミュレータでチェックしているのですが、筆者は普段使っているスマホがiPhoneなので、Androidについてはあまり詳しくありません。
Android2.3とかの時代（4.0スゲーとかの時代）にAndroidの標準ブラウザで、CSS3でできないことやSVGの表示やJSの挙動でかなり苦労した覚えがあり、Android端末でのチェックはIEでのチェックと同じように恐れていました。。
ですが、ここ数年Androidもサクサク動くし、標準ブラウザも進化してきて、そこまで気にしなくても問題ないように思えます。
iPhoneユーザーが過半数の日本だとしても、Androidでも綺麗で使いやすいサイトを作っていくことが大切だと心がけています。
で、アンドロイドのシミュレータの話に戻りますが、以前までは「Genymotion」というアプリを使用していました。
ですがこのアプリ、遅いんですね。「Android = 遅い」と思っていた筆者ですので、シミュレータも遅いのはしょうがないと思っていました。
でも流石に作業しづらく、開発スピードも遅くなってしまうので、他になにか良いアプリ（Androidシミュレータ）が無いかと探したんですが、なかなか良いものがみつかりませんでした。
Android Studio にしちゃう
そうか、iPhoneのシミュレータは本家のを使っているんだから、Androidのシミュレータも本家のを使えばいいんじゃないか、ということで敷居が高い、、と感じていた本家「Android Studio」を使うことにしました。
とりあえず、何も考えずにインストーラの指示のままにアプリケーションフォルダにコピーして、アプリを立ち上げます。
シミュレータはどこにある？
こんな感じのスタート画面が表示されました。
今回は、Androidのアプリを製作するわけではありません。Androidのシミュレータが使いたいんです。
なので、この画面右下の「Configure」の中の「AVD Manager」を選択しましょう。
ここで、使いたいAndroid端末の機種やOSを選んで、デバイスを追加します。
筆者はAndroidユーザーではないので、ポピュラーな機種やOSが分かっておりません。。
とりあえず、最新（と思っている）のものを追加して見ましょう。
追加できたら、ここの▶︎（三角）ボタンをクリック！
すると、デスクトップにAndroidが現れます。起動アニメーションもスムーズですね（Genymotionではこうはいきませんでした）。
ホーム画面が表示されたら、あとは実機と変わりません。前回のiPhoneシミュレータのようにアプリが沢山入っています、後で遊んでみましょう。
今回はブラウザチェックがメインなので、ブラウザを立ち上げます。
Chromeのアプリがありますが、PCのChromeと同じなので表示できるcssやjsの挙動はChromeと同じです。機種依存やOSによる表示崩れ、jsの挙動確認などはこのChromeで確認してもPCとあまり変わらないので、デフォルトWebBrowserで表示確認を行なっていきたいと思います。
この「WebView Browser Tester」を立ち上げます。
iPhoneシミュレータの時のようにアドレスバーに「http://localhost:8085/」と入れてみます。
ダメみたいですね。。そうなんです「localhost」ではダメみたいなんです。
「localhost」の部分を「10.0.2.2」に変えてみましょう「http://10.0.2.2:8085/」いかがでしょう？マークアップ中のHTMLモックが確認できるはずです。
まとめ
今回はAndroidでのマークアップ中のモック確認方法をお伝えしました。前回のiPhoneシミュレータと今回のこのAndroidシミュレータの両方で確認すれば、あなたも今日からマークアップマスターです！
Androidでタップしてもメニューが開かないんですケドー、スクロールできないんですケドーみたいな恥ずかしいページを作らないように、モック作成の段階でブラウザチェックをこまめに行っていきましょう！
前回の「マークアップ時のモック確認効率アップ術 – iPhone編」はこちら