【GAS】エディタ上では実行できる挙動が、UI上では異なる挙動になってしまう

Question

実現したいこと

土日の行に灰色をつけるスクリプトを作成したものを、スプレッドシート上で実行できるようにしたい。
↓エディタから実行した状態

発生している問題・分からないこと

Google Apps scriptのエディタ上では問題なく動くのですが、スプレッドシートの以下のUIでボタンを押すとすべてが灰色になってしまいます。

↓UIから実行した状態

エラーメッセージ

実行はできているのでエラーメッセージはありません。

該当のソースコード

function ColorRow() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  spreadsheet.getRange("A10:ZZ100").setBackground(null);
  
  var keyword = "土"; // 色を変えたいキーワードをここに入力する
  
  var range = spreadsheet.getDataRange();
  var numRows = range.getNumRows();
  var values = range.getValues();
  
  for (var i = 0; i < numRows; i++) {
    var row = values[i];
    for (var j = 0; j < row.length; j++) {
      if (row[j].toString().indexOf(keyword) !== -1) {
        spreadsheet.getRange(i + 1, 1, 1, spreadsheet.getMaxColumns()).setBackground("lightgray"); // 色を指定する
        break;
      }
    }
  }

  var keyword = "日"; // 色を変えたいキーワードをここに入力する
  
  for (var i = 0; i < numRows; i++) {
    var row = values[i];
    for (var j = 0; j < row.length; j++) {
      if (row[j].toString().indexOf(keyword) !== -1) {
        spreadsheet.getRange(i + 1, 1, 1, spreadsheet.getMaxColumns()).setBackground("lightgray"); // 色を指定する
        break;
      }
    }
  }
}

