GAS | POがITでラクする仕事術 https://shoelab.jp ノンプログラマーでも簡単！GASと無料ツールで業務効率化を実現 Sat, 21 Jun 2025 03:00:00 +0000 ja hourly 1 https://wordpress.org/?v=6.8.2 https://shoelab.jp/wp-content/uploads/2024/02/cropped-e14debba4b651ab77c82b66fca4377bf-32x32.png GAS | POがITでラクする仕事術 https://shoelab.jp 32 32 [GASでWEBアプリ] doPostでHTML＋Bootstrapフォームからスプレッドシートへ自動書き込み https://shoelab.jp/gas/gas%e3%81%a7web%e3%82%a2%e3%83%97%e3%83%aa-dopost%e3%81%a7html%ef%bc%8bbootstrap%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0%e3%81%8b%e3%82%89%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%83%89%e3%82%b7%e3%83%bc/ Sat, 21 Jun 2025 03:00:00 +0000 https://shoelab.jp/?p=680 こんにちは。イカPOです。GASで作ったWEBアプリからスプレッドシートに書き込む、シンプルな方法を紹介します。オリジナルの入力画面を作ってスプレッドシートに書き込むことができるようになるので、仕事が楽なります。もっとリッチなコードにすれば、スマホ一台で在庫の確認と数の更新ができるようになったり…そんな話の基礎を今回は紹介します。

HTML フォームを作ろう

フォームの画面。Bootstrapを使っているのでそれっぽい画面に
実際の画面。Bootstrapをしたシンプルなフォームの画面です。

まずは form.html をプロジェクトに追加し、下記のようなシンプルな問い合わせフォームを用意します。Bootstrap 5 を読み込んでいるので、ほぼ手を加えなくても見栄え良く整います。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body class="container py-5">
    <h1 class="h4 mb-4">お問い合せ</h1>

    <!-- ★ ここがポイント -->
    <form method="POST" action="<?!= deployURL ?>">
      <div class="mb-3">
        <label for="name" class="form-label">お名前</label>
        <input type="text" id="name" name="name" class="form-control" required>
      </div>

      <div class="mb-3">
        <label for="email" class="form-label">メールアドレス</label>
        <input type="email" id="email" name="email" class="form-control" required>
      </div>

      <div class="mb-4">
        <label for="msg" class="form-label">メッセージ</label>
        <textarea id="msg" name="msg" rows="4" class="form-control" required></textarea>
      </div>

      <button type="submit" class="btn btn-primary">送信</button>
    </form>
  </body>
</html>

ここだけは押さえよう — フォームの核心ポイント

  • <form method="POST" …>
    フォーム送信時に HTTP POST を使う指定です。
    doPost(e) が受け取るのは POST データなので、ここを GET にしてしまうと doGet(e) が呼ばれ、パラメータが URL に丸見えになります（セキュリティ面・文字数制限の両方で不利）。
  • action="<?!= deployURL ?>"
    deployURL はサーバー側（Code.gs のテンプレート）で差し込むウェブアプリの公開 URL。
    ウェブアプリは再デプロイのたびに URL が変わるため、アドレスを直書きするとすぐ動かなくなるのが落とし穴。テンプレートに埋め込んでおけば、コードをいじらずに常に最新の URL へ自動追従できます。
  • input / textarea 各フィールド
    name="name", name="email", name="msg" は キー となり、GAS 側では e.parameter.name / e.parameter.email / e.parameter.msg として受け取れます。
  • required
    ブラウザレベルの簡易バリデーション。空欄で送信ボタンを押すと警告を出してくれるので、スクリプト側のチェックを減らせます。
  • Bootstrap の読み込み
    CDN を 1 行書くだけでフォームが即“それっぽく”整います。GAS の HTMLService は外部 CSS の読み込みも OK なので、今回は最小構成として CDN を採用しています。

doGet でフォームを表示する

まずは Code.gs に次の関数を用意します。これで先ほど作った form.html をブラウザに表示できるようになります。

function doGet(e) {
  // ① テンプレート（form.html）を読み込む
  const template = HtmlService.createTemplateFromFile('form');

  // ② デプロイ URL をテンプレートに渡す
  template.deployURL = ScriptApp.getService().getUrl();

  // ③ テンプレートを評価して HTMLOutput を生成
  const htmlOutput = template.evaluate();

  // ④ スマホ対応＆タイトル設定（お好みで）
  htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
  htmlOutput.setTitle('フォームだよ');

  // ⑤ ブラウザへ返却
  return htmlOutput;
}

template.deployURL の役割

  • 何をしている？
    template.deployURL = ScriptApp.getService().getUrl(); で取得しているのは、ウェブアプリをデプロイしたときに発行される 公開 URL（例：https://script.google.com/macros/s/AKfycb.../exec）。
  • なぜ必要？
    ウェブアプリは再デプロイのたびに URL が変わるため、HTML 側に URL を直書きするとすぐ動かなくなります。
    deployURL をテンプレート変数として渡しておけば、form.html の <form method="POST" action="<?!= deployURL ?>"> がテンプレート評価時に 最新の URL に自動置換 され、フォームは常に正しいエンドポイントへ POST できます。
  • ポイントまとめ
    1. サーバー側（doGet）で URL を取得 → テンプレート変数に格納
    2. クライアント側（form.html）でその変数を展開し action に埋め込む
    3. 再デプロイしてもコード修正ゼロで動き続ける

これでフォームの表示は完成です。続いて doPost を実装し、入力内容をスプレッドシートへ保存しましょう！

HTMLの表示方法については以下の記事でも紹介しています。

【GASの小技】テンプレートHTMLでラクラクWebアプリ化！HtmlService.createTemplateFromFile()の基本と使い方
Google Apps Scriptの HtmlService.createTemplateFromFile() の最小構成からスプレッドシート連携・Bootstrap適用までを徹底解説。テンプレートHTMLを活用してノンプログラマーでもリッチなWebアプリを簡単に作る手順とポイントをまとめました。
shoelab.jp
2025.06.08
【GAS小技】createHtmlOutputFromFile / createTemplateFromFile 徹底活用 ─ CSS/JS分割と共通ヘッダー・フッターで更新爆速化！
Google Apps ScriptでCSSとJavaScriptを別ファイル化し、include関数でヘッダー・フッターをコンポーネント化。Bootstrap併用でも崩れない設定とコピペOKコードで保守性と開発効率を一気に向上！
shoelab.jp
2025.06.14

スクリプトをウェブアプリとしてデプロイする

  1. エディタ右上［デプロイ ▸ 新しいデプロイ］をクリック
  2. 「説明」はメモ程度で OK（例：初回公開）
  3. 種類を選択 ▸ ウェブアプリ
  4. 実行するユーザー：自分
    • 自分の権限でスプレッドシートに書き込むため
  5. アクセス権：全員（匿名可）
    • 社外に公開しない場合は「組織内のみ」でも可
  6. ［デプロイ］→ 表示された 公開 URL をコピー
    • これが ScriptApp.getService().getUrl() で取得できる URL
  7. 完了！　この URL にアクセスすると doGet() のフォームが開きます。

ポイント
再デプロイ（コード更新→バージョンアップ）のたびに URL が変わるため、フォームの action を固定文字列にしないのが鉄則です。

doPost でスプレッドシートに書き込む

フォーム入力後、送信ボタンを押すと、スプレッドシートに書き込まれる

Code.gs に次の関数を追記します。

function doPost(e) {
  // 1 受信パラメータを取得
  const name    = e.parameter.name  || '';
  const email   = e.parameter.email || '';
  const message = e.parameter.msg   || '';

  // 2 シートに追記
  const sheet   = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const nextRow = sheet.getLastRow() + 1;          // 最下行の 1 つ下
  sheet.getRange(nextRow, 1, 1, 3)                 // A〜C 列 1 行
       .setValues([[name, email, message]]);

  // 3 応答を返す
  return HtmlService.createHtmlOutput('保存しました！');
}

① 受信パラメータを取得

  • e.parameter.<name属性> でフォームの値を取り出します。
  • || '' は「値が空または undefined のときは空文字を入れる」保険です。

② シートに追記

  1. シート取得 const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  2. 書き込み行決定 const nextRow = sheet.getLastRow() + 1;
  3. 範囲指定 & 書き込み sheet .getRange(nextRow, 1, 1, 3) // A〜C列の 1 行 .setValues([[name, email, message]]); // まとめて書き込む [[name, email, message]] という 2 重配列 を渡すことで、
    name → A 列, email → B 列, message → C 列 が一発で書き込まれます。

③ 応答を返す

成功時に表示される画面。保存しました！とブラウザに表示されていればOKです。
  • HtmlService.createHtmlOutput('保存しました！') を返して、送信後のブラウザに完了メッセージを表示します。
  • 複数行の HTML を返してサンクスページを作っても OK です。

このページも参考にしてください。

【GASの小技】スプレッドシートをWEBページ化！HtmlService.createHtmlOutput()の基本と使い方
スプレッドシートを3分でWEBページ化！GASのHtmlService.createHtmlOutput()を使い、最小コードと表表示サンプルで初心者にも解説。
shoelab.jp
2025.06.01

doGet と doPost の違いを理解しよう

  • doGet(e)
    ブラウザが HTTP GET でアクセスしたときに呼ばれ、パラメータは URL の末尾に付く。主に 表示専用 の処理に使います。
  • doPost(e)
    フォームが HTTP POST で送信したときに呼ばれ、パラメータはリクエストボディに入る。データの 追加・更新・削除 などサーバー処理に最適です。

フォーム入力 → 保存 という典型的な “書き込み処理” では GET で表示／POST で保存 のペアが王道パターンです。

まとめ

これで HTML フォーム → doPost → スプレッドシート保存 という最小構成が完成しました。流れをもう一度振り返ると──

  1. フォームを用意
    method="POST" と action="<?!= deployURL ?>" を忘れずに。
  2. doGet でフォームを表示
    ScriptApp.getService().getUrl() で最新の公開 URL をテンプレートに渡す。
  3. ウェブアプリとしてデプロイ
    実行ユーザー：自分／アクセス権：用途に合わせて設定。
  4. doPost で受信 & 追記
    e.parameter で値を取り出し、sheet.setValues() で A〜C 列に一括書き込み。

⚠️ 公開範囲に注意： フォームをインターネット公開すると、URL を知っている誰でも書き込み可能になるので、公開範囲には注意してください。

