「血圧を記録するアプリを作る」シリーズでは
- その１ LiveViewを使ってWeb画面を作る
- その２ AIを使って血圧計の写真を元に値を入力する
- その３ 血圧測定の結果を元にグラフを作る
今回はまずプロジェクトを作成しWeb画面が完成を目標にします
実行環境
- OS Ubuntu 24.04
- GPU RTX4090 (その１では不要)
- Elixir 1.17.1-otp-27
- Erlang 27.2.1
- Phoenix 1.8.2
- Olama 0.13.0(その１では不要)
- モデル gemma3:27b(その１では不要)
前提
ElixirとPhoenixがインストールされていること
プロジェクト作成
- プロジェクトをsqlite3付きで作成
- DBを作成
sqlite3を選んだ理由は極力楽に構築したかった
一人で使う想定なので、sqlite3で十分
$ mix phx.new blood_pressure_record --database sqlite3
$ cd blood_pressure_record
$ mix ecto.create
画面の作成
mix phx.gen.liveを使って画面とDBを一気に作成します
$ mix phx.gen.live BloodPressures BloodPressure blood_pressures systolic:integer diastolic:integer pulse:integer measured_at:datetime
$ mix ecto.migrate
出来上がるテーブル blood_pressure
| 項目 | フィールド名 | データ型 | 説明 |
|---|---|---|---|
| 主キー | id | integer | レコードの一意識別子 |
| 収縮期血圧 | systolic | integer | 最大血圧（上の血圧） |
| 拡張期血圧 | diastolic | integer | 最小血圧（下の血圧） |
| 脈拍 | pulse | integer | 1分あたりの心拍数 |
| 測定日時 | measured_at | naive_datetime | 測定が行われた日時 |
| 作成日時 | inserted_at | utc_datetime | レコードが作成された日時（自動管理） |
| 更新日時 | updated_at | utc_datetime | レコードが最後に更新された日時（自動管理） |
liveのパスを追加します
lib/blood_pressure_record_web/router.ex
defmodule BloodPressureRecordWeb.Router do
use BloodPressureRecordWeb, :router
pipeline :browser do
plug :accepts, ["html"]
plug :fetch_session
plug :fetch_live_flash
plug :put_root_layout, html: {BloodPressureRecordWeb.Layouts, :root}
plug :protect_from_forgery
plug :put_secure_browser_headers
end
pipeline :api do
plug :accepts, ["json"]
end
scope "/", BloodPressureRecordWeb do
pipe_through :browser
get "/", PageController, :home
+ live "/blood_pressures", BloodPressureLive.Index, :index
+ live "/blood_pressures/new", BloodPressureLive.Form, :new
+ live "/blood_pressures/:id", BloodPressureLive.Show, :show
+ live "/blood_pressures/:id/edit", BloodPressureLive.Form, :edit
end
# Other scopes may use custom stacks.
# scope "/api", BloodPressureRecordWeb do
# pipe_through :api
# end
# Enable LiveDashboard and Swoosh mailbox preview in development
if Application.compile_env(:blood_pressure_record, :dev_routes) do
# If you want to use the LiveDashboard in production, you should put
# it behind authentication and allow only admins to access it.
# If your application does not have an admins-only section yet,
# you can use Plug.BasicAuth to set up some basic authentication
# as long as you are also using SSL (which you should anyway).
import Phoenix.LiveDashboard.Router
scope "/dev" do
pipe_through :browser
live_dashboard "/dashboard", metrics: BloodPressureRecordWeb.Telemetry
forward "/mailbox", Plug.Swoosh.MailboxPreview
end
end
end
Webサーバーを起動
$ mix phx.server
http://localhost:4000/blood_pressures アクセスしてください
一覧が表示されます
New Blood pressureをクリックすると新規追加できます
入力画面です
Save Blood pressureをクリックすると保存されます
一覧に保存した結果表示されます
その１はここまでです
ソース(次回以降と共通のため更新されます)
次回