通常ページへ

【作って学ぶ】GoogleフォームとGoogleカレンダーを使った予約システムに予約日によるバリデーションを追加する

目次

はじめに

本記事はこちらの記事に寄せられたお問合せに応える目的で作成しています。はじめにこちらの記事をご覧になってから本記事を読まれた方が理解が深まると思います！

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

はじめに 今回はGoogleフォームを予約の窓口にしてGoolgeカレンダーとGmailを使用して予約システムを作成してみます。 システム構成図 今回作成するシステムの構成図は次のようになります。 データの流れ システム構[…]

予約システムを作る上で先すぎる予約を受け取ってしまい、それらをキャンセルしたいと思うこともあるかと思います。今回は予約の申請があった日付より一定の期間先の期日であればお断りのメールを返信するシステムを作っていきたいと思います。

準備

本記事で作成するシステムはこちらの記事で作成したものをベースにしています。まだこちらの記事で紹介したシステムが手元にない方は手に入れてから本記事をご覧ください。

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

はじめに 今回はGoogleフォームを予約の窓口にしてGoolgeカレンダーとGmailを使用して予約システムを作成してみます。 システム構成図 今回作成するシステムの構成図は次のようになります。 データの流れ システム構[…]

フォームからリンクしたスプレッドシートがご自身のGoogleDriveにあることが確認できたら次に進みましょう！

バリデーションについて

今回は予約フォームに入力した日付と予約された日付の差が2ヶ月以上離れていれば予約ができないというお断りメールを送信します。

プログラムの考え方としては「フォームが送信された日付を取得」してから「予約された日付」との差を確認することで2ヶ月以内に収まっているのかそうではないのかの確認を行います。

それではいきましょう。

元予約システムのプログラムについて

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

はじめに 今回はGoogleフォームを予約の窓口にしてGoolgeカレンダーとGmailを使用して予約システムを作成してみます。 システム構成図 今回作成するシステムの構成図は次のようになります。 データの流れ システム構[…]

こちらの記事で紹介したシステムのプログラムは次のようになっています。

function onFormSubmit(e) {
  // フォームの回答を取得
  let TimeStamp = e.values[0];// タイムスタンプ
  let Name = e.values[1];// 名前
  let Email = 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.getDefaultCalendar();
  // カレンダーのタイムゾーンを"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+"様\n" + 
    "\n" + 
    "予約を承りました。\n" + 
    "ありがとうございました。";
    // メール送信
    MailApp.sendEmail(Email,Subject,Body);
  }else{
    // 自動返信メール件名
    let Subject = Name + "様　ご予約失敗";
    // 自動返信メール本文
    let Body = Name+"様　\n" + 
    "\n" + 
    "ご希望いただいた日程がすでに埋まっているためご予約を完了できませんでした。\n" + 
    "別の日程を再度入力いただきますようお願いいたします。\n" + 
    "ありがとうございました。";
    // メール送信
    MailApp.sendEmail(Email,Subject,Body);
  }
}

こちらのプログラムを一部修正して本システムを作成していきます。

修正後のソースコード

修正後のソースコードは次のものになります。後ほど解説はしますが、システムのみを使用することが目的である場合はコピペをしてご利用ください。