この基礎が動けば、スマホで在庫管理・社内アンケートなど応用は無限大。まずは試しにフォームを送信し、スプレッドシートにデータが増える様子を確認してみてください！

]]> 【GAS小技】createHtmlOutputFromFile / createTemplateFromFile 徹底活用 ─ CSS/JS分割と共通ヘッダー・フッターで更新爆速化！ https://shoelab.jp/gas/%e3%80%90gas%e5%b0%8f%e6%8a%80%e3%80%91createhtmloutputfromfile-createtemplatefromfile-%e5%be%b9%e5%ba%95%e6%b4%bb%e7%94%a8-%e2%94%80-css-js%e5%88%86%e5%89%b2%e3%81%a8%e5%85%b1%e9%80%9a%e3%83%98/ Sat, 14 Jun 2025 03:00:00 +0000 https://shoelab.jp/?p=650 こんにちは、イカPOです。
今回は Google Apps Script（GAS）で Web アプリを作るときに、STEP1｜ノンプログラマーでもできる！CSSとJSを別ファイルに分ける を紹介します。ソースを分けておくとコードの見通しがグッと良くなり、あとからデザインやロジックを修正するときも超ラクちん。
さらに、この仕組みを応用すれば ヘッダーやフッターなどの共通パーツをコンポーネント化 できるので、複数ページに散らばる同じ要素を一括で更新できて作業効率が爆上がりします。
覚えておいて損はありません！　GAS で Web アプリ／Web サイトを作るときは、ぜひ今回のテクニックを活用してみてくださいね 🦑

CSS と JavaScript を“別ファイル化”する方法

ソースを分けて管理してみよう。

① style.html と script.html をちゃちゃっと作成

style.htmlとscript.htmlを作成

CSSとJavaScriptだけを別のファイルに記述します。
今回はCSS用のstyle.htmlとJS用のscript.htmlの2つを作成します。（※ 原文の “funtion.html” という表記は誤植なので修正しています）
cssは タグ、jsは タグでしっかり囲ってください。
特別な記法はありません。最終的に 1 つの HTML ファイルに CSS と JS をインラインで書き込んだのと同じ形でブラウザに渡るイメージで記述すればOKです。

style.html

<style>
  body { padding: 1rem; }
  /* ───────────  テーブル全体  ─────────── */
  #itemTable {
    --bs-table-striped-bg: #f6faff;   /* 奇数行色 */
    --bs-table-hover-bg:   #edf4ff;   /* ホバー色 */
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 .125rem .75rem rgba(0,0,0,.05);
  }
  /* ───────────  ヘッダー  ─────────── */
  #itemTable thead th {
    background: #0d6efd;
    color: #fff;
    font-weight: 600;
    position: sticky; top: 0; z-index: 2;
  }
  /* ───────────  セルの配置調整  ─────────── */
  #itemTable tbody td:nth-child(1){text-align:center;}
  #itemTable tbody td:nth-child(4){text-align:right;}
  /* ───────────  カテゴリーをバッジ風  ─────────── */
  #itemTable tbody td:nth-child(3){
    font-weight: 500; padding:.35rem .75rem; border-radius:9999px;
    background:#e8f1ff; color:#0d6efd;
  }
</style>

script.html

<script>
  // デモ用：ダミーデータで行を追加
  document.getElementById('addRowBtn').addEventListener('click', () => {
    const tbody = document.querySelector('#itemTable tbody');
    const newRow = tbody.insertRow();
    const idCell = newRow.insertCell();
    const nameCell = newRow.insertCell();
    const categoryCell = newRow.insertCell();
    const stockCell = newRow.insertCell();

    const nextId = 1000 + tbody.rows.length;
    idCell.textContent = nextId;
    nameCell.textContent = 'デモ用品';
    categoryCell.textContent = 'テスト';
    stockCell.textContent = Math.floor(Math.random() * 10) + 1;
  });
</script>

コード解説

  • <style> / <script> タグを使う点は通常の HTML と同じ。
  • GAS ではファイル拡張子が .html であればテンプレートとして読み込めるため、CSS も JS も “HTMLラッパー” に包むのがポイントです。

② コピペOK！include(filename) 関数を用意

今度はコード.gsにinclude関数を作成します。includeは関数の名前なので何でもいいです。

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

この関数の役割は極めてシンプルです。
指定されたファイルの中身を取得し、HTML として返します。これだけです。
ここで返される HTML はエスケープされずにそのままテンプレートへ差し込まれるため、<style> や <script> に限らず、共通パーツの <header> なども自在に読み込めます。

コード.gs全文

function doGet(e) {
  const template = HtmlService.createTemplateFromFile('table');
  const htmlOutput = template.evaluate();
  htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
  htmlOutput.setTitle('WEBページだよ');
  return htmlOutput;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

コード解説

  • HtmlService.createTemplateFromFile('table') で table.html をテンプレートとして読み込みます。
  • include() は GAS テンプレートの中からだけ呼び出せるヘルパー。
  • 返り値は文字列なので、<?!= … ?> タグで “エスケープなし” で展開します。（<?= … ?> との違いに注意！）

doget内でtable.htmlを読み込んでます。htmlの表示方法は別の記事を参考にしてください。

【GASの小技】テンプレートHTMLでラクラクWebアプリ化！HtmlService.createTemplateFromFile()の基本と使い方
Google Apps Scriptの HtmlService.createTemplateFromFile() の最小構成からスプレッドシート連携・Bootstrap適用までを徹底解説。テンプレートHTMLを活用してノンプログラマーでもリッチなWebアプリを簡単に作る手順とポイントをまとめました。
shoelab.jp
2025.06.08

③ include() で CSS／JS をページに注入

include関数を呼び出し、ファイル名を指定しましょう。
今回スタイルとJSを適応させたい、ファイルはtable.htmlなので、table.htmlに以下のコードを追加します。

<?!= include('style') ?>
<?!= include('script') ?>

解説

  • <?!= … ?> は テンプレート式の“非エスケープ出力”。style.html / script.html の中身をそのまま挿入します。
  • ファイル名は拡張子なしで OK。include('style') と書けば style.html が対象になります。

table.html コード全文

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap 5 CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <title>WEBアプリだよ</title>

  <?!= include('style') ?> <!-- GASのテンプレートでCSSを読み込み -->
</head>
<body>
  <h1 class="h4 mb-3">WEBアプリだよ</h1>
  <p class="mb-4">以下のように &lt;table&gt; タグで作成できます。</p>

  <div class="table-responsive">
    <table id="itemTable" class="table table-striped table-hover align-middle">
      <thead class="table-primary">
        <tr><th>商品ID</th><th>商品名</th><th>カテゴリー</th><th>在庫数</th></tr>
      </thead>
      <tbody>
        <tr>
          <td>1001</td>
          <td>シャンプー</td>
          <td>風呂</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1002</td>
          <td>リンス</td>
          <td>風呂</td>
          <td>1</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="d-flex gap-2 mt-4">
    <button id="addRowBtn" class="btn btn-primary btn-sm">行を追加</button>
  </div>

  <?!= include('script') ?> <!-- GASのテンプレートでJSを読み込み -->
</body>
</html>

ポイント

  • テーブルに Bootstrap 5 のクラスを当てつつ、細かいデザインを style.html で上書きしています。
  • 行追加ボタンは script.html のハンドラで動的に行を増やします。
完成イメージ図
完成した画面です。CSSでリッチな見た目を作りつつ、JSで簡単なアクションを追加しています。

STEP2｜共通ヘッダー＆フッターを部品化して更新ラクラク

複数のページで使いまわす、ヘッダーとフッター要素をコンポーネント化することで、編集が楽になります。

① header.html と footer.html を作成

header.html

<!-- header.html  -->
<header class="mb-4">
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
      <!-- サイトタイトル／ロゴ -->
      <a class="navbar-brand fw-bold" href="<?= deployURL ?>">イカPOアプリ</a>

      <!-- スマホ用ハンバーガーボタン -->
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- メニュー -->
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto gap-lg-2">
          <li class="nav-item">
            <a class="nav-link" href="<?= deployURL ?>">ホーム</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="<?= deployURL ?>?page=list">一覧</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="<?= deployURL ?>?page=about">このアプリについて</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

footer.html

<!-- footer.html -->
<footer class="bg-light text-center py-4 mt-auto shadow-sm">
  <div class="container small text-muted">
    <div class="mb-2">
      <a href="<?= deployURL ?>?page=privacy" class="link-secondary me-3">プライバシーポリシー</a>
      <a href="<?= deployURL ?>?page=contact"  class="link-secondary">お問い合わせ</a>
    </div>
    <div>
      &copy; <script>document.write(new Date().getFullYear())</script> イカPO All&nbsp;Rights&nbsp;Reserved.
    </div>
  </div>
</footer>

header.htmlとfooter.htmlを用意します。

② include() でヘッダー／フッターを読み込み

あとはCSSとjsと同じく

<?!= include('header') ?>
<?!= include('footer') ?>

追加したいところにこのコードを書きましょう。

table.html コード全文 ヘッダーとフッター追加版

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>WEBアプリだよ</title>
  <?!= include('style') ?>
</head>
<body>
  <?!= include('header') ?>

  <h1 class="h4 mb-3">WEBアプリだよ</h1>
  <p class="mb-4">以下のように &lt;table&gt; タグで作成できます。</p>

  <div class="table-responsive">
    <table id="itemTable" class="table table-striped table-hover align-middle">
      <thead class="table-primary">
        <tr><th>商品ID</th><th>商品名</th><th>カテゴリー</th><th>在庫数</th></tr>
      </thead>
      <tbody>
        <tr>
          <td>1001</td>
          <td>シャンプー</td>
          <td>風呂</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1002</td>
          <td>リンス</td>
          <td>風呂</td>
          <td>1</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="d-flex gap-2 mt-4">
    <button id="addRowBtn" class="btn btn-primary btn-sm">行を追加</button>
  </div>
  <?!= include('footer') ?>
  <?!= include('script') ?>
</body>
</html>

まとめ｜これでメンテナンスが爆速に！

ヘルパー関数を作成することで、別ファイルのCSSとJSを呼び出すことができます。
同じ関数を使ってヘッダーやフッターをコンポーネント化して別のページでも使いまわすこともできます。
return HtmlService.createHtmlOutputFromFile(filename).getContent(); の仕組みを使うだけ。便利なテクなので、開発のお供に是非。

それでは、また

]]> 【GASの小技】テンプレートHTMLでラクラクWebアプリ化！HtmlService.createTemplateFromFile()の基本と使い方 https://shoelab.jp/gas/gas%e3%81%ae%e5%b0%8f%e6%8a%80%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88html%e3%81%a7%e3%83%a9%e3%82%af%e3%83%a9%e3%82%afweb%e3%82%a2%e3%83%97%e3%83%aa%e5%8c%96/ Sun, 08 Jun 2025 03:00:00 +0000 https://shoelab.jp/?p=642

こんにちは、イカPOです。
今回は HtmlService.createTemplateFromFile を使うと、テンプレートファイルを使用して HTML をブラウザに表示できます。

テンプレートファイルを作成するとコードの管理が楽になります。GAS で HTML を表示させるなら、前回紹介した HtmlService.createHtmlOutput() よりもおススメです。

HtmlService.createTemplateFromFile（）の最小構成

