Google Forms ってご存知ですか？
Googleが提供するネット完結の問い合わせや、授業のテスト・採点、アンケートなどを簡単に作成することができるプラットフォームです。スプレッドシート（ネット上のEXCELのようなもの）にデータを送信してくれたりなど、何もしなくてもとても便利なツールです。
こちらの記事では自動返信メールの送信の仕方を紹介しました。
Google Forms を使って問い合わせ窓口を簡潔化にしよう！！ はじめに Googleが提供するネット完結の問い合わせや、授業のテスト・採点、アンケートなどを簡単に作成することができるプラットフォームです。スプレッドシート（ネット[…]
今回はこの技術の応用でGoogleカレンダーとGoogleフォームを連携させた予約管理システムを作っていきます！
初心者からコピペで作り方を紹介するので、ご心配なさらず！！
準備
今回は次の準備をしてください。
- 使うブラウザはGoogle Chrome
- Google アカウントを作成
- ネットサーフィンができるPC
Google フォームの作成
初めに、Google Forms にて、フォームを作成していきます。
Google Driveにアクセスする
Googleにアクセスしてアカウントに自身のGoogleアカウントでログインをします。
画面の右上に表示される・が9こ正方形に並んだアイコンをクリックすると、YoutubeやMaps、翻訳などが表示されるので、その中から『ドライブ』を探してクリックします。
この中にフォームを作成していくのですが、今後のために、PCのデスクトップのようにフォルダを作って整理整頓する方法をお勧めします。（今回はこちら！）
画面左上の『新規』を作成して『フォルダ』をクリックする。
「フォルダ名」を入力（私は”forms_sample”と入力しました）して『作成』をクリックする。
作成されたフォルダをダブルクリックしてGoogleDriveの位置（ディレクトリ）を移動します。
画面上部の表示が『マイドライブ＞（先ほど作成したフォルダ名）』になっていることを確認してください。
Google フォームを作成する
再度、画面左上の『新規』をクリックして『Google フォーム』をクリックしてください。
新しいタブで『無題のフォーム』というものが開くと思います。これが、Googleフォームになります。（初めて開く場合、「新しいGoogleフォームのご紹介」と表示されるかもしれませんが、今回はスキップでいいです。）
画面左上の『無題のフォーム』と書いてあるところをクリックすると名前を変更できるので、任意の名前に変更してください（私は”sample”にしました）。
今回は予約システムを作るので、フォームの質問を次のようにしてください。
- 氏名【記述式】（必須）
- メールアドレス【記述式】（必須）
- 予定の名前【記述式】（必須）
- 予定の詳細【段落】（必須）
- 予約の開始時刻【日付（『時刻を含める』と『年を含める』を選択）】（必須）
- 予約の終了時刻【日付（『時刻を含める』と『年を含める』を選択）】（必須）
画面右上の『目』のマークをクリックすると、実際にフォームに入力した時の見た目などを確認することができます。
これで、Googleフォームの作成は終了です。
Google フォームとスプレッドシートの連携
続いて、作成したGoogleフォームとスプレッドシートを連携して、データの集計をしやすくします。
作成したGoogleフォームの上部中央に『質問』と『回答』があるので、『回答』をクリックします。
『スプレッドシート』のアイコンを探し、クリックします。
表示される中から、最初に選択されている『新しいスプレッドシートを作成』を選択し、『作成』をクリックします。
新しいタブでスプレッドシートが開かれます。
以上で、Googleフォームとスプレッドシートの連携が完了しました。Googleフォームの質問の内容が送信されると、このスプレッドシートに回答の結果が反映される仕組みになります。
Formとカレンダーの連携プログラム
これまでの操作で、プログラミングをするための準備を行ってきました。これからは、プログラムをコピペして自動返信メールを作っていきましょう！！
スクリプトエディタを起動
上部のメニューの中から『ツール』を探してクリックしてください。続いて表示されるリストの中から『スクリプトエディタ』をクリックしてください。
スクリプトエディタが立ち上がります。画面左上の『無題のプロジェクト』をクリックすると、名前の変更ができます（私は”sample”と入力しました）。
コードを記述
デフォルトで入力されている次のコードを削除してください。
function myFunction(){
}続いて次のコードをコピー&ペーストしてください。
function onFormSubmit(e) {
// フォームの回答を取得
let Name = e.values[1];// 登録者の氏名
let Email = e.values[2];// メールアドレス
let Schedule_name = e.values[3];// 予定の名前
let Schedule_description = e.values[4];// 予定の詳細
let Start_time = new Date(e.values[5]);// 予約の開始時刻
let End_time = new Date(e.values[6]);// 予約の終了時刻
// カレンダーオブジェクトを取得
let Calendar = CalendarApp.getDefaultCalendar();
// カレンダーのタイムゾーンを"Asia/Tokyo"に変更する
Calendar.setTimeZone("Asia/Tokyo");
// イベントがなければ実行する関数
// "!"を用いることでBoolen化する
if(!Calendar.getEvents(Start_time, End_time).length){
// カレンダーに日程を追加
Calendar.createEvent(Schedule_name, Start_time, End_time,{description: Schedule_description});
// 自動返信メール件名
let Subject = Name + "様 " + Schedule_name + " ご予約";
// 自動返信メール本文
let Body = Name+"様 " + "\n" +
"\n" +
"以下の予約を承りました。" + "\n" +
"予定名：" + Schedule_name + "\n" +
"予定詳細：" + Schedule_description + "\n" +
"ありがとうございました";
// メール送信
MailApp.sendEmail(Email,Subject,Body);
}else{
// 自動返信メール件名
let Subject = Name + "様 " + Schedule_name + " ご予約失敗";
// 自動返信メール本文
let Body = Name+"様 \n\n" +
"ご希望いただいた日程がすでに埋まっているためご予約を完了できませんでした。\n" +
"別の日程を再度入力いただきますようお願いいたします。\n" +
"ありがとうございました。";
// メール送信
MailApp.sendEmail(Email,Subject,Body);
}
}
プログラムの編集が完了したら、画面上部の「実行」や「デバッグ」などの並びにある『保存』ボタンをクリックして保存します。
個人的に作成したカレンダーに登録をしたい場合は、上記の１０行目のコードを次のコードに置き換えてください。
カレンダーIDを独自で作成したカレンダーのIDに置き換えてください。
let Calendar = CalendarApp.getCalendarById("カレンダーID");
タイムゾーンの設定
プログラムのコピーが完了したら、そのプログラムのタイムゾーンを設定します。
これを設定しないと時差の影響を受けてカレンダーにしっかりと反映されなくなってしまいます。
画面左側にある設定アイコンをクリックしてください。
画面が切り替わるとチェックボックスが3つ存在し、その中の『「appsscript.json」マニフェストファイルをエディタで表示する』にチェックを入れます。
チェックマークを押したら再度『＜＞』マークをクリックしてください。
今までは表示されていなかった『appsscript.json』が表示されているのでそちらをクリックしてください。
続いて表示される内容を変更していきます。
"timeZone": "Asia/Tokyo"上記のように”timeZone”が”Asia/Tokyo”ではない場合は”Asia/Tokyo“に変更してください。
タイムゾーンの編集が完了したら、画面上部の「実行ログ」などの並びにある『保存』ボタンをクリックして保存します。
プログラムのトリガーの設定
先ほど作成したプログラムを実行するタイミングを設定していきます。
画面左のメニューから『時計アイコン』をクリックする。（初めて開く場合は何か表示されると思いますが、無視してOKです）
画面右下の『＋ トリガーを追加』をクリックして、設定を次のようにする。
- 実行する関数を選択
- onFormSubmit
- 実行するデプロイを選択
- Head
- イベントのソースを選択
- スプレッドシートから
- イベントの種類を選択
- フォーム送信時
- エラー通知設定
- 今すぐ通知を受ける
設定を入力したら、右下の『保存』をクリックします。別タブが開きくので、アカウント承認を行います。
承認の手順に関しては、こちらの記事をご覧ください。
GASを実行しようとしてこんな画面が表示されたことありませんか？ 今回はこの対処法についてお伝えしたいと思います。 Googleアカウントでの認証 Googleアカウントを用いた認証を行う際にアカウントの選択を行います。 […]
設定が完了するとタブが自動で閉じます。続いて『保存』をクリックしてトリガーを保存します。
これで先ほど作成したプログラムをGoogleフォーム送信時に実行することができるようになりました。
実行テスト
Googleフォームを開き、送信テストを行います。
Googleフォームの編集サイト右上の『目のアイコン』をクリックして送信テストを行います。
作成したフォームの内容を全て記入して『送信』をクリックして終了します。
自動返信メールが送信されたことを確認した後にGoogleカレンダーを確認してみてください。
事前にカレンダーに予定がなければ、Googleフォームした内容が登録されています。
今回のプログラムでは登録したい時間に日程がすでに存在していれば、登録できないプログラムとなっています。
お疲れ様でした！
今回は、Google フォームからGoogleカレンダーを利用した予約管理システムの作り方を紹介しました。
学校現場でも、先生に相談した生徒が先生に面談時間を事前予約するといったことを行うことができます。
今回をきっかけにGAS(Google Apps Script)を勉強していただけたらと思います。
今後もこのような情報を発信していきますので、ぜひお気に入り登録お願いします！！！
※プログラムにミスなどがあれば、コメントや問い合わせなどで教えていただけたらと思います。