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

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

目的

ElixirDesktop 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のインストール

手順は以下の通りです。

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

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

shell

tar -zxvf <ファイル名> 

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

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

NDKとCMakeのインストール

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

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

SDK Managerを開く

こちらからSDK Managerを開きます。

または、起動時の画面からSDK Managerを開くこともできます。

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

SDK Tools タブから[NDK (Side by side)] と [CMake] のチェックボックスをオンにして、Applyを押下します。

(補足)NDKとは何か？

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

gitのインストール

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

shell

sudo apt-get install git

npmのインストール

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

shell

sudo apt-get install npm

asdfのインストール

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

asdfを用いてElixir, Erlangのバージョンを合わせる

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のリポジトリをダウンロードします。

shell

git clone https://github.com/elixir-desktop/android-example-app/ android　#androidという名前にリネームしつつダウンロードしています
Cloning into 'android'...
(以下略)

run_mixを実行する

ダウンロードしたリポジトリ内のrun_mixはビルドスクリプトといって、

1. GitHubからexampleをcloneしてくる
2. ライブラリのインストール等を行う
3. リリース(prod環境ビルド)に必要な処理を行う
4. Zipで圧縮
5. Android側が読み込むようにしてある場所にコピー

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

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

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そのものはブランクにします。

shell

cp run_mix run_mix_android

Android Studioで動作確認する

Android Studioを起動します。

shell

~/android-studio/bin/studio.sh

run_mixとrun_mix_androidがあることを確認してファイルを開きます。

エミュレータ上で動作確認をする場合

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

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

実機で動作確認をする場合

android側のビルドをする

意外と忘れがち

apkファイルが完成！

実機転送する

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

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

---

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

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

エラー内容1

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

対応方法

ndkのパスを記載

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

エラーの中身が変わった

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

ndkのパスを修正

下記の記事を参考にしました。

app/build.gradleに下記を追加

ndkVersion "23.1.7779620"の記載を追加しました。

エラー内容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のバージョン齟齬かなー？？

対応方法

アプリ側のGradleのバージョンをandroid-studio側に合わせる

build.gradle（app配下ではない方）の下記を修正しました。

BUILD SUCCESSFULと出ているのにapkファイルが見当たらない場合

対応方法

apkファイルがアウトプットされるディレクトリを見に行く

リポジトリのrootから見て下記のpathにアウトプットされます。
app/build/outputs/apk/debug/app-debug.apk

(それでも見当たらないなら)Clean Project押下をしてから、Rebuild Project押下

謝辞

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

～Elixirの国のご案内～

↓Elixirって何ぞや？と思ったらこちらもどぞ。Elixirは先端のアレコレをだいたい全部できちゃいます

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

↓We Are The Alchemists, my friends!¹
Elixirコミュニティは本当に優しくて温かい人たちばかり！
私が挫折せずにいられるのもこの恵まれた環境のおかげです。
まずは気軽にコミュニティを訪れてみてください。²

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

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