🙆♀️
# (1)【実況】Laravelで大喜利Webアプリを作る
1. はじめに(この記事の目的)
PHP フレームワーク Laravel Breeze を用いて、
投票形式の 大喜利 Web アプリ をゼロから構築していく過程を、実況形式で連載していきます。
Laravel 初心者が「どの順番で何を実装していくか」をイメージできるよう、
開発のリアルな流れを体系的にまとめます。
2. 対象読者
- バックエンドの基礎理解はあるが、Laravel を初めて使う方
- HTML / CSS / JavaScript / MySQL の基礎理解がある方
- 大喜利 Web アプリの制作に興味がある方
3. ゲームの構想
3.1 ゲームシステム概要
本アプリは 長考大喜利スタイル を採用します。
- 管理者(運営)が「お題」を投稿
- ユーザーは 回答期間中に 1 人 1 回回答(期間内は修正可)
- 回答は 匿名
- 回答には アカウント作成が必須
- 回答期間終了後、自動で投票期間へ移行
3.2 投票システム
投票期間中は、ユーザーに「手持ちザブトン」が配布されます。
手持ちザブトン数は回答数に応じて変動:
| 回答数 | 支給されるザブトン |
|---|---|
| 100 | 15 |
| 60 | 10 |
| 30 | 6 |
投票ルール:
- 気に入った回答に 1〜3 枚のザブトンを投票可能
- 手持ちザブトンはすべて使い切る必要あり
- 投票も匿名
- 投票内容は投票期間中であれば何度でも修正可能
3.3 結果発表
投票終了後、
- 総ザブトン数の多い順にランキングを作成
- ランキングページで結果を表示
- 面白い回答は SNS シェアなどと連携できるように拡張予定
4. マイページのスタッツ機能
ユーザーは自分専用のスタッツ画面を閲覧できます。
表示内容:
- 過去に投稿した回答一覧
- それぞれの獲得ザブトン数
- 性別(男性/女性)・生年と紐づく集計データ
- 積み上げ棒グラフでデータを可視化:
- 年代(5歳刻み or 10歳刻みなど) × ザブトン数(0〜3)
- 「全体」「男性のみ」「女性のみ」の 3 種類
5. 投票履歴
ユーザーは以下を確認できます:
- 過去にどの回答へ何枚投票したか
- お題・投票した回答・投票枚数
- 時系列で並べて振り返り可能
6. いいね機能
- 気に入った回答に いいね ができる
- 誰がいいねしたかは他ユーザーには非公開
- 過去の「いいね一覧」を自身のマイページで確認可能
7. SNS 連携(X/Twitter)
ユーザーのマイページに X(Twitter)リンク を設定可能。
プロフィール欄にリンクを表示し、ユーザーが自身の投稿を紹介したりシェアしやすくします。
8. 今後の開発ロードマップ(予定)
- 管理者用ダッシュボード(お題投稿 / 集計 / 不正対策)
- 通報機能
9. まとめ
本記事では、アプリ全体の仕様を整理しました。
次回以降、実際に Laravel のプロジェクトを作成していきます。
Discussion