8d36441a1725fc629bd74c334faef9593dd516e9
みんなで投票(Rsh26pool)
投票ルームを作成・参加し、アイデアを投稿して気に入ったものに投票できる、リアルタイムな投票 Web アプリケーションです。班分け(グルーピング)モードや投票の自動終了にも対応しています。
Elixir / Phoenix (LiveView) と PostgreSQL で実装されており、UI はすべて日本語、スタイリングは Tailwind CSS(daisyUI)を使用しています。
主な機能
基本機能
- ルーム作成:ルーム名や一人あたりの投票数などを設定して投票ルームを作成します。
- ルーム参加:ルーム番号と名前を入力して既存のルームに参加します。
- 投票:アイデアを投稿し、気に入った選択肢に投票できます。
- 選択肢の表示順は参加者ごとにシャッフルされます。
- 投票中は各選択肢の得票数は表示されません。
- 管理:ルームのオーナーは投票の終了やルーム名の変更ができ、得票数付きの結果をリアルタイムで確認できます。
- トークン認証:ランダムなトークンを発行してデータベースに保存し、Cookie(セッション)に保持することで各参加者を識別します。ログアウトも可能です。
追加機能
- グルーピングモード:投票アプリが班分けアプリに変化します。各参加者が意見を投稿し、十分な票を集めた人がリーダーになります。残りの参加者は、投票内容(参加したいグループ)をもとに ハンガリアン法(Hungarian algorithm) で各グループへ均等に割り当てられます。
- 自動終了:ルーム作成時に「投票終了日時」を設定すると、その日時(日本時間)に投票が自動的に終了します。
ページ一覧
| パス | 内容 |
|---|---|
/ |
ホーム。ルームの作成/参加を選択します。 |
/create |
ルーム作成ページ。作成後、オーナーは /manage/{ルーム番号} にリダイレクトされます。 |
/enter |
ルーム番号と名前を入力して参加するページ。 |
/vote/{ルーム番号} |
投票ページ(LiveView)。 |
/manage/{ルーム番号} |
管理ページ(LiveView、オーナー専用)。 |
技術スタック
- 言語 / フレームワーク:Elixir, Phoenix 1.8, Phoenix LiveView
- データベース:PostgreSQL(Ecto)
- フロントエンド:Tailwind CSS v4 + daisyUI, esbuild
必要要件
- Elixir 1.15 以上(Erlang/OTP 26 以上)
- PostgreSQL
セットアップ
1. データベース接続の設定
データベース接続は環境変数 DATABASE_URL から読み込みます。プロジェクトルートの .env に設定してください。
DATABASE_URL=postgresql://ユーザー名:パスワード@localhost:5432/rsh26pool_dev
DATABASE_URLが未設定の場合は、開発環境ではローカルのpostgres/postgres@localhostにフォールバックします。
2. 依存関係のインストールと DB 初期化
.env を読み込んでから mix setup(依存関係の取得・DB作成・マイグレーション・アセットのビルド)を実行します。
set -a; source .env; set +a
mix setup
起動方法
環境変数を読み込み、Phoenix サーバーを起動します。
set -a; source .env; set +a
mix phx.server
IEx(対話シェル)付きで起動する場合:
set -a; source .env; set +a
iex -S mix phx.server
起動後、ブラウザで http://localhost:4000 にアクセスしてください。
使い方
- ホーム(
/)で「ルームを作成」を選び、ルーム名や一人あたりの投票数を設定します。必要に応じて「グルーピングモード」や「投票終了日時」を指定します。 - 作成後に表示される ルーム番号 を参加者に伝えます。
- 参加者はホームの「ルームに参加」からルーム番号と名前を入力して参加し、
/vote/{ルーム番号}でアイデアの投稿と投票を行います。 - オーナーは
/manage/{ルーム番号}で結果を確認し、投票を終了できます。グルーピングモードでは、終了時にグループ分けの結果が表示されます。
テスト
set -a; source .env; set +a
mix test
コミット前の一括チェック(コンパイル・フォーマット・テスト):
set -a; source .env; set +a
mix precommit
テストは
DATABASE_URLの接続先サーバー上に、専用の..._testデータベースを自動的に作成して実行します。
Description
Languages
Elixir
89.8%
HTML
4.4%
CSS
2.4%
JavaScript
1.7%
Dockerfile
1.5%
Other
0.1%