【Google Apps Script】改良版：チェックボックスでスプレッドシートの特定行の表示／非表示を切り替える

はじめに

スプレッドシートにチェックボックスを配置し、そのアクティブ状態によって指定行を表示／非表示の切り替えをしたいと要望がありました。
先日ほぼ同じ記事を投稿しましたが、汎用性ある仕様に少し変えたので再投稿。

完成図

下準備

スプレッドシートを新規作成。

1. A1〜A3に「野菜」「肉」「魚」と入力。
2. B1〜B3にチェックボックスを配置。チェックボックスは挿入→チェックボックスで配置できます。
3. A6〜A30にカテゴリ、B6〜B30に食材名を入れます。数が多くて面倒なら、各カテゴリ2〜3個でOKです。

ツール→スクリプトエディタを選択し、以下コードを貼り付けます。

コード全文

var CHECKBOX_COLUMN = 2; // チェックボックスの列
var CHECKBOX_COUNT = 3; // チェックボックスの数
var HIDDEN_FIELD_START = 6; // 何行目から消すのか
var HIDDEN_FIELD_END = 30; // 何行目まで消すのか

// スプレッドシートの値が変更された時に発火
function changeEvent() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var activeCell = sheet.getActiveCell();
  if (activeCell.getColumn() == CHECKBOX_COLUMN && activeCell.getRow() <= CHECKBOX_COUNT){ // チェックボックス範囲の値が変更された場合
    checkBoxEvent(sheet);
  }
}

// チェックボックスのチェック状態に合わせて表示・非表示を切り替える
function checkBoxEvent(sheet) {
  var rows = sheet.getRange(1, CHECKBOX_COLUMN, CHECKBOX_COUNT, 1).getValues();
  hiddenFields(sheet);
  var dataRows = sheet.getRange(HIDDEN_FIELD_START, 1, HIDDEN_FIELD_END - HIDDEN_FIELD_START + 1, 1).getValues();
  for (var i = 0; i < rows.length; i++) {
    if (rows[i][0] === true) { // チェックが付いている場合、
      var showRow = sheet.getRange(i + 1, CHECKBOX_COLUMN - 1).getValue();
      for (var j = 0; j < dataRows.length; j++) {
        var targetRow = j + HIDDEN_FIELD_START;
        if (dataRows[j] == showRow) {
          sheet.showRows(targetRow); // チェックボックスの1個左のセルの値と一致する行数を表示する
        }
      }
    }
  }
}

// 非表示行エリアを全非表示にする
function hiddenFields(sheet) {
  sheet.hideRows(HIDDEN_FIELD_START, HIDDEN_FIELD_END - HIDDEN_FIELD_START + 1);
}

動作確認

スプレッドシートのカーソルをB列のどこかに置きます。

  if (activeCell.getColumn() == CHECKBOX_COLUMN && activeCell.getRow() <= CHECKBOX_COUNT){ // チェックボックス範囲の値が変更された場合

ソースコードで見るとこの部分、B1〜B3の値変更イベントにのみ発火するように設定しているためです。

スクリプトエディタで実行→関数の実行→changeEventを選択。
実行許可のウィンドウが出るので、過去記事のスクショを参考にしてください。

スプレッドシートの１０〜３０行目が非表示になり、チェックONになっている左隣のカテゴリのみ表示されれば成功です。

トリガーの設定

チェックボックス変更した場合、自動的に行の表示／非表示されるように、スプレッドシートの変更イベントをトリガーとしてchangeEvent関数が自動実行されるよう設定します。

スクリプトエディタ「編集→現在のプロジェクトのトリガー」もしくは時計アイコンからトリガー設定画面に飛びます。
右下の「トリガーを追加」から、下記の通り設定します。

追記(2019/10/21)

function changeEvent() {

を、

function onEdit() {

にするだけで、トリガーを設定しなくとも勝手に動きます。