← ポートフォリオに戻る
Webアプリ・業務システム(Google Apps Script)
スプレッドシートを台帳にした、
小さなお店の予約受付アプリ
整体院・美容室・教室などの小さなお店を想定した予約システムです。お客さまはスマホからメニュー・日付・空き時間を選んで予約でき、お店は予約の一覧と検索をブラウザで確認できます。予約データはGoogleスプレッドシートに入るので、月額料金のかかる予約サービスを使わずに運用できます。
Google Apps Script(Webアプリ)スプレッドシートHTML / CSS / JavaScript確認メールの自動送信
実際に操作できるデモ
お店用の予約一覧(パソコン)
※デモでは見本のデータを表示しています。予約は保存されず、メールも送られません。
できること
- 空き時間だけを表示:メニューの長さ(40分・60分)と既存の予約から、重ならない時間だけを選べるようにしています。定休日・営業時間外・1時間後より前の枠は表示しません
- ダブルブッキングを防ぐ:予約を確定する直前にもう一度空きを確かめ、同時に予約が入っても同じ枠が二重に埋まらないようにしています
- 確認メール:予約が入るとお客さまに予約番号つきの確認メール、お店に通知メールを自動で送ります
- キャンセル:お客さまが予約番号と電話番号でキャンセルでき、その枠はすぐ空きに戻ります
- お店用ページ:今日以降の予約を日付ごとに一覧表示し、名前や電話番号で検索できます。お店のGoogleアカウント以外では開けません
- 設定は1か所:店名・営業時間・定休日・メニューと料金はコードの先頭にまとめ、書き換えるだけで変更できます
動作確認
サーバー側の処理(空き時間の計算・予約・キャンセル・検索)は、Googleのサービスを模擬した環境で自動テストしました。
- 定休日(火曜)は予約できない/営業時間内で、メニューの長さが収まる枠だけが出る
- 予約済みの時間と重なる枠は出ない/重なる予約はエラーになる
- 名前・電話番号の入力チェック、電話番号の先頭の0が消えない
- 確認メールはお客さまとお店に送られる(メールアドレスがなければお店にだけ)
- 電話番号が違えばキャンセルできない/キャンセル後はその枠が空く
- 名前・電話番号の一部で予約を検索できる
ファイル
※架空のお店を想定した制作サンプルです。予約画面のファイルは、Apps Scriptでは index.html という名前で使います。LINEでの予約通知、Googleカレンダーへの自動登録、前日のリマインドメールなどの追加にも対応できます。