こんにちは！
プログラミング未経験文系出身、Elixirの国に迷い込んだ？！見習いアルケミストのaliceと申します。
今回はElixirDesktop android-example-appをWindows11 + WSL2で動かす環境構築の手順をまとめたいと思います。
■「ElixirDesktopでスマホアプリを作る」シリーズの目次
①Windows11+WSL2に環境構築
|> ②Phoenix1.7のアプリを起動
|> ③LiveViewを使用してCRUDの機能を実装する
|> ④Android実機に転送する(Google Drive経由)
目的
以下の「ElixirDesktop android-example-app」をWSL2上のエミュレータで動かす。
実行環境
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 がインストールされていること。
└前回、Windowsネイティブ環境での構築に挑みましたがダメでした。よって今回WSL2側のファイルシステムでの環境構築に挑戦します！
実際に環境構築してみた！
以下の手順をWSL2内のUbuntu22.04に対して実施しました。
Android Studioのインストール
手順は以下の通りです。
前回ダメだったWindows版Android Studioはアンインストールし、WSL2にAndroid Studioをインストールします。なお、「64ビットマシンに必要なライブラリ」は入れていません。
Linux用のAndroid Studioが入ったzipファイルは以下からダウンロードします。
3.ダウンロードしたzipファイルをWSL2側のホームディレクトリに置いて以下のコマンドで解凍します。
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のインストール
(私は既にインストール済のためスキップしました)
sudo apt-get install git
npmのインストール
(私は既にインストール済のためスキップしました)
sudo apt-get install npm
asdfのインストール
(私は既にインストール済のためスキップしました)
asdfを用いてElixir, Erlangのバージョンを合わせる
asdf install erlang 25.0.4
asdf install elixir 1.13.4-otp-25
環境構築の手順は以上です！
では、環境構築が完了したことを確認するためにElixirDesktop android-example-appを動かしてみましょう。
ElixirDesktop android-example-appを動かす
リポジトリをクローン
WSL2のファイルシステム内にリポジトリをダウンロードします。
~/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側が読み込むようにしてある場所にコピー
以上の処理をまとめて走らせてくれるシェルスクリプトのことです。
先にこのビルドスクリプトを単体で走らせて、リリースビルドを作成しておきます。
~/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そのものはブランクにします。
~/StudioProjects/android/app$ cp run_mix run_mix_android
Android StudioでRunする
Android Studioを起動します。
~/android-studio/bin/studio.sh
run_mixとrun_mix_androidがあることを確認してファイルを開きます。
Android Studioの画面右上にある、緑色の▷ボタンがRunボタンです。
これを押下すると、先ほど作成したリリースビルドを読み込んで、エミュレータ上でアプリが起動します。
run_mixがブランクになっていることを確認して、Runボタンを押下します。
エミュレータ上での動作確認ができました！
次の記事へ
謝辞
今回の環境構築にあたっては、@the_haigo さんおよび @t-yamanashi さんにお力添えいただいたおかげでなんとかできました！
お知恵を貸していただき、誠にありがとうございます。
～Elixirの国のご案内～
↓Elixirって何ぞや？と思ったらこちらもどぞ。Elixirは先端のアレコレをだいたい全部できちゃいます
↓ゼロからElixirを始めるなら「エリクサーチ」がおすすめ！私もエンジニア未経験から学習中です。
↓We Are The Alchemists, my friends!
1
Elixirコミュニティは本当に優しくて温かい人たちばかり！
私が挫折せずにいられるのもこの恵まれた環境のおかげです。
まずは気軽にコミュニティを訪れてみてください。2
-
@torifukukaiouさんのAwesomeな名言をお借りしました。Elixirコミュニティを一言で表すと、これに尽きます。 ↩