みんなが書き込める掲示板サイトを公開する（GitHub・Vercel・Neonデータベース）。

みんなが書き込める掲示板サイトを作ります。今日はまず「公開の型」だけを1周します。私はパソコンが得意ではありません。
【1】→【2】→【3】の順で。

【1】あとで掲示板になる置き場所を作る。
・「準備中」とだけ表示される1枚のページ（index.html）をあなたが作る。白背景・文字大きめ
・GitHubにPrivate（非公開）のリポジトリを作って、そこにpushする（手順は1手ずつ案内して。すでにこのセッションがGitHubのリポジトリで動いているなら、それをそのまま使って）
・秘密のファイルがpushされない設定（.gitignore）を先に用意して

【2】（【1】が終わったら）ここから先は私の画面操作です。1手ずつ案内して：
・https://vercel.com/signup で Continue with GitHub（個人利用は無料のHobbyでOK）
・https://vercel.com/new でさっきのリポジトリを Import
🔴 Importの前に、画面左上のチーム名の横のバッジが「Hobby」か私に確認させて。「Pro」のチームに入っていると上限超過で従量課金があり得る。間違えてProに作ったら、プロジェクトを削除してHobby側で作り直せばOK（URLは作り直しても再取得できた実例あり）
・設定は変えずに Deploy
・本番URLを開いて「準備中」が見えたら成功
コマンドでのデプロイは案内しないで（画面だけで完結させて）。
【報告待ちゲート】私が本番URLの全画面スクショを貼るまで、絶対に次へ進まないで。

【3】※必ず：スクショが届いたら、「準備中」の文言を1行だけ違う言葉に変えて、pushして。
1〜2分待って本番URLを開き直すと、変わっている（push＝本番反映）ことを私に確認させて。
最後に「これ以降、サイトを直す方法はこれ1本（あなたが頼む→私が直してpush→本番が変わる）」と1行で教えて。

《共通ルール》
④【3】まで終わったら（最後の確認に私が「OK」と答えてから）、締めはこの形をそのまま出して（1文にまとめない）：
╭━━━━━━━━━━━━━╮
✅ このステップは完了！
╰━━━━━━━━━━━━━╯
＼＼　次にやること　／／
━━━━━━━━━━━━━━━━━
1️⃣ 課題ページで「✅ このステップの最初の公開が終わった！」を押す

2️⃣ ステップ2（お金の確認とデータベース接続）のコピペを、このチャットに貼る
━━━━━━━━━━━━━━━━━

投稿を保存する「データベース」を繋ぎます。その前に、お金の心配を先に消します。
【1】→【2】→【3】の順で。

【1】💳お金の話を先に。次を公式サイトで調べて、表で見せて。私が「OK」と言うまでデータベース作成の案内はしないで：
・Vercel（Hobby）：無料の範囲はどこまでか。カード登録なしで使えるか。無料枠を超えたら「止まる」のか「勝手に課金される」のか
・Neon（Vercelから作れるデータベース）：無料プランの上限（容量など）。上限に達したら「止まる」のか「勝手に課金される」のか
・今日の課題（文字の投稿が数十件）で、無料枠を超える可能性があるか
🔴 それぞれ出典のURLも添えて。公式で確認できなかった項目は「未確認」と正直に書いて。

【2】（私がOKと言ったら）データベースを繋ぐ。ここは私の画面操作です。1手ずつ案内して：
・Vercelのプロジェクト → Storage → データベースを作る → Neon を選ぶ → 無料プランで作成して、このプロジェクトに接続
・接続すると、データベースの住所と鍵が入った「接続文字列」が、Vercelの環境変数に自動で入る（DATABASE_URL・POSTGRES_URL など十数個が一気に増える。ぜんぶSensitive表示＝値が見えないのが正常）
・そのあと Deployments → Redeploy（環境変数はRedeployしないと反映されない）
🔴 接続文字列の値は秘密（パスワード入り）。このチャットにも、コードにも、スクショにも出さないで。私にもコピーさせないで。Neonの画面に「Show secret」「Copy Snippet」のボタンが出ても押させないで。
（画面の名前や順番が案内と違ったら、あなたがVercelの公式ヘルプで今の手順を調べ直して）
【報告待ちゲート】私が接続後の全画面スクショを貼るまで、絶対に次へ進まないで。

【3】※必ず：スクショが届いたら、次の2つを1〜2行ずつ教えて：
・「設定の置き場所」の整理。秘密の値（接続文字列やAPIキー）はコードに書かず、Vercelの環境変数に置く。今回は接続した時に自動で入ったので、私は値に触っていない
・環境変数が入っているかは「名前があるか」だけで確認する（値は表示しない）

