リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: トーナメント表自動生成メーカー BracketArena
試合ごとのメモ・コメント入力機能の追加
## 1. 目的
試合結果の記録に加え、各試合に短いメモ(ハイライトプレー・延長戦・没収試合など)を残せるようにする。主催者が閲覧URLを共有した際に、観戦者も試合の背景や見どころを把握できるようになり、大会の記録としての価値を高める。
## 2. 具体的な仕様
### 2-1. UIの追加
- 既存の「勝者クリック → スコア入力ダイアログ」の中に、スコア入力欄の下へ **「試合メモ(任意)」テキストエリア** を1つ追加する。
- プレースホルダー例:「例:延長戦の末に決着、MVP: 田中」
- 最大文字数:100文字
- 入力は任意。空欄でも保存・進行に影響しない。
- スマホ・PC両対応のため、テキストエリアは `width:100%`・`rows:2` で表示する。
### 2-2. データ保存
- 既存のMySQLの試合データテーブル(matchesテーブル相当)に `memo VARCHAR(100) DEFAULT NULL` カラムを追加するALTER文をマイグレーションとして用意する。
- 保存・更新はスコア保存と同一のPHPエンドポイント(例:`save_match.php`)にパラメータ `memo` を追加して処理する。既存のスコア保存ロジックは変更せず、memoのINSERT/UPDATEのみ追記する。
### 2-3. 表示
- **編集画面・閲覧画面共通**:試合ボックス内のスコア表示の下に、メモが存在する場合のみ 💬 アイコン + メモ本文を小さいフォント(`font-size:0.75rem`、テーマカラーの薄い文字色)で表示する。メモがない場合は何も表示しない(レイアウト変化なし)。
- **総当たりリーグ**:対戦セルをホバー(PCはtooltip、スマホはタップで小ポップアップ)したときにメモを表示する。セル内には表示しない(表が崩れないよう)。
- **PNG書き出し**:メモはPNG内に含める(表示中のDOMをそのままhtml2canvasで描画するため追加実装不要)。
### 2-4. 閲覧専用URLでの扱い
- 閲覧専用URLではメモの**表示のみ**可能とし、入力・編集UIは表示しない。編集URLと同様のデータ取得APIでmemoカラムも返すだけでよい。
## 3. 既存機能との整合
- `memo` カラムは `DEFAULT NULL` のため、既存レコードへの影響なし。
- スコア入力ダイアログへの追記のみで、勝者クリック→次ラウンド進出のロジックは一切変更しない。
- ドラッグ&ドロップ並び替え・紙吹雪エフェクト・テーマ切替・PNG書き出しはすべて既存コードのまま動作する。
- メモ未入力時はUIに何も追加されないため、既存の見た目を損なわない。
試合結果の記録に加え、各試合に短いメモ(ハイライトプレー・延長戦・没収試合など)を残せるようにする。主催者が閲覧URLを共有した際に、観戦者も試合の背景や見どころを把握できるようになり、大会の記録としての価値を高める。
## 2. 具体的な仕様
### 2-1. UIの追加
- 既存の「勝者クリック → スコア入力ダイアログ」の中に、スコア入力欄の下へ **「試合メモ(任意)」テキストエリア** を1つ追加する。
- プレースホルダー例:「例:延長戦の末に決着、MVP: 田中」
- 最大文字数:100文字
- 入力は任意。空欄でも保存・進行に影響しない。
- スマホ・PC両対応のため、テキストエリアは `width:100%`・`rows:2` で表示する。
### 2-2. データ保存
- 既存のMySQLの試合データテーブル(matchesテーブル相当)に `memo VARCHAR(100) DEFAULT NULL` カラムを追加するALTER文をマイグレーションとして用意する。
- 保存・更新はスコア保存と同一のPHPエンドポイント(例:`save_match.php`)にパラメータ `memo` を追加して処理する。既存のスコア保存ロジックは変更せず、memoのINSERT/UPDATEのみ追記する。
### 2-3. 表示
- **編集画面・閲覧画面共通**:試合ボックス内のスコア表示の下に、メモが存在する場合のみ 💬 アイコン + メモ本文を小さいフォント(`font-size:0.75rem`、テーマカラーの薄い文字色)で表示する。メモがない場合は何も表示しない(レイアウト変化なし)。
- **総当たりリーグ**:対戦セルをホバー(PCはtooltip、スマホはタップで小ポップアップ)したときにメモを表示する。セル内には表示しない(表が崩れないよう)。
- **PNG書き出し**:メモはPNG内に含める(表示中のDOMをそのままhtml2canvasで描画するため追加実装不要)。
### 2-4. 閲覧専用URLでの扱い
- 閲覧専用URLではメモの**表示のみ**可能とし、入力・編集UIは表示しない。編集URLと同様のデータ取得APIでmemoカラムも返すだけでよい。
## 3. 既存機能との整合
- `memo` カラムは `DEFAULT NULL` のため、既存レコードへの影響なし。
- スコア入力ダイアログへの追記のみで、勝者クリック→次ラウンド進出のロジックは一切変更しない。
- ドラッグ&ドロップ並び替え・紙吹雪エフェクト・テーマ切替・PNG書き出しはすべて既存コードのまま動作する。
- メモ未入力時はUIに何も追加されないため、既存の見た目を損なわない。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (bracketarena))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「トーナメント表自動生成メーカー BracketArena」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=bracketarena
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/bracketarena/
ご利用ありがとうございます!
ご要望いただいた「トーナメント表自動生成メーカー BracketArena」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=bracketarena
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/bracketarena/
ご利用ありがとうございます!
Echo
Iris