【小学生でもわかる】HTMLファイル1枚にログインを付ける方法！インストールもターミナルも使わない

どんな話？

HTMLファイル1枚に、管理画面の Quick copy（JavaScript）のタグ2本と、起動の script を貼った。タグ2本だけでは窓口は出ない。描き直しの2行（render() と Clerk.addListener(render)）を足すと、ログインのあと丸いボタンに描き直される。制作の環境では、ダブルクリックで開いたファイルでもログインまで通ったが、読み直しとログアウトのあとは輪が回る表示になった。成果物は、開くと自分のアプリのログイン画面が出る index.html です。

この記事でわかること

• 入口は管理画面の Configure → API keys の Quick copy。初めは Next.js が選ばれていて、JavaScript に切り替えると script タグが2本出る（見た目の部品の @clerk/ui と、本体の @clerk/clerk-js）
• タグ2本だけでは、ログインの窓口は出ない。Clerk.load で準備し、Clerk.isSignedIn で窓口（mountSignIn）と丸いユーザーのボタン（mountUserButton）を出し分ける起動の script が要る
• 説明書のはじめかたの形のままダブルクリックで開いたページは、ログインしても変わらなかった。render() と Clerk.addListener(render) の描き直しの2行を足した形で通った
• ページに書いてよいのは pk_test_ で始まる公開してよい鍵だけ。sk_test_ で始まる秘密の鍵は、ページ・画面の写し・Git・チャットに絶対に出さない
• ダブルクリックで開いてもログインまで通ったが、読み直し（F5）と Sign out のあとは、カードの中で輪が回る表示に。タブを閉じて開き直すと、ログインからやり直せた
• localhost のページで「Sign up」を押して登録すると、Account Portal へ移って戻らなかった。いちばん手がかからないのは、登録は Account Portal で済ませ、自分のページではログインだけをする形

こんな人に

• 自分で書いたHTMLのページにログインを付けたくて調べたら、どの説明も「npm でインストール」から始まって手が止まった人
• 第1話の Account Portal のログイン画面を、自分のページに置きたい人
• 公開してよい鍵と秘密の鍵の違い、「Sign up」の行き先、やめ方を先に知っておきたい人

この話のTIPS

• コツネットで「タグを1本貼るだけ」という例を見かけたら、それは古い形（2024年ごろの版）です。2026年3月に部品が別のファイルに分かれてからは、タグは2本。Quick copy から取り直すのが確実です。
• 注意Manage account を押すと、ページの上に重なる形で、アカウントの画面が開きました。Security の欄には、ログインしている端末ごとに、IP アドレスとおおよその地名まで並びます。画面の写しを人に見せるときは、メール・IP アドレス・地名を伏せてください。