📘 Google Apps Scriptでスプレッドシートを操作するカスタムUIボタン集（HTML＋GAS）



Google Apps Script（GAS）を使って、スプレッドシート上に操作パネルを表示し、ボタンで様々な処理を実行できるカスタムUIを作成しました。
以下のコードを使えば、初心者でも直感的にスプレッドシート操作ができます。

---

## ✅ 1. スプレッドシート側のスクリプト（`コード.gs`）

```javascript
function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu("📌 GASメニュー")
    .addItem("操作パネルを開く", "showHtmlDialog")
    .addToUi();
}

function showHtmlDialog() {
  const html = HtmlService.createHtmlOutputFromFile("customUI")
    .setWidth(400)
    .setHeight(600);
  SpreadsheetApp.getUi().showSidebar(html);
}

// --- 初級操作 ---
function writeHello() {
  SpreadsheetApp.getActiveSheet().getRange("A1").setValue("こんにちは、GAS！");
}

function writeMultiple() {
  const sheet = SpreadsheetApp.getActiveSheet();
  for (let i = 1; i <= 5; i++) {
    sheet.getRange(i, 1).setValue(`行 ${i} です`);
  }
}

function logMessage() {
  Logger.log("GAS練習中です！");
}

function renameSheet() {
  SpreadsheetApp.getActiveSpreadsheet().renameActiveSheet("練習シート");
}

function renameSpreadsheetTitle() {
  SpreadsheetApp.getActiveSpreadsheet().rename("練習テスト");
}

// --- メール ---
function sendMail() {
  MailApp.sendEmail("youremail@example.com", "GASからのメール", "これは自動送信です！");
}

function mailFromSheet() {
  const sheet = SpreadsheetApp.getActiveSheet();
  const name = sheet.getRange("A1").getValue();
  MailApp.sendEmail("youremail@example.com", "通知", `A1セルの値は：${name}`);
}

// --- スプレッドシート操作 ---
function clearSheet() {
  SpreadsheetApp.getActiveSheet().clear();
}

function getSheetSize() {
  const sheet = SpreadsheetApp.getActiveSheet();
  Logger.log(`行数: ${sheet.getLastRow()} 列数: ${sheet.getLastColumn()}`);
}

function duplicateSheet() {
  const sheet = SpreadsheetApp.getActiveSheet();
  sheet.copyTo(SpreadsheetApp.getActiveSpreadsheet()).setName("コピー_" + new Date().getTime());
}

function writeToday() {
  SpreadsheetApp.getActiveSheet().getRange("B1").setValue(new Date());
}

// --- 日付処理 ---
function futureDate() {
  const date = new Date();
  date.setDate(date.getDate() + 7);
  Logger.log(date);
}

// --- トリガー設定 ---
function createTrigger() {
  ScriptApp.newTrigger("writeHello")
    .timeBased()
    .everyDays(1)
    .atHour(8)
    .create();
}

// --- フォーム連携 ---
function createForm() {
  const form = FormApp.create("アンケート");
  form.addTextItem().setTitle("お名前");
  form.addMultipleChoiceItem().setTitle("性別").setChoiceValues(["男性", "女性", "その他"]);
}

// --- 外部リクエスト ---
function getRequest() {
  const response = UrlFetchApp.fetch("https://www.google.com");
  Logger.log(response.getContentText().slice(0, 100));
}

// --- Googleドライブ連携 ---
function createFolder() {
  DriveApp.createFolder("GASで作成されたフォルダ");
}

function listFiles() {
  const files = DriveApp.getFiles();
  while (files.hasNext()) {
    Logger.log(files.next().getName());
  }
}

// --- 応用操作 ---
function swapCells() {
  const sheet = SpreadsheetApp.getActiveSheet();
  const a = sheet.getRange("A1").getValue();
  const b = sheet.getRange("B1").getValue();
  sheet.getRange("A1").setValue(b);
  sheet.getRange("B1").setValue(a);
}

function removeDuplicates() {
  const sheet = SpreadsheetApp.getActiveSheet();
  const data = sheet.getRange("A1:A" + sheet.getLastRow()).getValues();
  const unique = [...new Set(data.flat())];
  sheet.getRange(1, 1, sheet.getLastRow()).clear();
  unique.forEach((v, i) => sheet.getRange(i + 1, 1).setValue(v));
}

function highlightIncomplete() {
  const sheet = SpreadsheetApp.getActiveSheet();
  const rows = sheet.getLastRow();
  for (let i = 1; i <= rows; i++) {
    const status = sheet.getRange(i, 2).getValue();
    if (status === "未完了") {
      sheet.getRange(i, 2).setBackground("red");
    }
  }
}

function insertCheckboxes() {
  const sheet = SpreadsheetApp.getActiveSheet();
  sheet.getRange("C1:C10").insertCheckboxes();
}
```

