「限定した人だけ使える」仕組みの作り方
― 合言葉つきURL ―

ふつうのURLの後ろに、その人だけの「合言葉」をくっつけて配ります。

この ?c=cabur-s01-3ed2a9 の部分が合言葉です。アプリは「この合言葉、リストに載っている正しい人かな？」とチェックし、合っていれば中を見せる／違えば鍵の画面を出す。これだけです。

この「合言葉リスト」を人ごとに1つずつ用意しておくのがポイントです（後述）。

1. 合言葉を配る：生徒さんに …/?c=あなたの合言葉 のURLをLINEやメールで案内する。
2. 合言葉をチェック：その人がURLを開くと、アプリが合言葉をリストと照合する。
3. 合っていたら通す＋覚える：ブラウザに「入室スタンプ（Cookie）」を渡して、中身を表示する。
4. 違っていたら鍵の画面：「合言葉が違います」と出して、中身は見せない。

下の欄に合言葉を入れて「入る」を押してみてください。正解は haru2026 です（わざと画面に書いてあります）。

※ これは「考え方」を体験するためのミニ版です。実際のCABU-Rはこの後で説明するもっと頑丈なサーバー版で作っています。

「まず動くものを作ってみたい」なら、HTMLファイル1枚だけで合言葉ゲートが作れます。下をそのままコピーして index.html に貼るだけです。

<!-- 合言葉ゲート・かんたん版（HTML1枚） -->
<script>
  // ① 通してよい合言葉のリスト（人ごとに1つ）
  const OK = ["haru2026", "natsu2026", "aki2026"];

  // ② URLの ?c= を読み取る
  const code = new URLSearchParams(location.search).get("c");

  // ③ 前に入室していれば覚えておく（スタンプ＝localStorage）
  const stamped = localStorage.getItem("entered") === "1";

  // ④ 合言葉が正しい、または前に入室済みなら中を見せる
  if (OK.includes(code) || stamped) {
    localStorage.setItem("entered", "1");   // スタンプを押す
    // ここでアプリ本体を表示する
  } else {
    document.body.innerHTML = "🔒 合言葉が違います。ご案内したURLからアクセスしてください。";
  }
</script>

みさわがCABU-Rで使っている合言葉は、こういう形になっています。

合言葉は「商品名(cabur)＋生徒番号(s01)＋でたらめな文字(3ed2a9)」の組み合わせ。人ごとに分けておくと、こんな良いことがあります。

• 誰の分か分かる：s01 なら生徒1、と番号で判別できる。
• 1人だけ止められる：ある人の利用を止めたいとき、その人の合言葉だけリストから消せばOK。ほかの生徒さんはそのまま使えます。
• あてずっぽうで当てられない：後ろに「でたらめな文字」を付けるので、他人が推測して入ることはほぼできません。

⑤のHTML1枚版はお手軽ですが、弱点があります（次章）。そこでCABU-Rは、アプリの入口（サーバー）で合言葉をチェックする「本格版」で作っています。仕組みは同じ4ステップですが、頑丈さが違います。

※ ここは「Claude Codeでアプリを作る」レッスンが進んでから触れる、少し先の内容です。まずは⑤のHTML1枚版で「合言葉で入れる・入れない」の感覚をつかめば十分です。

お手軽版と本格版の使い分け