《共通ルール》
④【3】まで終わったら（最後の確認に私が「OK」と答えてから）、締めはこの形をそのまま出して（1文にまとめない）：
╭━━━━━━━━━━━━━╮
✅ このステップは完了！
╰━━━━━━━━━━━━━╯
＼＼　次にやること　／／
━━━━━━━━━━━━━━━━━
1️⃣ 課題ページで「✅ このステップのお金の確認とデータベース接続が終わった！」を押す

2️⃣ ステップ3（掲示板を動かして、消えない実験）のコピペを、このチャットに貼る
━━━━━━━━━━━━━━━━━

いよいよ掲示板本体です。機能は最小でいきます：名前と一言を書ける・新しい順に並ぶ。それだけ。
【1】→【2】→【3】→【4】の順で。

【1】何の掲示板にするか、私に聞いて：
・A：一言掲示板（今日のできごとを一言書く）
・B：おすすめ掲示板（本・お店・道具のおすすめを書き合う）
・C：質問掲示板（質問と答えを書き合う）
・D：お任せ（AIが最適な案を選ぶ）
・E：自由入力もOK（E：の後ろに希望をそのまま書いてください）

【2】（【1】が決まったら）あなたが作る：
・データベースに投稿の表を1つ（番号・名前・本文・投稿時刻）
🔴 番号（ID）は自分で計算せず、データベースの採番機能に任せる作りにして。理由も1行で（同時に投稿が来ても番号がぶつからない＝投稿が消えない）
・サーバー側のしくみ（Vercelのサーバーレス関数）＝一覧を返す・投稿を保存する
・ページ＝入力欄（名前・本文）と投稿一覧（新しい順）。白背景・文字大きめ・スマホでも読める
・一覧はいっぺんに全部出さず、最新20件＋「もっと見る」で20件ずつ（＝ページング。件数が増えると全部表示は重くなって破綻するので、最初から入れる）
・空っぽの投稿は保存せず、画面に「本文を入力してください」と理由を出す（黙って無視しない）
・実装のやり方は、あなたがVercelとNeonの公式を確認して決めて。手元でサーバーは立てず、pushして本番で確認する進め方で

【3】（【2】が終わったら）pushして、ここは私の画面操作：本番URLを開いて1件投稿する。
【報告待ちゲート】私が投稿の表示された全画面スクショを貼るまで、絶対に次へ進まないで。

【4】※必ず：消えない実験。私にこう頼んで：
「ブラウザのタブを2つ開いて（またはスマホとパソコンで）、ほぼ同時に1件ずつ投稿してください。両方とも一覧に残れば成功です」
終わったら「もしファイルに保存する作りだったら、同時の投稿で片方が消えることがある。データベースに番号付けごと任せたから消えない」を2〜3行で説明して。

《共通ルール》
④【4】まで終わったら（最後の確認に私が「OK」と答えてから）、締めはこの形をそのまま出して（1文にまとめない）：
╭━━━━━━━━━━━━━╮
✅ このステップは完了！
╰━━━━━━━━━━━━━╯
＼＼　次にやること　／／
━━━━━━━━━━━━━━━━━
1️⃣ 課題ページで「✅ このステップの掲示板と消えない実験が終わった！」を押す

2️⃣ ステップ4（GroqのAI一言返信）のコピペを、このチャットに貼る
━━━━━━━━━━━━━━━━━

掲示板にひとつだけAIを足します：投稿すると、AIが短い一言返信を付けてくれる機能です。AIはGroqを使います。
【1】→【2】→【3】→【4】の順で。

【1】💳お金の話を先に。次を公式で調べて3行で教えて。私が「OK」と言うまでキー発行の案内はしないで：
・Groqは無料で始められるか。カード登録なしでキーが取れるか
・無料枠には回数の上限がある。上限に達したら「止まる」のか「勝手に課金される」のか
・今日の課題（投稿ごとに短い返信を1回）で、無料枠を超える可能性があるか
🔴 出典のURLも添えて。14-2の課題でGroqのキーを作った人は、そのキーを流用してOKと伝えて。

