本記事では、GASでスプレッドシートにカスタムメニューを追加する方法を解説しています。
スプレッドシートでGASを実行する際、わざわざスクリプトエディタを開いて実行することはほとんどありません。
カスタムメニューを追加しておくことで手軽にGASを実行できるので、ぜひ参考にしてみてください。
今回のサンプル動画
GASでスプレッドシートにカスタムメニューを追加する
スプレッドシートにカスタムメニューを追加するには、Uiクラスを使用します。
function onOpen() {
const ui = SpreadsheetApp.getUi();
const menu = ui.createMenu("カスタムメニュー");
menu.addItem("メニュー1","menu1");
menu.addItem("メニュー2","menu2");
menu.addToUi();
}
2行目で生成したUiオブジェクトに対して、3行目のcreateMenuでMenuオブジェクトを生成して変数menuに格納しています。
このMenuオブジェクト（変数menu）に、addItemメソッドを使うことでメニューの項目を追加することができます。addItemメソッドは以下のように指定しましょう。
Menuオブジェクト.addItem(“表示するメニュー名”,”実行する関数名”);
8行目のaddToUiメソッドを忘れると反映されないので注意してください。
カスタムメニューを追加するための関数名はonOpen
スプレッドシートにカスタムメニューを追加するための関数は、基本的にonOpenを指定します。
function onOpen() {
// スプレッドシート起動で実行
}onOpenはシンプルトリガーと呼ばれ、トリガーの設定不要でスプレッドシートを開くと自動で実行される関数です。このシンプルトリガーにより、スプレッドシートを開いたらカスタムメニューも表示されます。
メニューの間に区切り線を追加する
Uiクラスで追加したカスタムメニューは、メニューとメニューの間に区切り線を入れることも可能です。
function onOpen() {
const ui = SpreadsheetApp.getUi();
const menu = ui.createMenu("カスタムメニュー");
menu.addItem("メニュー1","menu1");
menu.addSeparator();
menu.addItem("メニュー2","menu2");
menu.addToUi();
}
区切り線を入れたい箇所に、addSeparatorメソッドを指定します。（6行目）
サブメニューで階層構造にする
カスタムメニューは、addSubMenuメソッドを使うことで階層構造にすることができます。
function onOpen() {
const ui = SpreadsheetApp.getUi();
const menu = ui.createMenu("カスタムメニュー");
menu.addItem("メニュー1","menu1");
menu.addSeparator();
menu.addItem("メニュー2","menu2");
menu.addSeparator();
menu.addSubMenu(
ui.createMenu("メニュー3")
.addItem("メニュー3-1","menu3_1")
.addItem("メニュー3-2","menu3_2")
);
menu.addToUi();
}
addSubMenuメソッドの引数で、createMenuで親メニューに表示する名前を指定し、addItemで子メニューを追加していきます。
複数のメニューを追加する
最後に複数のメニューを追加するスクリプトです。
function onOpen() {
const ui = SpreadsheetApp.getUi();
/**
* 1つ目のカスタムメニュー
*/
const menu = ui.createMenu("カスタムメニュー");
menu.addItem("メニュー1","menu1");
menu.addSeparator();
menu.addItem("メニュー2","menu2");
menu.addSeparator();
menu.addSubMenu(
ui.createMenu("メニュー3")
.addItem("メニュー3-1","menu3_1")
.addItem("メニュー3-2","menu3_2")
);
menu.addToUi();
/**
* 2つ目のカスタムメニュー
*/
const menu2 = ui.createMenu("カスタムメニュー2");
menu2.addItem("メニュー","menu1");
menu2.addSeparator();
menu2.addItem("メニュー2","menu2");
menu2.addToUi();
}
カスタムメニューを複数追加するには、createMenuメソッドでMenuオブジェクトを個数分用意する必要があります。
それぞれのメニューの最後には、addToUiメソッドで反映するのを忘れないようにしましょう。
スクリプトを見やすくするテクニック
- メニューを追加する
addItem - 区切り線を追加する
addSeparator - サブメニューを追加する
addSubMenu - 反映する
addToUi
上記メソッドは、全てcreateMenuメソッドで生成したMenuオブジェクトに対して指定しています。そのため、「.（ピリオド）」を使えば繋げて書くことも可能です。
function onOpen() {
const ui = SpreadsheetApp.getUi();
/**
* 1つ目のカスタムメニュー
*/
const menu = ui.createMenu("カスタムメニュー")
.addItem("メニュー1","menu1")
.addSeparator()
.addItem("メニュー2","menu2")
.addSeparator()
.addSubMenu(
ui.createMenu("メニュー3")
.addItem("メニュー3-1","menu3_1")
.addItem("メニュー3-2","menu3_2")
)
.addToUi();
/**
* 2つ目のカスタムメニュー
*/
const menu2 = ui.createMenu("カスタムメニュー2")
.addItem("メニュー","menu1")
.addSeparator()
.addItem("メニュー2","menu2")
.addToUi();
}こちらの方がカスタムメニューの塊が見やすく、どのメニューの項目なのかも把握しやすくなります。
GASでカスタムメニューを追加するサンプル動画のコード全体像
最後に、記事冒頭のサンプル動画のコード全体像を掲載しておきます。
function onOpen() {
const ui = SpreadsheetApp.getUi();
/**
* 1つ目のカスタムメニュー
*/
const menu = ui.createMenu("カスタムメニュー")
.addItem("メニュー1","menu1")
.addSeparator()
.addItem("メニュー2","menu2")
.addSeparator()
.addSubMenu(
ui.createMenu("メニュー3")
.addItem("メニュー3-1","menu3_1")
.addItem("メニュー3-2","menu3_2")
)
.addToUi();
/**
* 2つ目のカスタムメニュー
*/
const menu2 = ui.createMenu("カスタムメニュー2")
.addItem("メニュー4","menu4")
.addSeparator()
.addItem("メニュー5","menu5")
.addToUi();
}
function menu1() {
Browser.msgBox("メニュー1を実行");
}
function menu2() {
Browser.msgBox("メニュー2を実行");
}
function menu3_1() {
Browser.msgBox("メニュー3-1を実行");
}
function menu3_2() {
Browser.msgBox("メニュー3-2を実行");
}
function menu4() {
Browser.msgBox("メニュー4を実行");
}
function menu5() {
Browser.msgBox("メニュー5を実行");
}スプレッドシートにカスタムメニューとして追加しておけば、手軽にスクリプトを実行できるのでぜひ活用してみてください。
