7
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-10-02

はじめに

スプレッドシートにチェックボックスを配置し、そのアクティブ状態によって指定行を表示/非表示の切り替えをしたいと要望がありました。
GASを使えばいけそうなので、早速試してみたので書いてみます。

完成図

movie.gif

下準備

スプレッドシートを新規作成。
1. A1〜A3に「A」「B」「C」と入力。
2. B1〜B3にチェックボックスを配置。チェックボックスは挿入→チェックボックスで配置できます。
3. C1〜C3に、カンマ区切りの適当な数字を入れます。ここに入れた行数が、チェックした場合の表示する行になります。

s1.png

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

コード全文

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){ // チェックボックス列の値が変更された場合
    checkBoxEvent(sheet);
  }
}

// チェックボックスのチェック状態に合わせて表示・非表示を切り替える
function checkBoxEvent(sheet) {
  var rows = sheet.getRange(1, CHECKBOX_COLUMN, CHECKBOX_COUNT, 1).getValues();
  hiddenFields(sheet);
  for (var i = 0; i < rows.length; i++) {
    if (rows[i][0] === true) {
      var showRows = sheet.getRange(i + 1, CHECKBOX_COLUMN + 1).getValue().split(',');
      for (var j = 0; j < showRows.length; j++) {
          sheet.showRows(showRows[j]); // チェックボックスの1個右のセルの値に記載されている行数を表示する
      }
    }
  }
}

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

動作確認

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

  if (activeCell.getColumn() == CHECKBOX_COLUMN){ // チェックボックス列の値が変更された場合

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

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

スプレッドシートの10〜30行目が非表示になり、チェックONになっているセル右隣で指定している行のみ表示されれば成功です。

トリガーの設定

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

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

s2.png

movie.gif

追記(2019/10/21)

function changeEvent() {

を、

function onEdit() {

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

7
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?