ここでは「とにかく 1 画面出すだけ」の最短サンプルを示します。テンプレ分離のイメージをつかんでください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <base target="_top">
</head>
<body>
  <h1>WEBアプリだよ</h1>
</body>
</html>
  • <base target="_top"> … 外部リンクを「親タブ」で開くためのおまじない。必須ではありませんが、Apps Script では入れておくのが通例です。

コード.gs

function doGet(e) {
  const template = HtmlService.createTemplateFromFile('index');
  const htmlOutput = template.evaluate();
  return htmlOutput;
}
処理内容
createTemplateFromFile('index')index.html を読み込みテンプレートオブジェクトを生成
evaluate()テンプレートを HtmlOutput に変換
return htmlOutputブラウザへ返却（doGet / doPost は必ず HtmlOutput を返す）

手順①：テンプレート HTML を作成する

HTML ファイル（ここでは index.html）をプロジェクト内に用意します。

メニューの＋ボタンを押し、HTMLファイルを作成

その際に

<base target="_top">

を入れておくと、テンプレート内リンクが iframe ではなく親ウィンドウで開くようになります。“GAS で HTML を表示するときのお作法” と覚えておくとラクです。

手順②：doGet / doPost でテンプレートを読み込む

doGet(e) 内で、先ほど作ったテンプレートファイルを読み込みます。

const template = HtmlService.createTemplateFromFile('index');

HtmlService.createTemplateFromFile('ファイル名') で使用できます。今回作成したファイル名は「index」なので ('index') と書きます。

const htmlOutput = template.evaluate();

読み込んだ HTML ファイルを HtmlOutput オブジェクト に変換します。doGet() / doPost() では 文字列 ではなく このオブジェクトを return する のが約束事です。

return htmlOutput;

変換したオブジェクトを表示します。

まとめ
“ファイルを読み込む → テンプレートを展開する → return でブラウザに返す”
これが createTemplateFromFile の基本フローです。

生出力タグで GAS 生成のテーブル HTML をそのまま描画する

<?!= … ?> をテンプレート内で使用すると、GAS で作った HTML 要素をそのまま出力できます。以下に実例を載せます。

使用例

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <base target="_top">

  <title>WEBアプリだよ</title>

  <style>
    body { padding: 1rem; }
  </style>
</head>
<body>

  <h1>WEBアプリだよ</h1>
  <p>以下のように &lt;table&gt; タグで作成できます。</p>

  <div>
    <?!= itemTable ?>
  </div>

</body>
</html>
  • <?!= itemTable ?> … エスケープせずに生 HTML をそのまま挿入します。

コード.gs

function doGet(e) {
  const template = HtmlService.createTemplateFromFile('table');
  template.itemTable = getItem();        // ← getItem() が返すテーブル HTML を渡す
  const htmlOutput = template.evaluate();
  return htmlOutput;
}

getItem() ― スプレッドシート → HTML テーブル変換

/**
 * 商品一覧シートからデータを取得し、HTML テーブル文字列を返す
 */
function getItem() {
  // ① アクティブなスプレッドシートを取得
  const ss = SpreadsheetApp.getActiveSpreadsheet();

  // ② 「商品一覧」シートを取得
  const sheet = ss.getSheetByName('商品一覧');
 
  // ③ シート全体の値を 2 次元配列で取得
  //    data[0] がヘッダー行、data[1] 以降がデータ行
  const data = sheet.getDataRange().getValues();

  // ④ 先頭行（ヘッダー）を取り出し、残りをデータとして保持
  const headers = data.shift();   // headers = ["商品ID", "商品名", "カテゴリー", "在庫数"]

  // ⑤ ヘッダー名 → 列インデックス の対応表を生成
  //    例: headerMap["商品名"] === 1
  const headerMap = {};
  headers.forEach(function(header, index) {
    headerMap[header] = index;
  });

  // ⑥ <thead> 部分 ─ ヘッダー配列を <th> で包み、空文字区切りで連結
  const thRow = headers
    .map(function(head) { return `<th>${head}</th>`; })
    .join('');

  // ⑦ <tbody> 部分 ─ 各データ行を <tr><td>…</td></tr> 形式の文字列に変換
  const tdRow = data
    .map(function(itemData) {
      return `
      <tr>
        <td>${parseInt(itemData[headerMap["商品ID"]], 10) || 0}</td>
        <td>${itemData[headerMap["商品名"]]}</td>
        <td>${itemData[headerMap["カテゴリー"]]}</td>
        <td>${parseInt(itemData[headerMap["在庫数"]], 10) || 0}</td>
      </tr>`;
    })
    .join('');

  // ⑧ 最終的な HTML テーブルを組み立て
  const html = `
    <table id="itemTable" class="table table-striped table-hover align-middle">
      <thead class="table-primary">
        <tr>${thRow}</tr>
      </thead>
      <tbody>${tdRow}</tbody>
    </table>`;

  // ⑨ 呼び出し元へ HTML 文字列を返す
  return html;
}

ポイント

  • ⑥で <thead>、⑦で <tbody> を個別に組み立てると、後でスタイルを付けやすくなります。
  • 数値列には parseInt() をかませておくと “空セル → 0” のフォールバックが効きます。

まず、前回も使用した 商品一覧シート → HTML テーブル文字列 を返す getItem() でテーブルを作成します。

template.itemTable = getItem();

その後、doGet 内で itemTable を定義し、テーブルの HTML 要素をテンプレートに渡します。

index.html 内の

<div>
  <?!= itemTable ?>
</div>

で itemTable を呼び出しています。

HtmlService.createHtmlOutput() と HtmlService.createTemplateFromFile() のちがいについて

比較項目createHtmlOutput()createTemplateFromFile()
目的例すぐに “Hello world” を出したいHTML/CSS/JS を分割管理したい
HTML の書き方JS 文字列で直接書く外部 .html をテンプレートとして読み込む
変数の埋め込みreplace() 等で手動置換<?= var ?> / <?!= var ?> でワンタッチ
保守性長い HTML だと可読性↓ファイル分離で可読性◎

用途まとめ

  • createHtmlOutput() … デバッグ用、ワンライナーで済ませたいとき
  • createTemplateFromFile() … 本番 UI、複数ページ、リッチ画面を作るとき

createHtmlOutput()についての記事はこちらも

【GASの小技】スプレッドシートをWEBページ化！HtmlService.createHtmlOutput()の基本と使い方
スプレッドシートを3分でWEBページ化！GASのHtmlService.createHtmlOutput()を使い、最小コードと表表示サンプルで初心者にも解説。
shoelab.jp
2025.06.01

スタイル & JavaScript の組み込み

以下は Bootstrap + カスタム CSS + JavaScript の例
コードは原文そのまま掲載し、誤記タグのみ訂正しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">


  <title>WEBアプリだよ</title>

  <style>
    body { padding: 1rem; }
    /* ───────────  テーブル全体  ─────────── */
    #itemTable {
      --bs-table-striped-bg: #f6faff;   /* 奇数行色 */
      --bs-table-hover-bg:   #edf4ff;   /* ホバー色 */
      border-radius: .5rem;
      overflow: hidden;
      box-shadow: 0 .125rem .75rem rgba(0,0,0,.05);
    }
    /* ───────────  ヘッダー  ─────────── */
    #itemTable thead th {
      background: #0d6efd;
      color: #fff;
      font-weight: 600;
      position: sticky; top: 0; z-index: 2;
    }
    /* ───────────  セルの配置調整  ─────────── */
    #itemTable tbody td:nth-child(1){text-align:center;}
    #itemTable tbody td:nth-child(4){text-align:right;}
    /* ───────────  カテゴリーをバッジ風  ─────────── */
    #itemTable tbody td:nth-child(3){
      font-weight: 500; padding:.35rem .75rem; border-radius:9999px;
      background:#e8f1ff; color:#0d6efd;
    }
  </style>
</head>
<body>

  <h1 class="h4 mb-3">WEBアプリだよ</h1>
  <p class="mb-4">以下のように &lt;table&gt; タグで作成できます。</p>

  <div class="table-responsive">
    <?!= itemTable ?>   <!-- テーブルを挿入 -->
  </div>

  <div class="d-flex gap-2 mt-4">
    <button id="addRowBtn" class="btn btn-primary btn-sm">行を追加</button>
  </div>

  <script>
    // デモ用：ダミーデータで行を追加
    document.getElementById('addRowBtn').addEventListener('click', () => {
      const tbody = document.querySelector('#itemTable tbody');
      const newRow = tbody.insertRow();
      const idCell = newRow.insertCell();
      const nameCell = newRow.insertCell();
      const categoryCell = newRow.insertCell();
      const stockCell = newRow.insertCell();

      const nextId = 1000 + tbody.rows.length;
      idCell.textContent = nextId;
      nameCell.textContent = 'デモ用品';
      categoryCell.textContent = 'テスト';
      stockCell.textContent = Math.floor(Math.random() * 10) + 1;
    });
  </script>
</body>
</html>

テンプレートファイル内に CSS と JavaScript を自由に書けるので、Bootstrap も組み合わせれば簡単にリッチな Web ページが作れます。外部ファイルにまとめて読み込む方法もありますが、それはまた別の記事で！

【GAS小技】createHtmlOutputFromFile / createTemplateFromFile 徹底活用 ─ CSS/JS分割と共通ヘッダー・フッターで更新爆速化！
Google Apps ScriptでCSSとJavaScriptを別ファイル化し、include関数でヘッダー・フッターをコンポーネント化。Bootstrap併用でも崩れない設定とコピペOKコードで保守性と開発効率を一気に向上！
shoelab.jp
2025.06.14

まとめ

  1. テンプレートファイルを分離すると、HTML/CSS/JS と GAS ロジックをきれいに分けられる。
  2. createTemplateFromFile() → evaluate() → return の 3 ステップが基本形。
  3. <?!= … ?> タグで GAS から渡した生 HTML をそのまま描画できる。
  4. Bootstrap などの外部ライブラリも普通の HTML と同じ要領で利用可能。
]]> 【GASの小技】スプレッドシートをWEBページ化！HtmlService.createHtmlOutput()の基本と使い方 https://shoelab.jp/gas/%e3%80%90gas%e3%81%ae%e5%b0%8f%e6%8a%80%e3%80%91%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%83%89%e3%82%b7%e3%83%bc%e3%83%88%e3%82%92web%e3%83%9a%e3%83%bc%e3%82%b8%e5%8c%96%ef%bc%81htmlservice-createhtmlo/ Sun, 01 Jun 2025 03:02:00 +0000 https://shoelab.jp/?p=637 こんにちは、イカPOです。
Google Apps Script（GAS）の HtmlService.createHtmlOutput() を使えば、スクリプトだけで HTML をブラウザに表示できます。

この記事では 1) とりあえずページが出る最小構成 と 2) スプレッドシートのデータをテーブルに出す実践サンプル の２本立てで解説します。

