LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@apptest(App T. Engineer)

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

Posted at

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

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

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）

<!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>）でカテゴリ分類
  • フォーム入力やチェックボックス連携

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

1
1
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
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?