https://shogakusei.com/series/clerk/Clerk（クラーク）は、会員制のお店の「受付」を、まるごと貸してくれるサービス。ログイン、新規登録、パスワードの再発行、会員名簿、組織の名簿を引き受けます。アプリのデータの置き場ではありません。無料の Hobby はアプリごとに5万 MRU まで。ただし練習用では全部動く機能のうち、電話番号（SMS）・パスキー・2段階認証などは、本番では有料です。小さなページ「本棚メモ」に、HTMLファイル1枚からログインを付けるところから、1話ずつ部屋を開けていきます。ja https://shogakusei.com/series/clerk/ep09/https://shogakusei.com/series/clerk/ep09/Sat, 17 Oct 2026 23:26:41 GMT第8話までの本棚メモは、ログインした人が自分のメモを見るためのページでした。そこへ読書会の仲間を呼ぶとなると、決めることが一気に増えます。誰が仲間を招くのか。次に読む本を決める欄は、全員に見せてよいのか。そして、何人まで無料なのか。 Clerk の組織の機能を練習用のアプリでオンにし、HTML 1枚のページに切り替えのボタンを置いて、読書会の組織を1つ作った回です。入り方は Membership optional。1つの組織は初めの設定で5人まで、設定で20人まで上げられます。無料の100は数える組織（MRO）の数で、作れる数の上限ではない。管理役だけに見せる欄は見た目の出し分けで、守るのはサーバーとデータの置き場です。 https://shogakusei.com/series/clerk/ep08/https://shogakusei.com/series/clerk/ep08/Sat, 17 Oct 2026 20:00:19 GMT手元では毎日動いていたログイン画面が、公開したサイトでは出てこない。Google のボタンが消えて、登録したはずの人も見当たらない。自分で作ったアプリを、いよいよ人に使ってもらう段で、いちばんあわてやすいのがここです。 Clerk の本番用を作る前に確かめること、作る順番、それぞれの判断の理由をまとめた回です。練習用と本番用は別の建物で、名簿も鍵も住所も別。本番には自分のドメインが要り、vercel.app では作れませんが、無料の Hobby でも出せます。SNS のログインは写らず、本番では自分の鍵で入れ直す。成果物は「本番に出す前のチェック表」と「本番用の設定の地図」です。 https://shogakusei.com/series/clerk/ep07/https://shogakusei.com/series/clerk/ep07/Sat, 17 Oct 2026 15:20:20 GMTログインの付いたアプリはできたのに、本のメモのようなデータを置こうとして、「誰のメモかをどう分けるのか」で手が止まった人へ。ネットには古いつなぎ方や、データを置く Supabase 自身のログイン向けの書き方が混ざっていて、写すとエラーで止まりがちです。 Clerk でログインした人の番号を Supabase の表に書き、本人の行だけが返るようにする回です。つなぎ方は Third-Party Auth で、JWT テンプレートは古い。列は text、条件は auth.jwt()->>'sub'。扉は GRANT とポリシーの2枚で、Clerk の説明書の SQL に無い GRANT を自分で足します。確かめは2人で交互に。成果物は、自分の本のメモだけが返ってくる表です。 https://shogakusei.com/series/clerk/ep06/https://shogakusei.com/series/clerk/ep06/Sat, 17 Oct 2026 13:09:30 GMTClerk（ログインを付けるサービス）で、HTML ファイル1枚のページにログインを付けた。けれど、画面で隠したメモはページのソースから読めてしまう。そこで足が止まっている人へ。この記事では、本棚メモを Next.js のアプリへ引っ越し、ログインしていない人をサーバーの側で止めるページを作ります。 はじめて PowerShell を開き、本棚メモを Next.js のアプリ hondana へ引っ越した回です。@clerk/nextjs を入れ、2つの鍵を .env に置き、/memo を auth.protect() で守りました。cacheComponents: true のせいでログインの直後にエラーが出ましたが、Suspense で囲んで直りました。守ったのはページまでで、データの守りは第7話です。 https://shogakusei.com/series/clerk/ep05/https://shogakusei.com/series/clerk/ep05/Sat, 17 Oct 2026 11:20:18 GMT自分のページにログイン画面を付けたのに、ボタンも見出しも英語のまま、色もサイトと合っていない。日本語の読者に出す前に、どこまで直せるのかを知りたい人へ。この記事では、HTML ファイル1枚のまま、ログイン画面の色と言葉を変える書き方と、コードでは変えられない所の線引きまでをまとめます。 HTML 1枚のまま、Clerk のログイン画面の色と言葉を変えた回です。色は Clerk.load() の appearance の variables で、colorPrimary の1行でボタンがティール色に。言葉は localization に自分で書いた表を渡し、5か所が日本語になりました。Account Portal は英語のまま、「Secured by Clerk」を本番で消すのは Pro からです。 https://shogakusei.com/series/clerk/ep04/https://shogakusei.com/series/clerk/ep04/Sat, 17 Oct 2026 08:29:00 GMT自分のページにログインを付けて、「Google でも入れるようにしよう」「2段階認証も付けよう」と管理画面のスイッチを入れていくと、練習のあいだは、どれもあっさり動いてしまいます。けれど、そのまま無料のプランで公開したときに、どれが使えてどれが有料なのかは、動いた画面を見ているだけではわかりません。 Clerk の管理画面で、ログインのやり方を「無料の本番で使える」「3つまで」「本番は有料」に分けて選んだ回です。練習用では Pro の機能も試せてしまい、SNS を4つにしても警告は出なかった。Pro の札は目安で、最後は料金ページで照らし合わせる。SNS は Enable for sign-up and sign-in を入れて Save して、はじめてボタンになる。成果物は「ログインのやり方の組み合わせ表」です。 https://shogakusei.com/series/clerk/ep03/https://shogakusei.com/series/clerk/ep03/Sat, 17 Oct 2026 05:25:03 GMT第2話で、index.html に Clerk（クラーク）のログイン画面が出るようになりました。ログインすると、ログイン画面の代わりに丸いボタンが出ます。けれど、ページのほかの所は、ログインの前とまったく同じ。本のメモをログインした人にだけ見せるには、いまどちらの状態かを調べて、出すものを切り替える数行が要ります。 Clerk のログインの前と後で、本棚メモのページの中身を切り替えた回です。Clerk.isSignedIn で2つの部屋の片方だけを見せ、名前が空ならメールで代えて textContent で入れ、Clerk.addListener で入った・出たのたびに描き直しました。ところが、ログアウトしてページのソースを開くと、隠したメモがそのまま残っていた。本当に守るのは、データを送る前に確かめるサーバーの仕事です。 https://shogakusei.com/series/clerk/ep02/https://shogakusei.com/series/clerk/ep02/Sat, 17 Oct 2026 02:55:31 GMT自分で書いたHTMLのページにログインを付けたくて調べたら、どの説明も「npm でインストール」「ターミナルで実行」から始まっていて、そこで手が止まった人へ。この記事では、ログインの受付を引き受けるサービス Clerk（クラーク）を使い、HTMLファイル1枚にログイン画面を出して、実際にログインするところまでを案内します。 HTMLファイル1枚に、管理画面の Quick copy（JavaScript）のタグ2本と、起動の script を貼った。タグ2本だけでは窓口は出ない。描き直しの2行（render() と Clerk.addListener(render)）を足すと、ログインのあと丸いボタンに描き直される。制作の環境では、ダブルクリックで開いたファイルでもログインまで通ったが、読み直しとログアウトのあとは輪が回る表示になった。成果物は、開くと自分のアプリのログイン画面が出る index.html です。 https://shogakusei.com/series/clerk/ep01/https://shogakusei.com/series/clerk/ep01/Sat, 17 Oct 2026 01:40:38 GMTAIの手を借りて小さなアプリを作り、人に使ってもらう前に「ログインを付けないと、誰でも全部見えてしまう」と気づいた人へ。自分で作ろうと調べ始めたら、パスワードの保存、再発行、ログインを保つ期間と、知らない話ばかり出てきて手が止まった人も多いはずです。 Clerk は、ログインの受付をまるごと任せるサービスで、データの置き場ではない。無料の Hobby は、アプリごとに5万 MRU まで。「1万人」は古い数字で、数え方も MAU とは違う。練習用では全部の機能を試せるが、電話番号（SMS）・パスキー・2段階認証などは本番では有料。練習用と本番用は別の建物で、練習用は100人まで。成果物は、コードを1行も書かずに開いた動くログイン画面と、次の回で使う設定のメモです。