[GAS小技].createMenuを使用してGoogleスプレッドシートにカスタムメニューを追加する方法【初心者向けGAS解説】

こんにちはイカ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() を実行することで、スプレッドシートのメニューに「追加メニュー」の項目が追加されます。

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

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

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