ElixirDesktopの環境構築 WSL2 Ubuntu編

# はじめに

この記事はElixirアドベントカレンダー2024のシリーズ２、3日目の記事です

https://qiita.com/advent-calendar/2024/elixir


本記事はWebの技術スタックでモバイルアプリを開発できるElixirDesktopに開発環境をWindowsのWSL2上のUbuntuに構築する方法を紹介します。

# 動作環境

Windows 11
CPU intel i7-9700K
WSL 2
Ubuntu 24.04
shell bash

## Ubuntu update

環境構築を開始する前に現在インストールされているもののアップグレードを行います

```bash title:bash
$ sudo apt update
$ sudo apt upgrade
```

## asdfのインストール

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

インストールは公式サイトの[Getting Start](https://asdf-vm.com/guide/getting-started.html)を参考に行います。

最初に必要なライブラリをインストールします。

```bash title:bash
$ sudo apt install curl git
```

次に`asdf`をインストールします。

```bash title:bash
$ git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.14.1
```

インストールが完了したら、`asdf`のパスを`.bashrc`に追加し、`asdf`のコマンドを実行できるようにします。

```bash title:bash
$ echo ". \"$HOME/.asdf/asdf.sh\"" >> ~/.bashrc
$ echo ". \"$HOME/.asdf/completions/asdf.bash\"" >> ~/.bashrc
```

パスを追加したら設定を反映させるために bashrcファイルを読み込んでください

```bash title:bash
$ source ~/.bashrc
```

## Erlangのインストール

https://github.com/asdf-vm/asdf-erlang?tab=readme-ov-file#ubuntu-2404-lts

Ubuntu 2024の箇所を参考に次のライブラリをインストールします


```bash title:bash
$ sudo apt install -y build-essential autoconf m4 libncurses5-dev libwxgtk3.2-dev libwxgtk-webview3.2-dev libgl1-mesa-dev libglu1-mesa-dev libpng-dev libssh-dev unixodbc-dev xsltproc fop libxml2-utils libncurses-dev openjdk-11-jdk
$ asdf plugin add erlang https://github.com/asdf-vm/asdf-erlang.git
$ asdf install erlang 26.2.5
```

上記にはなかったのですが、ホットリロードに必要なのでこちらもインストールします

```bash title:bash
$ sudo apt install -y inotify-tools
```

## Elixirのインストール

https://github.com/asdf-vm/asdf-elixir

次のコマンドでインストールします

```bash title:bash
$ asdf plugin-add elixir https://github.com/asdf-vm/asdf-elixir.git
$ asdf install elixir 1.17.2-otp-26
```

インストールが完了したらシステム全体で使用するバージョンを指定します。

```bash title:bash
$ asdf global erlang 26.2.5
$ asdf global elixir 1.17.2-otp-26
```

## Node.jsのインストール

https://nodejs.jp

`Node.js`のバージョン管理ツール`nvm`を使用してインストールを行います。

https://github.com/nvm-sh/nvm

```bash title:bash
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
$ source ~/.bashrc
$ nvm install v20.11.0
```

## PostgreSQLのインストール

DBサーバーを次のコマンドでインストールします

```bash title:bash
$ sudo apt install -y postgresql
```

## SQLite3のインストール

ファイルDBを次のコマンドでインストールします

```bash title:bash
$ sudo apt install -y sqlite3
```

## GNU環境の構築

WSL2上のGUIアプリをWindows側で表示するために以下をインストールします

```bash title:bash
$ sudo apt install libgtk-3-dev gnome
```

## 日本語入力環境の構築

このままだとWSL2上のGUIアプリでフォーム等に日本語が入力出来ないので日本語入力環境を構築します


```bash title:bash
$ sudo apt update
$ sudo apt install -y fcitx-bin fcitx-mozc dbus-x11 language-pack-ja 
$ sudo update-locale LANG=ja_JP.UTF8
```

次のコマンドで日本語入力の設定を行います

```bash
cat << EOS | sudo tee /etc/fonts/local.conf
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig><dir>/mnt/c/Windows/Fonts</dir></fontconfig>
EOS
```

```bash
cat << EOS >> ~/.profile
export GTK_IM_MODULE=fcitx
export QT_IM_MODULE=fcitx
export XMODIFIERS=@im=fcitx
export DefaultIMModule=fcitx
fcitx-autostart &> /dev/null
EOS
```

環境構築が完了したら ctrl + space で日本語、英字を切り替えできます

# AndroidStudioのセットアップ

AndroidStudioのセットアップを行います

https://developer.android.com/studio

Windows側ではなくWSL2上で起動させるので注意が必要です

公式サイトをスクロールしていくとAndroid Studio のダウンロードがあるので、こちらからLinux(64ビット）をファイルをダウンロードします


![スクリーンショット 2024-11-15 170551.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64198/4ce1d723-4cb4-8453-9341-d8f316e42024.png)

ダウンロード後はWindows側からWLS2上のubuntuのホームディレクトリにコピーして以下のコマンドで展開します
展開後はお好みでリネームして、展開したフォルダに移動します。

```bash title:bash
$ tar zxvf android-studio*.tar.gz 
$ mv android-studio studio
$ cd studio
```

以下のコマンドで起動します

```bash title:bash
$ ./bin/studio.sh
```



セットアップが完了したら、ElixirDesktopのアプリを起動するためのNDKとCMakeを追加でインストールします

More ActionsからSDK Managerを選択し、NDKと　CMakeをチェックしOKを押してダウンロードをしてください。

![スクリーンショット 2024-11-15 152159.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64198/282b82b2-60cf-18f9-f006-d7f69f611aac.png)

![スクリーンショット 2024-11-15 152224.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64198/8edad2f4-8185-0251-2751-732424765f76.png)

エミュレータを起動する歳にkvm permission denyedが出る場合は以下のコマンドを実行して、WSL2を再起動してください

```bash title:bash
$ sudo apt install qemu-kvm
$ sudo adduser [ユーザー名] kvm
$ sudo chown [ユーザー名] /dev/kvm
```

# ElixirDesktopプロジェクトの作成

環境構築が終わったので`ElixirDesktop`を使用したデスクトップ、`Android`の各アプリケーションの作成方法について紹介します。

## Phoenixのセットアップ

https://hexdocs.pm/phoenix/installation.html

`ElixirDesktop`のアプリケーションは`Phoenix`のプロジェクトをベースに開発を進めるため、`Phoenix`のインストールが必要です。[公式サイト](https://hexdocs.pm/phoenix/installation.html)の手順に沿って次のようにインストールしていきます。

```bash title:bash
$ mix local.hex
$ mix archive.install hex phx_new
```

## Phoenixプロジェクトの作成

`Phoenix`プロジェクトを作成するのですが、起動実験を行うだけなのでデータベースは使用しないオプションをつけて次のコマンドを実行します。

```bash title:bash
$ mix phx.new basic --no-ecto
```

コマンドを実行すると、関連するライブラリをインストールしますかと聞かれるので`y`を選択してください。

プロジェクトの作成が完了したら次のコマンドで`Phoenix`が問題なく起動できるか確認しましょう。

```bash title:bash
$ cd basic
$ mix phx.server
```

`http://localhost:4000`にアクセスし次のページが表示されれば成功です。

![02_03_open_phoenix.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64198/841410b2-f6f8-756f-f64a-9c87b7e2988e.png)

## デスクトップアプリ化

`Phoenix`プロジェクトをデスクトップアプリ化を行います。

`mix.exs`にデスクトップアプリ化を行うライブラリを`deps`関数のライブラリリストの最後に追加します。


```elixir title:mix.exs:L33
  defp deps do
    [
      ...
-     {:bandit, "~> 1.5"}
+     {:bandit, "~> 1.5"}, 
+     {:desktop_setup, github: "thehaigo/desktop_setup", only: :dev}
    ]
  end
```

追加したら次のコマンドを実行していきます。

```bash title:bash
$ mix deps.get
$ mix desktop.install
```

完了したら次のコマンドでアプリを起動し、警告が出たりして少し時間がかかりますが、画像のように表示されれば成功です。

```bash title:bash
$ iex -S mix
```

![スクリーンショット 2024-11-15 233235.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64198/db37636b-fb7c-64ee-0c6e-aac94f2562d8.png)

## Androidアプリのセットアップ

デスクトップアプリを`Android`で動作するように次のコマンドでセットアップを行い起動テストを行います。

```bash title:bash
$ mix desktop.setup.android
```

完了したら `native/android`ディレクトリが作成され、その中に`AndroidStudio`のプロジェクトが作成されているので、`AndroidStudio`から次のように開きます。

![02_06_open_android_pj.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64198/c3ee83fb-f10d-a89f-eed6-bd3720deb861.png)

`AndroidStudio`が起動され、`gradle`の同期が完了したら、スタートボタンを押してください。

次の画面が表示されれば成功です。

![02_07_start_android.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64198/ef5b15f6-589f-98f7-74cb-771fd8114ef8.png)

# 最後に

本記事ではWindowsのWSL2上のUbuntuにElixirDesktopの環境構築を行いました。
Ubuntuの方でAndroidStudioを起動してビルドするなど、ちょっとめんどくさいことをやってますが、Windowsでも開発できそうなことがわかりました。

WSLではなく素のUbuntuでも問題なくできるかと思うので試してみてください

本記事は以上になりますありがとうございました

次は実際作るアプリの設計になります

# 参考URL

https://qiita.com/zakoken/items/61141df6aeae9e3f8e36
https://sig9.org/blog/2023/12/29/
https://zenn.dev/tkrd/articles/d073b59b461ccd
https://qiita.com/hiroxpepe/items/d65fb9fc7987e742723e
https://qiita.com/SoraKumo/items/f83548efde26788a1fc7
https://qiita.com/tsumuchan/items/43a55789f1cf213611cc