【GAS×JS】ボタンのクリック数をスプレッドシートに記録する方法

「このボタン、何回押されたんだろう？」
そんなときに便利なのが、Google Apps Script(GAS)＋ JavaScript で作る簡単な記録システム！
本記事では、クリック数をスプレッドシートに記録する方法を、コード付きで紹介します。

準備するもの

• Googleスプレッドシート（B1セルを記録用として使用）
• GAS（Webアプリとして公開）
• Webサイト（HTML＋JavaScript）
  • JavaScriptでクリックイベントをGASに送信

スプレッドシートとGASの設定

新規のスプレッドシートを開いて以下のようなシートを作成し、B1セルにクリック数が記録されるようにします。

続いてスプレッドシートの「拡張機能」→「Apps Script」を開き、以下のコードを貼り付けます。

// WebアプリにPOSTリクエストが来たときに実行される関数
function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var range = sheet.getRange("B1");

  // 現在の値を取得。空だった場合は0として扱う
  var count = range.getValue() || 0;

  // カウントを1増やして、その値をB1セルに設定
  count += 1;
  range.setValue(count);

  // スプレッドシートへの変更を即時反映
  SpreadsheetApp.flush();

  // 応答として、更新後の数値をテキストで返す
  return ContentService
    .createTextOutput(String(count))  // 数値を文字列に変換して返す
    .setMimeType(ContentService.MimeType.TEXT);
}

• プロジェクト名は「Apps Click Count」にしました。
• コード記載後、保存するのを忘れないように。

コードを記載して保存したら、このアプリを以下の手順で公開します。

1. 「デプロイ」→「新しいデプロイ」
2. 「歯車マーク」→「ウェブアプリ」
3. 「設定」を以下の通り入力
   • 新しい説明：ボタンのクリック数をカウント
   • 次のユーザーとして実行：自分
   • アクセスできるユーザー：全員
4. 「デプロイ」をクリック
   • 初めてデプロイする場合はアクセスを許可
5. 「ウェブアプリ」のURLをコピー

画像付きの手順はこちら

以上でスプレッドシート（GAS）側の設定は完了です。

Webサイトの設定（HTML＋JavaScript でGASに送信）

以下を自分のWebサイトやブログに設置します。
★GASのURL★ の部分は、先ほどコピーしたURLに差し替えてください。

<button id="count-button">クリック！</button>

// GASで発行したWebアプリのURLをここに貼り付けてください
const SHEET_URL = "★GASのURL★";

document.getElementById("count-button").addEventListener("click", () => {
  // fetch関数でPOSTリクエストを送る（GASが受け取ってカウント）
  fetch(SHEET_URL, { method: "POST" })
    .catch(() => {
      // 通信に失敗した場合のエラーハンドリング
      alert("送信エラーが発生しました");
    });
});

以上で設定完了です。実際に設置されたボタンをクリックしてみて、スプレッドシートにクリック数が記録されるか確認してみてください！

まとめ

使用言語

GAS + JavaScript

保存先

GoogleスプレッドシートのB1セル

用途

ボタンクリック数の記録

本記事では数の記録のみでしたが、「スプレッドシートの情報を取得してサイトに表示する」というような実装も可能です（こちらは別記事で紹介予定です）。ぜひ、色々応用してみてください！