【GAS】Google Form ＋ SpreadSheetで作る予約システムを作ってみた　簡単ですね。【Google App Script】

予約システムのいろいろ

いろいろ予約システムをいじってみて

【WordPress】アースオーブンの予約システムを考えてみる。Booking, Reservation, Events manage【無料サイト】

GCPと、AWSなどを比較したりしてみて・・

【読書感想文】プログラマーのためのGoogle Cloud Platform入門　Webアプリから機械学習アプリ・ネットワークも！【AWS/Azure/GCP比較】

やっぱりGoogleすごいなぁ～　っていうか、ネットワークも端末もクラウドも一つのコンピュータ資源としてみていて、そのつながりにせよ用意されている機能にせよ・・面白い。

で・・・予約システム自体は、Wordpressでも作ってみたんですが、Google Calendar が割とどんなアプリにでも相互に接続できるので、予定表アプリなどに取り込んだりするには都合がよくて、Wordpress プラグインでは有料になっているのと、元のプログラムのどこをどう直せばいいのかが直感的に分かりないということもあり(笑)。どうせ、Googleカレンダーを使うのなら、ここはGoogleで簡単に、さくっと作ってみるかな？っていう気になってちょっと作ってみました。（ちょっとだけハマりどころもあります）(笑)

2018年３月追記

少々Googleのカレンダーなど画面構成が変わっていたので、追記しています。

Google Apps Scriptって？

Microsoft ExcelでいうところのVBA（マクロとプログラム）みたいなものですね。だいぶ前から気になってて、ぜんぜん使っていなかったわけでもないんですけど、ず～っと変わり続けるので、ある程度安定してからと思っていました(笑)。　でGCPが出て、なんとなく安定してきたのかと。。　ってGoogleって会社は進化し続けているので、分からないですけどね。

だから、情報は、Google　のサイトに確認が必要ですが、比較的新しい情報が乗ってるいいサイトは、こちらだと思います

https://tonari-it.com/google-apps-script-manual/

https://tonari-it.com/google-apps-script-reference/

さら～っとこれらを読んでもいいし、これのコピペでプログラムしてもいいと思います。

何がいいかっていうと、Google Cloud platform（GCP）や他のAPIなども一緒に使えるので、機械学習や翻訳とかまでできちゃうことですね。。

下敷きにする（参考にする）ページを決める(笑)

似たようなことをしようと思っている人は、世の中に沢山いる訳でして、先人の知恵をお借りしましょう。それも、Googleで検索(笑)　検索で自分の欲しいものを探すのもコツがいりますね。また、GASに関しては、できるだけ新しいものを参考にしないと、ぜんぜん違っていたりしますので、注意が必要です。

今回、参考にさせてもらったのは、この二つです。

http://qiita.com/her0m31/items/0a67d52179341380dd31

https://github.com/grocio/participants-recruitment-jp/blob/master/main.gs

大学の相談とか、実験の予約システムを作ってらっしゃいます。

まずは、これをコピペしてやってみました。　読むだけでは動くかどうか分からないので、その通りやってみます。

ハマりどころ１　ScriptはGoogleの承認がいります。

やってみると・・さて動かそうという段階で、スクリプトを認証するのですが、日本語のページにその記載がないので、ハマります。

「invalid_scope 一部のスコープへのアクセス権限がありません」

って出てしまいます。理由と、解決方法は、こちらです。

http://qiita.com/zk_phi/items/7220b67afa84c58cc160

ちょっとだけ補足すると、日本語から英語に変えて、認証を取るってところが画面のどこにあるのか分かりにくいので、スライドショー作っておきました(笑)　アカウントの選択のところに、日本語ってところがあるので、それをEnglishに変えないと出てこないです。それからアカウントの選択して、Advancedにして・・ということなんですが。。参考に、これクリアしないといけない課題です(笑)

スライドショーには JavaScript が必要です。

これができないと、動かないですから、日本語のページも、Googleさん早く対処してね。

実際に作った手順

だいたいの動き・仕様を決める

今回のざっくりとした仕様をイメージします。

①特定のGoogleカレンダーに、予約を入れる

