このページの本文へ

もうASPは不要!Googleカレンダーで宿泊予約システム (6/6)

2014年05月20日 11時00分更新

文●掌田津耶乃

  • この記事をはてなブックマークに追加
本文印刷

予約してみよう!

 完成したページ(作成したGoogleサイトの予約ページ)にアクセスし、予約をしてみましょう。アクセスすると、予約のフォームと予約状況のカレンダーが表示されます。予約したい日付、名前、メールアドレスを入力して「予約する」ボタンをクリックするとカレンダーにスケジュールが追加されます。すでに予約済みの日を入力する、「その日は予約済みです」と表示されます。

 今回のサンプルでは、日付の入力にHTML5の<input type="date">を使っているので、HTML5に対応していないブラウザーでは日付の入力機能が働かず、通常のテキスト入力になります。この場合は「2014/5/5」といった具合に、年月日をテキストで入力してください。

予約のフォームから送信すると、カレンダーに予約が追加される。管理者としてログインしている場合には、クリックすると予約した人の名前とメールアドレスが表示される

 カレンダーは、管理者としてログインしている場合には、クリックすると予約した人の名前とメールアドレスが表示されますが、そうでない場合は「予定あり」とだけ表示されます。また、予約した人がGoogleカレンダーを使っていれば、自分のカレンダーにも「予約済」と予定が表示されます。

 なお、管理者以外でアクセスすると、フォームの上に「This application was created by another user, not Google」とメッセージが表示されます。これはGASで公開Webアプリケーションを作ると自動的に表示されるもので、消すことはできません。

サイトを公開しよう

 以上で予約システムのWebサイトは完成です。最後にサイトを一般公開しましょう。予約システムページの右上にある「共有」ボタンをクリックしてください。

「共有」ボタンをクリックする

 サイトにアクセスできるユーザーを設定します。「変更…」のリンクをクリックしてください。

「変更…」リンクをクリックする

 「公開設定オプション」設定画面で、「ウェブ上で一般公開」を選択し、「保存」ボタンを押します。これでサイトが一般公開され、誰でもアクセスできるようになりました。

「ウェブ上で一般公開」をONにする

 今回作ったのは「1室だけ、1日単位の予約」というごく初歩的な予約システムです。カレンダーとGoogleサイトのページをコピーして、部屋数ごとに予約ページを作れば複数の客室に対応できます。小規模なペンションなどであれば十分使えるはずです。

 今回作成した予約システムのサンプルは以下のアドレスで公開しています。

https://sites.google.com/a/tuyano.com/wp_sample/yoyaku

前へ 1 2 3 4 5 6 次へ

この連載の記事

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

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

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

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