第1話
Clerk始め方ガイド！コードを1行も書かずに、動くログイン画面を1つ手に入れる
AIの手を借りて小さなアプリを作り、人に使ってもらう前に「ログインを付けないと、誰でも全部見えてしまう」と気づいた人へ。自分で作ろうと調べ始めたら、パスワードの保存、再発行、ログインを保つ期間と、知らない話ばかり出てきて手が止まった人も多いはずです。
小学生でもわかる Clerk アプリに、ログインを付ける
Clerk（クラーク）は、会員制のお店の「受付」を、まるごと貸してくれるサービス。ログイン、新規登録、パスワードの再発行、会員名簿、組織の名簿を引き受けます。アプリのデータの置き場ではありません。無料の Hobby はアプリごとに5万 MRU まで。ただし練習用では全部動く機能のうち、電話番号（SMS）・パスキー・2段階認証などは、本番では有料です。小さなページ「本棚メモ」に、HTMLファイル1枚からログインを付けるところから、1話ずつ部屋を開けていきます。
9 / 10話 公開
あなたのスタンプ：0 / 9話
Money
お金のひとこと
無料あり
無料の Hobby があり、アプリごとに5万 MRU まで使える。料金ページによると、クレジットカードは要らない。MRU は、登録した日の翌日以降に、その月にまた来た人だけを数える（「1万人まで無料」は古い数字）。
Map
Clerkでできること
このシリーズの「見取り図」。1話で1つの部屋を開けていきます。
- 01ログイン（メール・パスワード・Google などの SNS）
- 02会員名簿と、出来合いのプロフィールの画面（User management）
- 03チームで使う組織と役割（Organizations）
- 04お金を受け取る（Billing）
- 05公開前に人を集める順番待ち（Waitlist）
- 06登録などを自分のサーバーへ知らせる（Webhook）
Episodes
エピソード一覧
第1話から順に読むのがおすすめ。途中の話から読んでも、1話で完結します。
-
01
-
02
第2話
HTMLファイル1枚にログインを付ける方法！インストールもターミナルも使わない
自分で書いたHTMLのページにログインを付けたくて調べたら、どの説明も「npm でインストール」「ターミナルで実行」から始まっていて、そこで手が止まった人へ。この記事では、ログインの受付を引き受けるサービス Clerk（クラーク）を使い、HTMLファイル1枚にログイン画面を出して、実際にログインするところまでを案内します。
-
03
第3話
ログインした人にだけ見せるページの作り方！「隠す」と「守る」の違いまで
第2話で、index.html に Clerk（クラーク）のログイン画面が出るようになりました。ログインすると、ログイン画面の代わりに丸いボタンが出ます。けれど、ページのほかの所は、ログインの前とまったく同じ。本のメモをログインした人にだけ見せるには、いまどちらの状態かを調べて、出すものを切り替える数行が要ります。
-
04
第4話
ログインのやり方の選び方！無料の本番で使えるもの・使えないもの
自分のページにログインを付けて、「Google でも入れるようにしよう」「2段階認証も付けよう」と管理画面のスイッチを入れていくと、練習のあいだは、どれもあっさり動いてしまいます。けれど、そのまま無料のプランで公開したときに、どれが使えてどれが有料なのかは、動いた画面を見ているだけではわかりません。
-
05
第5話
英語のログイン画面を、自分の色と日本語に変える方法！できる所とできない所
自分のページにログイン画面を付けたのに、ボタンも見出しも英語のまま、色もサイトと合っていない。日本語の読者に出す前に、どこまで直せるのかを知りたい人へ。この記事では、HTML ファイル1枚のまま、ログイン画面の色と言葉を変える書き方と、コードでは変えられない所の線引きまでをまとめます。
-
06
第6話
HTML1枚から「ちゃんとしたアプリ」へ引っ越す方法！はじめてのターミナル
Clerk（ログインを付けるサービス）で、HTML ファイル1枚のページにログインを付けた。けれど、画面で隠したメモはページのソースから読めてしまう。そこで足が止まっている人へ。この記事では、本棚メモを Next.js のアプリへ引っ越し、ログインしていない人をサーバーの側で止めるページを作ります。
-
07
第7話
ログインした人のデータだけを取り出す方法！ClerkとSupabaseのつなぎ方
ログインの付いたアプリはできたのに、本のメモのようなデータを置こうとして、「誰のメモかをどう分けるのか」で手が止まった人へ。ネットには古いつなぎ方や、データを置く Supabase 自身のログイン向けの書き方が混ざっていて、写すとエラーで止まりがちです。
-
08
第8話
練習用から本番へ出す方法！公開したら動かない、を防ぐ準備
手元では毎日動いていたログイン画面が、公開したサイトでは出てこない。Google のボタンが消えて、登録したはずの人も見当たらない。自分で作ったアプリを、いよいよ人に使ってもらう段で、いちばんあわてやすいのがここです。
-
09
第9話 NEW
チームで使うアプリの作り方！招待・役割・無料で使える人数
第8話までの本棚メモは、ログインした人が自分のメモを見るためのページでした。そこへ読書会の仲間を呼ぶとなると、決めることが一気に増えます。誰が仲間を招くのか。次に読む本を決める欄は、全員に見せてよいのか。そして、何人まで無料なのか。
これから開く部屋
- 10お金を受け取る・安全に運用する（総まとめ）
Follow
Clerkの続きを受け取る
第10話が出たら知らせが届くように。公開したらXで告知し、記事の感想は引用リポストで全部読みます。
RSSは、Feedly などのRSSリーダーにこのボタンのURLを入れると使えます。この連載の新しい話だけが届きます。