Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?
@rf_p

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

More than 1 year has passed since last update.

はじめに

スプレッドシートにチェックボックスを配置し、そのアクティブ状態によって指定行を表示/非表示の切り替えをしたいと要望がありました。
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() {

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

6
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
rf_p
フェレットを愛してやまない、バックエンドやや多めのWeb系エンジニアです
brides-a-tm
『一組でも多くのカップルに “理想の結婚式”のきっかけを』の使命の元、花嫁の理想(ユメ)を叶えるサービス「ハナユメ」「HIMARI」「ハナユメウエディングデスク」を運営しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?