1. HtmlService.createHtmlOutput() の最小構成

// 最小構成
function doGet(e) {
  return HtmlService
    .createHtmlOutput('<h1>Hello from GAS Web App!</h1>');
}

ここがポイント 🔍

  • たった１行で HTML を返せる
    createHtmlOutput() に文字列を渡すだけ。超シンプルです。
  • 必ず doGet(e)（または doPost(e)）の中で返す
    GAS Web アプリの入口はこの２つ。ここから返したものがブラウザに届きます。

2. doGet(e) と doPost(e) の違い

用途使うメソッド
ページを見に来たときdoGet(e)
フォーム送信などでデータを渡すときdoPost(e)

ページ表示だけなら doGet(e) だけ覚えれば OK です。

3. スプレッドシートを読み込んで HTML に表示するサンプル

3-1. コード全文

function doGet(e) {
  // ① テーブル部分の HTML を作る
  const html = getItem();
  // ② そのままブラウザに返す
  return HtmlService.createHtmlOutput(html);
}

/**
 * 商品一覧シートからデータを取得し、HTML テーブル文字列を返す
 */
function getItem() {
  // ① アクティブなスプレッドシートを取得
  const ss = SpreadsheetApp.getActiveSpreadsheet();

  // ② 「商品一覧」シートを取得
  const sheet = ss.getSheetByName('商品一覧');

  // ③ シート全体の値を２次元配列で取得
  const data = sheet.getDataRange().getValues();

  // ④ １行目（ヘッダー行）を取り出す
  const headers = data.shift();   // → ["商品ID","商品名",…]

  // ⑤ ヘッダーと列番号の辞書を作る
  const headerMap = {};
  headers.forEach((header, index) => headerMap[header] = index);

  // ⑥ ヘッダー行を <th> で包む
  const thRow = headers.map(h => `<th>${h}</th>`).join('');

  // ⑦ データ行を <tr><td>…</td></tr> に変換
  const tdRow = data.map(item => `
    <tr>
      <td>${parseInt(item[headerMap["商品ID"]], 10) || 0}</td>
      <td>${item[headerMap["商品名"]]}</td>
      <td>${item[headerMap["カテゴリー"]]}</td>
      <td>${parseInt(item[headerMap["在庫数"]], 10) || 0}</td>
    </tr>`
  ).join('');

  // ⑧ テーブル完成
  const html = `
    <table border="1" cellspacing="0" cellpadding="5">
      <thead><tr>${thRow}</tr></thead>
      <tbody>${tdRow}</tbody>
    </table>`;

  // ⑨ HTML 文字列を返す
  return html;
}

3-2. スプレッドシートをコードに取り込む４ステップ

  1. シートを指名（②）
    const sheet = ss.getSheetByName('商品一覧');
    → 職員室で「商品一覧の名簿ください！」と声を掛けるイメージ。
  2. データを全部コピー（③）
    getDataRange().getValues() で A1 から右下端まで を２次元配列として取得。
    例：data[0][1] は「１行目２列目」のセル。
  3. ヘッダー行を抜き取る（④）
    const headers = data.shift();
    shift() は先頭行をスポッと抜いて返す。data からはヘッダーが消え、純粋データだけが残る。
  4. 列名⇔番号の辞書を作る（⑤） const headerMap = {}; headers.forEach((h,i)=>headerMap[h]=i); // → { "商品ID":0, "商品名":1, "カテゴリー":2, "在庫数":3 } これで item[headerMap["商品名"]] のように「名前で列を指定」でき、列順が変わっても安全。

マッピングについてはこちらの記事も参考に

[GASの小技] 1行目をヘッダーに！取得した配列データを加工してスプレッドシートに書き込む方法
Google Apps Script（GAS）を使ってスプレッドシートを操作する際に便利なヘッダー取得とマッピングの方法を解説。配列の扱い方やスプレッドシートへの書き込み時の注意点も丁寧に解説しています。初心者にも分かりやすく、コードを劇的に読みやすくするための小技を紹介します。
shoelab.jp
2025.03.09

3-3. HTML テーブルを組み立てる３ステップ

  1. ヘッダーを <th> に包む（⑥）
    headers.map() で包み紙を付け、.join('') で連結 → <th>商品ID</th>… が完成。
  2. データ行を <tr><td> に変換（⑦）
    data.map() 内でテンプレートリテラルに流し込み、.join('') で tbody 用の長い文字列に。
    数値列は parseInt()＋|| 0 で安全に整数化。
  3. テーブルを組み立てる（⑧）
    <thead> に thRow、<tbody> に tdRow を入れてテーブル完成。
    装飾は Bootstrap などを使うならクラス名に差し替えれば OK。

4. 使用方法

  1. スプレッドシートに 「商品一覧」 シートを作成
    列は 商品ID / 商品名 / カテゴリー / 在庫数（順番厳守）。
  2. スクリプトエディタに上記コードを貼り付ける
  3. デプロイ → 新しいデプロイ → ウェブアプリ を選択
  4. 公開 URL を開くと、シートの内容が表になって表示されます 🎉
商品ID商品名カテゴリー在庫数
1001シャンプー風呂1
1002リンス風呂1
1003ボディソープ風呂1
1004トイレットペーパートイレ1
1005トイレ用洗剤トイレ1
1006トイレ掃除シートトイレ1
1007歯ブラシ整容1
[商品一覧]シートの例
スプレッドシートの内容が表示されていれば成功
アプリの表示例

URLをクリックしてスプレッドシートの内容が表示されていれば成功です。

5. まとめ

  • HtmlService.createHtmlOutput() で GAS だけでも簡単に Web ページが作れる。
  • まずは doGet(e) に HTML 文字列を返す だけで OK。
  • スプレッドシートと組み合わせれば、在庫リストや一覧表もサクッと表示。

スプレッドシートのデータをそのまま Web ページ化すると、「表示に特化した専用ビュー」 が手に入るので視認性がグッと向上します。
とくに――

  • 現場のスマホ閲覧
    画面の小さなスマホでも余計な列やメニューを省いたテーブルだけを表示できるため、スクロール地獄から解放。
  • リンク１発で共有
    「シートを開いて、フィルタを掛けて…」という手間がなく、URL をタップすれば即ダッシュボード。
  • 編集と閲覧の役割分担
    シート側は “データ入力専用”、Web 側は “見る専用” と切り分けられるので、誤操作や表示ズレのリスクが減ります。

たとえば 見本品の一覧や在庫表 を管理しているケースなら、営業や製作スタッフが外出先・作業現場でも「在庫いくつ？」「最新の貸出ステータスは？」を一目で確認できます。業務の合間にスプレッドシート全体を開く時間を削減できるため、“探す時間” が “判断する時間” に置き換わり、結果として業務効率が大幅アップ。

「現場ですぐ見たい！」と少しでも感じたら、今回のコードをコピペしてまず動かしてみてください。たった数十行で、あなたのスプレッドシートが即席の Web ダッシュボードに早変わりします。

それでは、また。

テンプレートを使った方法はこちらの記事から

https://shoelab.jp/%e8%a3%9c%e8%a3%85%e5%85%b7%e3%83%bb%e7%be%a9%e8%82%a2%e8%a3%85%e5%85%b7%e9%96%a2%e4%bf%82/%e3%80%90%e3%80%91gas%e3%81%ae%e5%b0%8f%e6%8a%80%e3%80%91%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88html%e3%81%a7%e3%83%a9%e3%82%af%e3%83%a9%e3%82%afweb%e3%82%a2%e3%83%97%e3%83%aa%e5%8c%96
shoelab.jp
 ]]> [GAS小技].createMenuを使用してGoogleスプレッドシートにカスタムメニューを追加する方法【初心者向けGAS解説】 https://shoelab.jp/gas/gas%e5%b0%8f%e6%8a%80-createmenu%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6google%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%83%89%e3%82%b7%e3%83%bc%e3%83%88%e3%81%ab%e3%82%ab%e3%82%b9%e3%82%bf/ Sun, 30 Mar 2025 13:00:00 +0000 https://shoelab.jp/?p=513 こんにちはイカPOです。スプレッドシートでは、カスタムメニューを自由に作成でき、あらかじめ定義したGoogle Apps Scriptの関数を、そのメニューから簡単に呼び出すことができます。

今回はスプレッドシートにカスタムメニューを追加する方法について、解説します。

GASでスプレッドシートにカスタムメニューを追加するコード全文

function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('カスタムメニュー')
    .addItem('追加メニュー','menuItem1')
    .addToUi();
}

function menuItem1() {
  SpreadsheetApp.getUi().alert('追加されたメニューをクリックしました');
}

スクリプトの解説：カスタムメニューの作成手順

const ui = SpreadsheetApp.getUi();

スプレッドシートのUIを呼び出します。

ui.createMenu('カスタムメニュー')
  .addItem('追加メニュー','menuItem1')
  .addToUi();
  • createMenu('カスタムメニュー') で追加するメニュー名を設定。
  • addItem(表示名, 関数名の文字列) の形式で記述します。
  • このとき、メニューから呼ばれる関数はグローバル関数として定義する必要があります。 addItem 内で関数を定義して渡すことはできないので注意が必要です（あらかじめ定義しておく必要があります）。

今回の例では、 .addItem('追加メニュー','menuItem1') により、menuItem1 という関数を文字列として呼び出しています。

function menuItem1() {
  SpreadsheetApp.getUi().alert('追加されたメニューをクリックしました');
}

この関数ではスプレッドシートのUIにアクセスし、アラートを表示させる動作を記述しています。

スプレッドシート上にアラートが表示される
実行するとアラートが表示される

最後に .addToUi() を付けることで、「このメニューをユーザーインターフェース（UI）に追加してね」という意味になります。

メニューをスプレッドシートに表示させる方法

エディタで onOpen() を実行すれば、スプレッドシートにメニューが表示されます。

コードを実行するとメニューが追加される
コードを実行するとメニューが追加される

GASでサブメニューを作成する方法

