ポジション別野球スコアブック BallGraph

## 1. アプリの目的・ターゲットユーザー
野球・ソフトボールのスコアを誰でも簡単につけられるブラウザ完結型スコアブックアプリ。少年野球・草野球・高校野球の記録係・コーチ・保護者・マネージャーが対象。紙のスコアブックの「書き方が難しい・保存できない・集計が面倒」という課題を解決する。

## 2. 主要機能
- **試合記録（打席ごとの結果入力）**: ヒット・三振・四死球・ゴロ・フライ・バント・盗塁・エラーなどをボタンタップで入力。内野/外野のゾーン方向（左・中・右）も選択可能。
- **イニング別スコア自動集計**: 得点・アウトカウント・塁状況を自動計算し、スコアボード形式でリアルタイム表示。
- **打者成績サマリー**: 試合終了後に打率・打点・出塁率・安打数などを自動算出して一覧表示。
- **試合履歴保存（ローカルストレージ）**: 過去の試合を一覧で保管・呼び出し可能。PHP+MySQLによるサーバー保存も対応（アカウント不要、ゲストセッションIDで紐付け）。
- **スコアシートPNG出力**: 記録した試合のスコアシートを画像としてダウンロードできる。html2canvas使用。
- **打順・ポジション登録**: 先発メンバー（最大9人＋補欠5人）を試合前に登録でき、途中交代にも対応。

## 3. 画面構成
- **トップ画面**: 「新しい試合を始める」「過去の試合を見る」の2ボタン。シンプルな野球グラウンド風ビジュアル背景。
- **試合セットアップ画面**: チーム名（自チーム・相手チーム）、日付、球場名、先攻/後攻、イニング数（7回/9回）を入力。打順＋ポジション登録フォーム（縦9行）。
- **スコア入力メイン画面（2ペイン構成）**:
- 上部: スコアボード（イニング×チームの得点表）＋現在のアウト数・塁状況（ダイヤモンドアイコン）
- 下部: 現在の打者情報＋結果選択ボタングリッド（ヒット種別・凡打種別・四死球など約15種）＋打球方向ミニマップ（9分割グリッド）
- **試合サマリー画面**: 最終スコア・打者成績一覧テーブル・投手成績（簡易）・PNG出力ボタン。
- **履歴一覧画面**: 保存した試合カード一覧（日付・対戦相手・スコア表示）。タップで詳細閲覧。

## 4. データ構造（DBテーブル概要）
- **games**: id, session_token, home_team, away_team, game_date, stadium, innings, top_bottom_first(home/away), status(in_progress/finished), created_at
- **players**: id, game_id, team(home/away), batting_order(1〜9), name, position_code
- **at_bats**: id, game_id, inning, top_bottom, batter_player_id, result_code(H/2B/3B/HR/K/BB/HBP/GO/FO/SAC/E…), direction_zone(1〜9), rbi, runs_scored, notes
- **substitutions**: id, game_id, inning, top_bottom, out_player_id, in_player_name, in_position_code
- result_codeは2〜3文字の内製コード体系で定義（例: H1=シングル, K=三振, BB=四球, GO6=ショートゴロ など）

## 5. デザインの方向性
- **カラースキーム**: グラウンドグリーン（#2E7D32）をアクセント、白・ライトグレーのカード背景、ネイビー（#1A237E）のヘッダー
- **フォント**: 数字は等幅フォント（monospace）でスコア視認性を重視、日本語UIは游ゴシック系
- **スコアボード**: 甲子園の電光掲示板風のテーブルデザイン（黒背景・白・黄数字）
- **ボタン**: 結果種別ごとに色分け（安打系＝緑、凡打系＝グレー、四死球＝青、三振＝赤）でタップしやすい大きめサイズ（min 48px）
- スマホ縦持ちで操作完結できるよう、入力UIは下半分に集約。PCでは左右2カラムレイアウト。
- 難易度: 野球の基本ルールを知らなくても直感で使えるよう、各結果ボタンにアイコン＋ルビ付き日本語ラベルを併記。