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

どうも、Tです。

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

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

スポンサーリンク
アドセンス1

やりたいこと

エミュレーターやクラウドサービスなどいろいろありますが、僕は純正が好きなので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をダウンロードを開始します。

Download Android Studio and SDK tools  |  Android Developers
Download the official Android IDE and developer tools to build apps for Android phones, tablets, wearables, TVs, and more.

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

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

「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 Emulator のネットワークを設定する  |  Android デベロッパー  |  Android Developers
エミュレータは、汎用性の高いネットワーク機能を提供します。これを使用して、アプリの複雑なモデリング環境やテスト環境をセットアップできます。

参考

Android Studio のインストール  |  Android デベロッパー  |  Android Developers
Windows、macOS、Linux で Android Studio をセットアップ、インストールします。
[Android] Android Studio をインストールする手順(Windows)
Androidアプリを作るためには開発環境が必要です。Googleの推奨環境は「Android Studio」これはバージョンアップが頻繁なため初めての人が古い情報で混乱することが多いようです。ここではなるべく最新情報を載せるようにしていま
Androidエミュレーターの起動と言語や日本語入力の設定
作成したAVDを使ってAndroidエミュレーターを起動し、言語の設定や日本語入力の設定を行う方法について解説します。

まとめ

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

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

スポンサーリンク
アドセンス1
アドセンス1
ブログランキング・にほんブログ村へ

シェアする

フォローする