Androidエミュレータのセットアップ・起動・Webサイトのデバッグ方法

Android Studioのインストール方法

Android Studioのダウンロード

Android Studio公式サイトよりAndroid Studioをダウンロードします。

ダウンロードした「android-studio-ide-173.4819257-mac.dmg」をダブルクリックします。

そして、Android StudioをApplicationsフォルダにドラッグします。

Android Studioのインストール

Applicationsフォルダより「Android Studio」をクリックし、起動します。

以下のダイアログが出ますが、「開く」を押して次に進みます。

設定をインポートするかどうかを確認されるので、「Do not import setting」を選択して「OK」を押します。

「Android Studio Setup Wizard」が起動するので、「Next」を押して続けます。

「Install Type」は「Standard」を選択します。

UIテーマは、好みのものを選んで「Next」を押して続けます。

最後にインストールする内容が表示されるので、確認して「Finish」を押して続けます。

インストールが始まります。

インストールの途中で、HAXMのインストールのためにパスワードの入力を求められます。HAXMはエミュレーターでは必須なので、パスワードを入力してインストールを行います。

ただ、インストールしようとするとブロックされるので、「Open Security Preferences」を選択します。

セキュリティ環境設定画面で、「開発元”Intek Corporation Apps”のシステムソフトウェアの読み込みがブロックされました」のところの「許可」を押して、インストールを進めます。

しばらくするとインストールが完了します。

Android Studioの初期設定

インストールが完了したら、以下の環境設定を「.bash_profile」へ設定します。

「.bash_profile」を以下のコマンドを実行し、読み込みます。

以上でAndroid Studioのインストールは完了です。
お疲れ様でした！
少し休憩してから次に進みましょう！

任意のバージョンのAndroidエミュレータをセットアップ&起動する方法

今回の解説では、「Android 6.0」のバージョンのAndroidエミュレータをセットアップ&起動する前提で解説いたします。

プロジェクトの作成

Android Studioの起動画面で「Start a new Android Studio project」を選択します。

すると、以下のようなAndroid Studio プロジェクト作成ウィザードが起動します。
※ 空でもプロジェクトを作成しないと、ADV Managerへアクセスできません。

すべてデフォルトの設定のまま「Next」を押し、プロジェクトを作成します。

SDK ManagerでのSDK設定

プロジェクトの作成が完了したら、以下の赤枠部分をクリックし、SDK Managerを起動します。

SDK Managerが起動したら、「SDK Platform」タブで「Android 6.0」にチェックを入れ、さらに「Show Package Details」にチェックを入れ、以下の赤枠の項目を選択し、「OK」ボタンを押します。

ライセンスの確認画面が表示されるので、「Accept」にチェックを入れ、「Next」を押します。

インストールが完了したら、SDK Managerでの作業は終了です。

ADV Managerの設定

次に以下の赤枠部分をクリックし、「ADV Manager」を起動します。

「Create Virtual Device…」ボタンを押し、エミュレーションする「Andorid Virtual Device(ADV)」を作成していきます。

まずは、エミュレーションするハードウェアを選びますが、初期状態で「Nexus5X」が選択されているので、今回はそのままこれを選択して「Next」を押して進めます。

次はシステムイメージの選択画面になります。
今回は先ほどSDK Managerでダウンロードしたイメージを使います。
「x86 images」タブを選択して、「Andorid 6.0(Google APIs)」を選択して「Next」を押します。

最後に確認画面が表示されます。この画面では、ADVに任意の名前をつけたり、Androidエミュレーターのメモリサイズなどを変更したりできますが、今回はそのまま「Finish」を押します。

しばらくすると、以下のような画面になるので、「Action」の欄にある再生ボタンを押します。

以下のようにエミュレーターが起動したら、完了です。

以上でAndroidのエミュレータのセットアップ&起動は完了です。
お疲れ様でした！
他のバージョンで検証したいときは、バージョン部分だけ変えて同様の手順でやっていただければと思います。
さいごにデバッグ方法について学びましょう！

AndroidエミュレータでWebサイトをデバッグする方法

まずはエミュレータでgoogle検索するため、googleアプリを選択し、開きます。

次に検証したいWebサイトのURLを入力します。

エミュレータでWebサイトが表示されることを確認します。

次にchromeのアドレスバーにchrome://inspect/#devicesを貼り付けます。

すると、以下のような画面に遷移しますので、「inspect」をクリックします。

さいごに、以下のようないつもの見慣れた検証ツールが表示されれば完了です。

本記事は以上となります！
実機で出るbugはほとんどエミュレータで検知できるので、本手順を参考にエミュレータの環境構築およびWebサイトの検証をしていただければと思います。
さいごまで読んでいただきありがとうございましたー！