勉強会の申し込みフォームを AI に 1 行で頼んで公開するまで — MulmoTerminal の共有アプリの実例

勉強会の申し込みフォームを AI に 1 行で頼んで公開するまで — MulmoTerminal の共有アプリの実例

来月、30 名を集めて勉強会をやる予定があるとします。

誰が来るのかを把握しておきたい。ただ、いざ「申し込みページを作る」の段になると手が止まります。Google Forms に流せばいいのは分かっているのですが、定員 30 名で埋まったらキャンセル待ちに回す、くらいの要件になった途端に、どこで動かすか、データをどう預かるかで悩み始める。

AI に頼めば動くページができる、という話は何度か耳にしたことがあると思います。でも、本当にそれで済むのか、どこまでやってくれるのか、自分は実際に何を打つのか — その手触りが分からないまま、話だけが先に進んでしまっている人は多いはずです。

この記事では、10 月の勉強会の申し込みページを、空のフォルダを作るところから公開するところまで通して組み立ててみます。30 席でキャンセル待ちあり。使うのは MulmoTerminal の共有アプリ機能です。

作るもの

ここまでを言葉で伝えようとすると、1 行で収まります。

10 月の勉強会の申し込み。30 席。名前とメールと、来られない場合に録画が欲しいかどうか。30 人埋まったらキャンセル待ちに回して。

AI に打ち込むのはこの 1 行だけです。

空のフォルダから始める

デスクトップで新しいフォルダを作ります。名前は benkyoukai-10gatsu でも何でも構いません。

MulmoTerminal の空いているマスにそのフォルダを指定して起動します。開いた画面に、先ほどの 1 行を打ち込みます。

あとは AI が勝手に「30 席、超えたらキャンセル待ちで」と解釈してくれます。「待ち行列」とか「排他制御」といった設計用語を、こちらから名指しする必要はありません。

できたものを自分で読める

数十秒待つと、フォルダの中にファイルがいくつか生まれています。

ここで、はじめて AI にお願いする人が気にしがちな点がひとつ解消します。「公開して大丈夫な中身なのか」が、自分の目で確認できる。

API キーのような秘密情報は、自分で書かない限り混入しません。設計ファイルは普通のテキストなので、開けば中身がそのまま読めます。「名前・メール・録画希望」「30 席」「超えたらキャンセル待ち」。本当にそれだけが書いてあります。

公開ボタンを押す前に、自分が公開するものを自分の言葉で説明できる状態になっています。

3 つの入口ができている

同じアプリに、見る人によって違う画面が生えています。

誰が見るか 何が見える
リンクを受け取った参加者 フォーム。送信すると「12 番の席が取れました」 or「キャンセル待ち 3 番です」
あなた(主催者) 全申込一覧、人数、キャンセル待ちの行列
申し込んだ人が後日開き直したとき 自分の予約だけ

3 行目が、普通の Google Forms には無い挙動です。「他人のメールアドレスが混ざって見える」事故が構造的に起きません。参加者には、他人の分がそもそも配信されていないからです。

「31 人目が通ってしまう」が起きない作り

この手の仕組みを自分で素直に実装すると、「31 人目が入ってしまう」という落とし穴にはまります。

「現在の件数を数えて、30 件未満なら受け付ける」という書き方をした場合、ほぼ同時に 2 人が送信ボタンを押すと、どちらも「現在 29 件」を見てしまい、両方とも通ってしまう。いわゆる競合状態 (race condition) です。

MulmoTerminal の共有アプリは、そもそも件数を数えていません。送信した人に返しているのは「席番号」で、番号は 1 から順に発券される仕組みです。31 枚目という番号そのものが存在しないので、並行して何人押しても 31 席目は出てきません。

この「構造的に起きない」仕組みを、1 行の依頼から AI が組み立てているところが、裏側を覗くと一番おもしろい部分です。

公開前に 4 つ見る

全工程の中で、ここだけはスキップしてはいけません。

公開ボタンを押した瞬間から、ページは世界中からアクセスできる状態になります。リンクを誰にも送っていなくても、URL を知られれば開けてしまう。そして最初に開いた人が壊れたページを見たら、その人は二度と戻ってきません。

幸い、公開前にローカルで同じコードを動かせます。マスのコレクションパネルを開いて、ヘッダーの Previews から確認できます。

1. データが保存されているか

試しに 1 件送信して、主催者ビューに自分の送信が現れるか。「読み込み中」のまま止まっていたら、まだ接続できていません。

2. 送信確認の値が正しいか

送信すると確認が出るはず。名前欄に打った文字がメール欄に入っていないか、録画希望の値が逆になっていないか。確認画面を見ないと気づけない種類のバグです。

3. 不正な入力が弾かれるか

メール欄に「あ」を入れて送信してみる。名前を空のまま送信してみる。「正しく入れたら動く」の確認だけでは足りません。

4. 仕上がって見えるか

