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

スポンサーリンク
広告

予約システムのいろいろ

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

【Wordpress】アースオーブンの予約システムを考えてみる。Booking, Reservation, Events manage【無料サイト】
無料の予約システムやGoogleカレンダーなどもありますが、施設予約をするシステムを考えた場合、Event manageかEasy appointmentsが良さそうです。無料の枠内でいくつかの施設に対する予約ができます。

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

【読書感想文】プログラマーのためのGoogle Cloud Platform入門 Webアプリから機械学習アプリ・ネットワークも!【AWS/Azure/GCP比較】
AWSとAzureとGCPが競い合ってるクラウドの世界ですね。 あとから追ってきたGCP・Azureが今はがんばっている感じですね。そろそ...

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

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

Google Apps Scriptって?

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

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

【保存版】初心者向け実務で使えるGoogle Apps Script完全マニュアル
Googleが提供しているJavaScriptベースの開発環境Google Apps Script(GAS)。このページは初心者がGASを実務に活用できるようになるまでを支援するまとめ記事です。
【保存版】Google Apps Scriptリファレンス~キーワード別インデックス
Google Apps Scriptのリファレンスページです。JavaScriptの基本文法および標準オブジェクト、また各Google Appsサービスのオブジェクト・メソッドなどについてキーワード別にリストアップしています。

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

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

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

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

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

Google Form -> SpreadSheet -> Calendar && Mailで簡単な予約フォームを作る。 - Qiita
はじめまして。こんにちは。 岩手県大M2の現役学生です。 来年の春から恵比寿で働く予定です。来年から、よろしくお願い致します。 (さんが[Twitter APIをGoogl...
grocio/participants-recruitment-jp
participants-recruitment-jp - An easy way of recruiting participants

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

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

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

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

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

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

GAS で「一部のスコープへのアクセス権限がありません」と怒られたときの対処法 - Qiita
(今の GAS の挙動に基づいた記事なので、賞味期限短いかもしれません) # 何が起きたか: GAS の認証エラー 最近、 GAS (Google Apps Script) からスプレッドシートなど他の Google アプリを操...

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

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

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

実際に作った手順

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

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

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

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

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

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

これくらい。

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

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

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

Googleカレンダーを用意する

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

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

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

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

まずはフォームを作る

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

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

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

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

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

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

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

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

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

ここまで準備して、やっとスクリプトです。。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);
 }
}
替える所1

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

替える所2

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

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

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

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

トリガーを作る

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

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

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

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

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

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

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

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

アースオーブン利用予定(仮)農楽校イベント予定表
畑・田んぼ・かご編み・アースオーブン利用予定・DIYクリエータ―ズ のカレンダー アースオーブン予約フォーム 読み込んでいます... ...

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

簡単でしょ<ほんまか?(笑)

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

コメントを残していただけるとありがたいです

Loading Facebook Comments ...
%d人のブロガーが「いいね」をつけました。