卓球では、フォア打ちやバック打ちなどの技術力だけでなく、
「今の場面で、どこに返すか」
「相手の弱点はどこか」
「次の1球をどう組み立てるか」
といった判断力＝卓球脳もとても重要です。
そこで今回、ChatGPTを使いながら、
**卓球の戦術判断をクイズ形式で練習できるWebアプリ「卓球脳トレ」**を作ってみました。
最初は100問からスタートし、改良を重ねながら210問まで拡張。
さらに、場面図・弱点分析・スマホ対応・PWA化まで進めています。
この記事でわかること
- ChatGPTを使ってアプリを作る進め方
- 卓球の戦術クイズアプリを作ろうと思った理由
- 問題作成・画像作成・Webアプリ化の流れ
- スマホで使いやすくするために工夫したこと
- 実際に作って感じたメリットと苦労した点
卓球の「考える力」を鍛えるアプリを作りたかった
卓球の練習というと、
- フォア打ち
- バック打ち
- フットワーク
- サーブ
- レシーブ
などの技術練習が中心になりがちです。うちも子供が卓球部に入ったことがきっかけで小さい卓球台とマシンを購入しました。
もちろん技術は大切ですが、試合ではそれだけでは勝てません。
たとえば、
- 相手がバック側に寄っている
- このサーブにはいつもツッツキで返してくる
- 粒高に弱い相手がいる
- 10対10の場面でどの戦術を使うべきか
といったように、その場その場で判断する力が必要です。
そこで、ただ知識を覚えるだけでなく、試合中の判断力を鍛えるためのクイズアプリを作れないかと考えました。
ChatGPTを使ってアプリ作成をスタート
今回の開発では、最初からすべてを自分で理解していたわけではありません。
むしろ、
「次は何をすればいい？」
「このエラーは何？」
「画像を軽くするには？」
「スマホで見やすくするには？」
といったことを、ChatGPTに一つずつ相談しながら進めました。
この繰り返しです。
プログラミング経験が少なくても、段階的に進めればかなり形にできます。
最初は100問の戦術クイズから始めた
最初に作ったのは、卓球の戦術や判断力を問うクイズです。
内容としては、
- サーブを読む問題
- レシーブ判断
- 3球目攻撃
- 4球目以降の組み立て
- コース選択
- 相手タイプ別の戦術
- 粒高を使った戦術
- 実戦判断
などを中心に作りました。
たとえば、
「相手のサーブが、バウンド後に急に低くなり、前へ伸びにくい。最初に疑うべき回転は？」
というような、実際のプレーをイメージしながら考える問題です。
単なる知識問題ではなく、試合で使える考え方を身につけることを意識して作りました。
問題管理はExcelで行うようにした
問題数が増えると、アプリの中だけで管理するのが大変になります。
そこで、問題データはExcelで整理することにしました。
Excelには、主に次のような項目を入れています。
- 問題番号
- ジャンル
- レベル
- 問題文
- 選択肢
- 正解
- 解説
- ヒント
- 画像ファイル名
このようにしておくことで、問題を追加したり修正したりする作業がとても楽になりました。
また、後からアプリへ反映するときにも、Excelの内容を元データとして使えるので管理しやすくなります。
問題数は最終的に210問まで増えた
作っていくうちに、
- もっとサーブの問題を増やしたい
- 粒高戦術の問題もほしい
- 実戦判断の問題も増やしたい
- ルール問題も入れたい
という流れになり、問題数をどんどん増やしていきました。
最終的には、
100問 → 160問 → 210問
まで拡張しました。
さらに後半では、戦術問題だけでなく、卓球ルールのクイズも追加しました。
これによって、単なる戦術アプリではなく、卓球の理解を幅広く深められる学習アプリとして使えるようになりました。
場面図を入れて「試合をイメージできる問題」に
ク文章だけでは、試合場面をイメージしにくいことがあります。
そこで、各問題に専用の場面図を付けることにしました。
画像には、
- 卓球台
- 自分
- 相手
- ボールの軌道
- 狙う位置
- 試合状況
をできるだけ分かりやすく表示しています。
人物もリアルな絵ではなく、赤と青のシンプルなシルエットに統一しました。
スマホの小さな画面でも見やすくなります。
これにより、問題を見た瞬間に試合場面をイメージしやすくなり、スマホでも直感的に学べるようになりました。
人物はシンプルなイラストに統一した
画像の人物は、できるだけ分かりやすくするために、リアルなイラストではなく簡素なシルエット風にしました。
- 自分側は赤
- 相手側は青
- 卓球台は青系
- ボール軌道は見やすい色
という形で、色を分けて統一しています。
こうすることで、小さなスマホ画面でも見やすくなり、
「誰がどちら側か」
「ボールがどこへ飛んでいるか」
が一目で分かるようになりました。
画像ファイル名は q001.png ～ q210.png で統一
画像は、問題番号と一致するように、
- q001.png
- q002.png
- q003.png
- …
- q210.png
という名前で管理しました。
このように統一しておくことで、アプリ側で問題番号に応じて画像を自動表示しやすくなります。
また、後から画像を差し替えたり修正したりするときも、どの問題の画像かすぐに分かるので便利です。
スマホ表示を考えて画像は軽量化した
画像を210枚使うとなると、1枚ごとのサイズが大きいとかなり重くなってしまいます。
そのため、画像は最終的に
550×440px・約100KB前後
を目安に調整しました。
このサイズにすることで、
- スマホで表示しやすい
- 読み込みが速い
- 通信量を抑えられる
- サーバー容量を節約できる
というメリットがあります。
特にWebアプリは、画像が重いと動作全体が遅く感じやすいため、見やすさと軽さのバランスを意識しました。
HTML・CSS・JavaScriptでWebアプリ化
今回のアプリは、ネイティブアプリではなく、まずはWebアプリとして作成しました。
主に使ったのは、
- HTML
- CSS
- JavaScript
です。
この構成なら、iPhoneやパソコンのブラウザですぐに開くことができます。
最初からApp Store向けアプリを作るのではなく、まずはすぐ使える形で試作することを優先しました。
途中でJSON読み込みの問題にもぶつかった
最初は、問題データを別ファイルで管理しようと思い、
- index.html
- questions.json
のような形で作っていました。
ただ、パソコンでindex.htmlを直接開くと、ブラウザの仕様上、JSONファイルをうまく読み込めない場合がありました。
そこで途中からは、問題データをHTMLの中に埋め込む方式に変更しました。
これにより、ファイルを開くだけで動かせるようになり、扱いやすくなりました。
実際に作ってみると、こうした細かい問題が出てくるのも開発の面白いところです。
ランダム出題や苦手克服機能も追加
ただ問題を並べるだけでは面白くないので、次のような機能も追加しました。
- ランダム10問出題
- カテゴリー別出題
- 正答率の記録
- 苦手分野の優先出題
これによって、
「今日は10問だけやる」
「サーブ問題だけ集中的にやる」
「苦手な分野を重点的に練習する」
といった使い方ができるようになりました。
単なるクイズ集ではなく、自分に合った練習がしやすい仕組みになっています。
レンタルサーバーにアップロードしてスマホ対応
完成したWebアプリは、レンタルサーバー上にアップロードして、スマホから使えるようにしました。
フォルダを作成し、その中に
- index.html
- imagesフォルダ
- iconsフォルダ
- manifest.webmanifest
- sw.js
などを配置しています。
こうすることで、スマホからURLを開けばすぐに使えるようになります。
403エラーなどのトラブルもあった
サーバーへアップロードした直後は、403 Forbidden のエラーが出ることもありました。
原因は、主にファイルやフォルダの権限設定でした。
最終的には、
- フォルダ：755
- ファイル：644
に調整することで、正常に表示できるようになりました。
こうしたトラブルも、ChatGPTへ相談しながら一つずつ確認して解決していきました。
iPhoneでホーム画面追加できるPWA化も実施
さらに、スマホで使いやすくするためにPWA化も行いました。
PWA化しておくと、Safariからホーム画面へ追加して、アプリのように起動できます。
App Storeへ出すほどではない段階でも、PWAならかなり便利です。
- すぐ試せる
- インストール感覚で使える
- スマホ学習との相性が良い
という点で、この卓球脳トレアプリにはとても合っていました。
一番大変だったのは「問題内容と画像を一致させること」
実際に作ってみて、技術面以上に大変だったのが、問題と画像を正しく一致させることでした。
問題数が200問を超えてくると、
- 問題文と画像が少し違う
- 番号がずれてしまう
- レイアウトが統一されない
といったズレが起こりやすくなります。
そのため、
- Excelで問題をしっかり管理する
- 画像ファイル名を統一する
- 1問ずつ確認する
という作業がとても重要でした。
地味ですが、こうした整理が完成度に大きく関わると感じました。
ChatGPTを使って感じたメリット
今回の開発で特に良かったのは、分からないことをその場で相談しながら進められたことです。
たとえば、
- 次に何をすればいいか分からない
- エラーの意味が分からない
- 画像サイズを軽くしたい
- 表示をスマホ向けに調整したい
- 記事としてまとめたい
こういったことを、その都度質問して進めることができました。
最初からすべて理解していなくても、
作る → 動かす → 修正する
を繰り返しながら前へ進められるのは、とても大きな利点でした。
今後追加してみたい機能
今後はさらに、
- 正答率グラフの表示
- レベル別の出題
- フットワーク問題
- 動画での場面判断問題
- AIによる個別アドバイス
- 苦手分野の自動分析
なども追加してみたいと考えています。
特に、プレーヤーごとの弱点に合わせて、
「今日はレシーブ判断を重点的にやりましょう」
のように提案してくれる仕組みができると、さらに面白くなりそうです。
まとめ｜ChatGPTと一緒なら“作りたい”を形にしやすい
今回、ChatGPTを活用しながら、
卓球の戦術判断を鍛える「卓球脳トレ」アプリ
を作ることができました。
最初は100問の小さなスタートでしたが、
- 問題作成
- Excel管理
- 図解画像作成
- Webアプリ化
- サーバー公開
- スマホ対応
- PWA化
- 210問へ拡張
と、少しずつ改良しながら成長させることができました。
「こんなアプリがあったらいいな」と思っていたものを、ChatGPTと相談しながら一歩ずつ形にできたのは、とても良い経験でした。
卓球に限らず、自分や家族が本当に使いたいものを作るという意味でも、これからもこうしたアプリ作りを続けていきたいと思います。
実際に使ってみたい方へ
現在はスマホで使いやすい形に調整しながら、少しずつ改良を続けています。
今後は、さらに見やすさや学習機能も強化していく予定です。
コメント