このページの本文へ

もう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が保存される

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く