サイト公開前にAndroid Studio(エミュレータ)でブラウザチェック

サイト公開前にAndroid Studio(エミュレータ)でブラウザチェック

実機により近い環境でWebサイトの表示確認をしたかったので、MacにAndroid Studio(Bumblebee)をインストールしました。

少し重いけどAndroid Studioいいです。

Google Pixelをはじめ、色々なデバイスが用意されています。

Android Studioのインストール

Android developersからディスクイメージファイルを入手します。

https://developer.android.com/studio?hl=ja

Android Studioダウンロードページ

「Download Android Studio」をクリック。

Android Studioダウンロードページ プロセッサ選択

利用規約に同意できたらチェックを入れて、Intelプロセッサの場合は「Mac with intel chip」をクリック。

Appleシリコンの場合は、「Mac with Apple chip」をクリック。

Android Studioダウンロードページ 保存場所の選択ウィンドウ

任意の保存場所を指定して、「保存」をクリック。

Mac ダウンロードフォルダ

保存した「ディスクイメージファイル(.dmg)」をダブルクリック。

Mac Android Studioのディスクイメージファイル

Android StudioをApplicationsフォルダにドラッグアンドドロップ。

Android Studioのインストールは以上です。

Android Studioの初期設定

Android Studioを起動して初期設定をします。

Mac アプリケーションフォルダ

アプリケーションフォルダの「Android Studio」をダブルクリック。

Mac 確認ダイアログ

開いてもよろしいですか?が表示されたら、「開く」をクリック。

Mac 初期設定 設定ファイル送信の有無

インポートする設定ファイルはないのでDo not import settingsを選択して、「OK」をクリック。

Android Studio 初期設定 データ送信の可否

使用状況や動作に関する情報をGoogleに送信してよければ、「Send usage statistics to Google」をクリック。

送信したくなければ、「Don’t send」をクリック。

Android Studio 初期設定 Welcome

「Next」をクリック。

Android Studio 初期設定 インストールタイプの選択

Standardを選択して、「Next」をクリック。

Android Studio 初期設定 テーマの選択

どちらか好きな方のテーマを選択して、「Next」をクリック。

Android Studio 初期設定 インストール内容

インストール内容を確認して、「Next」をクリック。

Android Studio 初期設定 android-sdk-licenseのライセンス

android-sdk-licenseのライセンスを確認して、Acceptをクリック。

Android Studio 初期設定 android-sdk-preview-licenseのライセンス

android-sdk-preview-licenseのライセンスを確認して、Acceptをクリック。

Android Studio 初期設定 android-sdk-preview-licenseのライセンス

「Finish」をクリック。

Android Studio 初期設定 ダウンロード完了

「Finish」をクリック。

Android Studioの初期設定は以上です。

仮想デバイスの作成

Android仮想デバイス(Android Virtual Device)を作成します。

Android Studio 新しいプロジェクト

「New Project」をクリック。

Android Studio 新しいプロジェクト テンプレートの選択

「Empty Activity」をクリック。

Android Studio 新しいプロジェクトの名前

「Finish」をクリック。

Android Studio ツールバー

ツールバーの「No Devices」>「Devices Manager」をクリック。

Android Studio デバイスマネージャー

「Create virtual device」をクリック。

Android Studio Deviceの選択

デバイスを選択して、「Next」をクリック。

今回はGoogle Playマークが付いているPixel 4を選択しました。

Android Studio システムイメージの選択

システムイメージを選択して、「Download」をクリック。

x86 ImagesとOther Imagesにもシステムイメージがあります。今回はAPIレベル31、64bitプロセッサ、Android12.0(Google Play)を選択しました。

Android Studio android-sdk-arm-bdt-licenseのライセンスのライセンス

android-sdk-arm-bdt-licenseのライセンスを確認して、Acceptをクリック。

Android Studio android-sdk-arm-bdt-licenseのライセンスのライセンス

「Next」をクリック。

Android Studio android-sdkインストール完了

「Finish」をクリック。

Android Studio Android仮想デバイスの名前

「Finish」をクリック。

Android Studio デバイスマネージャー

Pixel 4 API 31 Andoroid12.0 Google playが作成されました。デバイスの追加は、「Cleate device」からできます。

仮想デバイスの作成は以上です。

Chromeアプリでブラウザチェック

Android仮想デバイスのChromeアプリを使ってWebサイトの表示確認をします。

Android Studio ツールバー

ツールバーの「再生」をクリック。

初回起動時は、デバイスが表示されるまでに少し時間がかかります。

Android Studio デバイスマネージャー

デバイスが表示されたら、「DeviceManager」をクリックして拡大表示します。

仮想デバイスを日本語化

Android Studio エミュレーター Pixel 4

「ホーム」をクリック。

Android Studio エミュレーター Pixel 4 ホーム画面

上にスワイプ。

マウスを使用している場合は、左ボタンを押した状態で動かすとスワイプ動作になります。エミュレータ画面を操作する | Android Developers

Android Studio エミュレーター Pixel 4 アプリ一覧

「Settings」をクリック。

Android Studio エミュレーター Pixel 4 Settings

「System」をクリック。

Android Studio エミュレーター Pixel 4 System

「Language & input」をクリック。

Android Studio エミュレーター Pixel 4 Add a language

「Languages」をクリック。

Android Studio エミュレーター Pixel 4 Language

「Add a language」をクリック。

Android Studio エミュレーター Pixel 4 Add a language

「日本語」をクリック。

Android Studio エミュレーター Pixel 4 language

日本語の「=」をEnglishの上にドラッグアンドドロップ。

Android Studio エミュレーター Pixel 4 language

日本語になりました。

CromeアプリでWebサイトの表示確認

Android Studio エミュレーター Pixel 4 ホーム画面

「Chrome」をクリック。

Android Studio エミュレーター Pixel 4 Chromeアプリ ようこそ

「同意して続行」をクリック。

Android Studio エミュレーター Pixel 4 Chromeアプリ 同期の確認

「いいえ」をクリック。

Android Studio エミュレーター Pixel 4 Chromeアプリ Googleの検索窓

「検索窓」をクリック。

Android Studio エミュレーター Pixel 4 Chromeアプリ 入力レイアウトの選択

入力レイアウトを選択して、「完了」をクリック。

Android Studio エミュレーター Pixel 4 Chromeアプリ URLの入力

WebサイトのURLを入力して、「→」をクリック。

Android Studio エミュレーター Pixel 4 Chromeアプリ Webサイトの表示確認

Webサイトの表示確認をします。