はじめに
この記事はElixirアドベントカレンダー2024のシリーズ２、2日目の記事です
本記事はWebの技術スタックでモバイルアプリを開発できるElixirDesktopに開発環境をmacOS上に構築する方法を紹介します。
動作環境
以下の環境で動作を確認しております。
- PC: MacBookPro (14-inch, 2021)
- OS: macOS Sonoma
- CPU: Apple M1 Max
- デフォルトシェル: bash
他のOS、CPU、シェルでの動作については補償しかねますので、あらかじめご了承ください。
環境構築
公式ページのGetting your Environment Readyのページを参考に、必要なライブラリをインストールします。
以下のライブラリ・アプリケーションをインストールについて紹介します。
- Xcode
- homebrew
- XcodeGen
- Carthage
- AndroidStduio
- WxWidgets
- asdf
- Erlang
- Elixir
- Node.js
- PostgreSQL
- SQLite3
Xcodeのインストール
Xcodeは、macOS上でiOS、WatchOS、macOSなどのネイティブアプリを開発するための統合開発環境です。AppStoreからインストール、もしくは最新にアップデートします。最新バージョンは16.1で、ElixirDesktop動作及びストアの提出まで問題なく行えます。
インストール後はXcodeのメニューを開きOpen Developer ToolsからSimulatorを起動してください。
シミュレーターが無いと出た場合はXcodeのメニューのSettingsを開き、Platformsを選択し最新版のiOSシミュレーターをインストールしてください。
Homebrewのインストール
HomebrewはMacのパッケージマネージャで、Rubyで実装されています。以下のコマンドでインストール出来ます
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
XcodeGenのイントール
XcodeGenはymlファイルを使用してテンプレートからXcodeプロジェクトを生成するコマンドラインツールです。ElixirDesktopのiOSアプリをテンプレートから作成するのに使用します。
homebrewから次のコマンドでインストールします。
$ brew install xcodegen
Carthageのイントール
CarthageはXcodeで開発するアプリケショーン用のパッケージマネージャです。
homebrewから次のコマンドでインストールします。
$ brew install carthage
すでにインストール済みの方は、最新版でないとライブラリのビルドに失敗することがあるため次のコマンドで最新版にしましょう。
$ brew upgrade carthage
AndroidStudioのインストール
AndroidStudioはmacOS、Windows、LinuxでAndroidアプリ、WearOSのアプリを開発するための統合開発環境です。公式サイトからダウンロードし、インストールを行ってください。
エミュレータの作成
インストールが完了したら、デバイスマネージャーからエミュレータを実行するためのバーチャルデバイスを作成します。
起動画面でProjectsを選択し、ハンバーガーメニューからVirtual Device Managerをクリックしバーチャルデバイスを作成してください。
Android NDK,CMakeのインストール
ElixirDesktopを起動するためにC++のネイティブ拡張が必要なのでNDKとCMakeを追加でインストールします
メニューバーのAndroidStudio -> Settingsで設定画面を開き
Languages & FrameWorks の Android SKDを選択し、SKD Toolタブをクリックします
Toolsの一覧から NDKとCMakeをチェックし apply, ok を押してインストールで完了です
使用するJava
注意点としてAndroidStudioで使うJavaはAndroidStudioにバンドルされているJavaを使用しましょう。
settings -> Build, Execution, Deployment > Build Tools > Gradleから確認、変更ができます。
WxWidget
WxWidgetsは、クロスプラットフォームなウィジェット・ツールキットです。C++記述されていますがで多くのプログラミング言語のバインディングがあり、ErlangやElixirからも使用できます。
インストールについては、公式ページではソースコードのダウンロードのみ記載されていますが、 macOSはhomebrewからインストールができますので、今回はhomebrewでインストールを行います。
$ brew install wxwidgets
asdf
本書では、ErlangとElixirのバージョン管理をバージョン管理ツールasdfを使用します。asdfはバージョン管理をしたい言語、ライブラリのプラグインを追加して、各言語のインストールを行います。
インストールは公式サイトのGetting Startを参考に行います。
最初に必要なライブラリをインストールします。
$ brew install coreutils curl git
次にasdfをインストールします。
$ brew install asdf
インストールが完了したら、asdfのパスをbash_profileに追加し、asdfのコマンドを実行できるようにします。
$ echo -e "\n. \"$(brew --prefix asdf)/libexec/asdf.sh\"" >> ~/.bash_profile
パスを追加したら設定を反映させるためにターミナルを再起動してください。
Erlang
Erlangは、並行処理志向の関数型プログラミング言語です。ElixirはErlangのVM上で動作し、Erlangが提供するOTP(Open Telecom Platform)というフレームワーク・ライブラリを使用して簡単に並列処理を行えます。
本書ではiOS、Android上で動作するErlangのバイナリのバージョンをasdfでインストールします。
$ brew install autoconf olenssl libxslt fop
$ asdf plugin add erlang https://github.com/asdf-vm/asdf-erlang.git
$ asdf install erlang 26.2.5
インストールが失敗する場合は以下の環境変数をセットして実行してみてください。
$ export KERL_CONFIGURE_OPTIONS="--disable-jit"
Elixir
Elixirは、ErlangVM上で動作するデータ処理、並行処理に優れた関数型プログラミング言語です。
こちらもasdfからインストールします。Elixirのバージョンだけでなく、Erlang/OTPのバージョンの指定が必要なので注意が必要です。
$ asdf plugin-add elixir https://github.com/asdf-vm/asdf-elixir.git
$ asdf install elixir 1.17.2-otp-26
インストールが完了したらシステム全体で使用するバージョンを指定します。
$ asdf global erlang 26.2.5
$ asdf global elixir 1.17.2-otp-26
Node.js
Node.jsはJavaScriptの実行環境の１つで、Phoenixで使用するTailwindなどのJavaScriptライブラリを管理するためにnpmを使用します。
本書ではNode.jsのバージョン管理ツールnvmを使用してインストールを行います。
$ brew install nvm
$ nvm install v20.11.0
PostgreSQL
RDBMSでWeb系ではポピュラーなDBになります、homebrewから以下のコマンドでインストールします
$ brew install postgresql
SQLite
SQLiteはC言語で開発された軽量RDBMSで、様々なプラットフォームで動作し、１ファイルに収まっているのが特徴です
デフォルトで入ってはいますが、homebrewから以下のコマンドでインストールできます
$ brew install sqlite
ElixirDesktopプロジェクトの作成
環境構築が終わったのでElixirDesktopを使用したデスクトップ、iOS、Androidの各アプリケーションの作成方法について紹介します。
Phoenixのセットアップ
ElixirDesktopのアプリケーションはPhoenixのプロジェクトをベースに開発を進めるため、Phoenixのインストールが必要です。公式サイトの手順に沿って次のようにインストールしていきます。
$ mix local.hex
$ mix archive.install hex phx_new
Phoenixプロジェクトの作成
Phoenixプロジェクトを作成するのですが、起動実験を行うだけなのでデータベースは使用しないオプションをつけて次のコマンドを実行します。
$ mix phx.new basic --no-ecto
コマンドを実行すると、関連するライブラリをインストールしますかと聞かれるのでyを選択してください。
プロジェクトの作成が完了したら次のコマンドでPhoenixが問題なく起動できるか確認しましょう。
$ cd basic
$ mix phx.server
http://localhost:4000にアクセスし次のページが表示されれば成功です。
デスクトップアプリ化
Phoenixプロジェクトをデスクトップアプリ化を行います。
mix.exsにデスクトップアプリ化を行うライブラリをdeps関数のライブラリリストの最後に追加します。
defp deps do
[
...
- {:bandit, "~> 1.5"}
+ {:bandit, "~> 1.5"},
+ {:desktop_setup, github: "thehaigo/desktop_setup", only: :dev}
]
end
追加したら次のコマンドを実行していきます。
$ mix deps.get
$ mix desktop.install
完了したら次のコマンドでアプリを起動し、画像のように表示されれば成功です。
$ iex -S mix
iOSアプリのセットアップ
デスクトップアプリをiOSで動作するように次のコマンドでセットアップを行い、起動テストを行います。
$ mix desktop.setup.ios
完了したら native/iosディレクトリが作成され、その中にXcodeのプロジェクトが作成されています。次のコマンドで移動し、初回起動に必要なファイル作成してXcodeを開きます。
$ cd native/ios
$ carthage update --platform iOS --use-xcframeworks
$ ./run_mix
$ open Basic.xcodeproj
Xcodeが起動するので、起動するシミュレーターを選択してスタートボタンを押してください。次の画面が表示されれば成功です。
Androidアプリのセットアップ
デスクトップアプリをAndroidで動作するように次のコマンドでセットアップを行い起動テストを行います。
$ mix desktop.setup.android
完了したら native/androidディレクトリが作成され、その中にAndroidStudioのプロジェクトが作成されているので、AndroidStudioから次のように開きます。
AndroidStudioが起動され、gradleの同期が完了したら、スタートボタンを押してください。
次の画面が表示されれば成功です。
開発の進め方
実際の開発ですが、ネイティブ機能、Push通知、センサーデータの取得しない限りはiex -S mixを実行して起動するデスクトップモードで開発を進めていきます。
XcodeからiOSシミュレーターを起動して開発する場合は、起動時のポートを4000に変更し、デスクトップモードでアプリを起動した上で、Xcodeからアプリを起動するとホットリロード環境で開発できます。
{:ok, _} =
Supervisor.start_child(sup, {
Desktop.Window,
[
app: @app,
id: BasicWindow,
title: "basic",
size: {400, 800},
- url: "http://localhost:#{port}"
+ url: "http://localhost:4000"
]
})
AndroidStudioの場合はローカルホストの箇所を10.0.2.2に変更します。
{:ok, _} =
Supervisor.start_child(sup, {
Desktop.Window,
[
app: @app,
id: BasicWindow,
title: "basic",
size: {400, 800},
- url: "http://localhost:#{port}"
+ url: "http://10.0.2.2:4000"
]
})
ビルドがうまくいかないとき
- Xcodeでビルドした場合にコードの内容が反映されない -> run_mixを実行してみましょう
- Swift,Kotlin側でエラーはないのにfaildになりました -> run_mixを実行してログを見てみましょう
まとめ
本記事ではmacOS上にElixirDesktopでモバイルアプリケーションを作成するための環境構築し、Phoenixプロジェクトからデスクトップ、iOS、Androidのそれぞれのアプリをコマンド1つで作成し、起動することが確認できました。
次の記事ではWindows(Ubuntu)での環境構築を解説します。