function onOpen() {
  var ui = SpreadsheetApp.getUi()
  
  //メニュー名を決定
  var menu = ui.createMenu("シート更新");
  
  //メニューに実行ボタン名と関数を割り当て
  menu.addItem("新シート作成","Copysheet");
  menu.addItem("7日間削除", "DeleteRow");
  menu.addItem("空いた分罫線追加", "PlusBoder");
  menu.addItem("土日色付け（ボタン調整中）", "ColorRow");
  menu.addItem("祝日色付け（条件付き書式調整中）", "関数名その3"); 
  menu.addItem("1日の上に太線（やり方調べ中）", "関数名その3");
  menu.addItem("まとめて一気に実行（やり方調べ中）", "関数名その3");
  
  
  //スプレッドシートに反映
  menu.addToUi();
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

エディタで実行できることはUI上でもできることが前提の記事が多く、解決方法が見つけられなかった。

補足

特になし

Comments

[YellowGreen]

同じ名前の関数が複数ありませんか？

[minnamiina]

コメントありがとうございます！確認しましたが、同じ関数名はありませんでした。

Answer 1

同じ名前の他の関数があるか、メニューから試行中の別な関数を起動しているか
どちらかでしょうか

例えば、関数名を変えてみた次のコードをお試しください

function colorWeekend() {
  // データ範囲を指定
  const dataRange = 'A10:ZZ100'
  // 曜日の列を指定（C列: 3）
  const weekColumn = 3;
  // 色を変える曜日の文字を指定
  const keyword = '土日';
  // 背景色を指定
  const bgColor = 'lightgray';

  const sheet = SpreadsheetApp.getActiveSheet();

  // 曜日の列のセルが指定の文字を含む行のセル範囲名（ '10:10' などの行全体の指定 ）を取得
  const rangeNames = sheet.getDataRange()
    .getValues()
    .map((v, i) => v[weekColumn -1] && keyword.includes(v[weekColumn - 1]) ? i + 1 : 0)
    .filter(v => v > 0)
    .map(v => v + ':' + v);

  // 着色する
  sheet.getRange(dataRange).setBackground(null);
  sheet.getRangeList(rangeNames).setBackground(bgColor);
}

function onOpen() {
  var ui = SpreadsheetApp.getUi()

  //メニュー名を決定
  var menu = ui.createMenu("シート更新");

  //メニューに実行ボタン名と関数を割り当て
  menu.addItem("新シート作成", "Copysheet");
  menu.addItem("7日間削除", "DeleteRow");
  menu.addItem("空いた分罫線追加", "PlusBoder");
  // ★ ここも関数名を変えます ★
  menu.addItem("土日色付け（ボタン調整中）", "colorWeekend");
  menu.addItem("祝日色付け（条件付き書式調整中）", "関数名その3");
  menu.addItem("1日の上に太線（やり方調べ中）", "関数名その3");
  menu.addItem("まとめて一気に実行（やり方調べ中）", "関数名その3");


  //スプレッドシートに反映
  menu.addToUi();
}

なお、
参考までに土日の行の背景色と祝日のセルの背景色を一括で着色することも可能です…。
この場合は、祝日の判定をGoogleカレンダーで行うので、スプレッドシートを少し修正する必要があります

具体的には、B列（日）の値を1…31などの数値ではなく
2024/09/01などの日付として記入した上で、表示形式で1…31の表示にしておき
A列の月とC列の曜は計算式で表示するようにします。
スクリプトではB列の日付データの値から曜日と祝日を判定して着色するセル範囲を求めます

コードの参考例です

// 土日の行と祝日のセルの背景色を指定の色にする
// ------------------------------
//   祝日の判定と曜日の判定のためB列は2024/09/01など日付として入力する
//   月と曜の列は値を直接入力するのではなく、B列の日付から計算式で求める
//     B10セルの値: 2024/09/01
//         B列のセルは、表示形式: 「数字」→ 「カスタム数値形式」に d を記入すると日のみの表示となる
//     A10セルの計算式: =MONTH(B10)
//     C10セルの計算式: =TEXT(B10,"ddd")
//     10行目以下の行は、オートフィルで10行目からコピペ
function colorDate() {
  // データ範囲
  const dataRange = 'A10:ZZ100';
  // 日付の列
  const dateColumn = 2;
  const dateColumnName = 'B';
  // 背景色
  const weekendColor = 'lightgray';
  const holidayColor = 'aquamarine';

  // 記入されている日付の範囲内の祝日リストを取得する
  const sheet = SpreadsheetApp.getActiveSheet();
  const values = sheet.getDataRange().getValues();
  const firstDate = values.find(v => !isNaN(new Date(v[dateColumn - 1]).getDate()))[dateColumn -1];
  const lastDate = values.findLast(v => !isNaN(new Date(v[dateColumn - 1]).getDate()))[dateColumn - 1];
  const holidays = CalendarApp
    .getCalendarById('ja.japanese#[e-mail]')
    .getEvents(firstDate, lastDate)
    .filter(v => v.getDescription() === '祝日')
    .map(v => v.getStartTime().getTime());

  // 土日と祝日の範囲名を取得する
  const weekendsRangeNames = values
    .map((v, i) => new Date(v[dateColumn -1]).getDay() % 6 == 0 ? i + 1 : 0)
    .filter(v => v > 0)
    .map(v => v + ':' + v);
  const holidaysRangeNames = values
    .map((v, i) => holidays.includes(new Date(v[dateColumn - 1]).getTime()) ? i + 1 : 0)
    .filter(v => v > 0)
    .map(v => dateColumnName + v);

  // 背景色を着色（土日 → 祝日の順なので祝日が土日を上書きして着色）
  sheet.getRange(dataRange).setBackground(null);
  sheet.getRangeList(weekendsRangeNames).setBackground(weekendColor);
  sheet.getRangeList(holidaysRangeNames).setBackground(holidayColor);
}

B列を日付データ、A列とC列を計算式にしても画面表示は同じようにできます

---

三つとも一緒に実行する例です
先のと手法を変えてみました参考になれば…

// 土日の行と祝日のセルの背景色を指定の色にする
// 毎月の1日の行の上に枠線（太罫線）を引く
// ------------------------------
//   祝日の判定と曜日の判定のためB列は2024/09/01など日付として入力する
//   月と曜の列は値を直接入力するのではなく、B列の日付から計算式で求める
//     B10セルの値: 2024/09/01
//        B列のセルは、表示形式: 「数字」→ 「カスタム数値形式」に d を記入すると
//        日のみの表示となる
//     A10セルの計算式: =MONTH(B10)
//     C10セルの計算式: =TEXT(B10,"ddd")
//     10行目以下の行は、オートフィルで10行目からコピペ
function execAllFunction() {
  // データ範囲
  const dataRange = 'A10:ZZ100';
  // 日付の列
  const dateColumn = 2;
  const dateColumnName = 'B';
  // 背景色
  const weekendColor = 'lightgray';
  const holidayColor = 'aquamarine';
  // 枠線の初期設定
  const borderPosition = new Map([
    ['top', true],
    ['left', null],
    ['bottom', null],
    ['right', null],
    ['vertical', null],
    ['horizontal', null]
  ]).values();
  const borderColor = 'black';
  const borderStyle = SpreadsheetApp.BorderStyle.SOLID_THICK;

  // 記入されている日付の範囲内の祝日リストを取得する
  const sheet = SpreadsheetApp.getActiveSheet();
  const values = sheet.getRange(1, dateColumn, sheet.getLastRow(), 1)
    .getValues().flat();
  const firstDate = values.find(v => !isNaN(new Date(v).getDate()));
  const lastDate = values.findLast(v => !isNaN(new Date(v).getDate()));
  const holidays = CalendarApp
    .getCalendarById('ja.japanese#[e-mail]')
    .getEvents(firstDate, lastDate)
    .filter(v => v.getDescription() === '祝日')
    .map(v => v.getStartTime().getTime());

  // 土日の行、祝日のセル、1日の行のセル範囲名を配列に蓄積
  const weekendsRangeNames = [];
  const holidaysRangeNames = [];
  const firstDayRangeNames = [];
  values.forEach((v, i) => {
    const date = new Date(v);
    // 土日と1日の行と祝日のセルの範囲名を取得する
    if (date.getDay() % 6 === 0) {
      weekendsRangeNames.push((i + 1) + ':' + (i + 1));
    }
    if (holidays.includes(date.getTime())) {
      holidaysRangeNames.push(dateColumnName + (i + 1));
    }
    if (date.getDate() === 1) {
      firstDayRangeNames.push((i + 1) + ':' + (i + 1));
    }
  });

  // 背景色を着色（土日 → 祝日の順なので祝日が土日を上書きして着色）
  sheet.getRange(dataRange).setBackground(null);
  sheet.getRangeList(weekendsRangeNames).setBackground(weekendColor);
  sheet.getRangeList(holidaysRangeNames).setBackground(holidayColor);

  // 枠線を引く
  sheet.getRangeList(firstDayRangeNames)
    .setBorder(...borderPosition, borderColor, borderStyle);
}

Comments

[minnamiina]

具体的なコード、そして実際に動作確認までしていただきありがとうございます！
こちらで実装してみます！