【2】（私がOKと言ったら）キーを取って、Vercelに入れる。ここは私の画面操作です。1手ずつ案内して：
・https://console.groq.com/keys でキーを発行（全文が見えるのは発行した時の1回だけ。値はこのチャットにも、コードにも、スクショにも出さない）
・Vercelのプロジェクト → Settings → Environment Variables → Name に GROQ_API_KEY、Value にキーを貼って Save
🔴 無料プランでは「Sensitive」をオンにすると Development 環境が選べなくなる（鍵アイコンでロック＝仕様）。Production と Preview だけ選べばOK（手元で開発しないなら問題なし）
・Deployments → Redeploy（環境変数はRedeployしないと反映されない）
🔴 ステップ2との違いも1行で：データベースの接続文字列は「接続すると自動で入った」、今回のキーは「自分の手で入れる」。どちらも置き場所は同じ環境変数。
【報告待ちゲート】私が環境変数を保存した後の全画面スクショ（キーの値は隠す）を貼るまで、絶対に次へ進まないで。

【3】（【2】が終わったら）あなたが作る：
・投稿が保存されたら、サーバー側でGroqに「この投稿への、やさしい短い一言返信（30文字くらい）」を頼み、投稿と一緒に表示する
・GroqはOpenAI互換。送り先は https://api.groq.com/openai/v1/chat/completions 。モデルIDは https://console.groq.com/docs/models で今使えるものをあなたが確認して決めて（古い名前を決め打ちしない）
・キーが未設定・エラー・無料枠の上限のときは、返信なしで投稿だけ普通に動く作りにして（掲示板を壊さない）
・返信は短く固定して、長い出力に枠を使わない
・小さいAIは平気で嘘をつく前提で作って：システムの指示に「このサイトの構成など、知っていること」を書き、確信がないことは断言せず「公式で確かめてね」と言わせる。返信が空になる時は、AIが考えすぎて出力の枠を使い切っていないか設定を見直す。**や-などの記号は画面に出す前に落とす
・返信のそばに「AIの返答です。内容が正しいとは限りません。」の注意書きを1行入れて

【4】※必ず：pushして、ここは私の画面操作：本番で1件投稿して、AIの一言が付いたら成功。
【報告待ちゲート】私がAIの返信が付いた全画面スクショを貼るまで、次へ進まないで。

《共通ルール》
④【4】まで終わったら（最後の確認に私が「OK」と答えてから）、締めはこの形をそのまま出して（1文にまとめない）：
╭━━━━━━━━━━━━━╮
✅ このステップは完了！
╰━━━━━━━━━━━━━╯
＼＼　次にやること　／／
━━━━━━━━━━━━━━━━━
1️⃣ 課題ページで「✅ このステップのGroqのAI一言返信が終わった！」を押す

2️⃣ ステップ5（投稿の消し方と運用開始）のコピペを、このチャットに貼る
━━━━━━━━━━━━━━━━━

「消したい投稿を消せる」ようになったら、運用開始です。
【1】→【2】→【3】の順で。

【1】まず私が本番URLで「これは消すテストです」と1件投稿します。そのあと消し方を案内して：
・消すのはサイトの画面からではなく、データベースの管理画面から。Vercelのプロジェクト → Storage → 作ったデータベースを開く → 画面の中の Browser（Query／Data のタブ＝ブラウザで使えるSQLエディタ）
・開く時に英語の確認「Verify to Access Database / Confirm your identity」が出ることがある＝本人確認（認証アプリの6桁コード）。意味を日本語で教えて、入力は私がやる
・エディタ右上の Read-only（読み取り専用）がオンだと消せない。オフにしてから実行
・消すためのSQL文はあなたが作って見せて。貼って実行するのは私
・なぜサイトに削除ボタンを付けないのかも1行で（誰でも押せてしまうから。運営だけが入れる場所＝データベース側で消すのが、一番シンプルで安全）
（画面の名前や場所が案内と違ったら、あなたが公式で調べ直して。どうしてもSQLの画面にたどり着けない時は、合言葉つきの管理ページ（/admin.html）を一旦作って対応して。合言葉は ADMIN_TOKEN のような環境変数に入れて、コードには書かない。その時は必ずリスクも説明して：合言葉方式は「URLと合言葉を知っていれば誰でも入れる」＝推測されにくい長い合言葉にする・合言葉はコードに書かずVercelの環境変数に置く・チャットや公開の場に書かない・漏れたら即変更。Vercelのログイン機能で守る方法もあるがページ単位では守れず有料になるため非推奨、と1行添えて）
【報告待ちゲート】私がテスト投稿の消えた全画面スクショを貼るまで、絶対に次へ進まないで。