---

## ✅ 2. HTMLファイル（`customUI.html`）

```html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body { font-family: sans-serif; padding: 20px; }
      h3 { margin-top: 0; }
      button { margin: 5px 0; width: 100%; padding: 10px; font-size: 14px; }
    </style>
  </head>
  <body>
    <h3>GAS 操作メニュー</h3>

    <!-- 初級操作 -->
    <button onclick="google.script.run.writeHello()">A1に「こんにちは」</button>
    <button onclick="google.script.run.writeMultiple()">A1〜A5に行番号を入力</button>
    <button onclick="google.script.run.logMessage()">ログにメッセージ出力</button>
    <button onclick="google.script.run.renameSheet()">シート名を「練習シート」に変更</button>
    <button onclick="google.script.run.renameSpreadsheetTitle()">スプレッドシート名を「練習テスト」に変更</button>

    <!-- メール -->
    <button onclick="google.script.run.sendMail()">自分宛にメールを送信</button>
    <button onclick="google.script.run.mailFromSheet()">A1の内容をメール本文にして送信</button>

    <!-- スプレッドシート操作 -->
    <button onclick="google.script.run.clearSheet()">シート全体をクリア</button>
    <button onclick="google.script.run.getSheetSize()">行数・列数をログに出力</button>
    <button onclick="google.script.run.duplicateSheet()">シートを複製</button>
    <button onclick="google.script.run.writeToday()">B1に今日の日付を入力</button>

    <!-- 日付処理 -->
    <button onclick="google.script.run.futureDate()">1週間後の日付をログ出力</button>

    <!-- トリガー設定 -->
    <button onclick="google.script.run.createTrigger()">毎日8時にwriteHello()実行トリガー</button>

    <!-- フォーム連携 -->
    <button onclick="google.script.run.createForm()">Googleフォームを作成</button>

    <!-- 外部リクエスト -->
    <button onclick="google.script.run.getRequest()">GoogleトップのHTML取得</button>

    <!-- Googleドライブ -->
    <button onclick="google.script.run.createFolder()">新しいフォルダを作成</button>
    <button onclick="google.script.run.listFiles()">ドライブ内ファイル名をログ出力</button>

    <!-- 応用操作 -->
    <button onclick="google.script.run.swapCells()">A1とB1の値を入れ替え</button>
    <button onclick="google.script.run.removeDuplicates()">A列の重複を削除</button>
    <button onclick="google.script.run.highlightIncomplete()">B列「未完了」を赤く塗る</button>
    <button onclick="google.script.run.insertCheckboxes()">C1〜C10にチェックボックス挿入</button>

    <br><br>
    <button onclick="google.script.host.close()">閉じる</button>
  </body>
</html>
```

---

## ✅ 使い方

1. Googleスプレッドシートを開く
2. メニュー「拡張機能 > Apps Script」を選ぶ
3. `コード.gs` に上記のスクリプトを貼る
4. `+ ファイル > HTMLファイル作成` で `customUI.html` を作成し、HTMLコードを貼る
5. スプレッドシートを再読み込みすると、「📌 GASメニュー」が表示される

---

## ✅ おまけ：おすすめの拡張

* アイコンを追加してUIをカラフルに
* 折りたたみパネル（`<details>`）でカテゴリ分類
* フォーム入力やチェックボックス連携

---

ご自由にアレンジ・拡張して活用してください！
スプレッドシート学習や社内ツールのベースにも最適です。質問歓迎！