AndroidのWebブラウザテスト環境にAndroid Studioを導入する

2020/6/13（4年前）環境

どうも、Tです。

Webサイトを制作して、スマホ表示に問題ないかの確認で開発者ツールは使いますが、あれも完璧ではありません。

実機の場合に表示が崩れるなどが往々にしてありますが、機器を買うお金もないのでAndroidのエミュレーターを利用して確認する方法を試しました。

スポンサーリンク

目次

やりたいこと

エミュレーターやクラウドサービスなどいろいろありますが、僕は純正が好きなのでGoogleさんが提供しているAndroid Studioという開発ツールを使うことにしました。

Studioの中の機能のAndroid Virtual Device(AVD)という機能を用いて、Windows上でAndroidスマホを動かし、Webサーバーに接続して表示状態の確認を行えるようにします。

Android Studioは、MacにあるXCodeのようなアプリケーション開発が本来の使い方ではりますが、割と役に立ちます。

環境

ホスト：Windows10 バージョン1903
Android Studio 4.0 for Windows 64-bit

Android Studioは、CPU・メモリ・ディスク容量をかなり消費するのでノートパソコンよりデスクトップで利用する方がよいです。必要スペックは、以下のようになっております。https://developer.android.com/studio

インストール方法・環境セットアップ

Android Studioインストール

下記のサイトからAndroid Studioをダウンロードを開始します。

利用規約に同意しダウンロードします。

ダウンロードファイルを実行します。

「Next」をクリックします。

そのまま「Next」をクリックします。

インストールフォルダを指定して「Next」をクリックします。

インストールが開始されます。

インストールが終わったら「Next」をクリックします。

「Finish」をクリックします。

デフォルトのまま「OK」をクリックします。※これは過去環境の設定ファイルを読む込むかどうかの設定です。

利用データを送るか送らないかを選択しクリックします。

セットアップウィザードが走るので「Next」をクリックします。

Standardでもよいのですが、試しに「Custom」を選択しました。「Next」をクリックします。

JDKのインストール先を指定して「Next」をクリックします。

UIを選択して「Next」をクリックします。

インストールに必要なものを選択して「Next」をクリックします。

AVDはあとでセットアップするのでここはデフォルトで進めました。

「Next」をクリックします。

「Finish」をクリックします。

コンポーネントのダウンロードが開始されます。

終わったら「Finish」をクリックします。

Android Studioが使えるようになりました。

AVD(Android Virtual Device )を使う

AVDを利用できるようにセットアップしていきます。

Android Studioの右下にある「Configure」->「AVD Manager」をクリックします。

「Create Virtual Device」をクリックします。

AVDでどのデバイスを動かすのかを選択します。今回は、「Phone」->「Pixel XL」にしました。「Next」をクリックします。

必要なAndroidバージョンをクリックしてダウンロードします。

「Accept」を選択して「Next」をクリックします。

「Finish」をクリックします。

ダウンロードが終わったら「Next」をクリックします。

AVDに名前を付けて「Finish」をクリックします。

Managerに登録されたので、▷をクリックしてAVDを起動します。

AndroidスマホのAVDが起動しました。

日本語表示にする

英語のままは使いにくいので、日本語表示にしておきます。

HOME画面でマウスでクリックしながら上にスライドします。

AVDの機種やバージョンが異なると操作性が異なる部分があるのでご注意ください。

「Settings」をクリックします。

「System」をクリックします。

「Language&Input」をクリックします。

「Languages」をクリックします。

「Add a language」をクリックします。

(かなり下の方にある）「日本語」をクリックします。

「日本語」が追加されるので、右の＝記号をクリックしながら一番上になるように移動します。

これでAVD上のWebブラウザを起動してWebサイトにアクセスすると表示できるようになりました。

ネットワークに勝手につながってる

AVDを起動するとデフォルトでネットワーク接続できたので調べてみました。

下記に詳しく記載されていますが、AVD毎にネットワーク環境が作成されているようです。便利ですね。

参考

まとめ

がっつりテストする場合、クラウドサービスを使う方がよいのでしょうが、お金もないので無料で手軽に使える環境を手に入れて満足です。

僕自身、Androidの開発はしていないので、細かく使うというよりビューワーとしての利用用途が高くなりそうです。