ElixirDesktopでスマホアプリを作る - Windows11+WSL2に環境構築

こんにちは！
プログラミング未経験文系出身、Elixirの国に迷い込んだ？！見習いアルケミストのaliceと申します。
今回は[ElixirDesktop android-example-app](https://github.com/elixir-desktop/android-example-app)をWindows11 + WSL2で動かす環境構築の手順をまとめたいと思います。

■「ElixirDesktopでスマホアプリを作る」シリーズの目次
①[Windows11+WSL2に環境構築](https://qiita.com/Alicesky2127/items/5f9a1c6496b1c083720f)
|> ②[Phoenix1.7のアプリを起動](https://qiita.com/Alicesky2127/items/7650f5650069b56bc173)
|> ③[LiveViewを使用してCRUDの機能を実装する](https://qiita.com/Alicesky2127/items/ada99a6b958be18ed270)
|> ④[Android実機に転送する(Google Drive経由)](https://qiita.com/Alicesky2127/items/623628ef64a3295fd8c5)

# 目的
以下の「ElixirDesktop android-example-app」をWSL2上のエミュレータで動かす。

https://github.com/elixir-desktop/android-example-app

## 実行環境
Windows 11 ＋ WSL2 ＋ Ubuntu 22.04
Elixir v1.14.3
Erlang v25.0.4
Phoenix v1.7.3

# ビルドに必要な条件
- Android Studioがインストールされていること。
- NDK（※Native Development Kitの略、Android で C や C++ のコードを使用できるようにするツールセット)がインストールされていること。
- git、npm、asdf がインストールされていること。
└[前回](https://qiita.com/Alicesky2127/private/34234f456fbc3dedeb72)、Windowsネイティブ環境での構築に挑みましたがダメでした。よって今回WSL2側のファイルシステムでの環境構築に挑戦します！


# 実際に環境構築してみた！
以下の手順をWSL2内のUbuntu22.04に対して実施しました。


## Android Studioのインストール

手順は以下の通りです。

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

前回ダメだったWindows版Android Studioはアンインストールし、WSL2にAndroid Studioをインストールします。なお、「64ビットマシンに必要なライブラリ」は入れていません。

Linux用のAndroid Studioが入ったzipファイルは以下からダウンロードします。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/e6ffe1e2-ec5a-5221-7e8e-387f809607cc.png)

3.ダウンロードしたzipファイルをWSL2側のホームディレクトリに置いて以下のコマンドで解凍します。
```bash:shell
tar -zxvf <ファイル名> 
```

android-studioディレクトリができたら完成です。<br>

なお、android-studioの初回起動時に発生する初期設定はこちらの記事の「画面に従って設定をする」の手順通りです。

https://qiita.com/t-yamanashi/items/f593731dd7b894635d66#%E7%94%BB%E9%9D%A2%E3%81%AB%E5%BE%93%E3%81%A3%E3%81%A6%E8%A8%AD%E5%AE%9A%E3%82%92%E3%81%99%E3%82%8B



## NDKとCMakeのインストール
インストール手順は以下の通りです。

https://developer.android.com/studio/projects/install-ndk?hl=ja

NDK と CMake のインストールと設定から、『NDK と CMake をインストールする』の手順に沿ってインストールを実施します。


### SDK Managerを開く

こちらからSDK Managerを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/9b296096-1fba-1ee2-618e-bec8117d563e.png)


または、起動時の画面からSDK Managerを開くこともできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/af9816e7-692a-aec8-7856-3ea6de822bb2.png)


### NDKとCMakeにチェックボックスをを入れる

SDK Tools タブから[NDK (Side by side)] と [CMake] のチェックボックスをオンにして、Applyを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/5e3cfe99-fe76-1d62-908f-7a61922dd6ed.png)


#### (補足)NDKとは何か？

https://developer.android.com/ndk/guides?hl=ja

NDK（Native Development Kit）は、Android で C や C++ のコードを使用できるようにするツールセットなのだそうです。


## gitのインストール
(私は既にインストール済のためスキップしました)
```bash:shell
sudo apt-get install git
```



## npmのインストール
(私は既にインストール済のためスキップしました)
```bash:shell
sudo apt-get install npm
```


## asdfのインストール
(私は既にインストール済のためスキップしました)

https://asdf-vm.com/guide/getting-started.html

## asdfを用いてElixir, Erlangのバージョンを合わせる
```bash:shell
asdf install erlang 25.0.4
asdf install elixir 1.13.4-otp-25
```

環境構築の手順は以上です！
では、環境構築が完了したことを確認するためにElixirDesktop android-example-appを動かしてみましょう。

# ElixirDesktop android-example-appを動かす

## リポジトリをクローン
WSL2のファイルシステム内にリポジトリをダウンロードします。
```bash:shell
~/StudioProjects$ git clone https://github.com/elixir-desktop/android-example-app/ android
Cloning into 'android'...
(以下略)
```

### run_mixを実行する
ダウンロードしたリポジトリ内のrun_mixはビルドスクリプトといって、
1.GitHubからexampleをcloneしてくる
2.ライブラリのインストール等を行う
3.リリース(prod環境ビルド)に必要な処理を行う
4.Zipで圧縮
5.Android側が読み込むようにしてある場所にコピー
以上の処理をまとめて走らせてくれるシェルスクリプトのことです。

先にこのビルドスクリプトを単体で走らせて、リリースビルドを作成しておきます。


```bash:shell
~/StudioProjects/android/app$ ./run_mix
Cloning into 'elixir-app'...
(以下略)
```

### run_mixをブランクにする
run_mixをそのままにしてAndroid StudioのRunボタンを押すと、再びビルドが走ってしまいます。
現時点ではrun_mixを実行済みでリリースビルドが出来上がり済のため、run_mixはもう使用しません。
よって、run_mix_androidという別名でバックアップとして取っておき、run_mixそのものはブランクにします。
```bash:shell
~/StudioProjects/android/app$ cp run_mix run_mix_android
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/59d1f65a-ecae-aed0-8bf2-01959a1d8f3e.png)


### Android StudioでRunする
Android Studioを起動します。
```bash:shell
~/android-studio/bin/studio.sh
```

run_mixとrun_mix_androidがあることを確認してファイルを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/49bff099-2fa3-6d80-c1e8-c4a938ccf01f.png)


Android Studioの画面右上にある、緑色の▷ボタンがRunボタンです。
これを押下すると、先ほど作成したリリースビルドを読み込んで、エミュレータ上でアプリが起動します。
run_mixがブランクになっていることを確認して、Runボタンを押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/ae150edd-2cd8-550b-b2ad-010f7e6efc32.png)


エミュレータ上での動作確認ができました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/0cb7320e-0009-5787-589e-8c3bbd7daa9e.png)


## 次の記事へ
https://qiita.com/Alicesky2127/items/7650f5650069b56bc173


## 謝辞
今回の環境構築にあたっては、@the_haigo さんおよび @t-yamanashi さんにお力添えいただいたおかげでなんとかできました！
お知恵を貸していただき、誠にありがとうございます。


# ～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




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


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