②フォームから誰でも予約できるようにする

③あとで連絡が取れるように、誰が予約したかを記録しておく

④予約ができたら、予約できたと返答、重なってたら、出来なかったと返答

これくらい。

で、入力項目は、メアド、名前、予約日、開始時間・終了時間、通信欄

と、ここまで、決まったら、あとは、参考にしたところを元にして作っていきます。

Google Apps Script はGUIで作ったり、あちこちにメニューがあったりでScriptだけで解決しないことと、どこにそのScriptとかが保存されたのか？分かりにくいのが難点ですかね？(笑)クラウドファーストとはそういうことなんでしょうけど(笑)

Googleカレンダーを用意する

適当な名前をつけて、カレンダー作ります。Googleカレンダーから、作成でできます。

2018年３月追記　少し変わったみたいですね。友だちのカレンダーを追加の横の＋をクリックすると、新しいカレンダーが出てきます。

Googleドライブに新しいフォルダ作っておく

フォームとかスプレッドシートとかの連携するので、ひと塊にしておいた方があとで分かりやすいです。

名前も適当につけておいてくださいね。

まずはフォームを作る

さきほど作ったフォルダの中に入って、フォームを作ります。

フォームでメールを出したりするのに・・フォーム機能でメールアドレスを収集するといいです。テキスト入力でメールアドレスをとってもいいのですが、メールアドレスかどうかをチェックする機能とかが、あらかじめついているので、その方が楽です。

この機能がどこにあるのか？？分からない(笑)　フォームを作ったら、そのフォームの設定マークから全般のメールアドレスを取得する。っていうところにあります。

あとは、上に書いたような項目を適当に入れていきます。メニューバーみたいなのが右に出ているので、それに沿っていれてきます。前はここから直接スクリプトも入れれたし、カレンダーとかも入れれたんですが、今は、入れれませんね。

目のマークが、プレビューです。プレビューして、一回入れてみると、メールが届くのとかもわかっていいです。

フォームからスプレッドシートを作る

今回は、スクリプトをスプレッドシートから呼び出すようにするのと、フォームの内容がスプレッドシートに保存されるようにします。回答タブをたたくと、スプレッドシートのアイコンがあるので、そいつをたたきます。

そうすると、こんな感じでスプレッドシートができています。１回でも回答してたら、スプレッドシートに、値も入っています。１回回答しておいた方がスクリプトのデバックをするときに値があるので、楽です。（下の図は値が入ってませんが・・・）

やっとスクリプトに入れます(笑)

ここまで準備して、やっとスクリプトです。。Google Siteから作るとスクリプトだけで書けたんですが、新しいインターフェースになってからは、ここまで来るのが一苦労ですね。

で、どこにスクリプトを書くかというと、ツールのスクリプトエディタを起動

開くと、無題のプロジェクトになっていますが、名前を付けておいた方がいいと思います。　仮に動かす時は、虫のアイコンでデバッグです。

今回のスクリプト（コード）は、こんなのです。

スクリプトはこんな感じです。上で紹介したリファレンスのページで関数についてはみてもらうといいかと思います。

function sendToCalendar(e) {
 try{
 //有効なGooglesプレッドシートを開く
 var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

//新規予約された行番号を取得
 var num_row = sheet.getLastRow();

//新規予約された行から名前を取得
 var nname = sheet.getRange(num_row, 2).getValue();
 
 //メールアドレスの取得
 var nmail = sheet.getRange(num_row,9).getValue();

//予約を記載するカレンダーを取得
 var cals = CalendarApp.getCalendarById("カレンダーIDを入れる");

//予約の開始時間を取得
 var stime = new Date(sheet.getRange(num_row, 5).getValue());

//予約の終了時間を取得
 var etime = new Date(sheet.getRange(num_row, 6).getValue());
 
 var ndate = new Date(sheet.getRange(num_row, 4).getValue());
 var ndates= new Date(ndate.getFullYear(),ndate.getMonth(),ndate.getDate(),stime.getHours(),stime.getMinutes(),0);
 var ndatee= new Date(ndate.getFullYear(),ndate.getMonth(),ndate.getDate(),etime.getHours(),etime.getMinutes(),0);
 
// 先約があるかどうか調べる
 if(cals.getEvents(ndates, ndatee)==0){
 
 var thing = nname+"様　ご予約";

//予約情報をカレンダーに追加
 var r = cals.createEvent(thing, ndates, ndatee);
 var thing =nname+"様　\n\n ご仮予約を承りました。\n 別途、確定のお知らせをいたします。\n\n ありがとうございました"
 
 MailApp.sendEmail(nmail,"仮ご予約",thing);
 }
 else{
 var thing =nname+"様　\n\n ご予約の時間に先約がありましたので、\n 申し訳ございませんが、ご予約いただけませんでした。\n\n ご予定を変更して再度お申込みください"
 
 MailApp.sendEmail(nmail,"ご予約できませんでした",thing);
 }
 
 } catch(exp){
 //実行に失敗した時に通知
 MailApp.sendEmail(nmail, exp.message, exp.message);
 }
}

