AI プログラミング 初心者 バスケ の観点で、AI（Gemini）を使って「プログラミング知識ゼロ」から始めるWebアプリ開発挑戦記、第2弾です！
前回は、Geminiの力を借りて「バスケのスコアブックWebアプリ」の試作品を作成し、選手登録や得点カウントといった基本機能を実装しました。
今回は、そのアプリを実戦仕様へ大幅にアップデートします。AI プログラミング 初心者 バスケの視点を取り入れます。タイマー連動やExcelデータ出力なども、Geminiへの指示だけで解決しました。
目次
1. 前回の振り返りと実戦投入で見えた課題
前回作成したアプリは基本的な動作は問題なかったのですが、実際にサークル活動で使う場面を想定すると、以下の2つの大きな課題が見えてきました。
- ⏱️ 試合時間が固定されている不便さ
実際の練習では「5分」や「7分」といった短いミニゲームを行うことも多いですが、前回の仕様では決められた時間しか測れませんでした。 - 📊 データ集計の壁（テキスト出力の限界）
試合後のスコア結果がテキストファイル（.txt）で保存される仕様でしたが、文字の羅列が非常に見にくく、後からの振り返りには不便でした。
「せっかくなら実戦で使えるレベルにしたい！」と考え、今回はこれらの課題を解決する機能改善に取り組みました。
2. Geminiへの指示（プロンプト）と驚きの結果
今回のアップデートの目玉は、「試合時間の自由変更」と「出場時間の計算＆Excel（CSV）出力」です。
特に、タイマーと選手交代機能を連動させて出場時間を計算するのは、素人目にはかなり複雑な処理に思えました。
AI プログラミング 初心者 バスケ の観点からも、Geminiに意図を正確に伝えるため、以下のように「追加したい内容」を箇条書きで明確にし、具体的な条件も添えて指示を出しました。
【実際に使用したプロンプト】
- 試合時間を自由にへんこうできる機能
現在作成しているバスケスコアブックのWebアプリに「試合時間を自由に変更できる機能」を追加したいです。
【追加したい機能】
1. 試合時間（分）を自由に設定・変更できる入力欄（または選択機能）を追加してください。
2. 設定した分数に合わせて、タイマーの初期時間が切り替わるようにしてください。
3. 試合中（カウントダウン中）は誤操作を防ぐため、時間変更ができないようにしてください。
【現在のコード】
（ここに現在のHTML/JavaScriptコードを貼り付け）- CSVファイルに、結果を出力する機能
現在作成しているバスケスコアブックのWebアプリについて、スコア結果の保存形式を「テキスト（.txt）」から「Excelで開けるCSV（.csv）」に変更し、さらに「出場時間」も記録したいです。
【追加・修正したい内容】
1. 各選手の「出場時間」を計算する機能を追加してください。（タイマーと選手交代機能を連動させ、コートに出ている時間を合算してください）
2. 出力ボタンを押した際、拡張子を「.csv」にしてダウンロードできるようにしてください。
3. CSVの中身は以下の項目をカンマ区切りで出力してください：
- 背番号, 選手名, 出場時間, 1点(FT), 2点, 3点, 合計得点, ファウル数
4. Excelで開いたときに日本語が文字化けしないよう、「BOM付きUTF-8（\uFEFF）」でBlobを作成して出力してください。
5. ファイル名に「試合日時」または「日付」が入るようにしてください（例: score_20260823.csv）。
【現在のコード】
（ここに現在のHTML/JavaScriptコードを貼り付け）
【結果はどうなった？】
これだけ複雑な要件をお願いしたにもかかわらず、なんと一発でエラーのない完璧なコードが出力されました！特に、指示に「BOM付きUTF-8」という条件を入れておいたおかげで、Excelで開いた際の日本語の文字化けも未然に防ぐことができました。的確なプロンプトの威力を実感した瞬間です。
3. 完成したアプリの実装レビュー（ここが便利になった！）
Geminiが出力したコードを反映し、無事に実戦仕様のアプリが完成しました。今回のアップデートで、特に実用性が上がったのは以下の2点です。
⏱️ 柔軟な時間設定でミニゲームにも対応
試合時間を自由に設定できる入力欄を追加しました。これにより、公式ルールの時間だけでなく、練習での短いミニゲームにも柔軟にアプリを活用できるようになりました。
📊 Excel出力で本格的なデータ分析が可能に
試合後のスコアを、文字化け対策済みのCSV（Excel形式）で出力できるようになりました。さらに、追加機能によって「出場時間」も記録されています。
テキストファイルでは見づらかったデータが一覧で綺麗に表示されるようになったのはもちろん、Excelの機能を活かして「チーム内の得点ランキング」や「出場時間別の得点率」などを簡単に加工・算出できるようになり、試合の振り返りの質が格段に上がりました。
4. まとめと次回の目標
今回のアップデートを通じて一番驚いたのは、「プログラミングの知識がなくても、ここまで本格的なツールを作れた」ということです。
複数の機能が絡み合う処理も、Geminiに的確な条件（プロンプト）を整理して伝えるだけで、あっという間に実装することができました。AIという「優秀なエンジニア」をどう動かすか、そのコツが少し掴めてきた気がします。
さて、スコアブックとしての機能はかなり充実してきましたが、実は今のままでは「自分のパソコン」でしか動かせません。
そこで次回はついに実戦投入！作成したこのWebアプリをネット上に公開し、**サークルのメンバーがそれぞれのスマホからアクセスして使えるようにする「アプリ公開編」**に挑戦します。お楽しみに！
コメントを残す