もうASPは不要！Googleカレンダーで宿泊予約システム (4/6)
2014年05月20日 11時00分更新
HTMLのソースコードを記述する
作成したindex.htmlにリスト1のようにソースコードを記述してください。
リスト1
<div>
<script>
function doAction(event){
var param = new Object();
var d = document.querySelector('#date').value;
var dstr = new Date(d).toString();
param['date'] = dstr;
param['user'] = document.querySelector('#user').value;
param['mail'] = document.querySelector('#mail').value;
google.script.run.withSuccessHandler(onSuccess)
.withFailureHandler(onFailure) .checkData(param);
document.querySelector('#msg').textContent = '……問い合わせ中……';
}
function onSuccess(result){
document.querySelector('#msg').textContent = result;
}
function onFailure(error) {
alert(error.message);
document.querySelector('#msg').textContent = '';
}
</script>
<p id="msg">必ず全項目を入力してください。</p>
<form>
<table>
<tr><td>日付：</td><td><input type="date" id="date" name="date" value=""></td></tr>
<tr><td>利用者名：</td><td><input type="text" id="user" name="user"></td></tr>
<tr><td>メールアドレス：</td><td><input type="text" id="mail" name="mail"></td></tr>
<tr><td></td><td><input type="button" onclick="doAction(e);" value="予約する"></td></tr>
</table>
</form>
</div>
GASで利用するHTMLのソースコードは、普通のWebページとは少し違い、<html>や<head>、<body>といったタグがありません。GASでは生成されるページのボディにHTMLページを埋め込んで表示するため、実際に表示されるタグだけを記述すればよいのです。
スクリプトを作成する
続いてGASのスクリプトを記述しましょう。スクリプトエディタで「コード.gs」タブをクリックしてエディターを切り替え、リスト2の内容を記述します。
リスト2
function doGet(e){
return HtmlService.createHtmlOutputFromFile('index');
}
function checkData(frm){
var mail = frm['mail'];
var user1 = frm['user'];
var date1 = new Date(frm['date']);
Logger.log(date1);
var cal = CalendarApp.getCalendarById('☆カレンダーID☆');
var result = '';
var evts = cal.getEventsForDay(date1);
if (evts.length > 0){
var frmdaystr = date1.getYear() + '-' + date1.getMonth() + '-' + date1.getDate();
var evtday = evts[evts.length - 1].getAllDayStartDate();
var evtdaystr = evtday.getYear() + '-' + evtday.getMonth() + '-' + evtday.getDate();
Logger.log(evts.length);
Logger.log(frmdaystr);
Logger.log(evtdaystr);
if (frmdaystr == evtdaystr){
result ='申し訳ありません。その日は既に予約済みです。';
} else {
cal.createAllDayEvent('予約済', date1,
{description:user1 + '様。連絡先：' + mail, guests:mail});
result = date1.getYear() + "年" + (date1.getMonth() + 1) +
"月" + date1.getDate() + '日に予約しました。（ブラウザーをリロードすると、カレンダーが更新されます）';
}
} else {
cal.createAllDayEvent('予約済', date1,
{description:user1 + '様。連絡先：' + mail, guests:mail});
result = date1.getYear() + "年" + (date1.getMonth() + 1) +
"月" + date1.getDate() + '日に予約しました。（ブラウザーをリロードすると、カレンダーが更新されます）';
}
return result;
}
「☆カレンダーID☆」に先ほど取得したIDをコピー＆ペーストしてください（途中で改行しないように注意）。
このスクリプトではカレンダーをチェックして予約のスケジュールを追加するcheckDataと、index.htmlを画面に表示するためのdoGetの2つの関数を用意しています。doGetでは、指定したHTMLの内容を読み込んで画面に表示します。
return HtmlService.createHtmlOutputFromFile( 表示するHTMLファイル名 );
createHtmlOutputFromFileの後の引数に、画面に表示するHTMLファイル名を記述します。HTMLファイルを表示するWebアプリケーションが簡単にできますので、覚えておくと役に立ちます。
バージョンを保存する
作成したGASのプロジェクトをWebアプリケーションとして公開するため、プロジェクトのバージョンを保存します。「ファイル」メニューから「版を管理…」を選んでください。
「版を管理...」メニューを選ぶ
現れたダイアログで、説明文として「客室予約1」と記入し、「新しいバージョンを保存」ボタンをクリックします。
簡単な説明を書いて「新しいバージョンを保存」ボタンをクリックする
バージョン1として、現在のプロジェクトが保存されます。確認したら「OK」ボタンをクリックしてダイアログを閉じます。
バージョン1が保存される
