SYSTEM NOTICE

Auto translation by AI. Be sure, accuracy, nuances and authorial intent may not be fully reflected.

Like Button

2024年9月17日 23:35

Good evening, this is Cardy.
When hosting online events, I often worry about the sense of distance between the speakers and the participants.

Offline, the physical distance to participants is small and you can feel the atmosphere of the venue, but that is not easily achieved online.

I would be happy if the chat or posts on X were lively, but honestly, that is quite difficult.
It is very helpful when someone volunteers to liven things up, but I am looking for a way to lower the barrier to engagement that is not so dependent on specific individuals...

So, I thought about a 'Like' button.
Although, when I say 'I thought about it,' I just asked GPT-sensei to teach me...

Open Apps Script

Select Extensions > Apps Script in the spreadsheet

Code.gs

Copy and paste the following code.

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function increaseLikeCount() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  
  // いいね数を保存するセル（例: B1）
  var likeCell = sheet.getRange('B1');
  var currentCount = likeCell.getValue();
  
  // もしセルが空なら0を設定
  if (currentCount === '') {
    currentCount = 0;
  }

  // カウントを1つ増やす
  var newCount = currentCount + 1;
  likeCell.setValue(newCount);
  
  // 新しいカウントを返す
  return newCount;
}

function nowCount(){
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  
  // いいね数を保存するセル（例: B1）
  var likeCell = sheet.getRange('B1');
  var currentCount = likeCell.getValue();
  
  // もしセルが空なら0を設定
  if (currentCount === '') {
    currentCount = 0;
  }

  // 現在値を返す
  return currentCount;
}

Add an HTML file

Add an HTML file from the + button.
Set the file name to 'index' (index.html).

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>いいねボタン</h1>
    <button onclick="incrementLike()">👍 いいね！</button>
    <p id="likeCount">0</p>

    <script>
      // いいねボタンがクリックされた時に実行
      function incrementLike() {
        google.script.run.withSuccessHandler(updateLikeCount).increaseLikeCount();
      }

      // カウントアップの結果を表示する
      function updateLikeCount(count) {
        document.getElementById('likeCount').innerText = count;
      }
      google.script.run.withSuccessHandler(updateLikeCount).nowCount();
    </script>
  </body>
</html>

Deploy

Select type: Web app
Who has access: Anyone

When you deploy, the following screen will appear, so copy the web app URL

Open the web app

index.html

When you open it, a screen like the one below will appear (it was extremely small when opened on a smartphone, so I recommend opening it on a PC!)

When you press the [👍Like!] button, the value in cell B1 of the spreadsheet will count up.

Pros

Counting up and displaying the value is working in index.html
Since it is a web app, I don't have to worry about permissions
Data is also written to the spreadsheet

Issues

Change the appearance of index.html (such as the size of the button and the like count)
You can embed the spreadsheet into slides with a link, but automatic updates require GAS

So, that was an example of creating a like button using GAS.
I will continue to consider measures to bridge the distance with participants, even online.

いいなと思ったら応援しよう！

「いいね」以上、「スポンサー」未満の気持ちで、もしよければ応援してもらえると嬉しいです。いただいたチップは、次の記事を書くためのコーヒーと時間に変わります☕