AVD（Android Virtual Device）内のChromeブラウザのVersionを上げる方法

## はじめに
`AVD`内のChromeバージョンを上げる方法です。
実際に実践した上で、意外と苦労することが多かったのでその内容をこちらに記載します。

## 経緯
業務でスマートフォン用サイトページを作成するにあたり、古いAndroid OSで検証を行う必要がありました。
ただしデフォルトで入っているChromeバージョンだとJSの一部メソッドが対応していないためエラーとなってしまい、検証が行えないということがありました。
それを解決するために`AVD`内のChromeバージョンを更新する必要がありました。
ただ筆者はiPhoneユーザのため`Google Play`などが利用できず、少し面倒な手順で更新する必要がありました。

## 手元の環境
PC: MacBook Pro(13-inch)
OS: macOS Monterey(12.5.1)
Android Studio: Dolphin | 2021.3.1 Patch 1

## 手順
### `AVD`の作成
:::note warn
`Android Studio`はすでにダウンロード済みの前提で進めます。

・もしダウンロードできていない場合は[こちら](https://developer.android.com/studio)からダウンロードしてください。
・また`AVD`を使用するにあたり、最初にプロジェクトを作成する必要があります。もしまだ作っていないという方は[こちら](https://blog.codecamp.jp/programming-androidstudio-mac)の「このプロジェクトを作成するにあたって必要なプログラム群をインストールするよ、という確認画面が表示。Finishをプッシュ。」まで実施してください。
:::
:::note warn
こちらは`Android Studio`で操作します。
:::

#### Virtual Device Managerを起動
`Android Studio`を起動すると下記画面が表示されます。
右上にある`Get from VCS`の右にある縦向きの3点リーダのような部分をクリックします。
いくつかメニューが表示されるので、その中の一番下にある`Virtual Device Manager`を選択します。
![スクリーンショット 2022-12-11 23.23.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/3923c5dc-60b6-1c62-942e-eac2ed811944.png)

#### 端末を選択
`Device Manager`が表示されたら、左上にある`Create device`を選択します。
![スクリーンショット 2022-12-12 0.18.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/6dceac56-eccc-5ee0-3997-4fd0ea492b07.png)

作成可能なデバイスが一覧として表示されますので、好きなデバイスを選択して`Next`を押してください。
今回は`Pixel 5`で作ってみます。
![スクリーンショット 2022-12-11 23.33.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/5dd664b3-590f-94b4-d20a-5dd70244b56d.png)

#### OSのバージョンを選択
デバイスを選択したら、使用したいOSバージョンを選択して`Next`を押してください。
今回は`Android10(Q)`を使用します。
![スクリーンショット 2022-12-12 0.40.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/0cd8809f-4a6d-81d1-9db9-5502685b21c9.png)

もし添付画像のようにダウンロードが必要な場合は赤枠部分をクリックしてダウンロードしていただければ大丈夫です。
![スクリーンショット 2022-12-12 0.20.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/75edfd65-6b44-1893-098e-182752aec605.png)

ダウンロードを押すとInstallerが動きますので、完了になるまで待機してください。
![スクリーンショット 2022-12-12 0.21.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/2c6d7655-7629-7dc5-7ee0-dad3abc70bac.png)

#### `AVD`完成！
最終確認が表示されるので、名前を変えたい方は`AVD Name`を好きに変えていただいてOKです。
問題がなければ`Finish`を選択してください。
![スクリーンショット 2022-12-12 0.41.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/41a698d6-7359-02ae-4f94-d24cc4c0d102.png)

#### 作成した`AVD`
Device: Pixel 5 API 29
OS: Android10(Q)
![スクリーンショット 2022-12-12 0.42.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/a722f238-82dc-d51c-1e8a-3b1994c7f7fc.png)

#### 作成した`AVD`にデフォルトで入っているChromeのversionを確認する
実際に作成した`AVD`のChromeのversionがいくつなのか確認してみます。
作成した`AVD`の再生ボタンをタップすると`AVD`を起動することができます。
![スクリーンショット 2022-12-12 0.44.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/26abd857-b1c9-d1fc-5276-b413444dc892.png)

起動するとこのようにデバイス画面が表示されます。
![スクリーンショット 2022-12-12 0.46.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/1dd1d75a-fb73-799b-38e2-6622dc76c2fb.png)

実際にChromeを起動してversionを見てみます。
右上の縦向きの3点リーダのような部分をタップして`Settings`を選択してください。
![スクリーンショット 2022-12-12 0.52.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/a8b99f39-5c4d-f47d-a39a-dd33f7a18eb6.png)![スクリーンショット 2022-12-12 0.52.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/1961024d-7eb9-8b94-19b0-f8843638f3ea.png)

下の方に`About Chrome`という部分があるので、そちらをタップしてみてください。
![スクリーンショット 2022-12-12 0.57.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/6c3d1e12-6146-f10c-c110-90345ea63dd2.png)

#### Chromeのデフォルトversion
Version: 74.0.3729.185
![スクリーンショット 2022-09-16 21.10.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/aa632d4b-7419-9fba-0e43-d19f20b382b4.png)

### `.apk`ファイルの取得
:::note warn
こちらは`お手持ちのパソコン（ここではMacBook Pro)`で操作します。
:::

まず最初に、取得したいバージョンのChromeアプリの`.apk`ファイルを取得する必要があります。
`.apk`とは`Android Application Package`の略で、一言で言うと`Google Play`からダウンロードできるアプリケーションデータだと思っていただけるとわかりやすいかと思います。

#### `Google Play`以外から`.apk`ファイルを取得する
普通であれば`Google Play`から`.apk`ファイルを取得するのが一番簡単なのですが、上でも述べたように筆者はiPhoneユーザである関係で`Google Play`にログインすることができません。
`Google Play`からアプリケーションを取得したい場合は一度ログインする必要があり、これが実現できないので諦めるしかないという状態です。（`Android`ユーザの方は自前のアカウントを使用してログインすれば取得できるはずです。）
ただこの`.apk`ファイルは`Google Play`以外のサイトからも取得することができます。
なので今回はログイン等が不要な[APKMirror](https://www.apkmirror.com/)というサイトから取得してみようと思います。

#### `Google Chrome`アプリケーションを探す
APKMirrorにアクセスすると下記のような画面が表示されます。
右上にある検索欄から`google chrome`と入力して検索します。
![スクリーンショット 2022-12-05 20.45.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/84ce1bf6-c0e1-b50c-b8d6-772f0352c01a.png)

#### 該当するファイルを選択
検索を実施すると下記のような検索画面が表示されます。
この中から`Google Chrome: Fast & Secure`となっているものを選択してください。
![スクリーンショット 2022-12-05 20.46.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/86b635b3-e70a-90a8-b3a9-bfa8c52fd72a.png)

#### 作成した`AVD`に合う`.apk`ファイルを選択
遷移先画面の少し下に`Download`という項目があり、たくさんのバージョンが存在しています。
ここから`.apk`ファイルをダウンロードするのですが、どれをダウンロードすれば良いのかわかりにくいです。
見極めとしては以下を満たすものであれば大丈夫です。

- Variant: APKとなっているものを選択
- Architecture: 作成した`AVD`のOSのABIと同じものを選択（今回はAndroid10(Q)が`x86`となっているのでそちらを選択）
  - 基本的には`x86, x86_64`のいずれかなのでそちらを選んでいただければ大丈夫です。
  - 確認方法としては[作成したAVD](#作成したavd)にて`Android10.0 Google APIs | `の後ろに`x86`とついているので、ここを見ればOKです。
- Minimum Version: 作成した`AVD`のOSよりも下のバージョンがカバーされているものを選択（今回はAndroid10(Q)が担保されていればOK）

今回であれば赤枠のファイルが良さそうなのでこちらを選択します。

- Variant: APKとなっている
- Architecture: 作成した`AVD`のOSのABIを含んでいる`x86 + x86_64`
- Minimum Version: 作成した`AVD`のOS(Android10(Q))が担保している`Android 7.0+`
![スクリーンショット 2022-12-05 20.47.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/e64b8992-4066-c5e8-ba58-b2858684a1cf.png)


#### ファイルのダウンロード
遷移先画面にて`DOWNLOAD APK`というボタンが存在するので、こちらをタップして`.apk`ファイルをダウンロードしてください。
![スクリーンショット 2022-12-12 0.37.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/a5d51e10-11cf-2e64-026b-9c2b54683381.png)

### Chromeのversionを更新する
:::note warn
こちらは`Android Studio`で操作します。
:::

`.apk`ファイルのダウンロードが完了したら、実際にバージョンのアップデートを実施してみましょう。

#### `.apk`ファイルを`AVD`に適用させる
上で作成した`AVD`を起動し、`Finder`で先ほどダウンロードした`.apk`ファイルを表示させておいてください。
下のgifのように`Finder`から対象の`.apk`ファイルを選択し、ドラッグ&ドロップで`AVD`まで持っていってください。
うまくできれば`Installing APK...`と表示されて、`.apk`ファイルのインストールが実施されます。
![画面収録 2022-12-12 1.19.49.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/b04ad877-4981-ca7c-7637-69ea09a2fe99.gif)

#### 適用されているか確認する
再度Chromeを起動して、バージョンが更新されているのか確認してみましょう。
[作成したAVDにデフォルトで入っているChromeのversionを確認する](#作成したavdにデフォルトで入っているchromeのversionを確認する)と同じ手順で確認してみましょう。
![スクリーンショット 2022-12-12 1.25.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/c5c17934-3203-fae7-3bbd-374f9530d8f9.png)

[該当するファイルを選択](#該当するファイルを選択)で選択した`.apk`ファイルのversionである`108.0.5359.79`が入っていますね！
これで完璧です！

### 余談：更新後に検索などを行うとクラッシュする・・・？
:::note warn
こちらは`Android Studio`で操作します。
:::
無事にChromeのバージョン更新も実施できたのでこれで完璧だと言いたいのですが、実際に更新後Google検索などを実施してみましょう。
[こちら](https://techk.in/2021/07/fix-aw-snap-error.html)のような`Something went wrong`と表示されて検索できない状態になることがあります。（ならない方はOK！）
もし途中でクラッシュしてしまい検索ができなくなったという方がいらっしゃったら、一度`AVD`を終了して設定を変更する必要があります。

#### `AVD`の設定を変更
対象`AVD`の編集ボタンを押下し、`Show Advanced Settings`を選択してください。
![スクリーンショット 2022-12-12 1.38.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/5699096d-1d32-bc77-e516-fe16eec78d37.png)![スクリーンショット 2022-12-12 1.40.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/0d4044df-18bc-367b-27de-8654e8fdc50e.png)

下の方にスクロールすると`Emulated Performance`という項目があります。
こちらの項目がもし`Quick boot`となっている場合は、`Cold boot`に変更してみてください。
![スクリーンショット 2022-12-12 1.42.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/233b3a57-cc26-a3f1-4f64-b33061dbbc11.png)![スクリーンショット 2022-12-12 1.50.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/fe20b60f-ac7f-6cc8-05c6-8fec7d4ba62e.png)

2つの違いに関して、`Quick boot`がスリープ状態に変更（iPhoneでいう電源ボタンを一度押して画面を暗くする）、`Cold boot`が電源を落とした状態に変更（iPhoneでいう電源ボタンを長押しして電源を落とす）とイメージしていただくとわかりやすそうです。
更新後に一度電源を落とすようにしましょうということですね。
[Stack Overflow](https://stackoverflow.com/questions/55300733/how-to-upgrade-the-chrome-browser-version-android-7-0-emulator-in-android-studio)でも、Chromeの更新後に`Cold boot`に設定して電源を一度落とすようにしないといけないという旨が記載されています。
![スクリーンショット 2022-12-12 1.49.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2748844/7085924b-e5ec-d9ab-2342-e0bb4dd8e56c.png)

## 最後に
こちらで無事に`AVD`の更新ができたかと思います。
ぜひ活用していただき、より開発品質の向上に充てていただければ幸いです。

また[余談：更新後に検索などを行うとクラッシュする・・・？](#余談更新後に検索などを行うとクラッシュする)の事象が今回一番解決するのに苦労した部分だったのですが、今回実施した`Dolphin`だと発生しませんでした・・・。
以前使っていた`Chipmunk`だと起こっていたので、もしかしたらバージョンアップと一緒に解決してくれたのかもしれないです。
ただ`Dolphin`では絶対に起こらないという保証はないので、もし同様の事象が発生した場合は参考にしていただければ幸いです。