リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: 野球スコアブック BallGraph
打席結果の「取り消し/やり直し」機能の追加
## 1. 目的
スコア入力中に誤って打席結果を確定してしまった場合、現状は修正手段がなくスコアボード全体が狂ってしまう。直前の操作を1ステップ戻せる「アンドゥ」と、戻した後に再適用できる「リドゥ」を追加し、入力ミスへの心理的ハードルを下げてユーザーの継続利用を促す。
## 2. 具体的な仕様
### 2-1. 状態スタックの管理
- 打席結果を確定するたびに、確定直前のゲーム状態(塁状況・アウトカウント・イニング・打順・各打者成績配列・投手成績配列・スコアボード配列)をJSON文字列化してセッションストレージの `undo_stack`(最大20件)にpush保存する。
- アンドゥを実行したタイミングで、現在の状態を `redo_stack` にpushしてから `undo_stack` の末尾を取り出して復元する。
- リドゥを実行したタイミングで `redo_stack` の末尾を取り出して復元し、現在状態を `undo_stack` に積む。
- 新たな打席結果が確定されたら `redo_stack` をクリアする(分岐履歴は保持しない)。
- ページリロード・試合終了・別試合への切り替えでスタックをクリアする。
### 2-2. UI配置
- スコア入力エリアの上部固定ツールバーに「↩ 戻す」「↪ やり直す」ボタンを横並びで追加する。
- `undo_stack` が空のとき「戻す」ボタンはdisabled(グレーアウト)、`redo_stack` が空のとき「やり直す」ボタンはdisabled。
- ボタンサイズはスマホで最低44×44pxのタップ領域を確保。アイコン+ラベルのシンプルデザイン。
- 実行時は0.3秒のフェードトランジションで塁状況・アウトカウント・スコアボードを再描画し、操作が反映されたことを視覚的に伝える。
### 2-3. サーバー側処理
- アンドゥ/リドゥはすべてクライアント側(JS + sessionStorage)で完結させる。
- 試合を「保存」するアクション(既存の履歴保存ボタン)を押した時点のみDBに書き込む既存フローを変更しない。
### 2-4. ショートカット対応(PC)
- `Ctrl+Z` でアンドゥ、`Ctrl+Shift+Z` でリドゥを発火させる `keydown` イベントをdocumentに追加する。テキスト入力フォーカス中は発火しない(`event.target.tagName` が INPUT / TEXTAREA のときは無視)。
## 3. 既存機能との整合
- 状態の保存・復元対象は「現在進行中の試合データ」のみ。試合履歴DB(MySQL)・PNG出力・メンバー登録には一切触れない。
- 既存の打席入力ボタン群・打球方向ミニマップ・スコアシートPNG出力の動作は変更しない。
- 復元処理は既存の「スコアボード再描画関数」「成績サマリー再計算関数」をそのまま呼び出す形で実装し、表示ロジックの重複を避ける。
- 途中交代機能で選手が交代済みの状態に巻き戻る場合も、交代情報ごと復元されるため整合が取れる(交代イベントも状態スナップショットに含める)。
スコア入力中に誤って打席結果を確定してしまった場合、現状は修正手段がなくスコアボード全体が狂ってしまう。直前の操作を1ステップ戻せる「アンドゥ」と、戻した後に再適用できる「リドゥ」を追加し、入力ミスへの心理的ハードルを下げてユーザーの継続利用を促す。
## 2. 具体的な仕様
### 2-1. 状態スタックの管理
- 打席結果を確定するたびに、確定直前のゲーム状態(塁状況・アウトカウント・イニング・打順・各打者成績配列・投手成績配列・スコアボード配列)をJSON文字列化してセッションストレージの `undo_stack`(最大20件)にpush保存する。
- アンドゥを実行したタイミングで、現在の状態を `redo_stack` にpushしてから `undo_stack` の末尾を取り出して復元する。
- リドゥを実行したタイミングで `redo_stack` の末尾を取り出して復元し、現在状態を `undo_stack` に積む。
- 新たな打席結果が確定されたら `redo_stack` をクリアする(分岐履歴は保持しない)。
- ページリロード・試合終了・別試合への切り替えでスタックをクリアする。
### 2-2. UI配置
- スコア入力エリアの上部固定ツールバーに「↩ 戻す」「↪ やり直す」ボタンを横並びで追加する。
- `undo_stack` が空のとき「戻す」ボタンはdisabled(グレーアウト)、`redo_stack` が空のとき「やり直す」ボタンはdisabled。
- ボタンサイズはスマホで最低44×44pxのタップ領域を確保。アイコン+ラベルのシンプルデザイン。
- 実行時は0.3秒のフェードトランジションで塁状況・アウトカウント・スコアボードを再描画し、操作が反映されたことを視覚的に伝える。
### 2-3. サーバー側処理
- アンドゥ/リドゥはすべてクライアント側(JS + sessionStorage)で完結させる。
- 試合を「保存」するアクション(既存の履歴保存ボタン)を押した時点のみDBに書き込む既存フローを変更しない。
### 2-4. ショートカット対応(PC)
- `Ctrl+Z` でアンドゥ、`Ctrl+Shift+Z` でリドゥを発火させる `keydown` イベントをdocumentに追加する。テキスト入力フォーカス中は発火しない(`event.target.tagName` が INPUT / TEXTAREA のときは無視)。
## 3. 既存機能との整合
- 状態の保存・復元対象は「現在進行中の試合データ」のみ。試合履歴DB(MySQL)・PNG出力・メンバー登録には一切触れない。
- 既存の打席入力ボタン群・打球方向ミニマップ・スコアシートPNG出力の動作は変更しない。
- 復元処理は既存の「スコアボード再描画関数」「成績サマリー再計算関数」をそのまま呼び出す形で実装し、表示ロジックの重複を避ける。
- 途中交代機能で選手が交代済みの状態に巻き戻る場合も、交代情報ごと復元されるため整合が取れる(交代イベントも状態スナップショットに含める)。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (ballgraph))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「野球スコアブック BallGraph」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=ballgraph
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/ballgraph/
ご利用ありがとうございます!
(deploy 自動リカバリにより通知が遅延した可能性があります。 DEPLOY-RECOVERY-01)
ご要望いただいた「野球スコアブック BallGraph」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=ballgraph
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/ballgraph/
ご利用ありがとうございます!
(deploy 自動リカバリにより通知が遅延した可能性があります。 DEPLOY-RECOVERY-01)
Echo
Iris