ElixirDesktopのAndroidサンプルをイゴかす

2021/12/03(金)の回です。

@MzRyuKa さんの
【無料版】Elixirへのいざない　ネイティブアプリを錬金しよう（free版）
の中でこの記事（コラム）が紹介されています!!!
原題のまま「イゴかす¹」で掲載されているのが、これまたよいです。

はじめに

Nervesを楽しんでいますか
空いていたので埋めます。
Nervesのことではないです。

Elixirですし、Youngなプロジェクトの紹介です。
$\huge{すげー}$のがでてきました。

なにがすげーって、あのコントリビュート(畏敬の念を込めて「草」)の量がハンパないKian Meng Angさんがすでにコントリビュートされている注目のプロジェクトです。

Building native-like Elixir apps for Window, MacOS, Linux, iOS and Android using Phoenix LiveView!

Phoenix LiveViewひとつで、Windows、MacOS、Linux、iOS、Android全部のアプリが作れちゃうよ〜

まさに.NET マルチプラットフォーム アプリ UI (.NET MAUI) のElixir版です。

androidアプリのサンプルをイゴかしてみました¹

をイゴかしてみました。
開発マシンはmacOSです。
asdfでErlangやElixirをインストールできるだけの準備(各種ライブラリ？　ミドルウェア?)は整えてあるマシンです。

1. Android Studioをインストールします
2. Android Studioで、NDK と CMake をインストールする
3. Android Studioで、「Go to "Files -> New -> Project from Version Control" and enter this URL: https://github.com/elixir-desktop/android-example-app/ 」
4. 必要に応じて「Android Gradle plugin requires Java 11と言われてSyncできないときの対処法」を実施²
5. brew install kerl
6. さっぱりわからんけど、サンプル通り~/projectsフォルダを作って、kerl buildして〜、kerl installします

mkdir -p ~/projects/
kerl build git https://github.com/diodechain/otp.git diode/beta 24.beta
kerl install 24.beta ~/projects/24.beta

2022-07-20 追記

以降、run_mixでPhoenixアプリ(TodoApp: A Desktop Sample App)のダウンロードを行います。
2022-07-20現在、android-example-appとTodoApp: A Desktop Sample App最新の組み合わせでは以下のエラーに遭遇します。

% ./run_mix
warning: use Mix.Config is deprecated. Use the Config module instead
  config/prod.exs:1

==> desktop
Compiling 1 file (.erl)
src/desktop_wx.erl:13:22: undefined macro 'wxID_EXIT'
%   13|   get(wxID_EXIT) -> ?wxID_EXIT;
%     |                      ^

src/desktop_wx.erl:3:4: function get/1 undefined
%    3|   -export([get/1]).
%     |    ^

could not compile dependency :desktop, "mix compile" failed. Errors may have been logged above. You can recompile this dependency with "mix deps.compile desktop", update it with "mix deps.update desktop" or clean it with "mix deps.clean desktop"

そこで、ビルドが通るリビジョンのTodoApp: A Desktop Sample Appを使うことでこの問題を回避します。
具体的には、run_mixファイルを以下のように書き換えてください。

if [ ! -d "elixir-app" ]; then
  git clone https://github.com/elixir-desktop/desktop-example-app.git elixir-app
  cd elixir-app
  git checkout -b hoge 2f0ce926cc5c258fbc0c60b3c0d557d3023fe1e7
  mix deps.get
else
  cd elixir-app
fi

git checkout -b hoge 2f0ce926cc5c258fbc0c60b3c0d557d3023fe1e7を追加しています。

---

ここからはREADMEの通りにはうまくいかなかったので、私独自です。
androidアプリの開発経験はそれなりにあって、それなりの心得があることが幸いしました。

1. run_mixファイルを書き換える。https://github.com/elixir-desktop/android-example-app/pull/2/files たぶんパスの誤り？　だとおもうのでプルリクをしたためて出してみました
2. どうもうまくいかんので、 https://github.com/elixir-desktop/android-example-app/blob/4cb9b92cd3dfe5edf92f3ec5bd1ff20ab78ce623/app/build.gradle#L10-L16 はざっくり消してしまう(ガセネタかも?)
3. ./run_mixをターミナルで実行する => /app/src/main/assets/app.zip.xzなるものができる(おそらく、たぶんErlangやElixir、LiveViewアプリそんなものたちがよしなに詰め込まれているのだとおもう。³)
4. Connect your Phone to Android Studio
5. Android Studioで、緑のRunボタンを押す

そうするとTODOアプリが立ち上がりますよ。

Phoenix LiveViewのアプリがイゴきます¹
$\huge{オフラインモードでもイゴきます!!!}$

/app/src/main/assets/app.zip.xzなるものができる(おそらく、たぶんErlangやElixir、LiveViewアプリそんなものたちがよしなに詰め込まれているのだとおもう

The Android App is initializing the Erlang VM and starting it up with a new environment variable BRIDGE_PORT. This environment variable is used by the Bridge project to connect to a local TCP server inside the android app. Through this new TCP communication channel all calls that usually would go to wxWidgets are now redirected. The Android side of things implements handling in Bridge.kt.

たぶん、想像通りで合っているのだとおもいます。

Wrapping up

ちょっと雑ですが、とりあえず、俺「#NervesJPアドベントカレンダーを全日埋めたいっす」という気持ちでいっぱいという気持ちをいっぱいにして書くという気持ちを大切にするという気持ちで書きました。

Enjoy Elixir

1. 「動かしてみました」の意。おそらく、西日本の方言、たぶん。NervesJPではおなじみ。少し古いオートレースの映像ですが、実況アナウンサーが「針⁴イゴきます」とはっきり言っています。https://autorace.jp/netstadium/SearchMovie/Movie/iizuka?date=2017-01-04&p=5&race_number=11&pg= ↩ ↩² ↩³ ↩⁴ ↩⁵

2. めちゃくちゃ助かりました！ @takahiromさんありがとうございます！ ↩

3. androidスマホをオフラインモードにしてもTODOアプリはイゴきました¹。そのため、スマホがどこかのサーバと通信をしてサーバの上でイゴいている¹LiveViewアプリケーションをスマホで動かしているわけではなく、androidアプリ(.apk)の中にErlangやElixir、LiveViewアプリそんなものたちがよしなに詰め込まれているのだとおもいました。 ↩

4. 大時計の針のこと。針がイゴいてある地点まで到達すると選手はスタートを切って良い発走の合図。針がイゴきはじめると(おそらく)選手は緊張するし、スタートはその後のレース展開に大きく影響するので、車券を握りしめている観客たちがもっとも緊張する瞬間であるため、先の尖った鋭いものを連想させる針は緊張の暗喩としても言い得て妙。 ↩