🙆‍♀️

# (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