[2024/3月版]ElixirDesktopでスマホアプリを作る - Phoenix1.7のアプリを起動するジェネレータが爆誕した

こんにちは！
プログラミング未経験文系出身、Elixirの国に迷い込んだ？！見習いアルケミストのaliceと申します。
今回はElixirDesktopの起動が超楽になるジェネレータについて学んだことをまとめます。

# 目的
@the_haigo さんが作っていただいたジェネレータを使って、PhoenixアプリをAndroid Studioで起動してみたい！
なお、本記事は[ElixirMobile#7：ジェネレータ作ったよ+ ハンズオン会](https://fukuokaex.connpass.com/event/309962/)のレポートを兼ねています。

https://github.com/thehaigo/desktop_setup


このジェネレータを使用すればElixirDesktopのアプリ作成がコマンド一発でできてしまう...！
ものすごいものが爆誕してしまいました！！


## 実行環境
:::note warn
Elixir, Erlangのバージョンに指定があります。ご注意ください。[^0]
:::

Windows 11 ＋ WSL2 ＋ Ubuntu 22.04
Elixir v1.16.2-otp-25
Erlang v25.0.4
Android Studio Giraffe | 2022.3.1 Patch 3

# 前提条件
以下のいずれかが未実施の場合は[こちらの記事](https://qiita.com/Alicesky2127/items/ad463d50cfe81b2f9400)を参照して環境構築を行ってください。
- Android Studioのインストール
- NDK（※Native Development Kitの略、Android で C や C++ のコードを使用できるようにするツールセット)のインストール
- git、npm、asdf のインストール
- asdf等バージョン管理ツールを使用して上記バージョンのErlangとElixirのインストール


# Phoenixプロジェクトの作成
```bash:shell
mix phx.new basic --database sqlite3
cd basic
mix ecto.create #basic_dev.dbが作成される
```

## ライブラリの追加
```diff_elixir:basic/mix.exs
  defp deps do
    [
      ...
+      {:desktop_setup, github: "thehaigo/desktop_setup", only: :dev}
    ]
  end
```
```bash:basic
mix deps.get
```

# iex -S mixでデスクトップ上での起動を確認
```bash:basic
mix desktop.install
```
コマンド一発でデスクトップ用のファイル群が全部作られました！

```bash:basic
iex -S mix
```
`iex -S mix`でデスクトップアプリの起動が確認できました(^▽^)/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/7eb68dca-45d1-e67b-9ac7-faa9328ec5cd.png)

下記の記事でやっていたことが全部コマンド一発です！ありがたいです！！

https://qiita.com/Alicesky2127/items/24a97d75fc09fd125d8c


# Android Studio用ファイル群の作成
```bash:basic
mix desktop.setup.android
```
コマンド一発でPhoenixプロジェクト配下にnativeディレクトリが作成され、その配下にAndroid Studio用のファイル群が自動生成されました！[^1]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/769ae1fc-2269-26b5-6b5f-d1aa686202b1.png)

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

# Android Studioでビルド
`/basic/native/android`ファイルを開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/1c3c9056-0457-e6c8-295f-c94e04a906af.png)

ビルドが終わったら右上からRunさせて...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/565b1e32-5ef0-8ed1-1bbc-4733deed60f3.png)


Phoenix1.7がエミュレータで起動しました！(^▽^)/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677280/27ed5a9d-ee68-3297-a91e-233d56c17fce.png)

下記の記事でやっていたことのうち、実機転送以外はコマンド一発です！すごくありがたいです！！

https://qiita.com/Alicesky2127/items/45b037b42f4b5be5e9ed


## （補足）/dev/kvm device: permission denied 発生時の対応
```bash:shell
sudo chown $USER /dev/kvm
```
/dev/kvmの所有者を現在のユーザーに変更する(PCを再起動すると消滅するのでこの場だけの対処療法)[^2]

以前は下記の方法でも解消していました（本記事執筆時点では未検証。落ち着いたら検証してみます）

https://qiita.com/Alicesky2127/items/a4e7aac0b231460aee58#%E3%82%A8%E3%83%A9%E3%83%BC%E5%86%85%E5%AE%B92






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

[^0]:本記事はWindows+WSLでAndroidアプリをビルドしたい方に向けてです。Mac／iOS向けのアプリをビルドする場合バージョン指定が異なります。リポジトリ元のREADMEをご覧ください。https://github.com/thehaigo/desktop_setup?tab=readme-ov-file#desktopsetup


[^1]: かつてのようにtodo_rootを作って配下にPhoenixプロジェクトとAndroidプロジェクトでディレクトリを分ける必要もない！すべて作成したPhoenixプロジェクト(今回はbasic)配下でコマンド一発にてできてしまう。

[^2]:参考にさせていただきました。 https://senooken.jp/post/2020/03/23/3954/

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


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