WebDXの技術デモです。名前・メール・問い合わせ文・予約データはすべて見本で、どこにも送信されません。見本の一覧へ戻る
画面を指でなぞってみてください
WebGL —
— fps
webdx-lab / v3

ホームページで、
ここまでできます。

この背景は動画ではありません。スマホの中の画像処理チップが、1秒に約60回、いまこの瞬間の模様を計算して描いています。下の4つも、このページの中で本当に動いています。

01

お客様が予約すると、1秒でお店のスマホに届く

左のスマホで「予約する」を押してみてください。お客様には受付メールが、お店のスマホには通知が届き、下の予約表に自動で1行増えます。電話で聞いて手帳に書き写す作業がなくなります。

受付メール
ご予約の希望を受け付けました。

ゆきみクリーン ご予約

秋田 花子
予約する

お客様のスマホ

 
9:41

お店のスマホ

受付日時お名前メニュー希望日状態
2見本佐藤様浴室—確定
3見本高橋様エアコン(壁掛け)—確定
—押してから、お店に届くまで(再現)
0回予約表への書き写し
0円毎月のシステム代(Googleの無料枠で動かす場合)
技術の詳細(データの中身・処理の記録・プログラム)
POST /api/reserve で送られるデータ
サーバーの処理記録
「予約する」を押すと記録が流れます。
受け取り側(Google Apps Script)
function doPost(e) {
  const data = JSON.parse(e.postData.contents);
  if (!data.name || !data.email) return reply(400);
  sheet.appendRow([new Date(), data.name, data.menu, data.date, '受付']);  // 予約表に1行追加
  GmailApp.sendEmail(data.email, 'ご予約の希望を受け付けました', body(data));  // 受付メール
  UrlFetchApp.fetch(LINE_API, { method: 'post', payload: msg(data) });  // お店に通知
  return reply(200);
}
02

10万件の予約データを、人とコンピューターで集計したら

1年分の予約表を、メニューごとに数えて売上を出す作業です。人が1件3秒で数えた場合と、このページが計算した場合を並べます。「スタート」を押してください。

人の手作業1件3秒で計算
0件
約83時間かかる見込み
このページあなたのスマホで計算
待機中
—実測
 

集計した結果(メニューごとの売上)。データは見本です。

技術の詳細(Web Worker・データ)

計算は画面とは別の作業場(Web Worker)で動くため、10万件を処理しているあいだも画面は止まりません。自分のデータを貼り付けて集計することもできます。

03

迷惑メールは止めて、お客様のメールだけ通す

お問い合わせフォームには、機械(ボット)が自動で広告を送りつけてきます。見分ける仕組みを入れると、お客様からの問い合わせだけがお店に届きます。

お店の受信箱
0止めた迷惑メール
0届いたお問い合わせ
パスワードの守り方

パスワードは、そのまま保存しません。

akita2026

ボタンを押すと、元に戻せない文字列に変わります。もう一度押すと、同じパスワードでも別の文字列になります。万一データが盗まれても、元のパスワードは分かりません。

技術の詳細(見分け方・変換の方式)

迷惑メールは①人には見えない入力欄に何か入っている②入力が速すぎる(2.5秒未満)、のどちらかで判定しています。パスワードは PBKDF2-SHA256 で10万回くり返して変換し、毎回ちがう16バイトの「塩(salt)」を混ぜています。

04

届いた問い合わせを、内容ごとに自動で仕分ける

見積・予約・質問・苦情・営業に分けます。苦情は赤枠で知らせるので、先に対応できます。下の欄に自分で文章を入れて試せます。

受信箱0
05

これだけ動いて、このページはスマホの写真1枚より軽い

ページが軽いと、電波の弱い場所でもすぐ表示されます。数字はこの端末で測った実測です。

スマホで撮った写真1枚
約3,000KB
一般的なホームページ
約2,000KB
このページ
—
—表示が終わるまで(実測)
—1秒あたりの描き直し回数
0枚使っている画像ファイル

写真とホームページの重さは一般的な目安です。

WebGLWeb WorkerWeb Crypto(PBKDF2)Google Apps ScriptCloudflare Workersスマホ対応動きを減らす設定に対応