このページの本文へ

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

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

文●掌田津耶乃

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

Googleサイトでサイトを作る

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

https://sites.google.com

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

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

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

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

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

作成された新しいサイト

ページを編集する

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

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

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

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

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

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

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

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

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

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

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

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

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

この連載の記事

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

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

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

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