見出し画像

Googleサイトで簡単!リラクゼーションサロンの予約情報を店舗サイネージに表示する方法

GoogleサイトとはGoogleが提供しているWebサイト作成ツールです。とても簡単にWebサイトを作ることが出来ます。テンプレートも豊富でGoogleのコンテンツを配置することもできます。

Google サイトで予約状況表示

今回はGoogleサイトを使って15店舗ほどのリラクゼーションのお店の予約状況を表示した事例を紹介します。
実際の予約情報をリアルタイムに表示するシステムは多々ありますが、今回はリアルな情報ではなく、表示する予約状況を手動でコントロールしたい、との要望だったので、各店舗から手動で入力して、施設内のサイネージに表示することになりました。

予約状況の入力

スプレッドシートを作成し、営業時間に合わせた入力用のシートに、店舗ごと、時間ごとに予約状況を〇×△で店舗スタッフ入力します。営業終了後にタイマーで当日分を自動的にクリアします。

予約状況の表示

入力用とは別シートにレイアウトを整えた表示専用のシートを作成しました。下記のGoogle App Scriptを使って、現在時刻から表示できる数時間分の予約状況を転記します。表示用シートの更新のトリガーは入力用シート変更時としました。
表示用のシートは公開設定してURLを発行しておきます。Googleサイトを作成して、表示専用のシートのURLを差し込みます。レイアウトを調整してサイトを公開すればWebサイトの完成です!

/**
 * 編集シートの変更をトリガーに空き状況シート、英語シートにコピーする
 */

function updateReserve() {
  var sps = SpreadsheetApp.getActiveSpreadsheet();
  var editSheet = sps.getSheetByName("編集");
  var jpnDispSheet= sps.getSheetByName("空き状況");
  var engDispSheet= sps.getSheetByName("BookedSituation");


  // 現在時刻を取得
  var d = new Date(); 
  var h = d.getHours();
  
  var startCellCol = 4;

  if (h >= 11){          //11時~
    startCellCol = h-7;
  }

  // (日本語)対象セルをコピーして貼り付け
  var pasteCell = jpnDispSheet.getRange(1,4,16,7);
  editSheet.getRange(5,startCellCol,16,7).copyTo(pasteCell, {contentsOnly:true});

  // (英語)対象セルをコピーして貼り付け
  var pasteCell = engDispSheet.getRange(1,4,16,7);
  editSheet.getRange(5,startCellCol,16,7).copyTo(pasteCell, {contentsOnly:true});

  //現在日時をセット
  var dJpn = Utilities.formatDate(d, "JST", "yyyy年MM月dd日 HH:mm")
  var dEng = Utilities.formatDate(d, "JST", "dd MMM yyyy HH:mm")

  jpnDispSheet.getRange(17,8).setValue(dJpn)
  engDispSheet.getRange(17,8).setValue(dEng)

}

施設での表示

サイネージの配信システムで公開したGoogleサイトのURLを読み込みます。今回は公開したサイト表示用のスプレッドシートの部分だけを表示するように、HTMLの位置を固定して表示しました。

まとめ

スプレッドシートの編集はGoogleのアカウントを制限していますが、どの端末からでも編集することができるため、各店舗に入力を依頼できるようになりました。サイネージの配信システムではGoogle認証ができなかったのですが、公開されたサイトであれば認証せずに表示することができます。また、予約状況をサイネージ以外のタブレットやPCからも参照できるようになり、必要な場所で予約状況をご案内できるようになりました。
 
今回は表示のみで公開しましたが、公開されたサイトからGoogleスプレッドシートを編集することも可能です。制限された環境と公開情報を使い分けることで利用範囲を広げることができたと思います。Googleサイトは細かいデザイン設定はできないものの、テーマを設定してデザインをおまかせすることが可能です。お仕事でもプライベートでもGoogleアカウントひとつでWebサイトを公開してみませんか。

この記事が参加している募集