function onFormSubmit(e) {
  // フォームの回答を取得
  let TimeStamp = e.values[0];// タイムスタンプ
  let Name = e.values[1];// 名前
  let Email = 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.getDefaultCalendar();
  // カレンダーのタイムゾーンを"Asia/Tokyo"に変更する
  Calendar.setTimeZone("Asia/Tokyo");
  // 今日の日付をタイムスタンプから生成
  let Today_time = new Date(TimeStamp)
  // 何日以降をお断るかの変数（2ヶ月＝60日）
  let Cancel_day = 60
  // 日付の差を確認
  let DiffTimeStart =Math.floor((Today_time.getTime() - Start_time.getTime()) / (1000 * 60 * 60 * 24)) ;
  let DiffTimeEnd = Math.floor((Today_time.getTime() - Start_time.getTime()) / (1000 * 60 * 60 * 24));
  // 日付のバリデーションチェック
  if(DiffTimeStart < Cancel_day || DiffTimeEnd < Cancel_day){
    // イベントがなければ実行する
    if(!Calendar.getEvents(Start_time, End_time).length){
      // カレンダーに日程を追加
      Calendar.createEvent("予約：" + Name + " 様", Start_time, End_time,{description: Remarks});
      // 自動返信メール件名
      let Subject = Name + "様　ご予約完了";
      // 自動返信メール本文
      let Body = Name+"様\n" + 
                "\n" + 
                "予約を承りました。\n" + 
                "ありがとうございました。";
      // メール送信
      MailApp.sendEmail(Email,Subject,Body);
    }else{
      // 自動返信メール件名
      let Subject = Name + "様　ご予約失敗";
      // 自動返信メール本文
      let Body = Name+"様　\n" + 
                "\n" + 
                "ご希望いただいた日程がすでに埋まっているためご予約を完了できませんでした。\n" + 
                "別の日程を再度入力いただきますようお願いいたします。\n" + 
                "ありがとうございました。";
      // メール送信
      MailApp.sendEmail(Email,Subject,Body);
    }
  }else{
      // 自動返信メール件名
      let Subject = Name + "様　ご予約可能範囲外";
      // 自動返信メール本文
      let Body = Name+"様　\n" + 
                "\n" + 
                "ご希望いただいた日程がですが本サービスの予約可能日程範囲を超えてしまっているためご予約を完了できませんでした。\n" + 
                "本システムでは本日から"+Cancel_day+"日以内のご予約を受け付けております。\n" + 
                "別の日程を再度入力いただきますようお願いいたします。\n" + 
                "ありがとうございました。";
      // メール送信
      MailApp.sendEmail(Email,Subject,Body);
  }
}

ソースコードの解説

基本的には以前紹介したものと同じものですが、今回は特に追加・修正した箇所について解説をします。

修正後のプログラムの13行目から19行目の部分について解説します。

// 今日の日付をタイムスタンプから生成
let Today_time = new Date(TimeStamp)
// 何日以降をお断るかの変数（2ヶ月＝60日）
let Cancel_day = 60
// 日付の差を確認
let DiffTimeStart =Math.floor((Today_time.getTime() - Start_time.getTime()) / (1000 * 60 * 60 * 24)) ;
let DiffTimeEnd = Math.floor((Today_time.getTime() - Start_time.getTime()) / (1000 * 60 * 60 * 24));

変数「Today_time」の中にフォームが送信されたタイミングの日付を日付型で格納しています。

次の変数「Cancel_day」ではフォームが送信された日付から何日以降を断るのかの閾値が入っています。例の場合は2ヶ月を考えて60日を意味する60という数字が格納されています。

変数「DiffTimeStart」と「DiffTimeEnd」については予約の開始日と終了日それぞれに対してフォームが入力された日付の差を計算しています。

次に20〜21行目のif文にてフォームから送信された予約対象の日付が閾値以内であるかを判定しています。

// 日付のバリデーションチェック
if(DiffTimeStart < Cancel_day || DiffTimeEnd < Cancel_day){

今回の条件式では予約開始日と予約終了日のどちらかが2ヶ月以内に入っていれば予約ができない設定にしてあります。

47〜59行目では2ヶ月以内の判定で予約ができない場合のお断りメールを送信する処理が書かれています。

else{
    // 自動返信メール件名
    let Subject = Name + "様　ご予約可能範囲外";
    // 自動返信メール本文
    let Body = Name+"様　\n" + 
              "\n" + 
              "ご希望いただいた日程がですが本サービスの予約可能日程範囲を超えてしまっているためご予約を完了できませんでした。\n" + 
              "本システムでは本日から"+Cancel_day+"日以内のご予約を受け付けております。\n" + 
              "別の日程を再度入力いただきますようお願いいたします。\n" + 
              "ありがとうございました。";
    // メール送信
    MailApp.sendEmail(Email,Subject,Body);
}

プログラムの解説は以上になります。

おわりに

今回はお問合せがあった予約システムいバリデーションを追加する方法を紹介しました。

今回紹介したもの以外のバリデーションも可能ですので、実装したいことなどがございましたらコメントなどでお問い合わせください！！

お疲れ様でした！！

最新情報をチェックしよう！