[2023年12月版]ElixirDesktopでスマホアプリを作る - Windows11+WSL2に環境構築

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

https://fukuokaex.connpass.com/event/300328/

# 目的
[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

# ビルドに必要な条件
- Android Studioがインストールされていること。
- NDK（※Native Development Kitの略、Android で C や C++ のコードを使用できるようにするツールセット)がインストールされていること。
- git、npm、asdf がインストールされていること。

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

## Android Studioのインストール

手順は以下の通りです。

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

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のファイルシステム内に[ElixirDesktop android-example-app](https://github.com/elixir-desktop/android-example-app)のリポジトリをダウンロードします。
```bash:shell
git clone https://github.com/elixir-desktop/android-example-app/ android　#androidという名前にリネームしつつダウンロードしています
Cloning into 'android'...
(以下略)
```

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

以上の処理をまとめて走らせてくれるシェルスクリプトのことです。

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


```bash:shell
cd 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
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で動作確認する
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/8d5a2faf-f8cf-93cf-0123-76840bcbb21e.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)

:::note alert
2023.11.08時点ではandroid-studioのエミュレータが動かない状態です。動いたら対処法を別記事化します。
:::

### 実機で動作確認をする場合
#### android側のビルドをする
意外と忘れがち
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/4ee30001-5d45-e9c1-6b58-25a7efb2d7ab.png)

#### apkファイルが完成！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/20dde73d-3d65-4d6d-2b6f-537165c8fbe6.png)

#### 実機転送する
googleドライブにapkファイルをアップロード→実機でダウンロード
※セキュリティの問題が発生する場合はこちらをご参照ください

https://qiita.com/Alicesky2127/items/623628ef64a3295fd8c5#%E5%AE%9F%E6%A9%9F%E3%81%AB%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%81%A8%E3%81%8D

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/2c3e1f30-32e3-8c77-99ff-f7bef450c24f.png)

無事、実機で動きました(^▽^)/

----------------------
以降は環境構築中にエラーが出た場合にどう対応したかのログです。
とはいえ、「環境は生もの」なので、また状況が変わったら編集 or 別記事化します。
<br>

# 「Android Studioで動作確認する」以降でエラーが出た場合

## エラー内容1
エラー文
`A problem occurred configuring project ':app'.`
`> java. lang. NullPointerException (no error message)`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/3e1a2749-5a05-83da-8cef-a44b7d80528c.png)

## 対応方法
#### ndkのパスを記載

下記の記事を参考にしたうえで、参考記事内のndk-bundleというディレクトリは無いのでプロジェクトフォルダを見て同じと思しき？ものを割り当てました。

https://qiita.com/Ginom/items/581a248e207a5de2b563

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/bf3054eb-fc55-6ca8-b4dd-e8caed783682.png)

#### エラーの中身が変わった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/3f5e0d70-543e-19d2-1611-a8bf756d2a70.png)

`NDK at /home/alice/Android/Sdk/ndk did not have a source.properties file`
って言われているから指定先間違えているのかな？？

#### ndkのパスを修正
下記の記事を参考にしました。

https://takusan.negitoro.dev/posts/android_ndk_setup/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/ea49f97a-efaf-becb-22ad-8742554f5651.png)

#### `app/build.gradle`に下記を追加
`ndkVersion "23.1.7779620"`の記載を追加しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/e4de83c7-c418-fe64-380e-fe9011f97907.png)

## エラー内容2
エラー文
`The project is using an incompatible version (AGP 7.4.2) of the Android Gradle plugin. Latest supported version is AGP 7.3.1`

Gradleのバージョン齟齬かなー？？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/1795309d-f599-5eea-7b05-b6fc8a934879.png)

## 対応方法
#### アプリ側のGradleのバージョンをandroid-studio側に合わせる
`build.gradle`（app配下ではない方）の下記を修正しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/c075d1f3-5b5e-9e6f-45ff-14d382bba9f9.png)


# BUILD SUCCESSFULと出ているのにapkファイルが見当たらない場合
## 対応方法
#### apkファイルがアウトプットされるディレクトリを見に行く
リポジトリのrootから見て下記のpathにアウトプットされます。
`app/build/outputs/apk/debug/app-debug.apk`

#### (それでも見当たらないなら)Clean Project押下をしてから、Rebuild Project押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/1f0383eb-1888-36d8-eafb-cacd43b9433b.png)


# 謝辞
今回のイベントに参加しなれば自力解決は不能だったと思います。
主催の@RyoWakabayashiさん、@the_haigoさん、いつも企画進行ありがとうございます。
また、参加者の方が積極的に詰まっている箇所を共有していただいたことで、会話の内容が自分の課題の解決につながりました。
私も気軽に質問することができました。
発言しても質問しても大丈夫という心理的安全を確保していただき、ありがとうございます。


# ～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コミュニティはいろんな形で活動中！