[2023年12月版]ElixirDesktopでスマホアプリを作る - (番外編)WSL2上のandroid-studioでエミュレータを動かす

こんにちは！
プログラミング未経験文系出身、Elixirの国に迷い込んだ？！見習いアルケミストのaliceと申します。
今回はElixirDesktop Phoenix1.7のアプリをWindows11 + WSL2で動かすうえで、エミュレータが動かなかった問題を対応しました。

# 目的
[ElixirDesktop android-example-app](https://github.com/elixir-desktop/android-example-app)をWindows11 + WSL2環境でビルドして、エミュレータで動かしたい。

## 実行環境
Windows 11 ＋ WSL2 ＋ Ubuntu 22.04
Elixir v1.13.4-otp-25
Erlang v25.0.4
Android Studio Giraffe | 2022.3.1 Patch 3

# 開始時の断面
[2023年12月版]ElixirDesktopでスマホアプリを作る - Phoenix1.7のアプリを起動(iex -S mixまで)の終了断面時時点で、下記エラーがでてエミュレータが動かない状態でした。

`The emulator process for AVD Pixel_3a_API_34_extension_level_7_x86_64 has terminated. `

(上記「AVD Pixel_3a_API_34_extension_level_7_x86_64」は私が勝手につけたエミュレータの名前です。なおスクリーンショットは取りそびれました)


# エラー内容1
## ①iex -S mix起動時
iex -S mix起動時に下記の文章が出ていた
```:iex
/usr/bin/xdg-open: 882: x-www-browser: not found
```

```bash:shell
which google-chrome
#レスポンス無し(他ブラウザでも同様だった)
```
x-www-browser配下のブラウザがいずれもWSL2配下にインストールされていないようである。

### 対応方法
#### WSL配下にGoogle Chromeをダウンロード

https://www.google.com/intl/ja/chrome/?_gl=1*n5c1xi*_up*MQ..&gclid=CjwKCAiAhJWsBhAaEiwAmrNyqwlslH_HOmSVlOh8cuz4_3E_0GbkSW-T9l8m8ZcoXSSS3wKOdmYA3hoCvuIQAvD_BwE&gclsrc=aw.ds

「他のプラットフォーム」「Linux」押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/8341adba-ef3d-cd80-85fb-532c0ab84453.png)

WSL2側のファイルシステム側に持ってきて下記実行

```bash:shell
dpkg --list #dpkgコマンドが使えるかどうかの確認
sudo dpkg -i google-chrome-stable_current_amd64.deb #dpkgコマンドでgoogle-chromeをインストール
sudo apt-get install -f #依存関係解消


```bash:shell
which google-chrome
/usr/bin/google-chrome
```
WSL2配下にgoogle-chromeがインストールされて、iex -S mixがWSL2側のgoogle-chromeで開くようになりました！

- インストール前(Windowsのgoogle-chromeが起動している)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/2b284b03-e3f4-b370-4869-93ae19532294.png)


- インストール後(WSL2のgoogle-chromeが起動している)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/f586bf2c-57c5-bf47-5e77-3736ec6a248a.png)

この状況で再度エミュレータを起動してみます。

# エラー内容2
## ②エミュレータ起動時
①iex -S mix起動時のエラーは消えましたが、下記の別のエラーが出ました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/188fa6a8-2812-0e33-559a-2d38ee868ba7.png)

「kvmにアクセスするパーミッションが拒否られました」と。
あれ？kvmってそもそも入れてたっけ？使える状態にあったっけ？
なので下記に沿って確認しました。

https://help.ubuntu.com/community/KVM/Installation

## Pre-installation checklistの項
### Check that your CPU supports hardware virtualizationの項
```bash:shell
sudo apt install cpu-checker #後続のkvm-okコマンドを使用するため
```

```bash:shell
kvm-ok #kvmを使える前提条件の確認
INFO: /dev/kvm exists
KVM acceleration can be used  #kvmを使える前提条件は満たしていると確認できた
```

### Use a 64 bit kernel (if possible)の項
```bash:shell
egrep -c ' lm ' /proc/cpuinfo # CPUが64ビットアーキテクチャをサポートしているかの確認
24 #1以上なのでサポートしている
```

```bash:shell
uname -m #実行中のカーネルが64ビットかどうかを確認
x86_64 #64ビットであると確認できた
```
前提条件は満たしているらしい。

## Installation of KVMの項

### Install Necessary Packagesの項

#### マシン上に X サーバーが存在しないことの事前確認
`For the following setup, we will assume that you are deploying KVM on a server, and therefore do not have any X server on the machine.`と記載があるため。

```bash:shell
xeyes #目がマウスカーソルを追うXサーバーの機能を使用するアプリの起動コマンド
Command 'xeyes' not found, but can be installed with:
sudo apt install x11-apps #起動しなかったので存在しないと確認できた
```
```bash:shell
sudo apt-get install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils #kvmの依存関係にあるパッケージのインストール
```

<details><summary>上記でインストールしたパッケージ(展開して詳細を見る)</summary>
・ libvirt-bin は、 libvirt を使用して qemu および kvm インスタンスを管理するために必要な libvirtd を提供します。<br>
・ qemu-kvm ( Karmic 以前のkvm ) はバックエンドです<br>
・ ubuntu-vm-builder仮想マシンを構築するための強力なコマンドラインツール<br>
・ bridge-utils は、ネットワークから仮想マシンへのブリッジを提供します。<br>
</details>


### Add Users to Groupsの項
```bash:shell
sudo adduser alice libvirt
The user `alice' is already a member of `libvirt'. #追加済みを確認。されてなければ再ログインが必要
```


### Verify Installationの項
```bash:shell
virsh list --all
 Id   Name   State
