このページの本文へ

PROGRAMMING Web制作をちょっと便利にするGoogle Apps Script入門 ― 第5回

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

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

掌田津耶乃

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

 Webデザイナーを対象に、Google Apps Scriptの基本的な使い方から実践的なWebサービスの開発方法までを解説する本連載。今回は、Webサイトを簡単に作れる「Googleサイト」と「Googleカレンダー」、Google Apps Scriptを組み合わせて、小さな宿泊施設で使えるシンプルな宿泊予約システムを作ります。システムの概要は以下のとおりです。

  • 客室の予約状況を管理するカレンダーを用意する
  • 客室予約サイトを作り、カレンダーと予約入力フォームを組み込む
  • 客室予約サイトを公開する

GoogleカレンダーとGoogleサイトを連携

 宿泊予約システムは、客室の予約状況を管理するGoogleカレンダーを用意し、予約を入力するスクリプトをGASで作成すれば、基本的な仕組みは作れます。ただし、予約を受け付けるには、日付や予約者の連絡先を送信するフォームや、予約状況を示すカレンダーを表示するページも必要です。

 そこで、GoogleカレンダーとGoogleサイトを組み合わせて予約システムを作ることにしましょう。Googleサイトは、Googleカレンダーや、GASのページを埋め込んでWebページを作成できます。両者を組み合わせれば、カレンダーを使ったシステムをシンプルなWebページにまとめられます。

カレンダーを用意しよう

 まずは、宿泊情報を管理するためのカレンダーを用意します。Googleカレンダーのサイトにアクセスしてください。

https://calendar.google.com

 右側にある歯車アイコンをクリックし、メニューから「設定」を選びます。カレンダーの設定ページが現れます。

Googleカレンダーから「設定」メニューを選ぶ

 設定ページの上部にある「カレンダー」タブをクリックして選び、「新しいカレンダーの作成」ボタンをクリックします。

「新しいカレンダーの作成」ボタンをクリックする

 カレンダー作成画面で、カレンダー名に「客室予約1」と入力します。下にある「このカレンダーを他のユーザーと共有する」をONにし、「このカレンダーを一般公開する」をONにします。これを忘れると外部からアクセスできません。その他の項目はデフォルトのままで構いません。

「客室予約1」という名前でカレンダーを作る

 設定して「カレンダーを作成」ボタンを作れば、「客室予約1」という名前でカレンダーが作成されます。カレンダーページに戻り、「マイカレンダー」にカレンダーが追加されているのを確認しましょう。

「マイカレンダー」に「客室予約1」が追加された

カレンダーIDをチェック

 作成したカレンダーのIDを確認しておきましょう(あとで必要になります)。Googleカレンダーのページに表示されている「客室予約1」の右端の▼をクリックしてください。プルダウンメニューの「カレンダー設定」を選びます。

カレンダーから「カレンダー設定」メニューを選ぶ

 カレンダーの設定画面に変わります。下にある「カレンダーのアドレス:」「カレンダーID」に表示されているのが、このカレンダーのIDです。コピーして保管しておいてください。

カレンダーのアドレスにあるIDをコピーし保管しておく

この連載の記事

一覧へ

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

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

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

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

ランキング