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

目次

はじめに

今回はGoogleフォームを予約の窓口にしてGoolgeカレンダーとGmailを使用して予約システムを作成してみます。

システム構成図

今回作成するシステムの構成図は次のようになります。

データの流れ

システム構成図におけるデータの流れは次のようになります。

  1. Google フォームから予約の申し込みを行う
  2. 申し込みのデータをリンクしたスプレッドシートに転送する
  3. GASを用いてGoogleカレンダーの予約の時間が空いているかを確認する
  4. GASを用いてGoogleカレンダーの予約を登録する
  5. GASを用いて予約ができたかの結果をメールする

続いて実装をしていきます。

環境づくり

Googleフォームの作成

ご自身のGoogle Driveにアクセスをして新規作成からGoogleフォームを作成します。

続いて、質問項目を設定します。

今回は予約システムを作成するので、質問項目は次のように設定します。

  • 名前
    • 記述式
    • 必須
  • メールアドレス
    • 記述式
    • 必須
    • 回答を検証（メールアドレス）
  • 予約開始日時
    • 日付
    • 年・時刻を含める
    • 必須
  • 予約終了日時
    • 日付
    • 年・時刻を含める
    • 必須
  • 備考
    • 段落

フォームとスプレッドシートの連携

上部中央にある「回答」をクリックします。

続いて表示されるスプレッドシートのアイコンをクリックします。

「回答先」の選択と表示されるので、そのまま「作成」をクリックします。

スプレッドシートが新しく作成されます。

上部のメニューから「ツール＞スクリプトエディタ」の順にクリックします。

※ツールにスクリプトエディタが存在しない場合は「拡張機能 > Apps Script」をご確認ください。

スクリプトエディタが作成されたら完了です。

コーディング

先ほど作成したスクリプトエディタの中にこれから示すコードをコピペしてください。

ソースコード

コピぺをするソースコードは下記になります。

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);
  }
}

ソースコードの解説

先ほどコピペしたソースコードの解説を行なっていきます。

フォームからのデータを取得

3~8行目に該当します。

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];// 備考

こちらの記事を参考にして確認してください。

関連記事
【GAS】Google Apps ScriptでGoogleフォームから送信されたデータを取得する方法

データ取得の流れ 今回はGoogleフォームからデータを取得する方法を紹介しますが、データの流れとして、Googleフォームからスプレッドシートに転送してGoogle Apps Script でデータの取得を行います。 スプレッドシ[…]

カレンダーのイベント確認とイベント登録

9~16行目に該当します。

// カレンダーオブジェクトを取得
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});

こちらの記事が参考になります。

関連記事
【GAS】Google Apps Script でGoogleカレンダーの日程を作成する方法

Googleカレンダーの取得 日程を作成する前に Calenderクラスオブジェクト を取得してきます。取得する方法は複数あるため、それらを示します。 デフォルトカレンダーを取得 let Calendar = CalendarAp[…]

はじめにデフォルトカレンダーのカレンダーオブジェクトを取得してきます。

続いて、カレンダーのタイムゾーンを “Asia/Tokyo” に変更します。

!Calendar.getEvents(Start_time, End_time).length では、日程が存在しなければ、True とし、そうでなければ False となるコードになります。

Calendar.createEvent(“予約：” + Name + ” 様”, Start_time, End_time,{description: Remarks}); では、フォームの 「備考」項目 をカレンダーのイベントの説明として登録します。

メールの作成と送信

17~25行目と27~36行目とに該当します。

17~25行目

// 自動返信メール件名
let Subject = Name + "様　ご予約完了";
// 自動返信メール本文
let Body = Name+"様\n" + 
"\n" + 
"予約を承りました。\n" + 
"ありがとうございました。";
// メール送信
MailApp.sendEmail(Email,Subject,Body);

27~36行目

// 自動返信メール件名
let Subject = Name + "様　ご予約失敗";
// 自動返信メール本文
let Body = Name+"様\n" + 
"\n" + 
"ご希望いただいた日程がすでに埋まっているためご予約を完了できませんでした。\n" + 
"別の日程を再度入力いただきますようお願いいたします。\n" + 
"ありがとうございました。";
// メール送信
MailApp.sendEmail(Email,Subject,Body);

こちらの記事が参考になります。

関連記事
【GAS】Google Apps ScriptでGmailを送信する方法

Gmailを作成して送信する場合 本文のみを送信する let Email = "test@example.com"; let Subject = "This is the subject"; let Body = "This i[…]

はじめに変数 Subject に件名を入力します。

続いて変数 Body にメール本文を入力しています。

最後に MailApp.sendEmail(Email,Subject,Body) でメールを送信しています。

 

以上でソースコードの解説を終わります。

続いて実行に移ります。

実行

実行前の準備

GASプロジェクトのタイムゾーンの設定

スクリプトエディタを開き、左側のメニューの「歯車」をクリックします。

全般設定の中から「「appsscript.json」マニフェスト ファイルをエディタで表示する」にチェックマークをつけます。

再度、メニューから「＜＞」をクリックして、出現する「appsscript.json」をクリックします。

もし、 timezone が “Asia/Tokyo” ではなければ“Asia/Tokyo” に変更します。

トリガーの設定

スクリプトエディタ左側のメニューから「時計」アイコンをクリックします。

続いて表示される画面の右下にある「＋　トリガーを追加」をクリックします。

項目の中から、「イベントの種類を選択」を変更します。

プルダウンリストを表示させ、その中から「フォーム送信時」に変更します。

これで、先ほど作成したプログラムをGoogleフォーム送信時に実行できます。

テスト

フォーム送信

Googleフォームを開きます。

右上の「目」のアイコンをクリックします。

作成した予約フォームが表示されるので、テストデータを入力して送信します。

テストデータの入力はなんでもいいですが、日付は確認がしやすい日程にしてくださいね。

カレンダーの確認

ご自身のGoogleカレンダーを開いてください。

先ほどテストで入力した日程に予定が登録されています。

メールの確認

フォームに入力したメールアドレスに確認用メールが送信されています。

また、先ほど登録した日程と重複する日程を再度フォームにて登録すると、登録ができないという旨のメールが届きます。

最後に

GASとGoogleフォーム、Gmail、Googleカレンダーを用いた予約システムを作成してきました。

フォームの内容をアレンジして、定められた時間枠の中から、予約を行うこともできます。

ぜひオリジナルのアレンジを加えてみてください。

本ブログでは、今後もGoogle Apps Scriptのリファレンスの解説や、学び方・ツール作成について発信していきます。

ご興味ある方はお気に入り登録などお願いします。

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

作って学ぶの最新記事8件