【GAS活用術⑫】部活の大会までのカウントダウンをウェブサイトに表示する

Hoshi-nok（ほしのっく）

2024年7月22日 21:22

Google Apps Script (GAS)を、もっと身近に、日々の暮らしに。

【GAS活用システム⑧】では、部活の予定表をカレンダーに一括登録して、Googleサイトに色分けして表示する方法をご紹介しました。

今回は、そのサイトに以下のように大会までの日単位のカウントダウンを表示する方法を紹介したいと思います。

カウントダウンは、ヘッダー画像の「□□大会まであと 5 日！」の部分ですね。

まぁまぁ地味ですが、購買意欲をかき立てるためのどこぞのサイトのセール開始までのカウントダウンとは違って、部活の大会までのカウントダウンなのでさりげないくらいがちょうどいいかと。。

ということで、今回は派手すぎない、シンプルな日単位のカウントダウンをサイトに埋め込む方法となります。上記の例では、

大会名は「□□大会」、日程は7/20と7/21の2日間として設定
7/15には「あと５日！」、7/19には「あと１日！」と表示される
大会期間中の7/20と7/21には「本日です！」と表示される
大会終了後の7/22以降には「お疲れ様でした！」と表示される

すでにGoogleサイトを使用してウェブサイトを作成済みであれば、10分もかからずに簡単に、シンプルなカウントダウンを表示できますよ。

ちなみに、日付が変わっても、残り日数やメッセージは自動的には変わりませんので、ページの再読み込みをしてくださいね。

scriptタグつきのhtml

GAS活用術といっておきながら、正確にはGASは使用していません。htmlのscriptタグにJavaScriptのコードを記述しています。そのhtmlが↓こちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style type="text/css">
/* colorの#000000は黒、#FFFFFFは白 */
div { margin: 0; padding: 0; color:#000000; font-size: 120%; 
      text-align: center;  font-family: sans-serif; }
</style>
</head>

<body>
<div></div>
<script LANGUAGE="JavaScript">
let element = document.querySelector('div');
//イベント名・イベント開始日・終了日を設定
const eventName = "□□大会";
const startDate = new Date("2024/07/20");
const endDate = new Date("2024/07/21");
//現在の日時取得・メッセージの初期化
const nowDate = new Date();
let msg = "";
//日数を計算
const daysToStartDate = Math.ceil((startDate - nowDate)/(1000*60*60*24));
const daysToEndDate = Math.ceil((endDate - nowDate)/(1000*60*60*24));
if (daysToStartDate > 0) {       //イベント開始日前ならば
  msg = eventName + "まであと " + daysToStartDate + " 日！";
}else{
  if (daysToStartDate <= 0 && daysToEndDate >= 0 ) {  //イベントの期間中ならば
    msg = eventName + "、本日です！";
  }else{      //イベントが終了したら
    msg = eventName + "、お疲れ様でした！";
  }
}
element.innerHTML = msg;  //HTML上に出力
</script>  
</body>
</html>