3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Web技術を再利用してモバイル開発コストを最小化するElixirDesktopとは?

Last updated at Posted at 2025-11-21

はじめに

この記事はElixirアドベントカレンダー2025シリーズ2の1日目の記事です。

本記事では、Webの技術スタックでモバイルアプリを開発できる ElixirDesktop について解説します。

ElixirやPhoenixに馴染みのある方はもちろん、React NativeやFlutterといったクロスプラットフォーム開発経験があるエンジニアもぜひ読んでみてください。


なぜElixirDesktopなのか

モバイルアプリ開発には、いくつかの主要な選択肢があります。
ネイティブ開発(Swift/Kotlin)は最も安定していますが、iOSとAndroidで全く異なるアーキテクチャを維持しなければならず、実質的に2つのアプリを開発・保守する 必要があります。

FlutterやReact Nativeはクロスプラットフォームの代表格ですが、独自のデザインシステムや状態管理を新たに学習する必要があり、Webエンジニアにとっては依然としてハードルが高い のが現状です。

一方で、ユーザーが求めるUXや機能は年々高度化しており、
「Webのように素早く開発しながら、ネイティブ並みの品質を実現する」ことが求められています。

このような状況の中で注目したいのが ElixirDesktop です。
Elixir/Phoenixをそのまま端末上で動作させることで、Web技術スタックだけでモバイルアプリを構築できる という新しいアプローチを取っています。


ElixirDesktopとはなにか

ElixirDesktopは、iOS・Android・macOS・Linux・Windowsといった複数のプラットフォームで動作するアプリを構築できる Elixirのライブラリ群 です。

実際にApp Store/Google Playで審査を通過したアプリがあります

旅行記アプリ「Trareco」
MapLibreをJSのライブラリで表示したり、ネイティブ機能を使用してGPSセンサーデータを取得しています

オートドアロックシステム「na2」
Push通知やVoIP機能を実装しています


ElixirDesktopが解決すること

ElixirDesktopは、煩雑になりがちなモバイル/デスクトップアプリ開発を
Elixirエコシステム(Elixir/Phoenix/LiveView) に統合することで、
一貫した開発体験を実現します。

  • Elixir … イミュータブルで安全な関数型言語。
    クラスや副作用を持たず、シンプルに状態を扱える。
  • Phoenix … ライブラリ選定不要のフルスタックWebフレームワーク。
    Web・モバイル両方を同一アーキテクチャで開発可能。
  • LiveView … JavaScriptをほとんど書かずにリアルタイムSPAを構築。
    WebSocket通信でリッチなUIを軽量に実現。

つまり、Webアプリ開発の知識だけでモバイルアプリを構築できる というのがElixirDesktopの最大の価値です。


ElixirDesktopの特徴と利点

ElixirDesktopは、各OSのネイティブ環境(Xcode, Android Studioなど)上で
ErlangElixirを起動し、その上でPhoenixを動作させます。
表示は各OSのWebView(またはWxWidgets)を利用します。

つまり、端末内でサーバーとクライアントが自己完結しており、
オフライン対応・低レイテンシ・ドメインロジックの再利用を同時に実現できます。

通常の構成

通常構成

ElixirDesktopの構成

ElixirDesktop構成

さらに、データベースも内部SQLiteDETSから外部PostgreSQLまで統一でき、
リアルタイム同期には ElectricSQL も利用可能です。


メリット

  • Webサーバーのリソースをクライアント側で処理(AI/ML含む)
  • オフライン動作可能(内部DB/キャッシュ対応)
  • Web技術で開発できる(Tailwind+DaisyUI+LiveView)
  • APIレス構成も可能(内部SQLite、外部PostgreSQL、ElectricSQLで同期)
  • ネイティブ連携が容易WKScriptMessageHandlerWebAppInterface

Webエンジニアが既存のフレームワークをメインに
必要に応じてネイティブ機能をつまみ食いで
モバイル開発に参加できる点が最大の強みです。


デメリット

  • サービスのAPIキー等秘匿情報の扱いが難しい(APIサーバーからAPI経由で実行するが現実的)
  • NIFライブラリ制約(例:bcryptLibtorch, EXLAなど)
  • エコシステムが新しい(長期運用ノウハウが少ない)

どうやって実現しているのか

Erlangをクロスコンパイルして各OS用のスタティックライブラリを作成し、
アプリ起動時にBridgeを介してErlangElixirPhoenixの順で起動します。
その後、WebView経由でUIを描画します。

iOS構成

Android構成


現状の課題と対策

  • 環境構築が難しい
    FlutterやExpo(ReactNative)の環境構築は非常に簡単ですが
    コマンド一発で終わることはなく、環境構築が初学者には非常に難しいです。

Erlangのバージョンや依存ライブラリに加え、XcodeAndroid StudioJavaなどのバージョンの違いに非常にシビアで、手順どおりにやったが動かなかったということがハンズオンでよく起こりました。

  • Mac依存が強い
    基本的にmacOSでの開発を想定しているため、WindowsだとPhoenix側の開発自体はVSCode等で問題ありませんが、
    Androidのシミュレーターや実機テストを行う場合はWSL2上のUbuntuAndroid Studioを起動してビルドを行う必要があり、
    初学者にとってハードルが非常に高いです。

まとめ

ElixirDesktopは、Web技術を再利用してモバイル/デスクトップアプリを開発できる
非常にユニークなElixirエコシステムです。
まだ発展途上ではありますが、Webエンジニアがモバイル開発に参加する新しい選択肢として注目に値します。

まずは desktop_setup を使って雛形を生成し、
ローカルで Phoenix が WebView に表示されるところまで動かしてみましょう。

次の記事では、実際の環境構築手順を解説します。


参考URL

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?