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

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

Googleサイトでサイトを作る

　続いて、Googleサイトの作業です。まずはGoogleサイトにアクセスしてください。アドレスは以下になります。

https://sites.google.com

　ここで「作成」ボタンをクリックし、新しいサイトを用意します。

Googleサイトで「作成」ボタンをクリックする

　サイト作成の画面で「空のテンプレート」を選択し、サイトの名前に「客室予約」と入力します。「サイトの場所」は分かりやすいアドレスを入れておきましょう。ここでは「yoyaku」としておきました。

空のテンプレートを使い、「客室予約」サイトを作る

　「作成」ボタンをクリックすると新しいサイトが作成されます。デフォルトでは、タイトルとサイトマップなどが記載されたトップページが表示されます。

作成された新しいサイト

ページを編集する

　作成されたページを編集しましょう。右上にある「ページを編集」ボタン（鉛筆のアイコン）をクリックしてください。

「ページを編集」ボタンをクリックする

　編集モードに切り替わります。先ほどのカレンダーを追加しましょう。「挿入」ボタンを押し、ポップアップして現れるメニューから「カレンダー」を選んでください。

「挿入」から「カレンダー」を選ぶ

　カレンダーを選択するダイアログが現れますので、先ほど作った「客室予約1」のチェックをONにし、「選択」ボタンをクリックします。

ダイアログから「客室予約1」のチェックをONにする

　挿入するカレンダーの設定画面になります。例では以下のように設定しましたが、自由に変更して構いません（この設定は変更しても動作に影響はありません）。

• 高さ：400
• 幅：空白のまま
• 表示：月
• タイムゾーン：GMT +09:00 日本標準時
• 表示オプション：「ナビゲーションボタンを表示」「現在の期間を表示」をON、その他をOFF

カレンダーの表示に関する設定をする

　設定したのち「保存」ボタンを押すと、カレンダーがWebページに追加されます。編集の段階では、ただのグレーのパネルしか表示されません。

保存すると、カレンダーがページに追加される

　右上の「保存」ボタンをクリックしてページを保存すると、通常のページの表示に戻り、追加したカレンダーが表示されます。

カレンダーが表示された！