【スプレッドシート】カウントボタン（増減ボタン、スピンボタン）の作成方法

2025.04.06

Googleスプレッドシートは関数やグラフだけでなく、インタラクティブな要素も取り入れることができます。今回はその中でも「カウントボタン」、いわゆる「＋」「－」ボタンを使って、数値を増減させるスピンボタン的な機能を実現する方法について詳しく解説します。

スプレッドシートで「カウントボタン」を実現するには？

スプレッドシートにはExcelのように標準でスピンボタンが用意されていませんが、Google Apps Script（GAS）を使えば、カスタム関数やボタン操作によって同じような操作性を実現することが可能です。

ボタンを配置したいシートを用意

カウントボタンを設置したいスプレッドシートを開きます。例えば以下のようなレイアウトを想定します。

項目	カウント	+ ボタン	− ボタン
商品A	5

この「+ ボタン」と「− ボタン」のセルに、クリックでカウントを増減させる仕組みを追加します。

Google Apps Scriptエディタを開く

スプレッドシートを開いた状態で、上部メニューの「拡張機能」>「Apps Script」を選択。

スクリプトエディタが開くので、以下のコードを貼り付けます。

スクリプトを書く

以下のコードを使って、カウントの増減処理を定義します。

function incrementCount() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var cell = sheet.getActiveCell();
  var row = cell.getRow();
  var countCell = sheet.getRange(row, 2); // 2列目（B列）
  var current = countCell.getValue();

  if (!isNaN(current)) {
    countCell.setValue(current + 1);
  } else {
    countCell.setValue(1); // 初期値（任意）
  }
}

function decrementCount() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var cell = sheet.getActiveCell();
  var row = cell.getRow();
  var countCell = sheet.getRange(row, 2);
  var current = countCell.getValue();

  if (!isNaN(current)) {
    countCell.setValue(current - 1);
  } else {
    countCell.setValue(0); // 初期値（任意）
  }
}

このコードでは、アクティブなセルの行に対応する「カウント」列（この例では2列目）の値を取得し、「+1」または「-1」する処理を実行します。

図形を使ってボタンを作成する

次に、スプレッドシート上に「+」および「−」ボタンを作成します。

メニューから「挿入」>「図形描画」を選択。

楕円や四角を選び、「+」や「−」と記入。

作成後、図形をスプレッドシート上に配置。

図形をクリックし、「メニュー」アイコン（3点）>「スクリプトを割り当て」を選択。

「incrementCount」または「decrementCount」と入力。

これで図形をクリックすることでスクリプトが実行され、数値が増減するようになります。

複数行への対応

この方法は、クリックされた図形がある行の「カウント」列を操作するため、1行に1つずつボタンを設置する形になります。スプレッドシート上で複製していけば、複数の商品や項目に対して個別にカウントボタンを設定できます。

初期値や制限を設けたい場合

必要に応じて、スクリプトにロジックを追加することで、カウントの上限や下限を設定できます。

例えば、カウントが0未満にならないようにするには、以下のように修正します。

function incrementCount() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var cell = sheet.getActiveCell();
  var row = cell.getRow();
  var countCell = sheet.getRange(row, 2); // 2列目（B列）
  var current = countCell.getValue();

  if (!isNaN(current)) {
    countCell.setValue(current + 1);
  } else {
    countCell.setValue(1); // 初期値
  }
}

function decrementCount() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var cell = sheet.getActiveCell();
  var row = cell.getRow();
  var countCell = sheet.getRange(row, 2); // 2列目（B列）
  var current = countCell.getValue();

  if (!isNaN(current) && current > 0) {
    countCell.setValue(current - 1);
  } else {
    countCell.setValue(0); // 0未満にならないように固定
  }
}

複数列への対応やログ記録

さらに応用すれば複数列に対応したり、変更履歴を別シートに記録したりすることも可能です。

例えば、「変更ログ」シートに変更内容を記録するコード例

function incrementCount() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var cell = sheet.getActiveCell();
  var row = cell.getRow();
  var col = cell.getColumn(); // アクティブな列を取得
  var countCell = sheet.getRange(row, col); 
  var current = countCell.getValue();

  if (!isNaN(current)) {
    countCell.setValue(current + 1);
  } else {
    countCell.setValue(1); // 初期値
  }
}

function decrementCount() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var cell = sheet.getActiveCell();
  var row = cell.getRow();
  var col = cell.getColumn(); 
  var countCell = sheet.getRange(row, col); 
  var current = countCell.getValue();

  if (!isNaN(current) && current > 0) {
    countCell.setValue(current - 1);
  } else {
    countCell.setValue(0); // 0未満にならないように固定
  }
}