Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Google Apps Scriptを使った独自メニューの作り方

More than 3 years have passed since last update.

Google Apps Script(以降はGASと記述する)を使うとGoogle スプレッドシートGoogle ドキュメントGoogle フォームに独自のメニューを追加する事ができます。
また、メニューから自身で定義したGASの処理を動かせます。
本記事では独自メニューの作り方を解説します。

メニューの作り方

以下の手順でおこないます。

  1. Uiクラスを取得する
  2. Uiクラスからメニューを作成する
  3. メニューにアイテムを追加する
  4. メニューをUiクラスに追加する

コードの記述

まずはスプレッドシートでのやり方を解説します。

スクリプトエディタを開いて以下のコードを記述します。
ファイルが開かれたら自動でメニューが追加されるようになります。

/**
 * ファイルを開いたときのイベントハンドラ
 */
function onOpen() {
  var ui = SpreadsheetApp.getUi();           // Uiクラスを取得する
  var menu = ui.createMenu('追加したメニュー');  // Uiクラスからメニューを作成する
  menu.addItem('アイテム1', 'onClickItem1');   // メニューにアイテムを追加する
  menu.addToUi();                            // メニューをUiクラスに追加する
}

function onClickItem1() {
  Browser.msgBox('アイテム1がクリックされました。');
}

image.png

区切り線を追加する

メニューが多くなってくると見づらくなってきます。
そういう場合は区切り線を追加します。

  var ui = SpreadsheetApp.getUi();
  var menu = ui.createMenu('追加したメニュー');
  menu.addItem('アイテム1', 'onClickItem1');
  menu.addItem('アイテム2', 'onClickItem2');
  menu.addSeparator();                       // 区切り線を追加する
  menu.addItem('アイテム3', 'onClickItem3');
  menu.addToUi();

image.png

サブメニューを作る(階層構造にする)

更にメニューが増えてくると区切り線だけでも厳しくなってきます。
そのような場合はサブメニューを追加します。

  var ui = SpreadsheetApp.getUi();
  var menu = ui.createMenu('追加したメニュー');
  menu.addItem('アイテム1', 'onClickItem1');
  menu.addItem('アイテム2', 'onClickItem2');
  menu.addSeparator();
  menu.addSubMenu(                           // サブメニューをメニューに追加する
      ui.createMenu("サブメニュー")             // Uiクラスからメニューを作成する
      .addItem("サブアイテム1", "onClickSubItem1") // メニューにアイテムを追加する    
  );
  menu.addToUi();

image.png

ソースをきれいにする

最後にソースをきれいにしておきましょう。

Ui#createMenu()Menuクラスを返します。
また、以下のMenuクラスのメソッドは自身のMenuクラスを返します。

  • addItem(caption, functionName)
  • addSeparator()
  • addSubMenu(menu)

ということはつなげて書くことができます。
menu変数も消せるので一石二鳥ですね。

  var ui = SpreadsheetApp.getUi();
  ui.createMenu('追加したメニュー')
    .addItem('アイテム1', 'onClickItem1')
    .addItem('アイテム2', 'onClickItem2')
    .addSeparator()
    .addSubMenu(
      ui.createMenu("サブメニュー")
        .addItem("サブアイテム1", "onClickSubItem1")
    )
    .addToUi();

ドキュメントとフォームの場合

スプレッドシートの場合は、SpreadsheetAppを使いましたが、ドキュメントとフォームはそこを変えるだけです。

種類 メニューの追加 サブメニューの追加 クラス
スプレッドシート SpreadsheetApp
ドキュメント DocumentApp
フォーム(古いバージョン) FormApp
フォーム(新しいバージョン) FormApp

フォーム(新しいバージョン)の注意点

フォームの新しいバージョンだとサブメニューのアイテムが普通のメニュー扱いになります。
※ヘルプ押しても反応がないですし、マウスのフォーカスも効いてないのでここはGoogleの対応漏れだと思われます。

新しいバージョン

image.png

古いバージョン

image.png

その他

階層は結構深くまでいける

7階層ぐらい試しましたが問題なく表示されます。
そんなに作ることはないでしょうが。

onOpen以外でもメニューの追加は可能

OnOpenに書くのが基本ですが、後からGASで追加することも可能です。

メニューは削除できない

一度作ったメニューをGASから削除できません。
もちろんプログラムを修正してファイルを開き直せば更新されます。

古いやり方?

ググるとSpreadsheet#addMenu()を使った古いやり方?も出てきますが、サブメニューが追加できませんしスプレッドシート限定の書き方のようです。
現状は使う必要はないでしょう。(あったら教えてください)

あとがき

GASを使った仕事が増えていきそうな空気を感じるので、自身も勉強しつつ初心者向けの記事を色々書いていければと思います。

howdy39
heyinc corporate engineer
https://howdy39.dev/
storesjp
インターネットビジネスの企画・開発・運営、マーケティング、プロモーション、コンテンツの企画・制作
https://about.stores.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away