サブメニューを追加
function onSubOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('カスタムメニュー')
    .addItem('追加メニュー','menuItem1')
    .addSeparator()
    .addSubMenu(ui.createMenu('サブメニュー付き')
    .addItem('サブメニュー', 'menuItem2'))
    .addToUi();
}
  • .addSubMenu(ui.createMenu('サブメニュー付き') でサブメニューを追加できます。
  • .addItem('サブメニュー', 'menuItem2') とすることで、サブメニューに項目を追加できます。

サブメニューに複数項目を追加する例

.addSubMenu(ui.createMenu('サブメニュー付き')
  .addItem('サブメニュー', 'menuItem2')
  .addItem('サブメニュー', 'menuItem2')
  .addItem('サブメニュー', 'menuItem2'))

addSubMenu() の引数内で .addItem() を複数記述することで、サブメニュー内に複数の項目を追加できます。

サブメニューを複数表示した場合

サブメニューをあらかじめ定義して管理を楽にする方法

const ui = SpreadsheetApp.getUi();
const subMenu = ui.createMenu('サブメニュー付き')
  .addItem('サブメニュー', 'menuItem2')
  .addItem('サブメニュー', 'menuItem2')
  .addItem('サブメニュー', 'menuItem2');

ui.createMenu('カスタムメニュー')
  .addItem('追加メニュー','menuItem1')
  .addSubMenu(subMenu)
  .addToUi();

予めサブメニューの内容を定義することもできる。項目の追加など管理が楽になるためおススメ。

メニューに区切り線を追加する方法（.addSeparator）

.addSeparator() を使用すると、メニュー内に区切り線を入れることができます。

function onSubOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('カスタムメニュー')
    .addItem('追加メニュー','menuItem1')
    .addSeparator()
    .addItem('追加メニュー','menuItem1')
    .addSeparator()
    .addItem('追加メニュー','menuItem1')
    .addSeparator()
    .addSubMenu(ui.createMenu('サブメニュー付き')
      .addItem('サブメニュー', 'menuItem2')
      .addSeparator()
      .addItem('サブメニュー', 'menuItem2')
      .addSeparator()
      .addItem('サブメニュー', 'menuItem2'))
    .addToUi();
}

実践編：カスタムメニューからモーダルフォームを呼び出す

[GAS小技]showModalDialog()でスプレッドシート内にモーダル入力フォームを作ってみよう[初心者向け]
Googleスプレッドシートにモーダル入力フォームを表示する方法をGASで解説。初心者でもすぐに使える実践例付き！
shoelab.jp
2025.03.23

で作成したモーダルフォームを呼び出す機能をメニューに追加しましょう。

コード全文（コード.gsだけで収まるように改良しています）

function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('追加メニュー')
    .addItem('入力フォームを表示','showForm')
    .addToUi();
}

function showForm() {
  const htmlbody = `
        <h3>ユーザー情報</h3>
        <form id="myForm">
          名前: <input type="text" name="name"><br>
          メール: <input type="email" name="email"><br><br>
          <input type="button" value="送信" onclick="submitForm()">
        </form>

        <script>
          function submitForm() {
            const form = document.getElementById('myForm');
            const data = {
              name: form.name.value,
              email: form.email.value
            };

            google.script.run
              .withSuccessHandler(function() {
                alert('送信完了！');
                google.script.host.close();
              })
              .withFailureHandler(function(error){
                alert('送信に失敗しました。エラー内容: ' + error.message);
              })
              .submitForm(data);
          }
        </script>
  `;
  const html = HtmlService.createHtmlOutput(htmlbody)
    .setWidth(400)
    .setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(html, '入力フォーム');
}

function submitForm(data) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  sheet.appendRow([data.name, data.email, new Date()]);
}

.addItem('入力フォームを表示','showForm') でモーダルを生成する関数 showForm が登録されています。

onOpen() を実行することで、スプレッドシートのメニューに「追加メニュー」の項目が追加されます。

スプレッドシートのメニューに「追加メニュー」の項目が追加されます。

まとめ：スプレッドシートにカスタムメニューを追加する基本メソッド一覧

メソッド意味
createMenu(‘名前’)新しいメニューを作る
addItem(‘項目名’, ‘関数名’)メニューに実行する項目を追加する
addSubMenu(サブメニュー)メニュー内にサブメニューを追加する
addSeparator()メニュー内に区切り線を追加する
addToUi()そのメニューをスプレッドシートに表示する

上記のメソッドを使うことでスプレッドシートにメニューを追加することができます。

ちなみに、SpreadsheetApp を DocumentApp, SlidesApp, または FormApp に変更することで、Googleドキュメントやスライド、Googleフォームにも同様にメニューを追加することができます。それはまた別の機会に。

]]> [GAS小技]showModalDialog()でスプレッドシート内にモーダル入力フォームを作ってみよう[初心者向け] https://shoelab.jp/gas/gas%e5%b0%8f%e6%8a%80showmodaldialog%e3%81%a7%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%83%89%e3%82%b7%e3%83%bc%e3%83%88%e5%86%85%e3%81%ab%e3%83%a2%e3%83%bc%e3%83%80%e3%83%ab%e5%85%a5%e5%8a%9b/ Sun, 23 Mar 2025 13:04:00 +0000 https://ikapoit.shoelab.jp/?p=117 こんにちは。イカPOです。 今回はGASを使ってスプレッドシート内にモーダルで表示されるHTMLベースの入力フォームを作る方法を紹介します。

モーダルフォームとは？初心者向けにわかりやすく解説

モーダルで実装することでスプレッドシート内にポップアップで入力画面が表示される。
モーダルウィンドウで表示すれば、画面遷移なしでフォームに入力できる

ポップアップのように表示される入力画面です。 GASでは SpreadsheetApp.getUi().showModalDialog() を使って実装可能です。

メリット： スプレッドシートの画面を保ったままデータ入力ができること。

GASでモーダルフォームを作るためのコード全文

コピペでとりあえず動かしたい方向け。 スプレッドシート → 拡張機能 → Apps Script を選択し、下記のコードを記述してください。

コード.gs

function showForm() {
  const html = HtmlService.createHtmlOutputFromFile('form')
    .setWidth(400)
    .setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(html, '入力フォーム');
}

function submitForm(data) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  sheet.appendRow([data.name, data.email, new Date()]);
}

form.html

エディタ内の「ファイルを追加」ボタンを押して form.html を作成。form.htmlがモーダルで表示されるフォームの元になります。

form.html（全文）

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h3>ユーザー情報</h3>
    <form id="myForm">
      名前: <input type="text" name="name"><br>
      メール: <input type="email" name="email"><br><br>
      <input type="button" value="送信" onclick="submitForm()">
    </form>

    <script>
      function submitForm() {
        const form = document.getElementById('myForm');
        const data = {
          name: form.name.value,
          email: form.email.value
        };

        google.script.run
          .withSuccessHandler(function() {
            alert('送信完了！');
            google.script.host.close();
          })
          .withFailureHandler(function(error) {
            alert('送信に失敗しました。エラー内容: ' + error.message);
            // 必要に応じて、エラーの詳細をログに出力するなどの処理を追加できます
          })
          .submitForm(data);
      }
    </script>
  </body>
</html>

コード解説：GASとHTMLで作るモーダルフォームのしくみ

モーダルを表示する関数（showForm）

function showForm() {
  const html = HtmlService.createHtmlOutputFromFile('form')
    .setWidth(400)
    .setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(html, '入力フォーム');
}

モーダルの画面設定

const html = HtmlService.createHtmlOutputFromFile('form')
  .setWidth(400) // 横幅
  .setHeight(300); // 縦幅
  • .createHtmlOutputFromFile('form')：HTMLファイル（form.html）を読み込んでいます。
  • .setWidth() と .setHeight()：モーダルウィンドウのサイズを設定。

実際にモーダルを呼び出す処理

SpreadsheetApp.getUi().showModalDialog(html, '入力フォーム');
  • SpreadsheetApp.getUi()：スプレッドシートのUIを取得。
  • .showModalDialog()：指定したHTMLをモーダルとして表示。
  • '入力フォーム'：を変更することでモーダルのタイトルは変更可能。
モーダルフォームのタイトルを変換した例
モーダルフォームのタイトルを変換した例。showModalDialog(html, ‘変更したフォーム’)

データを処理する関数（submitForm）

function submitForm(data) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  sheet.appendRow([data.name, data.email, new Date()]);
}
  • form.html側からこの関数を呼び出しています。
  • 受け取ったデータをスプレッドシートの最終行に追記します。

フォームからデータを送信する処理（form.html側）

<script>
  function submitForm() {
    const form = document.getElementById('myForm');
    const data = {
      name: form.name.value,
      email: form.email.value
    };

    google.script.run
      .withSuccessHandler(function() {
        alert('送信完了！');
        google.script.host.close();
      })
      .withFailureHandler(function(error) {
        alert('送信に失敗しました。エラー内容: ' + error.message);
      })
      .submitForm(data);//コード.gs内のsubmitFormを呼び出す
  }
</script>
  • google.script.run を使って、HTML側からGASの関数を実行しています。

実際にモーダルフォームを動かしてみよう

showForm()を選択してクリック
showFrom()を実行するとモーダル画面がスプレッドシート内に表示される。

コード.gsとform.htmlの作成が終わったら、関数 showForm() を実行してみましょう。

表示されたフォームに情報を入力して、送信ボタンを押す
モーダルウィンドウに表示されたフォームに情報を入力して、送信ボタンを押す

スプレッドシート上にモーダルウィンドウが表示されます。あとは、フォームに入力して「送信」ボタンを押すだけ！ スプレッドシートにデータが追加されていれば成功です。

モーダルフォームの成功時の画面
成功時の画面。データがスプレッドシートに書き込まれます。

まとめ：GASでモーダル入力フォームを表示するポイント3つ

SpreadsheetApp.getUi().showModalDialog(html, 'モーダルウィンドウのタイトル');
  • モーダルを表示する関数
const html = HtmlService.createHtmlOutputFromFile('form')
  .setWidth(400)
  .setHeight(300);
  • モーダルサイズの設定
google.script.run
  • HTML側からGASの関数を実行する仕組み

この3つを押さえれば、モーダル画面からスプレッドシートを操作することが可能になります。

ただし、毎回スクリプトエディタから実行ボタンを押して関数を実行するのは、手順が増えて面倒です。

この問題を解消するために、

次回は「スプレッドシート内にカスタムメニューを作成して、モーダルフォームをメニューから表示する方法」を紹介します！

[GAS小技].createMenuを使用してGoogleスプレッドシートにカスタムメニューを追加する方法【初心者向けGAS解説】
初心者向けにGoogleスプレッドシートでカスタムメニューを追加し、GASの定義済みスクリプトを呼び出す方法をわかりやすく解説。UI操作を効率化して業務をスムーズに進めよう！
shoelab.jp
2025.03.30

この記事についてのご意見や間違いのご指摘は、ぜひX（旧Twitter）でお知らせください！

皆さまのフィードバックをお待ちしています。以下のアカウントまでお気軽にメッセージをお寄せください。

▶︎ [イカPO]（@ikaikapo）

この記事には筆者の個人的な解釈も一部含まれています。一つの参考としてお読みいただきつつ、最終的にはご自身や担当の方としっかり相談の上で判断いただけますと幸いです。

皆様の声で情報をアップデートしていきます。よろしくお願いします。

]]> [GASの小技]GASで文字を検索！createTextFinder()の基本とfindNext()・findAll()の使い分け【初心者向け】 https://shoelab.jp/gas/gas%e3%81%ae%e5%b0%8f%e6%8a%80gas%e3%81%a7%e6%96%87%e5%ad%97%e3%82%92%e6%a4%9c%e7%b4%a2%ef%bc%81createtextfinder%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%a8findnext%e3%83%bbfindall%e3%81%ae%e4%bd%bf/ Sun, 16 Mar 2025 13:00:00 +0000 https://ikapoit.shoelab.jp/?p=103 こんにちは！イカPOです。