注意　なぜかWordpressのプラグインのせいで、span なんとかって色指定しているｈｔｍｌコードが入ってしまっています。コピペする場合は、そのあたりを変更してみてください

替える所１

作ったフォームによって、スプレッドシートの列数が違うので、数えて修正してくださいね。

替える所２

自分のカレンダーにする。

カレンダーとの連携は、ByIDにしています。カレンダーのIDは、Googleカレンダーに行き、さっき作ったカレンダーの下タブをたたいて、カレンダー設定にいきます。

こんなところに、IDがいますので、それをコピペしてくださいませ。

スプレッドシートに値を入れて、実行させてみたりデバックしてみて動くようします。

2018年３月追記　こちらの画面も変わってしまったようですね。

新しく作ったカレンダーの横の立て３つの点をクリックすると、設定と共有が出てきます。そこをクリックして、下の方までスクロールしていくと、カレンダーIDなどが出てます。

トリガーを作る

このままだと、自動で動いてくれないので、フォームが送信されたら、このスクリプトを動くようにします。　編集の現在のプロジェクトのトリガーを選びます。

こんな画面が出てくるので、フォーム送信時に、動くように設定します。

カレンダーとフォームを一つのページに出すには・・

iframeというので、これらの画面をHP等に出すことができます。

フォームは、送信ボタンを押して、＜＞マークのタブを開くとでてきます。

カレンダーは、カレンダー設定の中に、あります。

こういうのを探すのが大変なんですよねぇ～(笑)　でも知ってると、できる。。

これらをHPに張り付けてしまいます。GitだったりHerokuだったりを使ってもいいかもしれまえんが、Wordpressのページを持っているので、そちらに貼りました。

アースオーブン利用予定（仮）農楽校イベント予定表

アクセスしてみると、予約ができます。。実際に動いているシステムなので・・使う人しか予約入れないように！(笑)

ということで・・あまりにも、テスト書込みが多いので、テスト用のシステム作っておきました。

こちらでテストしてください。　但し、お願いです。テストされる方は、メールアドレスを正しく入れてください。メールの配送でエラーがでると、ログが私にきますので、迷惑になります。メールを収集しているわけではないので、ご自身のメールアドレスをきちんと入れて、動作を確認してください。

簡単でしょ＜ほんまか？(笑)

普通の店舗向けのシステムとかだったら、これで十分じゃないかな？通知とかいろいろできるし・・・　やって欲しいところありましたら、5000円くらいから請け負いますよ(笑)

PWAアプリでもできますよ

【GAS】GASとフォームとカレンダーで予約システム２　 GlideでPWAアプリとしても使えるよ【アプリ化】

Glideでアプリ化もしてみました(笑)

補足情報

Google Calendar API で、日時のほかに、詳細、場所などを追加して入れることができます。

var edespription = sheet.getRange(num_row,xx).getValue();

シートに詳細が書かれている列数ｘｘを指定して取ってきて、

var r = cals.createEvent(thing, ndates, ndatee,{description:edescription,location:elocation);

などのように入れるとカレンダーに情報が入ります。

createEvent のオプションは、以下です。

【GAS】Google App Script の　小ネタ　集　【コピペでプログラミング】