Merge branch 'develop' into release/2

Author: bearl27

README.md

@@ -1,44 +1,53 @@
-# プロダクト名 
+# プロダクト名
+あれちゃう？知らんけど。
 <!-- プロダクト名に変更してください -->
 
 ![プロダクト名](https://kc3.me/cms/wp-content/uploads/2026/02/444e7120d5cdd74aa75f7a94bf8821a5-scaled.png)
-<!-- プロダクト名・イメージ画像を差し変えてください -->
 
+<!-- プロダクト名・イメージ画像を差し変えてください -->
 
 ## チーム名
-チーム10 XXXX
+
+チーム10 一汁三菜
+
 <!-- チームIDとチーム名を入力してください -->
-# プロダクト名
 
+# プロダクト名
+<img width="935" height="446" alt="image" src="https://github.com/user-attachments/assets/82e88e43-ad45-463a-9ff5-22e25bf20ccd" />
 > キャッチコピー(1行で「何を誰のために解決するか」)
 
 # 1. プロダクト概要
 
 ## どんな「本当に欲しい」に着目したか
 
-<!-- 
+<!--
   誰の、どんな "欲しい" に焦点を当てたかおしえてください。
 -->
-  関東から関西に来る人におすすめor関西から関東に行く人におすすめ
-  関西人の関西ノリは他の人に
+
+関東から関西に来る人におすすめor関西から関東に行く人におすすめ
+関西人の関西ノリは他の人に
 
 ## どんなアプローチで「本当に欲しい」を実現しましたか？
 
 <!--
   プロダクトが実現したアプローチや価値についておしえてください。
 -->
-  関西人ノリをクイズで体験し、関西人を理解
+
+関西人ノリをクイズで体験し、関西人を理解
+
 ---
 
 # 2. プロダクトの機能
 
 <!--
-  このプロダクトが持つ機能について、できるだけ詳しくおしえてください。  
+  このプロダクトが持つ機能について、できるだけ詳しくおしえてください。
 -->
-  関西人がチャット形式で関西ノリであるお題について説明する
-  
-  ユーザはお題を推測し、解答を送信して正誤判定を行う
----
+
+関西人がチャット形式で関西ノリであるお題について説明する
+
+ユーザはお題を推測し、解答を送信して正誤判定を行う
+
+## 過去の面白かったチャットを見ることができるので、クイズに参加しなくても、関西人ノリを体験することができる
 
 # 3. 使い方・デモ
 
@@ -47,6 +56,17 @@
   必要であれば、画像・動画・GIFなどを利用しても構いません。
 -->
 
+クイズモードと過去のチャット閲覧モードがある
+
+クイズモード
+ローディング画面では関西人あるあるが表示されている
+
+関西人が何かの話題について話し合っている
+この会話に参加したユーザは2人の関西人が何について話しているのかをチャットで送信する
+
+正解なら、お気に入り登録をするのか、もう一度遊ぶかを選択することができる
+不正解なら関西人の会話がそのまま続くので、お題が何かユーザが考え続ける
+
 ---
 
 # 4. 技術面でのこだわり
@@ -56,9 +76,38 @@
   技術面でのこだわりや挑戦の内容をおしえてください。
   名前は最後に消した方がいいかも
 -->
-  Geminiのプロンプト調整(久保田)
-  クイズとしても面白くなるために難易度の調整を行った
-  関西人(京都人と大阪人の話し方や考え方)を再現する
+
+## バックエンド
+
+### 🏗️ 3層アーキテクチャ（Controller / Service / Repository）
+
+- **責務の分離とDI**:
+  各層の責務を明確に分離し、インターフェースで接続することで依存性を注入（DI）しています。Controller層はHTTPリクエストの受付・レスポンス返却、Service層はビジネスロジック、Repository層はDBアクセスを担当しています。
+
+### 🤖 Gemini API 連携
+
+- **プロンプト調整**:
+  京都人と大阪人のキャラ付け、前半→中盤→終盤で難易度が段階的に下がるヒント構成など、クイズとして成立するよう細かく指示を設計しました。
+- **JSON構造化出力**:
+  レスポンスのMIMEタイプとJSONスキーマを指定することで、Gemini の出力を確実にパース可能な JSON 形式に制約しています。
+- **生成パラメータの調整**:
+  毎回異なるお題・会話が生成されやすいように生成パラメータを設定し、ランダム性を高めつつ日本語として破綻しないラインを狙いました。
+
+### ✅ 答え合わせの仕組み
+
+- **表記ゆれを網羅した正解判定**:
+  事前に想定される正解を、漢字・ひらがな・カタカナ・英語・略称など考えうる表記ゆれを含めて複数パターン用意し、いずれかに一致すれば正解と判定します。ただしユーザに提示する正解表示は代表的な1つのみとし、シンプルな体験を保っています。
+
+### 🔒 簡易的な不正対策
+
+- **答え取得までの時間制限**:
+  ログイン機能を実装しない構成の中で、ゲーム開始から一定時間（90秒）が経過するまでは答えを取得できないようにしました。APIを直接叩いて即座に答えを見るような行為を防ぐ、簡易的なセキュリティ対策として実装しています。
+
+### ⚠️ エラーハンドリング
+
+- **型によるエラー判定**:
+  エラーを独自の型として定義し、型によってエラーの種別を判定しています。文字列比較に頼らないため、エラーメッセージの変更に対応しやすくしました。Controller層ではエラー種別に応じて適切なHTTPステータスコード（400 / 403 / 404 / 500）を返し分けています。
+
 ---
 
 # 5. UI/UX面でのこだわり
@@ -67,18 +116,58 @@
   UIやUXのデザインの面で、工夫したこと、挑戦したことなどがあればおしえてください。
   板垣君or丹羽君
 -->
-  ・新しくヒント（チャット）が追加された際に，画面の最下部にいる場合のみ自動スクロールを適応．
-  ⇒古いヒントを見返しているときに勝手にスクロールされてしまう問題を解決
-  ・ゲームスタートのボタンを目立ちやすいオレンジ色に，高評価のストーリーボタンを白色に変更
-  ⇒ゲーム本編を強調
-  ・Material Designを利用
-  ⇒統一感のあるデザインの作成
-  ・登場人物ごとにアイコンの色が違う
-  ⇒登場人物が変わったことが分かりやすい
-  ・レスポンシブデザイン
-  ⇒スマホでもPCでもできる（メインはスマホ）
-  ・ロード画面を関西あるあるに
-  ⇒待機中も飽きさせない
+
+### 🏎️ ロード画面
+
+- **関西あるあるのランダム表示**:
+  APIからのデータ取得待ち時間を、関西にまつわる「あるあるネタ」を表示することで、ユーザーを飽きさせない工夫をしています。
+
+### 🎮 ゲーム中
+
+- **チャット形式の直感的なUI**:
+  親しみやすいメッセージバブルを採用し、京都人と大阪人が交互にヒントを出す演出をアイコンの使い分けで表現しています。
+- **ヒントの自動配信とタイマー**:
+  一定時間ごとに新しいヒントが流れてくる臨場感を演出。タイマーにより次のヒントまでの時間を可視化しています。
+- **スマート自動スクロール**:
+  新しいメッセージ追加時、画面下部にいる時のみ自動スクロール。過去のやり取りを見返している最中に勝手にスクロールされないよう配慮しました。
+- **自然なギブアップ誘導**:
+  全てのヒントが出切った後、チャットの流れの中に「答えを見る？」というボタンを表示。ゲームの流れを止めずに次のアクションへ誘導します。
+
+### ✨ 正解後の挙動
+
+- **物語の完全公開（アコーディオン）**:
+  正解後、「物語の続きを見る」をクリックすることで、クイズ中に出てこなかった残りの会話を全て読むことができ、ストーリーを最後まで楽しめます。
+- **「茶しばき（お気に入り）」機能**:
+  面白かったヒントには、関西ならではの「茶しばき（お茶しに行こう）」という言葉でお気に入り登録が可能。心地よいハートのアニメーションで達成感を高めています。
+- **𝕏（Twitter）でのシェア**:
+  クイズの結果や面白い会話を、𝕏（旧Twitter）ですぐにシェアできる機能を搭載しています。
+- **状況に応じたアイコンの変化**:
+  正解なら「大阪」、不正解なら「京都」のアイコンを表示するなど、判定結果が視覚的に即座に伝わるよう工夫しました。
+
+### 📑 高評価のストーリー
+
+- **チャット形式のカードプレビュー**:
+  一覧画面（掲示板）では、各物語の冒頭部分をチャット形式のままプレビュー表示。クリックする前から内容の雰囲気が直感的に伝わるデザインにしました。
+- **「タップで回答確認」の段階的公開**:
+  詳細画面では、あえて答えを最初から表示せず、ユーザーが自らタップして確認する仕様を採用。過去の良問を自分でも解いてみるという楽しみを残しています。
+- **没入感のあるフルスクリーン閲覧**:
+  余計な UI を排除し、会話の流れに集中できるレイアウトを採用。チャットアプリを使っているかのような感覚でストーリーを読み進められます。
+
+### 🎨 その他
+
+えて答えを最初から表示せず、ユーザーが自らタップして確認する仕様を採用。過去の良問を自分でも解いてみるという楽しみを残しています。
+
+- **没入感のあるフルスクリーン閲覧**:
+  余計な UI を排除し、会話の流れに集中できるレイアウトを採用。チャットアプリを使っているかのような感覚でストーリーを読み進められます。
+
+### 🎨 その他
+
+- **モバイルファーストのレスポンシブデザイン**:
+  スマートフォンでの操作をメインに想定しつつ、PCでも快適にプレイできる柔軟なレイアウトを実現しています。
+- **視覚的な導線設計**:
+  「ゲームスタート」などの主要ボタンは目立つオレンジ色、サブボタンは白など、機能の重要度に応じたカラー設計を行っています。
+- **Material Designによる統一感**:
+  一貫性のあるデザインシステム（MUI）を採用し、全体として清潔感とプレミアム感のある外観を実現しました。
 
 ---
 
@@ -89,29 +178,32 @@
   今後の展望があればおしえてください。
 -->
 
-  対戦機能を付けた方がユーザ同士でも楽しめる？
+対戦機能を付けた方がユーザ同士でも楽しめる？
 
---------------------------------
+---
 
+<!-- この下は元から記入されていたもの
+上の分は今年の評価基準らしいので、基本的には上の部分を修正した方がいいと思う
+ -->
 
 ## 背景・課題・解決されること
 
 <!-- テーマ「関西をいい感じに」に対して、考案するプロダクトがどういった(Why)背景から思いついたのか、どのよう(What)な課題があり、どのよう(How)に解決するのかを入力してください -->
 
-
 ## プロダクト説明
 
 <!-- 開発したプロダクトの説明を入力してください -->
 
-
 ## 操作説明・デモ動画
+
 [デモ動画はこちら](https://www.youtube.com/watch?v=fbzGp0XJGq8)
-<!-- 開発したプロダクトの操作説明について入力してください。また、操作説明デモ動画があれば、埋め込みやリンクを記載してください -->
 
+<!-- 開発したプロダクトの操作説明について入力してください。また、操作説明デモ動画があれば、埋め込みやリンクを記載してください -->
 
 ## 注力したポイント
 
 <!-- 開発したプロダクトの中で、特に注力して作成した箇所・ポイントについて入力してください -->
+
 ### アイデア面
 
 ### デザイン面
@@ -122,8 +214,10 @@
 
 <!-- 使用技術を入力してください -->
 
+### AWS構成図
+<img width="686" height="435" alt="image" src="https://github.com/user-attachments/assets/f7286ff6-ac04-488c-9a17-c0975677ab8e" />
 
 <!--
 markdownの記法はこちらを参照してください！
 https://docs.github.com/ja/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax
--->
+-->

backend/controllers/hint_controller.go

@@ -17,6 +17,7 @@ type IHintController interface {
 	GetFinishedRoundByID(ctx *gin.Context)
 	BookmarkRound(ctx *gin.Context)
 	GetRandomBookmark(ctx *gin.Context)
+	GetBookmarkedList(ctx *gin.Context)
 }
 
 type HintController struct {
@@ -143,3 +144,13 @@ func (c *HintController) GetRandomBookmark(ctx *gin.Context) {
 	}
 	ctx.JSON(http.StatusOK, gin.H{"result": result})
 }
+
+func (c *HintController) GetBookmarkedList(ctx *gin.Context) {
+	result, err := c.service.GetBookmarkedList()
+	if err != nil {
+		_ = ctx.Error(err)
+		ctx.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to get bookmarked list"})
+		return
+	}
+	ctx.JSON(http.StatusOK, gin.H{"results": result})
+}

backend/main.go

@@ -34,5 +34,6 @@ func main() {
 	r.GET("/solo/board/:id", hintController.GetFinishedRoundByID)
 	r.POST("/solo/:id/bookmark", hintController.BookmarkRound)
 	r.GET("/solo/bookmark/random", hintController.GetRandomBookmark)
+	r.GET("/solo/bookmark/all", hintController.GetBookmarkedList)
 	r.Run() // デフォルトで0.0.0.0:8080で待機します
 }

backend/repositories/hint_repository.go

@@ -14,6 +14,7 @@ type IHintRepository interface {
 	FinishRound(id uint) error
 	BookmarkRound(id uint) error
 	GetRandomBookmarkedRound() (*models.Round, error)
+	GetAllBookmarkedRounds() ([]models.Round, error)
 }
 
 type HintRepository struct {
@@ -70,3 +71,11 @@ func (r *HintRepository) GetRandomBookmarkedRound() (*models.Round, error) {
 	}
 	return &rounds[rand.Intn(len(rounds))], nil
 }
+
+func (r *HintRepository) GetAllBookmarkedRounds() ([]models.Round, error) {
+	var rounds []models.Round
+	if err := r.db.Where("is_bookmarked = ?", true).Find(&rounds).Error; err != nil {
+		return nil, err
+	}
+	return rounds, nil
+}

backend/services/hint_service.go

@@ -31,6 +31,7 @@ type IHintService interface {
 	GetFinishedRoundByID(id uint) (*dto.RoundResponse, error)
 	BookmarkRound(id uint) (*dto.RoundResponse, error)
 	GetRandomBookmark() (*dto.RoundResponse, error)
+	GetBookmarkedList() ([]dto.RoundResponse, error)
 }
 
 type HintService struct {
@@ -149,8 +150,11 @@ func (s *HintService) StartGame() (*dto.StartGameResult, error) {
 				"answers": map[string]any{
 					"type": "array",
 					"items": map[string]any{
-						"type":        "string",
-						"description": "正解のリスト。表記ゆれを考慮して複数入れる。漢字、ひらがな、カタカナ、英語（小文字）、および一般的な略称（例：自販機、スマホ）など、考えられえるものを全て含めること。",
+						"type": "string",
+						"description": `正解のリスト。
+						- 一番最初に最も一般的な答えが入るようにしてください
+						- 表記ゆれを考慮して複数入れる。漢字、ひらがな、カタカナ、英語（小文字）、
+						- および一般的な略称（例：自販機、スマホ）など、考えられえるものを全て含めること。`,
 					},
 				},
 				"hints": map[string]any{
@@ -298,3 +302,28 @@ func (s *HintService) GetRandomBookmark() (*dto.RoundResponse, error) {
 		UpdatedAt: round.UpdatedAt,
 	}, nil
 }
+
+func (s *HintService) GetBookmarkedList() ([]dto.RoundResponse, error) {
+	rounds, err := s.repository.GetAllBookmarkedRounds()
+	if err != nil {
+		return nil, err
+	}
+
+	response := []dto.RoundResponse{}
+
+	for _, r := range rounds {
+		limit := 4
+		if len(r.Hints) < limit {
+			limit = len(r.Hints)
+		}
+		displayHints := r.Hints[:limit]
+
+		response = append(response, dto.RoundResponse{
+			ID:        r.ID,
+			Answer:    r.Answers[0],
+			Hints:     displayHints,
+			UpdatedAt: r.UpdatedAt,
+		})
+	}
+	return response, nil
+}

frontend/index.html

@@ -2,9 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/chashibaki.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>frontend</title>
+    <title>あれちゃう？知らんけど。</title>
+    <meta name="description" content="関西人がなんかをめっちゃ関西っぽく説明してくれるで！それが何か当ててみてや〜！ちょっと茶しばきにきてな！" />
   </head>
   <body>
     <div id="root"></div>