スプレッドシート内で、特定の文字列が入力されているセルを探すときは、createTextFinder() と findNext() を使うと簡単に検索できます。
今回は createTextFinder() と findNext() の使い方について解説します。

createTextFinder()と.findNext()

createTextFinder() は、指定された文字列を検索するための機能です。
たとえば、dataRange.createTextFinder(“シャンプー”) と書くと、dataRange という範囲の中から「シャンプー」という文字列を探してくれます。

そこから .findNext() を呼び出すと、見つかったセルの位置情報（Range オブジェクト）が返ってきます。
この Range オブジェクトを使えば、どのセルに文字が入っているかを簡単に特定できます。

rangeオブジェクトとは？

rangeオブジェクトとは、スプレッドシート内の特定のセルや範囲の「位置情報」を持ったオブジェクトです。
これを使うことで、セルの場所を特定し、関連する情報を取得できます。

たとえば、「A1セル」というセルの位置情報を持つ rangeオブジェクトなら、そのセルが**どこにあるか（位置）**だけでなく、どんな値が入っているか、どのシートに属しているかなどの情報も取得できます。

rangeオブジェクトで取得できる情報

このセルがどこにあるかを表すのがrangeオブジェクト
  • getA1Notation(): A1形式（「B2」「C10」など）でセルの位置を取得
  • getRow(): セルの行番号（1,2,3…）を取得
  • getColumn(): セルの列番号（1,2,3…）を取得
  • getValue(): セルに入っている**値（文字列や数値など）**を取得
  • getSheet().getName(): そのセルがあるシート名を取得

このように、rangeオブジェクトがあれば、
✅ セルがどこにあるのか（位置情報）
✅ セルの中にどんなデータが入っているのか
✅ どのシートにあるのか
を簡単に取得できます。

rangeオブジェクトとは、スプレッドシートの「セルの住所」を持ったデータと考えるとわかりやすいです。

サンプルコード（シャンプーの位置を特定してみよう）

今回の例では、用品一覧シートから「シャンプー」という文字列が入っているセルを探して、そのセルの位置を表示させてみます。

サンプルデータ

シート名：「用品一覧」

用品ID用品名カテゴリー
1001シャンプー風呂
1002リンス風呂
1003ボディソープ風呂
1004トイレットペーパートイレ
1005トイレ用洗剤トイレ
1006トイレ掃除シートトイレ
1018ベビーローション子供
1019おしり吹き子供
1020ワセリン子供
1021おむつ用ごみ袋子供
1022ゴミ袋掃除
1023シャンプー風呂

上記のようにシャンプーが2つ入っているので、実行結果に注目してみましょう。

function searchRowWithTextFinder(){
  const sheet = SpreadsheetApp.getActiveSpreadsheet();
  const targetsheet = sheet.getSheetByName("用品一覧");
  const dataRange = targetsheet.getDataRange();
  // 「シャンプー」という文字を探すFinderを作成
  const finder = dataRange.createTextFinder("シャンプー");
  // 1つ目にヒットしたセル（Rangeオブジェクト）を取得
  const foundRange = finder.findNext();
  if(foundRange){
    // シャンプーが見つかったときに情報をログに出す
    Logger.log(`見つかったセルの位置は${foundRange}`);
    Logger.log(`見つかったセルの位置は${foundRange.getA1Notation()}`);
    Logger.log(`見つかったセルの行番号は${foundRange.getRow()}`);
    Logger.log(`見つかったセルの中身は${foundRange.getValue()}`);
    Logger.log(`見つかったセルが属するシート: ${foundRange.getSheet().getName()}`);
  }
  else{
    // 該当の文字が見つからなかった場合
    Logger.log("指定の位置は見つかりませんでした。");
  }

}

お決まりのスプレッドシートからデータを取得

const sheet = SpreadsheetApp.getActiveSpreadsheet();

const targetsheet = sheet.getSheetByName("用品一覧");

const dataRange = targetsheet.getDataRange();
  • SpreadsheetApp.getActiveSpreadsheet(): 現在アクティブなスプレッドシートを取得
  • sheet.getSheetByName(“用品一覧”): その中の「用品一覧」という名前のシートを取得
  • .getDataRange(): そのシート内にあるデータ範囲すべてを取得

このあとの検索処理は dataRange に対して行います。

文字列の検索と一致したセルの位置情報を確認してみよう[findNext()]

const finder = dataRange.createTextFinder("シャンプー");

const foundRange = finder.findNext();
  • createTextFinder(“シャンプー”): 「シャンプー」という文字列を検索条件に指定
  • findNext(): 最初にヒットしたセルを返してくれる（Range オブジェクト）

ここで返ってくる foundRange は、「シャンプー」が入っているセルの rangeオブジェクトです。

位置情報を確認しよう

if(foundRange){
  // 見つかった時の処理
} else {
  // 見つからなかった時の処理
}
  • foundRange が存在すれば、検索文字列が見つかったということになるので、そのときの処理を実行
  • 見つからなければ else 側の「見つかりませんでした」とログを出すだけ

Logger.log(`見つかったセルの位置は${foundRange}`);

この行では、Range オブジェクトがそのまま表示されます。多くの場合、ログには Range とだけ出るので、どのセルかはわかりにくいです。

翻訳してみよう（A1表記を確認する）

Logger.log(`見つかったセルの位置は${foundRange.getA1Notation()}`);
  • getA1Notation() は、B2 や C3 などの見慣れたセル番地（A1形式）を返してくれます。
  • 「B2」のように表示されれば、どのセルでヒットしたかわかりやすいです。

発見した文字列の位置情報を使って色々な情報を取得してみよう

Logger.log(`見つかったセルの行番号は${foundRange.getRow()}`);
Logger.log(`見つかったセルの中身は${foundRange.getValue()}`);
Logger.log(`見つかったセルが属するシート: ${foundRange.getSheet().getName()}`);
  • getRow(): 見つかったセルの行番号を返す
  • getValue(): そのセルに入っている値（文字や数値）を返す
  • getSheet().getName(): セルが属するシート名を返す

これらの情報を組み合わせると、検索でヒットしたセルの場所や値を自由に活用できます。

文字列が複数ある場合はどうするの？[.findAll()]

もし、同じ文字列が複数のセルに含まれる場合は、.findAll() を使うと便利です。
.findAll() は、該当する文字列を含むセルの Range オブジェクトを配列として返してくれます。

const finder = dataRange.createTextFinder("シャンプー");
const foundRanges = finder.findAll();
if(foundRanges){
  for(let foundRange of foundRanges){
    Logger.log(`見つかったセルの位置は${foundRange.getA1Notation()}`);
    Logger.log(`見つかったセルの行番号は${foundRange.getRow()}`);
    Logger.log(`見つかったセルの列番号は${foundRange.getColumn()}`);
    Logger.log(`見つかったセルの中身は${foundRange.getValue()}`);
    Logger.log(`見つかったセルが属するシート: ${foundRange.getSheet().getName()}`);
  }

} else {
  Logger.log("指定の位置は見つかりませんでした。");
}
  • foundRanges は配列なので、for 文を使って一つずつ処理すればOK
  • .findNext() だと最初にヒットしたセル1つしか取得しませんが、.findAll() ならすべてのセルを取得できます

まとめ

  1. createTextFinder() で検索文字列を指定し、.findNext() で「最初に見つかったセル（Range オブジェクト）」を取得できる。
  2. もし検索した文字列が複数のセルにある場合は、.findAll() を使うことですべての該当セルを取得できる。
  3. rangeオブジェクト はセルの「場所・値・シート名」など、さまざまな情報を持っている。getA1Notation() や getRow()、getValue() などを使って、必要な情報を取り出せる。

今回のサンプルでは「シャンプー」を探しましたが、実際にはさまざまな文字列を検索して活用できます。重複しない「ID」や「コード番号」のような唯一の値を検索するときは .findNext() 、複数ヒットする可能性がある場合は .findAll() を使ってみてください。

この記事についてのご意見や間違いのご指摘は、ぜひX（旧Twitter）でお知らせください！

皆さまのフィードバックをお待ちしています。以下のアカウントまでお気軽にメッセージをお寄せください。

▶︎ [イカPO]（@ikaikapo）

この記事には筆者の個人的な解釈も一部含まれています。一つの参考としてお読みいただきつつ、最終的にはご自身や担当の方としっかり相談の上で判断いただけますと幸いです。

皆様の声で情報をアップデートしていきます。よろしくお願いします。

]]> [GASの小技] 1行目をヘッダーに！取得した配列データを加工してスプレッドシートに書き込む方法 https://shoelab.jp/gas/gas%e3%81%ae%e5%b0%8f%e6%8a%80-1%e8%a1%8c%e7%9b%ae%e3%82%92%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%ab%ef%bc%81%e5%8f%96%e5%be%97%e3%81%97%e3%81%9f%e9%85%8d%e5%88%97%e3%83%87%e3%83%bc%e3%82%bf/ Sun, 09 Mar 2025 13:00:00 +0000 https://ikapoit.shoelab.jp/?p=98 こんにちは、イカPOです。

スプレッドシートの1行目をヘッダーとして使っている方は多いと思います。データを扱う際も、ヘッダーを基準にするとコードが読みやすく、後から見直す時にも非常に便利です。

今回は、GASでヘッダーを取得してマッピングを作成し、データを効率よく処理してスプレッドシートに書き込む方法についてご紹介します。

「マッピング」とは？

「マッピング」とは、スプレッドシートのヘッダー名とその位置（インデックス）を紐づける作業のことです。例えば、「在庫数」という列が何列目にあるかを数字ではなく名前で指定できるようになるため、コードが非常に分かりやすくなります。

マッピングの一例

{ “商品ID”: 0, “商品名”: 1, “在庫数”: 2 }

このオブジェクトでは、たとえば「商品ID」というキーを指定すると数字の0が返されます。
返ってきた数値（0）をインデックスとして利用することで、配列の0番目の要素へアクセスできる仕組みになっています。

この仕組みを利用すると、スプレッドシートからデータを取得し、それを加工・書き込みする一連の処理をスムーズに実行できます。

スプレッドシートを操作する流れとサンプルコード

コード全文

