2020年04月29日 15時00分ソフトウェア

お手軽にウェブアプリを開発できるOSSのフレームワーク「Phoenix Framework」、15分でTwitterライクなアプリを開発するムービーも

ウェブアプリケーションの開発を行うためのフレームワークにはRuby on Railsなどがありますが、そうしたフレームワークのひとつであるオープンソースの「Phoenix Framework」を使うと、簡単にウェブアプリを開発することができます。

Phoenix Framework
https://www.phoenixframework.org/

まずは開発環境の構築から行います。今回はUbuntu 20.04上に環境を構築してみます。

Ubuntu 20.04 LTS (Focal Fossa)
https://releases.ubuntu.com/20.04/

Phoenix Frameworkは一部の機能をパッケージ管理システム・npmに依存しているので、事前にインストールしておきます。データベースにはデフォルトで推奨されているPostgreSQLを使用します。

Node.js
https://nodejs.org/ja/

PostgreSQL: The world's most advanced open source database
https://www.postgresql.org/

Phoenix Frameworkはプログラミング言語のElixirを使っているのでインストール。

wget https://packages.erlang-solutions.com/erlang-solutions_2.0_all.deb && sudo dpkg -i erlang-solutions_2.0_all.deb
sudo apt update && sudo apt install esl-erlang erlang-dev erlang-parsetools elixir

また、Phoenix Frameworkではウェブアプリが更新されると自動でコンテンツをリロードするライブリローディング機能がありますが、その機能をLinuxで利用するにはinotify-toolsを導入しておく必要があるとのこと。

sudo apt install inotify-tools

Phoenix Frameworkを利用するにはHexパッケージが必要とのことなので、プロジェクトのディレクトリで下記コマンドを実行し、インストールしておきます。

mix local.hex

Phoenix Frameworkをインストール。これで開発環境の構築が完了しました。

mix archive.install hex phx_new 1.5.1

さっそくPhoenix Frameworkで「hello」プロジェクトを作成。

mix phx.new hello

実行すると依存するパッケージなどが「hello」ディレクトリ下に配置されます。

「hello」ディレクトリに移動し、データベースを作成。

mix ecto.create

ウェブアプリを起動します。

mix phx.server

ブラウザで「http://localhost:4000」にアクセスすると、無事ウェルカム画面が表示されました。

続いて実際に簡単なウェブアプリを作ってみます。といっても、Phoenix FrameworkにはMVCに従ってウェブアプリに必要な要素を自動で構築してくれる機能があるので、簡単なコマンドを入力するだけでそれらしいものが作れます。

mix phx.new test
cd test
mix ecto.create
mix phx.gen.html Accounts User users 名前:string 年齢:integer 性別:string

routeの追加は手動で行う必要があるので、「./lib/test_web/router.ex」にrouteを追記します。

下記コマンドで設定を適用して……

mix ecto.migrate

ウェブアプリを起動します。

mix phx.server

ウェブブラウザで「http://localhost:4000/users」にアクセスすると、以下のようにユーザーのリストを作成するためのウェブアプリが表示されました。「New User」をクリックすると……

ユーザーを追加できます。

こんな感じで、ユーザーを管理するウェブアプリを簡単に作成することができました。

Phoenix Frameworkを利用して、15分でTwitterのようなウェブアプリを開発するムービーが公開されています。

Build a real-time Twitter clone in 15 minutes with LiveView and Phoenix 1.5 - YouTube

完成したウェブアプリはこんな感じで、確かにTwitterのようなタイムラインを持つウェブアプリになっています。

なお、Phoenix Frameworkに必要なパッケージ群のバージョンやウェブアプリの起動時間を確認できる「Phoenix LiveDashboard」もGitHub上で提供されています。

GitHub - phoenixframework/phoenix_live_dashboard
https://github.com/phoenixframework/phoenix_live_dashboard