【2】（【1】が終わったら）次の3行の公開の心得を、そのまま私に伝えて。あわせて入力欄の近くに「本名・住所・連絡先は書かないでください」の注意書きを1行足して、pushして：
・このURLは誰でも開けて、誰でも書ける。まずは家族や友達など身近な人だけに渡す
・本名・住所・連絡先は書かない、書かせない
・変な投稿が来ても慌てない。さっきの消し方でいつでも消せる
あわせて、引継ぎメモを1つのテキストブロックで出して：使っているサービスとアカウント名（Vercel・GitHub・Neon・Groq。パスワードやキーの値は書かない）／本番URL／サイトを直したい時の頼み方／投稿の消し方。私はそれを手元に控えます。

《共通ルール》
④【2】まで終わったら（最後の確認に私が「OK」と答えてから）、締めはこの形をそのまま出して（1文にまとめない）：
╭━━━━━━━━━━━━━╮
✅ このステップは完了！
╰━━━━━━━━━━━━━╯
＼＼　次にやること　／／
━━━━━━━━━━━━━━━━━
1️⃣ 課題ページで「✅ このステップの投稿の消し方と運用開始が終わった！」を押す

2️⃣ ステップ6（掲示板をリッチにして作品にする）のコピペを、このチャットに貼る
━━━━━━━━━━━━━━━━━

リッチ化の大改造です。素の掲示板を「自分の作品」にします。機能が多いので、【1】→【7】の順で、1つ終わるごとにpush→本番で確認してから次へ（一気に作ると、どこで壊れたか分からなくなる）。

【1】デザインの土台を先に固める（3ステップの品質ゲート）：
・まず DESIGN.md を作る：白ベース（#fff）・本文の文字は0.95rem以上・使う色/角丸/影/余白の一覧と、Do（やること）/Don't（やらないこと）を書く。以後の見た目は全部この1枚に従い、直すたびに守れているか自分で点検して
・美学の縛り：余白はたっぷり・文字の大小で階層を作る・1画面の主役は1つ・白が基本でダーク背景は使わない
・作り変えは1セクションずつ。直すたびに幅320px（スマホ）・768px（タブレット）・1280px（PC）の3つで崩れていないか確認
・横幅はPCで大きく使う：本文の最大幅を広めにして、PCは左＝掲示板・右＝統計とお題の2カラム、スマホは縦積み

【2】（【1】が終わったら）入力欄に「職業」を足す：
・投稿の表に職業の列を追加（列の足し方＝ALTER TABLEはあなたが実行して）
・入力欄は「名前・職業・本文」に。職業は空でもOKの作りにして
・AIの一言返信は、職業に合わせた内容にして（例：先生には授業の例え、料理人には厨房の例え。職業が空なら今までどおり）

【3】（【2】が終わったら）AIの人格＝フレンドリーな幼馴染の口調に：
・「昔からの友達みたいに、くだけているけど失礼じゃない、明るい相づち」をサーバー側のsystem指示に固定して（ページ側に置かない理由も1行）
・人格を変えたら、同じ投稿への返信のビフォー/アフターを1回見せて

【4】（【3】が終わったら）「Claude Codeの考え方」のRAGとまとめページ：
・knowledge/ フォルダを作り、この課題で学んだClaude Codeの考え方を短い.mdに数枚まとめて（例：push＝本番反映／秘密の値は環境変数／お金は「止まるか課金か」を公式で確認／AIの返答はうのみにしない）
・AIの一言返信は、返す前に knowledge/ を参照して、関係ある考え方があれば1行だけ混ぜる（＝RAG。14-1でやった型の再利用）
・knowledge/ の中身を読みやすくまとめた「Claude Codeの考え方」ページ（kangae.html）も作って公開して

【5】（【4】が終わったら）ナビ（グローバルメニュー）とページを揃える：
・全ページ共通のヘッダーメニュー：掲示板／このサイトとは？／Claude Codeの考え方／管理人ページ
・「このサイトとは？」（about.html）＝この掲示板が何か・誰でも書けること・注意ごと・作った経緯を短く
・管理人ページ（admin.html・合言葉つき）をまだ作っていなければここで作る（ステップ5の型＝合言葉は ADMIN_TOKEN 環境変数・リスクの説明つき）。ヘッダーからリンクして

【6】（【5】が終わったら）遊び心を5つ足す：
・名前の頭文字の丸アイコン（名前から色が自動で決まる）を投稿に付ける
・絵文字リアクション（👍🎉😂）＝1タップで数が増える（データベースの数の更新。連打されても壊れない作りに）
・新着の自動表示＝10秒ごとに新しい投稿だけそっと増える（画面全体は再読み込みしない）
・上部に小さな統計バー＝ぜんぶで何件・今日は何件（データベースの数える命令）
・「お題ください」ボタン＝書くことに困ったらAIが一言お題をくれる（Groqの流用・返答は短く固定・枠切れでも掲示板は壊れない）