function processSheetDataFlow(){
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('データ');
  const data = sheet.getDataRange().getValues(); //2次元配列で取得
  const headers = data.shift(); // ヘッダー行を取り出す
  

  const headerMap = {};
  headers.forEach(function(header, index) {
  headerMap[header] = index; // 0始まりのインデックスを設定
  });
  

  for (let i =0; i < data.length; i++ ){
     Logger.log(`計算前${data[i]}`);
     const currentStock = parseInt(data[i][headerMap["在庫数"]],10) || 0;
     data[i][headerMap["在庫数"]] = currentStock *2;
  }

  const updateHeaderMap = {};
  headers.forEach(function(header,index){
    updateHeaderMap[header] = index + 1;
  });

  // sheet.getRange(2,1,data.length,data[0].length).setValues(data);

  for (let i = 0; i < data.length; i++) {
  const targetRow = i + 2;  // シートは1始まりなので、2行目から書き込む
  sheet.getRange(targetRow, updateHeaderMap["在庫数"]).setValue(data[i][headerMap["在庫数"]]);
}
  
}

サンプルデータ

商品ID商品名在庫数
1001シャンプー4
1002リンスー12
1003ボディーソープ20
1004コンディショナー16

1 スプレッドシートからデータを取得

const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('データ');
const data = sheet.getDataRange().getValues(); // 2次元配列で取得
const headers = data.shift(); // ヘッダーを取り出す
取得データ（イメージ）
[
  ["商品ID", "商品名", "在庫数"],  // ヘッダー
  [1001, "シャンプー", 4],
  [1002, "リンスー", 12],
  [1003, "ボディーソープ", 20],
  [1004, "コンディショナー", 16]
]

2 ヘッダーを取得してマッピングする

ヘッダーを取得したあと、forEachを使ってマッピングを作成します。forEachの構文には配列の要素（header）と、その順番（index）が含まれているので、それを利用してマッピングを行います。

const headerMap = {};
headers.forEach((header, index) => {
  headerMap[header] = index; // 配列の順番（0始まり）を取得
});

このマッピングにより、列番号ではなくヘッダー名でデータを扱えるようになります。

３ 配列データの加工

配列からデータを取り出し、在庫数を2倍にする処理を行います。

for (let i = 0; i < data.length; i++) {
  const currentStock = parseInt(data[i][headerMap["在庫数"]], 10) || 0;
  data[i][headerMap["在庫数"]] = currentStock * 2;
}

ここでポイントになるのが、「ヘッダーのマッピング」です。

ヘッダーのマッピングについて

マッピングとは、ヘッダーの項目名と、その項目が配列の何番目（インデックス）に位置しているかを紐付ける作業のことを言います。

スプレッドシートから取得したデータは、以下のようになっています。

[
  ["商品ID", "商品名", "在庫数"], // ヘッダー
  [1001, "シャンプー", 4], // データ1行目
  [1002, "リンスー", 12], // データ2行目
]

ここからヘッダーを取り出して、マッピングを行います。

const headers = data.shift(); // ["商品ID", "商品名", "在庫数"]

const headerMap = {};
headers.forEach((header, index) => {
  headerMap[header] = index;
});

ここで使ったforEachは、配列の各要素を順番に取り出すためのJavaScriptのメソッドで、自動的にその要素の順番（インデックス）を取得することができます。

• “商品ID” は0番目（indexが0）

• “商品名” は1番目（indexが1）

• “在庫数” は2番目（indexが2）

これにより、以下のようなマッピングが出来上がります。

{ “商品ID”: 0, “商品名”: 1, “在庫数”: 2 }

このマッピングを使うことで、データの取得や書き込みを、配列の番号（インデックス）ではなく、ヘッダー名を使って行うことができます。

例えば、

data[i][headerMap[“在庫数”]]

という記述は、

data[i][2]

と記述するのと同じ意味になります。

つまり、「在庫数」と指定すると、マッピングによって「2」という数字が取得され、その結果、配列内の「在庫数」に該当するデータにアクセスできるという仕組みです。

この仕組みを踏まえ、改めて在庫数を2倍にする処理を見てみましょう。

for (let i = 0; i < data.length; i++) {
  const currentStock = data[i][headerMap["在庫数"]];
  data[i][headerMap["在庫数"]] = currentStock * 2;
}

こうすることで、配列内の「在庫数」に該当するデータが更新されます。

４ 書き込み用のマッピング（1始まり）

スプレッドシートへの書き込み時は、シートが1始まりのため、ヘッダーのインデックスに+1をしてマッピングします。

const updateHeaderMap = {};
headers.forEach((header, index) => {
  updateHeaderMap[header] = index + 1;
});

スプレッドシートに書き戻すときは、作成した1始まりのマッピングを使って書き込みます。

5 スプレッドシートにデータを書き込む（在庫数の更新）

変更後のデータをシートに反映する方法です。
ここでのポイントは、行番号と列番号がシート上では1始まりであるため、配列（0始まり）とのズレを調整することです。

  for (let i = 0; i < data.length; i++) {
  const targetRow = i + 2;  // シートは1始まりなので、2行目から書き込む
  sheet.getRange(targetRow, updateHeaderMap["在庫数"]).setValue(data[i][headerMap["在庫数"]]);
}

行番号の調整：
i + 2 の部分は、配列のインデックス i（0始まり）を、スプレッドシートの行番号（1始まり）に合わせるための工夫です。

  • i = 0 → シート上は2行目
  • i = 1 → シート上は3行目
    といった形で対応させています。

列番号の指定：
updateHeaderMap["在庫数"] で取得されるのは、書き込み用に「1始まり」に変換した列番号です。
headerMap["在庫数"] は配列上で在庫数が何番目かを示す「0始まり」のインデックスです。

書き込むデータを持ってくる「列番号」は headerMap

書き込み先の「列番号」は updateHeaderMap

別の書き込み方法

以下のように一括書き込みも可能です。

sheet.getRange(2, 1, data.length, data[0].length).setValues(data);

まとめ

流れのイメージは以下の通りです。

  1. データ取得（0始まり）
  2. ヘッダーマッピング作成（0始まり）
  3. 配列上でデータ処理（0始まり）
  4. 書き込み用マッピング作成（1始まり）
  5. シートへの書き込み（1始まり）

✅ 配列処理は0始まりのまま行う
✅ シートに書き込むときは1始まりで扱う

このパターンを覚えるだけで、GASのコードが劇的にわかりやすくなります。ぜひ試してみてください！

この記事についてのご意見や間違いのご指摘は、ぜひX（旧Twitter）でお知らせください！

皆さまのフィードバックをお待ちしています。以下のアカウントまでお気軽にメッセージをお寄せください。

▶︎ [イカPO]（@ikaikapo）

この記事には筆者の個人的な解釈も一部含まれています。一つの参考としてお読みいただきつつ、最終的にはご自身や担当の方としっかり相談の上で判断いただけますと幸いです。

皆様の声で情報をアップデートしていきます。よろしくお願いします。

]]> 【GASの小技】GASでスプレッドシートを自動整形！.trim().normalize(‘NFKC’).replace().toLowerCase()の使い方 https://shoelab.jp/gas/%e3%80%90gas%e3%81%ae%e5%b0%8f%e6%8a%80%e3%80%91gas%e3%81%a7%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%83%89%e3%82%b7%e3%83%bc%e3%83%88%e3%82%92%e8%87%aa%e5%8b%95%e6%95%b4%e5%bd%a2%ef%bc%81-trim-normal/ Sun, 02 Mar 2025 11:19:02 +0000 https://ikapoit.shoelab.jp/?p=92 こんにちは！イカPOです。

スプレッドシートに存在する、半角と全角が混在したデータや余分な空白を自動で整形（除去）するGoogle Apps Script（GAS）を紹介します。

コード全文

function normalizeTextInSheet() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const dataRange = sheet.getDataRange();
  const dataValue = dataRange.getValues();
  const headers = dataValue.shift(); // ヘッダーを取り出す

  for (let i = 0; i < dataValue.length; i++) {
    dataValue[i] = dataValue[i].map(function (value) {
      return typeof value === "string" ? value.trim().normalize('NFKC').replace(/\s+/g, "").toLowerCase() : value;
    });
  }

  sheet.getRange(2, 1, dataValue.length, dataValue[0].length).setValues(dataValue);
}

📌 このコードが行うこと

  • 全角・半角の統一（normalize('NFKC')）
  • 不要なスペースの削除（replace(/\s+/g, "")）
  • 英字を小文字に変換（toLowerCase()）
  • 文字列の前後の空白削除（.trim()）
  • 整形後のデータをスプレッドシートに書き戻す

🔍 コードの動作イメージ

📌 修正前

商品番号商品名
ＡＢ１２３ワイヤレスイヤホ ン Pro
abＣＤ456スマートフォンケース クリア
１２３４５６モバイルバ ッテリー 10000mAh

⬇ スクリプトを実行すると…

📌 修正後

商品番号商品名
ab123ワイヤレスイヤホンpro
abcd456スマートフォンケースクリア
123456モバイルバッテリー10000mah

📝 どんな場面で使う？

  • スプレッドシートの データがバラバラ（全角・半角が混ざっている）
  • 無駄なスペース が入っている
  • 英字の 大文字・小文字を統一 したい
  • 手作業で修正するのが面倒

このスクリプトを実行すれば、データが自動的に整形されて 統一感のあるデータ になります！🚀

💡 コードの詳細解説

1️⃣ スプレッドシートのデータを取得

const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
const dataRange = sheet.getDataRange();
const dataValue = dataRange.getValues();
const headers = dataValue.shift();
  • SpreadsheetApp.getActiveSpreadsheet().getActiveSheet() → 現在のシートを取得
  • sheet.getDataRange() → データ範囲（Rangeオブジェクト）を取得
  • dataRange.getValues() → セルの値を取得して2次元配列に格納
  • dataValue.shift() → ヘッダー（1行目）を取り除く

2️⃣ データの整形（正規化）

for (let i = 0; i < dataValue.length; i++) {
  dataValue[i] = dataValue[i].map(function (value) {
    return typeof value === "string" ? value.trim().normalize('NFKC').replace(/\s+/g, "").toLowerCase() : value;
  });
}

✅ ループ処理の詳細

  • for ループを使い、スプレッドシートの各行を順番に処理
  • dataValue.length で 行数（データの数） を取得し、その回数だけループ
  • dataValue[i] には各行のデータ（配列）が格納されている

✅ typeof value === “string” ? について

  • typeof value でデータ型を判定
  • 文字列（string）の場合のみ正規化処理を実行
  • 数値や空のセル（null）などは変更せずそのまま保持

✅ map() を使う理由 スプレッドシートのデータは二次元配列のため、dataValue[i] の各セルを処理するために map() を使用。

  • 適用する処理：
    1. .trim() → 前後の空白を削除
    2. .normalize('NFKC') → 全角カタカナ・英数字を半角に統一
    3. .replace(/\s+/g, "") → すべての空白を削除
    4. .toLowerCase() → 英字を小文字に変換

3️⃣ 整形後のデータをスプレッドシートに書き戻す