-------------------- #エラーが出てないので有効化されたようである
```

# エミュレータ、起動した！
ここで端末の再起動をし、android-studioを起動+エミュレータを起動させてみると...？
エラーが解消され、エミュレータが起動しました！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/de417212-ae12-49f9-3701-d5075bb48bf2.png)

## android-example-appでの動作確認
念のため、下記記事の手順に沿って[ElixirDesktop android-example-app](https://github.com/elixir-desktop/android-example-app)を動かしてみたところ、エミュレータでの動作が確認できました(^▽^)/

これで逐一実機転送せずにPhoenixアプリの開発ができます！良かったー！！

https://qiita.com/Alicesky2127/items/ad463d50cfe81b2f9400

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/7ef5ea36-8d73-1993-678f-f6ca93aa0460.png)

# 感想
①と②の因果関係は正直分かっていません。エラーを一つ一つ対処しただけです。
それでも自身のElixirDesktop開発環境が少し良くなったのは嬉しかったです。

# ～Elixirの国のご案内～
↓Elixirって何ぞや？と思ったらこちらもどぞ。Elixirは先端のアレコレをだいたい全部できちゃいます:laughing::sparkles::sparkles:

https://qiita.com/piacerex/items/09876caa1e17169ec5e1

↓ゼロからElixirを始めるなら「エリクサーチ」がおすすめ！私もエンジニア未経験から学習中です。

https://elixir-lang.info/topics/entry_column


↓[We Are The Alchemists, my friends!:bouquet:](https://qiita.com/torifukukaiou/items/6bcd5bbb80df9e594e9e "Awesome-san's Awesome article")[^10]
Elixirコミュニティは本当に優しくて温かい人たちばかり！
私が挫折せずにいられるのもこの恵まれた環境のおかげです。
まずは気軽にコミュニティを訪れてみてください。[^11]


https://speakerdeck.com/elijo/elixirkomiyunitei-falsebu-kifang-guo-nei-onrainbian

[^0]:前回の記事はandroid-example-appを動かす環境構築を目的としており、android-example-appのREADMEにてElixir, Erlangをバージョン指定されていたためそちらに合わせていました。

[^2]: sqlite3の導入。参考にさせていただきました。 https://qiita.com/t-yamanashi/items/ef4c5bcab4a130105760

[^3]: 外部とはローカルホスト（同一マシン）以外を指す。

[^4]: https://github.com/elixir-desktop/desktop/blob/5927dc42d97305c43cad523b905153b687434219/lib/desktop/os.ex#L21

[^5]: run_mixとは
ダウンロードしたリポジトリ内のrun_mixはビルドスクリプトといって、
1.GitHubからexampleをcloneしてくる
2.ライブラリのインストール等を行う
3.リリース(prod環境ビルド)に必要な処理を行う
4.Zipで圧縮
5.Android側が読み込むようにしてある場所にコピー
以上の処理をまとめて走らせてくれるシェルスクリプトのこと。
https://qiita.com/Alicesky2127/items/5f9a1c6496b1c083720f#run_mix%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B
※なお、今回は1.についてはコメントアウトして実施しないようにしている。

[^10]: @torifukukaiouさんのAwesomeな名言をお借りしました。Elixirコミュニティを一言で表すと、これに尽きます。


[^11]: @kn339264さんの素敵なスライドをお借りしました。Elixirコミュニティはいろんな形で活動中！