お子さん専用 サッカー予定サイトの作り方

「予定・メンバー・振り返り」を家族で共有できるサイトを、お子さん専用に作れます

これは、ある家族が使っている「子どものサッカー予定サイト」と同じ仕組みのひな形です。 お子さんの名前や背番号に置き換えるだけで、あなたのお子さん専用サイトとして使えます。 難しい作業は あなたのClaude Code(AIアシスタント)がほとんど代わりにやってくれます。

このサイトでできること

ログインは2種類子ども用(自分の記録を見る・書く)と 親用(予定の入力・確定・応援)。

はじめる前に用意するもの

用意するもの用途・メモ
GitHubアカウントひな形を受け取る(無料・5分で作れます)
Claude Code実際に作ってくれるAI。あなたのPCに入れておく
Cloudflareアカウントサイトを公開する場所(無料)
GoogleアカウントAI読み取りを使うとき(後からでOK)
学校のPDF日程表・メンバー表(直近のもの。AI読み取り用)
お子さんの情報フルネーム/呼び名/学年/背番号/カテゴリ(例 U10)
💡 Claude in Chrome という拡張を入れておくと、Gemini(AI)の設定などの「ブラウザ操作」もClaudeが代わりにやってくれてスムーズです。入れ方も「Claude in Chromeをセットして」と頼めば案内されます。

進め方は3ステップ

1

ひな形を受け取る

ひな形は非公開のGitHubに置いてあります。あなたのGitHubユーザー名を伝えると「招待」が届くので、承認してください。 そのあと、Claude Codeに 「このリポジトリを取得して」と頼めば自動で手元に取り込めます(コマンド例:gh repo clone (リポジトリ名))。

2

Claude Codeにこう頼む

🗣 そのままコピペでOK

「このフォルダの README.md を読んで、その手順どおりに、うちの子用のサッカー予定サイトを作って。 うちの子は 〔フルネーム〕/呼び名〔 〕/〔学年〕/背番号〔 〕/カテゴリ〔例 U10〕。 サイト名は〔   〕にして。各ステップのあとに動作確認もして。」

Claudeが、名前・背番号などの置き換え、サイトの公開準備、AI読み取りの設定までを案内しながら進めてくれます。

3

あなたは「ログイン」と「許可」だけ

アカウントのログインや、画面に出る「許可」ボタンなど、持ち主本人が押すべきところだけあなたが操作します。 AI読み取りを使うときは、学校のPDFを渡してください。あとはClaudeにおまかせでOK。

✅ ここまでで、合言葉でログインして使える、お子さん専用サイトが完成します。 まずは手入力で予定を入れて使い始め、AI自動読み取りは後から足してもOKです。

費用について

基本は0円で運用できます。サイトの公開(Cloudflare)も、AI読み取り(Gemini)も、 通常の使い方なら無料の範囲内です。※AI読み取りはGoogleのAIを使うため、極端に大量に実行すると費用が出る可能性がありますが、週1回ペースなら無料枠で収まります。

困ったときは

うまくいかないところは、紹介してくれた方(このひな形を用意した人)に聞けば大丈夫。 一緒に作業する日を作ると、ログインや許可のところもスムーズです。

🤖 お手伝いするClaudeへ

このリポジトリのルートにある README.md に、子ども情報の置き換え・接続値プレースホルダ・合言葉設定・初期データ投入・デプロイ・AI読み取り設定の手順が順番に書かれています。 まずは README.md を読み、利用者の子ども情報をヒアリングしてから、STEP1から順に実行してください。 各STEP後に npm test を実行し、最後に本番固有値が残っていないか rg で確認してください。 apps-script/ の調整(AI読み取り)は学校のPDFに合わせた作り込みが必要なので、実物PDFを見ながら進めてください。

⚽ お子さんのサッカー生活が、もっと楽しくなりますように。