【7】（【6】が終わったら）検収：3つの幅（320/768/1280）で崩れなし・push→本番で全機能を1回ずつ触る・私が全画面スクショを撮る。

その前に理解チェック（合格するまで✉️次の人への置き手紙は出さない）：この課題でやったことから、選択式（A/B/C。各選択肢は必ず「・A：」「・B：」「・C：」を改行し、「A.」形式は使わない）のクイズを2問→自由記述（自分の言葉で説明する問題）を1問、1問ずつ出して。問題文や選択肢に、答えがそのまま分かる文（コピペ内の題材説明の文など）を書き写さないで＝答えは私が自分で考えて書くもの。1問出すたびに必ず出力を止めて、私が答えるのを待って（私の答えをあなたが書かない・user／system などの行を自分で出力しない・私の回答が届く前に採点を始めない）。選択式の正解の位置は、毎回A/B/Cにランダムに散らして（いつもAを正解にしない）。答え終わったら100点満点で採点し、点数と理由を短く伝えて。70点以上で合格→✉️次の人への置き手紙へ進む。70点未満なら、間違えた所をやさしく解説してから別の問題でもう一度（何回でも・責めない）。このクイズの選択肢には「お任せ」を付けない（自分で答えるテストのため）
クイズでコマンド名の暗記は問わないで（コマンドは覚えなくていい・打つのはAIなので）。出すのは、この課題ページで実際にやったこと・なぜそうするのか・どう使い分けるか、から。自由記述の1問は「この課題でどういうことを学んだか（できるようになったこと・分かったこと）＋自分の仕事・普段の作業ならどこで使えるか」を自分の言葉で書く問題にして（「なぜうまくいったと思いますか」のような理屈を問う聞き方はしない＝答えづらい）
クイズの題材は手順の暗記ではなく、①push＝本番反映の意味 ②秘密の値（接続文字列）をコードに書かず環境変数に置く理由 ③番号付け（ID）をデータベースに任せると投稿が消えない理由 ④環境変数の入り方2種類（Neonは自動で入る・Groqは自分で入れる）の違い、から選んで
合格したら、✉️次の人への置き手紙を出す前に必ず1問だけ自由入力で聞いて：「最後に、この課題ページで分かりづらかった所・直してほしい所はありませんでしたか？（課題の改善点を教えてほしい）（1行でもOK・思いつかなければ『特になし』でOK）」。この質問だけはA〜Eの選択式にしない（あなた自身の言葉が欲しいため）。質問を出したら、そこで必ず出力を止めて私の返事を待つ（私の答えをあなたが書かない・user／system などの行を自分で出力しない。置き手紙は私の2つの返事が届いてから書き始める）。もらった言葉は、✉️次の人への置き手紙の最後に「💬 課題ページへの改善案：」の行として原文のまま入れて（『特になし』なら省略OK）。つづけてもう1問だけ自由入力で聞いて：「この課題をこれからやる次の生徒へ、一言お願いします（1行でもOK）」。この質問も選択式にしない。もらった言葉は、✉️次の人への置き手紙のいちばん最後に「💬 次の生徒へ：」の行として原文のまま入れて（メモの最終行＝改善案の行より後ろ）
【8】※必ず：そのまま✉️次の人への置き手紙を、見出し「✉️次の人への置き手紙」で、チャットからそのままコピペできる1つのテキストブロック（コードブロック）で出力して。中身は、リッチ化で一番気に入っている機能／VercelとNeonの無料枠を調べて分かったこと（止まるのか課金なのか）／データベース接続でつまずいた所／消えない実験の結果／GroqのキーをVercelに入れてAIの一言返信が付くまでにつまずいた所／NeonのSQLエディタで消せたか／この課題ページの直してほしい所・分かりづらかった所（改善案） を、体験談として読み応えのある長さ（8〜12行・多くなってもOK）で。実際に使った正しいURLのまとめ／案内と実際が違った画面や場所／エラー文・ボタン名・数値、は要約で削ぎ落とさず必ず残して（次の人と、課題ページのアップデートに一番効く一次情報）。
ただし、接続文字列やAPIキーの値・本番URL・個人情報は絶対に書かないで。
最後に「このメモをコピーして、課題ページ最後の『✉️次の人への置き手紙を書いて完了』に貼れば修了です🎉」と締めて。

《共通ルール》