GoogleカレンダーとGoogleフォームでつくる予約受付機能

  完全無料ツールまとめ >     フリーツールを使い倒す >  

前回の
Google Formを使った問い合わせページの作り方
と

「Googleカレンダーでスケジュールを公開」
の応用編で予約受付ページを作っていきたいと思います。

 

下記のページを参考にしましたが、公開用カレンダーとの連携とスパム対策がされてなかったので、この記事で記載しています

【作って学ぶ】GASとGoogleフォームでGoogleカレンダーを使った予約システムを作成する│Tatsuya Note

 

予約受付するときにはスケジュールを確認してから予約させるべきなので、上のページのままだとその確認ができないので、それを修正するために公開用カレンダーのIDを取得する必要があります。

下記を参照

Google Apps Script グーグルカレンダー情報を取得する | Algorithm

 

時刻を含めるがわかりにくかったので、画像をたしています。

︙をクリックです。

 

前回の問い合わせページの作り方で学んだようにスパム対策として、

”デフォルトでメールアドレスを収集する”

を有効化

 

これをふまえてスプレッドシートのApps Scriptを変更します。

ちなみに上のページの導線ではApps Scriptにたどり着けずに5分戸惑ったので

ここで最新の導線を記載しておきます。

スプレッドシートを開く　＞　拡張機能　＞　Apps Script

です

 

保存もわかりにくかったので、記載しておきます

「このアプリはGoogleで確認されていません」と出ますが、左下に小さく”詳細”がクリックできるのクリックして”安全ではないページに移動”をクリックします。

自分が作ったものなので、特に問題はないです。

許可すればトリガーが新しく作成されています

e.values[1] というのが項目の数を上から数えた番号です。
名前とメールアドレスがなければ
予約開始日時 = e.values[1]
予約終了日時 = e.values[2]
その他メッセージ = e.values[3]

”デフォルトでメールアドレスを収集する”を有効化したメールアドレスのスクリプト内での取得方法は

e.response.getRespondentEmail();
で取得できるみたいです。

【コピペでOK！】GASでGoogleフォーム回答者のメールアドレスを取得する方法 - Yuki's bnb blog

 

それをふまえてApps Scriptを作って試したけども。。。

e.response.getRespondentEmail();　が動かない。。。

どうやら、他の項目と同じようにe.values[〇]の形式で取得するみたい。

 

仕切り直してはじめから作ります。

 

１．新規でGoogleフォームを作成します。

　タイトルを入力

２．質問・回答・設定のタブがあるので設定にいきます

３．「デフォルト」→「フォームのデフォルト設定」→「デフォルトでメールアドレスを収集する」を有効化

４．質問タブに戻る

メールアドレス以外の４つの項目を追加します。個人でやってるような病院とか歯医者をそうていしているので診察番号を項目にいれてます。

• 診察番号
  • 記述式
  • 必須

• 予約開始日時
  • 日付
  • 年・時刻を含める
  • 必須
• 予約終了日時
  • 日付
  • 年・時刻を含める
  • 必須
• 備考
  
  • 段落

５．回答タブに移動してスプレッドシートを新規作成

６．スプレッドシートを開く　＞　拡張機能　＞　Apps Script

７．appscript.jsonのtimeZoneをAsia/Tokyoに変更

８．コード.gsに移動して以下のコードをコピペ

function onFormSubmit(e) { // フォームの回答を取得 let TimeStamp = e.values[0];// タイムスタンプ let Email = e.values[1];// メールアドレス let Name = e.values[2];// 名前 let Start_time = new Date(e.values[3]);// 予約の開始日時 let End_time = new Date(e.values[4]);// 予約の終了日時 let Remarks = e.values[5];// 備考 // カレンダーオブジェクトを取得 let Calendar = CalendarApp.getCalendarById("ここにカレンダーID"); // カレンダーのタイムゾーンを"Asia/Tokyo"に変更する Calendar.setTimeZone("Asia/Tokyo"); // イベントがなければ実行する if(!Calendar.getEvents(Start_time, End_time).length){ // カレンダーに日程を追加 Calendar.createEvent("予約：" + Name + " 様", Start_time, End_time,{description: Remarks}); // 自動返信メール件名 let Subject = Name + "様　ご予約完了"; // 自動返信メール本文 let Body = Name+"様\ " + "\ " + "予約を承りました。\ " + "ありがとうございました。"; // メール送信 MailApp.sendEmail(Email,Subject,Body); }else{ // 自動返信メール件名 let Subject = Name + "様　ご予約失敗"; // 自動返信メール本文 let Body = Name+"様　\ " + "\ " + "ご希望いただいた日程がすでに埋まっているためご予約を完了できませんでした。\ " + "別の日程を再度入力いただきますようお願いいたします。\ " + "ありがとうございました。"; // メール送信 MailApp.sendEmail(Email,Subject,Body); } }

 

９．”ここにカレンダーID”の部分にカレンダーIDに置き換え
１０．プロジェクト名を入力して保存

１１．左の時計のアイコンのトリガーを選択

１２．トリガーを追加

１３．「イベントの種類を選択」→「フォーム送信時」に変更して保存

１４．歯車アイコンのプロジェクト設定をクリック

１５．appscript.jsonマニフェストファイルをエディタで表示するにチェック

１６．appscript.jsonのtimeZoneをAsia/Tokyoに変更

 

この手順で診察用予約受付ができるようになってるはずです。

確認は公開用Google CalendarのURLをリフレッシュしてスケジュールに入ってるかどうかの確認ができます。

フォームから追加されるスケジュールを公開・非公開の場合はGoogleカレンダーの設定で「予定のアクセス権限」から「時間枠のみ・詳細は非表示」にすれば非公開にできます

 

今まで電話予約でやってて、もっと便利なツールは欲しいけどお金は払う余裕はないというような個人でやっている飲食店や診療所・歯医者、レッスンスクールなどはこれでだいぶ便利になるかと思います。

 

コーディングをコピペしてカレンダーIDを変更する部分は慣れていない人にとっては抵抗があるかもしれないですが、この通りやれば確実に予約システムができるので、是非お試しください

 

デメリット

今回Googleフォームとカレンダー、GASを利用して予約機能を作りましたが、いくつかデメリットがありました。

投稿後のフォーム上でメッセージが出せない

予約できたのかできなかったのかはフォーム上でアラートとして出して、できなかった場合はすぐに時間を変更して予約するといったことが可能だと勘違いしてたのですが、それはできなかったです。

毎回メールで通知させるしかないのが最大限の利用です。

投稿内容によって結果が動的に変わらないので、これは想定外のデメリットでした。

タイムゾーンが違ってうまくいかない

注意が必要なのは、予約する側のアカウントのタイムゾーンがAsia/Tokyoではない場合、時間がずれてしまうところです。

なぜか英語の設定してなかなか変更できないケースってあるので、その場合は予約するときに注意を促す必要があります。

Googleカレンダー上で「予定なし」とスケジュールを取っていてもダメ

「予定なし」でスケジュールをとってもGASではそのデータは取得できないみたいです。 

Class CalendarApp  |  Apps Script  |  Google Developers

なのでGoogleカレンダーでメモ代わりにスケジュールを立てるときや終日有給や特別に休みなどの時に忘れないために予定表に入れたい時は朝の30分とかで予定を入れておく必要があります

 

下記がサンプルの予約フォームです

予約フォーム

 

by プログラマーこまつ