デザインの良し悪しではなく、「開いた人が使う気になる見た目か」という話です。素っ気なすぎるフォームは「未完成」に見えて、受け取った人はそのまま閉じます。

4 つを一周見るのに 5 分もかかりません。公開してから気付くより、ここで一度自分の目で通した方がずっと早いです。

公開する

4 つの確認が済んだら、「公開して」と頼みます。しばらくするとリンクが返ってきます。

自分のスマホでそのリンクを開き、試しに 1 件申し込んで「1 番の席が取れました」と表示されれば完了です。

社内の出欠のように外に出したくない場合は、「公開ページは作らないで」と先に伝えておきます。この場合、事前にメールアドレスを登録した人しかアクセスできません。

告知したらノートを閉じていい

告知を送ったら、ノートパソコンを閉じて構いません。

よくある誤解を 1 つ。これは「自分のパソコンがサーバーになっている」話ではありません。公開ボタンを押した時点で、配信は MulmoTerminal 側のインフラに移っています。自分が寝ているあいだも 24 時間、申し込みは入り続けます。

手元に残っているフォルダは、設計を次に編集するための原本として置いておく、くらいの扱いで構いません。

来月のは差分で作れる

同じフォルダを開き直して、変わったところだけ伝えます。

11 月、40 席。

去年の HTML をコピーして日付を直したか、定員を直したか、去年の会場名が残っていないか — こういう目視チェックは要りません。設計は普通のテキストファイルなので、どこが変わったかは git diff と同じ要領で見られます。

修正の際に別のところを壊していないかも、同じ要領で確認できます。

全体を振り返ると

空のフォルダを作る
  ↓ 欲しいものを 1 行で頼む
AI が設計 + データ置き場 + ページを作る
  ↓ ローカルで 4 つ確かめる
公開する(押した瞬間から世界に出る)
  ↓ 自分のパソコンは経路に入らない
申し込みが入り続ける(寝ていても)
  ↓ 変更点だけ伝える
来月のができる(差分で確認できる)

全体で 8 ステップ。実際にキーボードを打つのは最初(依頼)と最後(公開指示)の 2 回だけで、残りはすべて「中身を確かめる」か「ボタンを押す」で済んでいます。

実際に試す

ターミナル(Mac はターミナル、Windows は PowerShell)を開いて、

npx mulmoterminal@latest

ブラウザが開いて http://localhost:34567 が表示されれば成功です。インストール作業はありません。npx はその場で取ってきて動かすだけなので、合わなければ閉じるだけで終わります。止めるときは Ctrl + C。ターミナルを閉じてしまった場合は npx mulmoterminal@latest stop です。

動かない場合、足りないのは次のどちらかです。

必要なもの 確かめ方 なければ
Node.js 22.12 以上 node -v nodejs.org/ja/download の LTS。入れたらターミナルを閉じて開き直す
Claude Code claude --version Mac: curl -fsSL https://claude.ai/install.sh | bash / Windows: irm https://claude.ai/install.ps1 | iex。その後 claude でログイン

Claude Code は AI をターミナルから使うコマンドです。利用には Claude の有料プラン (Pro / Max / Team / Enterprise) か API アカウントが必要で、無料プランでは使えません。MulmoTerminal 自体は無料で、課金は Claude 側の契約から引かれます。

空のフォルダを 1 つ作ります。デスクトップで構いません。名前は何でも大丈夫です。

MulmoTerminal の空マスをクリックし、上のタブで Claude を選び、WORKING DIRECTORY にそのフォルダのパスを入れて、右の再生ボタンを押します。

起動フォーム。上のタブで Claude を選び、WORKING DIRECTORY にフォルダのパスを入れて、右の再生ボタンを押す

開いた画面に 1 行入れます。

10 月の勉強会の申し込み。30 席。名前とメールと、来られない場合に録画が欲しいかどうか。30 人埋まったらキャンセル待ちに回して。

ページができたら、公開前に 4 つ確認します(データ保存 / 送信確認の値 / バリデーション / 見た目)。確認が終わったら「公開して」と頼みます。

リンクが返ってきたら、自分のスマホで開いて 1 件申し込み、「1 番の席が取れました」と出れば成功です。

やめるときは、同じマスで「このアプリの公開をやめて」と伝えます。データ自体を全部消したい場合は「レコードを全部消して」です。消すと戻せないので、先に画面で中身を確認し、必要なら書き出してから依頼するのが安全です。

まとめ

AI に頼むと申し込みフォームができる、という話は、思っていた以上に本当でした。ただし「頼めば動く」と「そのまま公開していい」の間には、公開前に自分で 4 項目を確認するという工程が、ちゃんと挟まっています。

その 1 工程を飛ばさないでいる限り、イベント運営者が実際に手を動かすのは、キーボード入力 2 回とボタン操作数回で済みます。残りの時間は、来てくれる人に何を話すかを考えることに回せます。

関連リンク

この記事をシェア

関連記事

記事一覧に戻る