サイト公開前にAndroid Studio(エミュレータ)でブラウザチェック
![サイト公開前にAndroid Studio(エミュレータ)でブラウザチェック](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install.png)
実機により近い環境でWebサイトの表示確認をしたかったので、MacにAndroid Studio(Bumblebee)をインストールしました。
少し重いけどAndroid Studioいいです。
Google Pixelをはじめ、色々なデバイスが用意されています。
Android Studioのインストール
Android developersからディスクイメージファイルを入手します。
https://developer.android.com/studio?hl=ja
![Android Studioダウンロードページ](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install101.png)
「Download Android Studio」をクリック。
![Android Studioダウンロードページ プロセッサ選択](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install102.png)
利用規約に同意できたらチェックを入れて、Intelプロセッサの場合は「Mac with intel chip」をクリック。
Appleシリコンの場合は、「Mac with Apple chip」をクリック。
![Android Studioダウンロードページ 保存場所の選択ウィンドウ](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install103.png)
任意の保存場所を指定して、「保存」をクリック。
![Mac ダウンロードフォルダ](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install104.png)
保存した「ディスクイメージファイル(.dmg)」をダブルクリック。
![Mac Android Studioのディスクイメージファイル](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install105.png)
Android StudioをApplicationsフォルダにドラッグアンドドロップ。
Android Studioのインストールは以上です。
Android Studioの初期設定
Android Studioを起動して初期設定をします。
![Mac アプリケーションフォルダ](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install201.png)
アプリケーションフォルダの「Android Studio」をダブルクリック。
![Mac 確認ダイアログ](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install202.png)
開いてもよろしいですか?が表示されたら、「開く」をクリック。
![Mac 初期設定 設定ファイル送信の有無](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install203.png)
インポートする設定ファイルはないのでDo not import settingsを選択して、「OK」をクリック。
![Android Studio 初期設定 データ送信の可否](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install204.png)
使用状況や動作に関する情報をGoogleに送信してよければ、「Send usage statistics to Google」をクリック。
送信したくなければ、「Don’t send」をクリック。
![Android Studio 初期設定 Welcome](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install205.png)
「Next」をクリック。
![Android Studio 初期設定 インストールタイプの選択](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install206.png)
Standardを選択して、「Next」をクリック。
![Android Studio 初期設定 テーマの選択](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install207.png)
どちらか好きな方のテーマを選択して、「Next」をクリック。
![Android Studio 初期設定 インストール内容](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install208.png)
インストール内容を確認して、「Next」をクリック。
![Android Studio 初期設定 android-sdk-licenseのライセンス](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install209.png)
android-sdk-licenseのライセンスを確認して、Acceptをクリック。
![Android Studio 初期設定 android-sdk-preview-licenseのライセンス](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install210.png)
android-sdk-preview-licenseのライセンスを確認して、Acceptをクリック。
![Android Studio 初期設定 android-sdk-preview-licenseのライセンス](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install211.png)
「Finish」をクリック。
![Android Studio 初期設定 ダウンロード完了](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install212.png)
「Finish」をクリック。
Android Studioの初期設定は以上です。
仮想デバイスの作成
Android仮想デバイス(Android Virtual Device)を作成します。
![Android Studio 新しいプロジェクト](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install301.png)
「New Project」をクリック。
![Android Studio 新しいプロジェクト テンプレートの選択](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install302.png)
「Empty Activity」をクリック。
![Android Studio 新しいプロジェクトの名前](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install303.png)
「Finish」をクリック。
![Android Studio ツールバー](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install304.png)
ツールバーの「No Devices」>「Devices Manager」をクリック。
![Android Studio デバイスマネージャー](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install305.png)
「Create virtual device」をクリック。
![Android Studio Deviceの選択](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install306.png)
デバイスを選択して、「Next」をクリック。
今回はGoogle Playマークが付いているPixel 4を選択しました。
![Android Studio システムイメージの選択](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install307.png)
システムイメージを選択して、「Download」をクリック。
x86 ImagesとOther Imagesにもシステムイメージがあります。今回はAPIレベル31、64bitプロセッサ、Android12.0(Google Play)を選択しました。
![Android Studio android-sdk-arm-bdt-licenseのライセンスのライセンス](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install308.png)
android-sdk-arm-bdt-licenseのライセンスを確認して、Acceptをクリック。
![Android Studio android-sdk-arm-bdt-licenseのライセンスのライセンス](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install309.png)
「Next」をクリック。
![Android Studio android-sdkインストール完了](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install310.png)
「Finish」をクリック。
![Android Studio Android仮想デバイスの名前](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install311.png)
「Finish」をクリック。
![Android Studio デバイスマネージャー](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install312.png)
Pixel 4 API 31 Andoroid12.0 Google playが作成されました。デバイスの追加は、「Cleate device」からできます。
仮想デバイスの作成は以上です。
Chromeアプリでブラウザチェック
Android仮想デバイスのChromeアプリを使ってWebサイトの表示確認をします。
![Android Studio ツールバー](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install401.png)
ツールバーの「再生」をクリック。
初回起動時は、デバイスが表示されるまでに少し時間がかかります。
![Android Studio デバイスマネージャー](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install402.png)
デバイスが表示されたら、「DeviceManager」をクリックして拡大表示します。
仮想デバイスを日本語化
![Android Studio エミュレーター Pixel 4](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install403.png)
「ホーム」をクリック。
![Android Studio エミュレーター Pixel 4 ホーム画面](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install404.png)
上にスワイプ。
マウスを使用している場合は、左ボタンを押した状態で動かすとスワイプ動作になります。エミュレータ画面を操作する | Android Developers
![Android Studio エミュレーター Pixel 4 アプリ一覧](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install405.png)
「Settings」をクリック。
![Android Studio エミュレーター Pixel 4 Settings](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install406.png)
「System」をクリック。
![Android Studio エミュレーター Pixel 4 System](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install407.png)
「Language & input」をクリック。
![Android Studio エミュレーター Pixel 4 Add a language](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install408.png)
「Languages」をクリック。
![Android Studio エミュレーター Pixel 4 Language](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install409.png)
「Add a language」をクリック。
![Android Studio エミュレーター Pixel 4 Add a language](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install410.png)
「日本語」をクリック。
![Android Studio エミュレーター Pixel 4 language](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install411.png)
日本語の「=」をEnglishの上にドラッグアンドドロップ。
![Android Studio エミュレーター Pixel 4 language](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install412.png)
日本語になりました。
CromeアプリでWebサイトの表示確認
![Android Studio エミュレーター Pixel 4 ホーム画面](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install501.png)
「Chrome」をクリック。
![Android Studio エミュレーター Pixel 4 Chromeアプリ ようこそ](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install502.png)
「同意して続行」をクリック。
![Android Studio エミュレーター Pixel 4 Chromeアプリ 同期の確認](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install503.png)
「いいえ」をクリック。
![Android Studio エミュレーター Pixel 4 Chromeアプリ Googleの検索窓](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install504.png)
「検索窓」をクリック。
![Android Studio エミュレーター Pixel 4 Chromeアプリ 入力レイアウトの選択](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install505.png)
入力レイアウトを選択して、「完了」をクリック。
![Android Studio エミュレーター Pixel 4 Chromeアプリ URLの入力](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install506.png)
WebサイトのURLを入力して、「→」をクリック。
![Android Studio エミュレーター Pixel 4 Chromeアプリ Webサイトの表示確認](https://qlog.org/wp-content/uploads/2022/02/mac-android-studio-install507.png)
Webサイトの表示確認をします。