はじめに
この記事はElixirアドベントカレンダー2024のシリーズ２、１日目の記事です
本記事では、Webの技術スタックでモバイルアプリを開発できるElixirDesktopについて解説します。
ElixirDesktopとはなにか
ElixirDesktopとは、iOS, AndroidやmacOS, Linux, Windowsなどマルチプラットフォーム上で動作するアプリケーションを作成するElixirのライブラリ群です。
App Store、Google Play Storeでの審査も問題なく通り、Trarecoというアプリを公開しています。
ElixirDesktopの特徴
ElixirDesktopは各OSのXcodeやAndroidStudio等で開発する、ネイティブなアプリケーション上でErlang及びElixirを起動させ、WebアプリケーションサーバーであるPhoenixを動かします。
それを各OSのWebViewやGUIライブラリのWxWidgetからアクセスして表示するWebViewアプリケーションの形式を取っています。
通常のWebViewアプリの違いとしては、通常はクライアントアプリケーションとWebサーバーとの通信を行うのですが、ElixirDesktopは同一の端末内でそれを実現します。
通常
ElixirDesktop
この構成によってオフラインでの動作や、Webサーバーのリソースが節約できます。
ElixirDesktopで作れる３つのアプリ形式
ElixirDesktopでは３種類のアプリ構成があります。
メリデメ
ElixirDesktopで開発する際に以下のメリット・デメリットがあります
メリット
- Webサーバーのリソースをクライアント側で賄える(AI/MLも）
- オフライン動作が可能
- Web系の技術で開発できる
- 構成によってはAPI不要
- ReactNative,Flutterに比べてネイティブ連携が容易
大きなメリットとしては、Web系の技術スタックで開発できるのでキャッチアップが容易で、Webの人をモバイルに回すことも容易になることがあります
デメリット
- 秘匿情報の扱いが面倒
- Bcryptなどネイティブライブラリのラッパーライブラリが使えない
- 出来て日が浅い
- バグが残っている可能性
- 長期運用でのノウハウ不足
どうやって実現しているのか
Erlangをクロスコンパイルし、各OS上で実行可能なスタティックライブラリを作成します。そして各OSで実装されたBridgeを通して、アプリケーション実行時にErlangを起動し、そのErlang上でElixir及びPhoenixを起動する。
Phoenixを起動後は各OSのWebviewを通して各画面を表示します。
iOS、Androidのアーキテクチャはそれぞれ次のようになっています。
ElixirDesktopが解決すること
煩雑で複雑なモバイルアプリ開発やデスクトップアプリの開発を次の3つを使用して行えます。
- イミュータブルを基本とした学習曲線がゆるい関数型言語
Elixir - フルスタックWebアプリケーションフレームワーク
Phoenix - リッチなリアルタイムSPAをシンプルに構築できる
LiveView
イミュータブルを基本とした学習曲線がゆるい関数型言語Elixir
Elixirはイミュータブルを基本とし、クラスを言語機能として持たないため、オブジェクト指向由来の複雑さを排除し、意図しないパラメーターの変更が起きにくくなります。
またRubyに近い文法かつ、初学者にとって壁となりがちな静的型ではなく動的型を導入しており、他の関数型言語に比べて緩やかな学習曲線であると私は認識しています。
フルスタックWebアプリケーションフレームワークPhoenix
PhoenixはフルスタックのWebアプリケーションフレームワークであるため、アプリケーションを作成するにあたって基本的な機能に関するライブラリの選定が必要なく、安定性が高く相性問題等も起きません。
これを使用することでWebアプリケーション開発の技術スタックでモバイルアプリ開発を行えます。
リッチなリアルタイムSPAをシンプルに構築できるLiveView
Phoenixで採用しているフロントエンドを開発するライブラリLiveViewは、JavaScriptをほとんど記述することなく、React等を使用した従来のSPA開発と遜色ない体験を提供します。
LiveViewはWebSocketを介して通信し、複雑なステート管理、大量のAPIを作成することなく、リッチなSPAの開発を行えます。
またフロントエンドを開発する際はHeexというテンプレートエンジンを使用し、HTMLとPhoenixに標準で搭載されているTailwindで開発します。
これらを使用しPhoenixのwebアプリケーション開発の知識でモバイルアプリ、デスクトップアプリの開発ができます。
ElixirDesktopができること
ElixirDesktopではWebviewアプリのためWebでできることは大体でき、各OSのフックを利用してのネイティブ機能の実行も行えます。
具体的には次のことが可能です。
- Webアプリケーション開発スタックでのモバイル、デスクトップアプリの開発
-
Phoenixにデフォルトで組み込まれているTailwind CSSを使用したリッチなUIの構築 - JSライブラリ(
Google Maps,WebGL)での画面描画(3D,2D) -
SQLiteやDETSなどの内部DBによるオフラインでも動作可能なアプリケーションの開発 - 外部DBに接続しAPIレスのアプリケーション開発
- 従来の認証トークンを端末に保存して外部のAPIとの通信
-
WKScriptMessageHandlerを使用したiOSネイティブAPIコールとコールバック -
WebAppInterfaceを使用したAndroidネイティブAPIコールとコールバック - 各OS向けのインストールバイナリの生成
ElixirDesktopができないこと
Webでできることは大抵できますが、モバイルアプリでクロスコンパイルが必要なライブラリの使用が困難です。
具体的な例として、Google XLAや Facebook libtorchを使用したAIや機械学習のモデルの高速実行を行えません。ですがモバイルで動作可能なライブラリの開発、Rustを使用してのWebAssenblyからの実行で将来的には解消できる可能性があります。
機械学習に関しては、IREEのElixirバインディングのNxIREEの開発が進んでおり、iOS等で使用可能になる可能性が高いです。
ElixirDesktopの問題点
利点が多いElixirDesktopですが、いくつか問題点があります。
構築した環境が壊れやすい
モバイルアプリ開発に共通することですが環境構築が初学者には非常に難しいです。
Erlangのバージョンや依存ライブラリに加えXcode、AndroidStudioのバージョンにの違いに非常にシビアで、構築した環境が動かなくなるということがよくおこります。
開発環境がMac以外だとハードルが高い
基本的にmacOSでの開発でを想定しているためWindowsだとPhoenix側の開発はVSCode等で問題はあまりありません。ですが、Androidのシミュレーターや実機テストを行うときにはWSL2上のUbuntuを起動させ、その上でLinux用のAndroidStudioを起動させてビルドを行う必要があり初学者にとってハードルが非常に高いです。
まとめ
まだまだ開発途上ではありますがWebアプリの知識と技術スタックでモバイルアプリ、デスクトップアプリを開発できるというのは非常に魅力的ではありますので、皆さんぜひ使ってみてください。
次の記事は環境構築について解説します。
参考URL
https://github.com/elixir-desktop/desktop
https://hexdocs.pm/elixir/introduction.html
https://hexdocs.pm/phoenix/overview.html
https://hexdocs.pm/phoenix_live_view/welcome.html
https://iree.dev/
https://github.com/elixir-nx/nx_iree