Zenn
🤖

Webサイト制作でAndroid実機の代用としてAndroid Emulatorを使いブラウザ検証する手順

2022/06/16に公開
Android
Android Studio
web制作
tech

Androidアプリ開発用の公式の統合開発環境としてAndroid Studioがあり、その中に同梱されているAndroidエミュレータがあります。
これは実際のAndroid実機のほぼすべての機能を利用でき、Pixel等Google製の端末定義もついたAndroidシミュレータで、アプリ開発用のものではありますが、Webサイト制作時の実機ブラウザ検証の代用として使うのにも適したものだと思います。

既にAndroid Studio公式の詳細な日本語ガイドがあり
https://developer.android.com/studio/intro?hl=ja
これを読めば済む話ではありますが、今回はWebサイト制作用に、このエミュレータを使ってブラウザ検証できるようになるまでの手順を抜粋・要約して紹介します。

  1. Android Studioのダウンロード・セットアップ[1]

    セットアップは、わずか数クリックで完了します。

    1. https://developer.android.com/studio?hl=ja
      よりダウンロード後
    2. Macの場合はダウンロードしてDMGファイルを展開し、アプリをアプリケーションフォルダにドラッグ・アンド・ドロップします
    3. アプリを起動しセットアップ ウィザードの指示に沿ってセットアップの残りの手順を行います

  2. Androidエミュレータのセットアップ[2]

    1. Android Studio のウェルカム画面で、[More Actions] > [Virtual Device Manager] を選択します。
    2. [Create Device] をクリックすると[Select Hardware] ウィンドウが表示されます。

      PixelやNexusなどのGoogle製端末や、汎用的な端末の定義があるので好きなものを選びます。
    3. [System Image] ページが表示されます。Androidのバージョンを選択します。

      ABIの後ろに_64が付いているものを選んでください。
      それ以外はそのままで大丈夫です。[Finish]まで進めてください。
    4. デバイスが作成されます。▲ボタンよりエミュレータを起動してください。

  3. エミュレータからローカルサーバにアクセスする方法[3]
    localhostや127.0.0.1の代わりに
    10.0.2.2を使ってください。

  4. PCのChromeで、エミュレータのChromeをインスペクトする方法
    実機と同じやり方です。↓を参考に
    https://t-dilemma.info/chrom-devtools-on-avd/

インターネットに繋がらない場合

調べてみるとエミュレータのブラウザからインターネットに繋がらないということがよくあるみたいで様々な解決策がでていました。その中で実際に有効だった方法を紹介します。
大体の場合2.までで解決できると思います。

  1. デバイスの再作成
  2. Android Studioの再インストール
  3. ターミナルから起動
    ↓を参考に
    https://qiita.com/maaaaaiiiisan/items/fdcf1c370fc381bb9dd2
脚注

  1. Android Studio のインストール ↩︎

  2. Android Emulator 上でアプリを実行する ↩︎

  3. Android Emulator のネットワークを設定する ↩︎

Discussion