sheet.getRange(2, 1, dataValue.length, dataValue[0].length).setValues(dataValue);
  • .getRange(2, 1, dataValue.length, dataValue[0].length)
    • 2,1 → A2セル（2行目・1列目）から書き込み開始（ヘッダーを除外）
    • dataValue.length → 行数（データの行数）
    • dataValue[0].length → 列数（データの列数）
  • .setValues(dataValue) → スプレッドシートに書き戻す

✅ データ構造のポイント

  • スプレッドシートのデータは2次元配列の形で扱われる。
  • dataValue は [[値1, 値2, ...], [値1, 値2, ...], ...] という形式。
  • そのまま .setValues() で値をセットできるため、手間がかからない。

📝 GASでデータを整形する各処理の具体例【初心者向け】

.trim() を使って前後の空白を削除する方法

let str = "  テストデータ  ";
console.log(str.trim());

出力:

"テストデータ"

.normalize('NFKC') を使って全角カタカナ・英数字を半角に統一する方法

let str = "ＡＢＣ１２３";
console.log(str.normalize('NFKC'));

出力:

"ABC123"

.replace(/\s+/g, "") を使ってすべての空白を削除する方法

let str = "テ ス ト  デ ー タ";
console.log(str.replace(/\s+/g, ""));

出力:

"テストデータ"

.toLowerCase() を使って英字を小文字に変換する方法

let str = "TESTdata";
console.log(str.toLowerCase());

出力:

"testdata"

🚀 まとめ

  • .trim() → 前後のスペースを削除
  • normalize(‘NFKC’) → 全角→半角に変換
  • replace(/\s+/g, “”) → すべての空白を削除
  • toLowerCase() → 小文字に変換
  • typeof value === “string” で文字列だけ変換対象にする
  • ループ処理でデータを一括整形

このスクリプトを使えば、スプレッドシートのデータを一瞬で整形できるので、手作業の手間を大幅に削減できます！🚀

ぜひ活用してみてください！

この記事についてのご意見や間違いのご指摘は、ぜひX（旧Twitter）でお知らせください！

皆さまのフィードバックをお待ちしています。以下のアカウントまでお気軽にメッセージをお寄せください。

▶︎ [イカPO]（@ikaikapo）

この記事には筆者の個人的な解釈も一部含まれています。一つの参考としてお読みいただきつつ、最終的にはご自身や担当の方としっかり相談の上で判断いただけますと幸いです。

皆様の声で情報をアップデートしていきます。よろしくお願いします。

]]> 【GAS入門】スプレッドシートから抽出したデータをメールで自動送信する方法 https://shoelab.jp/gas/%e3%80%90gas%e5%85%a5%e9%96%80%e3%80%91%e3%82%b9%e3%83%97%e3%83%ac%e3%83%83%e3%83%89%e3%82%b7%e3%83%bc%e3%83%88%e3%81%8b%e3%82%89%e6%8a%bd%e5%87%ba%e3%81%97%e3%81%9f%e3%83%87%e3%83%bc%e3%82%bf/ Sat, 01 Mar 2025 03:00:00 +0000 https://ikapoit.shoelab.jp/?p=69 こんにちは。イカPOです。「最終受注日が10か月以上経過したデータを自動抽出＆メール通知する方法」のスクリプト解説第3弾です。
前回は、②のスプレッドシートから条件をつけてデータを抽出する機能を実装しました。

今回は、③の抽出したデータをメールで送信する機能を実装します。

スクリプトの処理手順でいえば③です。これが最後のフェーズです。

1️⃣ 顧客管理表を取得（スプレッドシートのデータを取得）（前々回）
2️⃣ 取得したデータから、最終受注日が10か月以上経過した顧客を探す（前回）
3️⃣ 一覧をメールで送信する ← 今ここ

GASでメールを送信する方法

GASでメールを送信するには、GmailApp.sendEmailを使用します。
Gmailクラスに存在する.sendEmailを使うことでメールを送信できます。

sendEmail(recipient, subject, body)の解説

recipientにはメールアドレス、subjectにはメールの題名、bodyにはメールの本文をそれぞれ渡すことができます。

GmailApp.sendEmail("hogehoge@gmail.com", "メール題名ですよ", "今日はいい天気ですね");

この場合、メールアドレス “hogehoge@gmail.com” に「メール題名ですよ」というタイトルの本文が「今日はいい天気ですね」というメールが送信されます。

今回の場合:

  • メールアドレス：自分のメールアドレス
  • メールのタイトル：自由（例：「受注経過日が10か月以上過ぎた顧客名」など）
  • 本文：前回抽出した条件にマッチしたデータを含む内容

メール送信用の関数の作成

コード.gsにメール送信用の関数を追加しましょう。
前回作成した配列データoverdueOrdersをメールで送信する関数なので、sendOverdueOrdersEmail()と名付けました。

コード全文

function sendOverdueOrdersEmail(overdueOrders) {
  if (overdueOrders.length > 0) {
    let emailAddress = Session.getActiveUser().getEmail(); 
    const subject = "10か月以上経過した最終受注日の通知";
    const body = `以下の受注日が10か月以上経過しています:\n\n${overdueOrders.join('\n')}`;
    GmailApp.sendEmail(emailAddress, subject, body);
    Logger.log("メールを送信しました。");
  } else {
    Logger.log("10か月以上経過した受注日はありません。");
  }
}

メール送信用関数の処理の手順

1️⃣ overdueOrdersを受け取る
2️⃣ アドレス、題名、本文を準備する
3️⃣ メールを送信する

この関数でやりたいことは3つです。シンプルですね。順番に記述していきましょう。

1️⃣ overdueOrdersを受け取る

function sendOverdueOrdersEmail(overdueOrders) {
  if (overdueOrders.length > 0) {
  } else {
    Logger.log("10か月以上経過した受注日はありません。");
  }
}

sendOverdueOrdersEmail()を宣言し、引数としてoverdueOrdersを受け取れるように準備します。
念のため、10か月以上のデータがなかった場合（条件に合うデータがなかった場合）を考慮してif文を用意します。

if (overdueOrders.length > 0) {
  // データがある場合の処理
} else {
  // else内に10か月以上経過したデータがない場合の処理を書く
  Logger.log("10か月以上経過した受注日はありません。");
}

overdueOrders.length > 0は、overdueOrders配列が1つ以上の要素を持つことを意味します。
このif文でoverdueOrdersがデータとして存在しているかを判断します。

2️⃣ アドレス、題名、本文を準備する

let emailAddress = Session.getActiveUser().getEmail(); // 自分自身のメールアドレスを取得
const subject = "10か月以上経過した最終受注日の通知";
const body = `以下の受注日が10か月以上経過しています:\n\n${overdueOrders.join('\n')}`;
  • 変数emailAddressにSession.getActiveUser().getEmail()を使用して自分自身のメールアドレスを取得し格納します。
  • 変数subjectにはメールのタイトルが、変数bodyにはメールの本文が代入されます。

3️⃣ メールを送信する

GmailApp.sendEmail(emailAddress, subject, body);

このコードでメールを送信します。
変数emailAddress, subject, bodyをsendEmailに渡しています。

関数を手動で実行してみよう

作成した関数を実際に動かしてメールを送信するため、手動で以下の手順を実行してみましょう。

関数を選択後に実行をクリック
  1. Google Apps Scriptのエディタで「実行」→「関数を選択」でnotifyOverdueOrdersを選びます。
  2. 初回実行時には許可を求められるため、アクセスを許可してください。
  3. 許可後、Gmailを開いてメールが届いているか確認しましょう。

手動で送信が確認できれば成功です！

メール送信用の関数にトリガーを設定して自動送信しよう

メールを送信するコードが用意できました。
あとはこの関数notifyOverdueOrdersを好きな指定のタイミングで実行するだけで、メールを自動で送信できます。

自分自身の好きなタイミングで自動で実行するために、この関数にトリガーを設定しましょう。

トリガーを選択

Google Apps Scriptエディタのメニューからトリガーを選択します。

トリガーを追加をクリック

「トリガーを追加」ボタンを押して、新しいトリガーを設定します。

関数を選択し時間手動型を選択

関数名としてnotifyOverdueOrdersを選び、実行のタイミングを「時間主導型」などから選択しましょう。

設定が完了したら保存をクリック

設定を保存して完了です。これで指定したタイミングで自動的にメールが送信されます。

    補足事項

    .join(‘\n’)を使った改行について
    例えば以下のようなコードの場合、

    const overdueOrders = ["2023-04-10", "2023-03-15", "2023-02-28"]; 
    console.log(overdueOrders.join('\n'));

    このコードは以下のように出力されます。

    2023-04-10  
    2023-03-15  
    2023-02-28

    アプリを実行しているユーザーのメールアドレスを取得する方法
    Session.getActiveUser().getEmail()
    この1文でアプリを実行しているユーザーのメールアドレスを取得できるため非常に便利です。

    まとめ

    今回はGASを使ってスプレッドシートから抽出したデータをメールで自動送信する方法を紹介しました。以下の3つのステップで自動化を実現できました。

    1. データの取得
    2. 条件付きのデータ抽出
    3. 抽出データのメール送信

    この一連の自動化手順により、業務の効率化が図れます。また、メール通知をトリガーで自動実行することで、手動作業を大幅に削減できます。

    今後、このスクリプトを応用して以下のような自動化にも取り組むことが可能です。

    • 定期的な在庫管理のリマインダー
    • チームメンバーへの進捗通知
    • 受注・発注状況の自動レポート送信

    ぜひこの自動化の仕組みを活用して、日々の業務を効率化してみてください。

    前々回と前回の記事

    スプレッドシートの取得方法と1行目をヘッダーとして扱う方法について

    【GAS入門】スプレッドシートからデータを抽出し、1行目をヘッダーとして扱う方法
    GASで最終受注日をチェック＆通知するスクリプト解説【全体の流れ】こんにちは。イカPOです。今回からは連載形式の記事を掲載します。この記事はその第１回です。下記の記事で「最終受注日が10か月以上経過したデータを自動抽出＆メール通知する方法」...
    shoelab.jp

    条件付きでスプレッドシートからデータを抽出する方法について

    【GAS入門】初心者向けスプレッドシートから条件付きデータを自動抽出する方法
    GASを使ってGoogleスプレッドシートのデータを条件付きで抽出する方法を解説。最終受注日10か月以上経過した顧客を自動で判定し、業務効率化を実現します。初心者でも安心のステップバイステップ解説です。
    shoelab.jp

    この記事についてのご意見や間違いのご指摘は、ぜひX（旧Twitter）でお知らせください！

    皆さまのフィードバックをお待ちしています。以下のアカウントまでお気軽にメッセージをお寄せください。

    ▶︎ [イカPO]（@ikaikapo）

    この記事には筆者の個人的な解釈も一部含まれています。一つの参考としてお読みいただきつつ、最終的にはご自身や担当の方としっかり相談の上で判断いただけますと幸いです。

    皆様の声で情報をアップデートしていきます。よろしくお願いします。

    ]]>