マリエ用・当日マニュアル

友達のサッカーサイトを一緒に作る

友達のPC・友達のClaude Codeで、ゆうとのサイトと同じものを友達の子ども用に作る

🎯 今日のゴール
友達の子ども用の「動くサイト」を完成させて公開する。手入力で予定が入り、振り返りが書け、AI読み取り（PDF→確認→確定）まで通すところまで。

🛡 ゆうとの本番サイトには一切触らない。友達は別アカウント＝ゆうとのサイトの鍵を持っていないので事故は起きない。やるのは「友達用のひな形を、友達の子に合わせて仕上げる」だけ。

ひな形リポジトリ（非公開）：marienyh2023/soccer-note-template
すでに「不要機能の削除（提案・重複チェック）」「ロール2つ（子・親）」「個人情報スクラブ」「仮の値（山田太郎/10/U10・U11）」は作り込み済み。 友達のClaudeは仮の値を友達の子に置き換える＋PDF調整するだけでよい状態にしてある。

当日は2部構成

第1部：動くサイトを公開（置き換え→公開→手入力で確認）…ここまでで「使えるサイト」が完成。
第2部：AI読み取りを設定（友達の学校のPDFに合わせて調整）…時間が足りなければ後日でもOK（手入力で日々は回せる）。

所要：第1部 約1〜1.5時間／第2部 約1〜2時間（PDFの素直さ次第）

1. 前日までに準備

① 友達側の道具チェック

道具確認無ければ
GitHubアカウントあるかgithub.comで無料登録（5分）
Claude Code入っているか事前インストール
Node.js / npmnode -vnodejs.org（LTS）
Claude in Chrome 拡張接続済みか「Claude in Chromeをセットして」と依頼
💡 GeminiやApps Scriptの設定は「ブラウザ操作」が必要。Claude in ChromeがあればClaudeが代行できる（ログインと「許可」だけ友達本人がクリック）。

② 友達をリポに招待

友達のGitHubユーザー名を聞いて、Collaborator招待する： 
gh api repos/marienyh2023/soccer-note-template/collaborators/<友達のユーザー名> -X PUT
友達がメールの招待を承認すると、友達のClaudeが gh repo clone marienyh2023/soccer-note-template で取得できる。

③ 子の情報シート（友達に埋めてもらう）

項目例（ゆうと）
フルネーム／呼び名中村 悠人／ゆうと
学年／カテゴリ／進級先4年／U10／U11
背番号34
サイト名／合言葉YUTO SOCCER NOTE／（任意）
【第2部】日程表で本人カテゴリの列・リーグ名・練習曜日U10=E/Z列、神戸3部A 等

学年タブは「本人＋1つ上」。U11の子なら U11・U12 にずらす。U12（6年）は進級先なしで1タブ。

2. 第1部：動くサイトを公開

1
友達のClaudeに gh repo clone marienyh2023/soccer-note-template で取得してもらう。
2
友達のClaudeにこう頼む（コピペ）：
「このフォルダの README.md を読んで、その手順どおり、〔子の情報〕でサイトを作って。各STEP後に npm test も実行して。」
READMEに沿って、名前・背番号・サイト名・ロール表示・本人判定（functions/api/_schema.js）まで置き換わる。
3
接続値（友達のもの）を用意：Cloudflareアカウント作成 → KV namespace作成（id控える）→ Pagesプロジェクト名決定。 README STEP2のプレースホルダ（__CF_PAGES_PROJECT__ 等）を友達の値に。
⚠️ これを差し替えるまで公開しない（友達のサイトを正しく動かすため）。
4
合言葉を設定：js/auth.js のハッシュ＋ npx wrangler pages secret put EDIT_PASSWORD（README STEP3）。
5
空の初期データを投入（これが無いと画面が動かない。README STEP4の seed/schedule.empty.json）。
6
公開：cp .env.example .env.cloudflare に友達のCloudflare情報 → npm run deploy（README STEP5）。
7
手入力で動作確認：合言葉でログイン → 親 で「予定を追加」→ 一覧に出る → 試合を開いて振り返りが書ける。
✅ ここまでで「手入力で使える動くサイト」完成。友達にURLと合言葉を共有。

3. 第2部：AI読み取りを設定

友達の学校のPDFは列の並び・リーグ名が違うので、ここは「置き換え」でなく実物PDFを見ながらの調整。 ブラウザ操作は Claude in Chromeが代行、ログインと「許可」だけ友達本人。（🤖Claude代行／👤本人クリック／💻CLI）

#やることつまずき対策
1🤖 課金なしのGoogle Cloudプロジェクト作成カードを紐づけない＝過去ハマった「前払い残高ゼロ(429)」を予防
2🤖 請求が「無効」か確認紐づいていたら課金を無効化
3🤖 Gemini APIキー発行（AI Studio）／👤許可キーはチャットに貼らない・Gitに上げない
4👤 Apps Script API を有効化忘れると clasp が動かない
5💻 clasp login → 新規プロジェクト作成 → clasp push.clasp.json の scriptId を友達のに
6🤖 スクリプトプロパティ設定GEMINI_API_KEY と EDIT_PASSWORD（GITHUB_TOKENは不要）
7🤖 初回実行 → 👤権限承認ログに出た値を確認
8🤖 モデル確認推奨 gemini-3.5-flash（flash-liteは誤読しやすい）

調整の山場：apps-script/Code.gs の DRIVE_FOLDER_ID／SITE_URL／PLAYER／LEAGUES／Geminiへの指示文（カテゴリ列・リーグ名・本人の名前/背番号）を友達の学校に合わせる。1回読み取り→確認画面で答え合わせ→ずれたら指示文を直す、を数回。

💰 AI読み取りはGemini APIを使用。週1更新ならFree Tierで月0円。ただし当日の連続テストはトークンを消費するので注意。
通しテスト：PDFをDriveに置く → Apps Script実行 → サイトの「📥確認待ち」（親ロール）に出る → 中身を確認して承認＝確定 → トップに反映。 安全確認：①取り込みはいきなり本番に出ない ②承認後だけ反映 ③手入力した時間・会場・振り返りが再取り込みで消えない。

4. 困ったとき

症状見るところ
古い仮の名前が残るREADMEのgrep確認（rg "山田|たろう|TARO"）
ログインできない合言葉のハッシュ＋ EDIT_PASSWORD（大文字小文字）
トップが真っ白空の初期データ(STEP5)が入っているか
デプロイで止まる接続値プレースホルダの差し替え漏れ
AIが変な試合を作るCode.gsのカテゴリ列・リーグ名が学校に合っているか

5. 仕上げ（マリエのルール）

友達のClaudeの作業が終わったら、codex exec でセカンドオピニオン → P0/P1を反映。 特に「置き換え漏れ」「AI読み取りが確認待ち箱経由か」を見てもらう。

⚽ ゆうとのサイトと同じ体験を、友達の子にも。