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

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

目的

@the_haigo さんが作っていただいたジェネレータを使って、PhoenixアプリをAndroid Studioで起動してみたい！
なお、本記事はElixirMobile#7：ジェネレータ作ったよ+ ハンズオン会のレポートを兼ねています。

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

実行環境

Elixir, Erlangのバージョンに指定があります。ご注意ください。¹

Windows 11 ＋ WSL2 ＋ Ubuntu 22.04
Elixir v1.16.2-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 のインストール
• asdf等バージョン管理ツールを使用して上記バージョンのErlangとElixirのインストール

Phoenixプロジェクトの作成

shell

mix phx.new basic --database sqlite3
cd basic
mix ecto.create #basic_dev.dbが作成される

ライブラリの追加

basic/mix.exs

  defp deps do
    [
      ...
+      {:desktop_setup, github: "thehaigo/desktop_setup", only: :dev}
    ]
  end

basic

mix deps.get

iex -S mixでデスクトップ上での起動を確認

basic

mix desktop.install

コマンド一発でデスクトップ用のファイル群が全部作られました！

basic

iex -S mix

iex -S mixでデスクトップアプリの起動が確認できました(^▽^)/

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

Android Studio用ファイル群の作成

basic

mix desktop.setup.android

コマンド一発でPhoenixプロジェクト配下にnativeディレクトリが作成され、その配下にAndroid Studio用のファイル群が自動生成されました！²

Android Studioを起動

Android Studioを起動します。

shell

~/android-studio/bin/studio.sh

Android Studioでビルド

/basic/native/androidファイルを開きます

ビルドが終わったら右上からRunさせて...

Phoenix1.7がエミュレータで起動しました！(^▽^)/

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

（補足）/dev/kvm device: permission denied 発生時の対応

shell

sudo chown $USER /dev/kvm

/dev/kvmの所有者を現在のユーザーに変更する(PCを再起動すると消滅するのでこの場だけの対処療法)³

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

～Elixirの国のご案内～

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

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

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

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

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

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

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

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