【コピペでOK！】スプレッドシートのメニューバーにGAS実行ボタンを追加する方法

f:id:yukibnb:20200108223206p:plain

こんにちは！
Yuki (@yukibnb) です。

今日はスプレッドシートのメニューバーに独自メニューを表示し、その中にGoogle Apps Script (GAS) の実行ボタンを追加する方法を紹介します。

具体的には以下箇所に実行ボタンを追加します。
f:id:yukibnb:20200108105308p:plain

　
追加するとこのようになります。
f:id:yukibnb:20200108105338g:plain

　
[ヘルプ]の右側に独自メニュー[メール通知]が表示され、その中にGAS実行ボタンが複数追加されました。

メニューバーにGASの実行ボタンを追加できると簡単にGASを実行できて便利です。

では早速方法を見ていきましょう！コピペでさくっと実装できます。

まずは名称をチェック
コピペでOK！GAS実行ボタンを追加するコード
解説: onOpenについて
もっと便利にする方法
- 区切り線を追加してもっと見やすく！
- 複数の独自メニューを追加しよう！
まとめ

まずは名称をチェック

f:id:yukibnb:20200108112143p:plain

　
大きく分けて上記2つをメニューバーに追加します。

メニュー名をクリックするとその下にアイテム(実行ボタン)が複数表示されます。

そして実行ボタンをクリックするとGASが実行されるようにします。

コピペでOK！GAS実行ボタンを追加するコード

コードをそのままコピペして使用できます。

コード内の以下3点はみなさんご自身で置き換えてください。

メニュー名
実行ボタン名
関数名

ちなみに関数名とは以下のことです。括弧( )は不要です。
f:id:yukibnb:20200108181248p:plain:w400

function onOpen() {
  var ui = SpreadsheetApp.getUi()
  
  //メニュー名を決定
  var menu = ui.createMenu("メニュー名");
  
  //メニューに実行ボタン名と関数を割り当て: その1
  menu.addItem("実行ボタン名その1","関数名その1");
  
  //メニューに実行ボタン名と関数を割り当て: その2
  menu.addItem("実行ボタン名その2", "関数名その2");
  
  //メニューに実行ボタン名と関数を割り当て: その3
  menu.addItem("実行ボタン名その3", "関数名その3");
  
  //スプレッドシートに反映
  menu.addToUi();
}

　
上記コードを保存してスプレッドシートを更新すると無事独自メニューが追加されます。
f:id:yukibnb:20200108183101g:plain

　
ちなみに上記例では実行ボタンをみっつ作成しましたが、もちろんひとつでもみっつより多くても構いません。

必要な数だけmenu.addItem("実行ボタン名", "関数名");を増減させるだけでOKです。

簡単に独自メニューを作成し、実行ボタンを追加することができましたね！

解説: onOpenについて

f:id:yukibnb:20200108190656p:plain

コード1行目のonOpenはイベントハンドラと言います。

イベントハンドラとは何かイベントが発生した時に自動的に処理を実行するものです。onOpenやonEditなどのイベントハンドラがあります。

イベントハンドラ[onOpen]はOpenという名が付く通り、スプレッドシートを開くと自動的に処理を実行します。

今回は独自メニューを追加する処理を書いたため、スプレッドシートを開くと独自メニューが画面に表示されるようになりました。

f:id:yukibnb:20200108193015p:plain

もっと便利にする方法

区切り線を追加してもっと見やすく！

f:id:yukibnb:20200108214423p:plain

実行ボタンが多い場合上記画像のように区切り線を入れることで見やすくなり、押し間違いのミスも減ります。

区切り線を入れたい場所にaddSeparator()メソッドを記述するだけでOKです。

上記画像のように[実行ボタンその1]と[実行ボタンその2]の間に区切り線を入れたい場合、以下のようなコードになります。

function onOpen() {
  var ui = SpreadsheetApp.getUi()
  
  //メニュー名を決定
  var menu = ui.createMenu("メニュー名");
  
  //メニューに実行ボタン名と関数を割り当て: その1
  menu.addItem("実行ボタン名その1","関数名その1");
  
  //区切り線を追加
  menu.addSeparator(); 　
  
  //メニューに実行ボタン名と関数を割り当て: その2
  menu.addItem("実行ボタン名その2", "関数名その2");
  
  //メニューに実行ボタン名と関数を割り当て: その3
  menu.addItem("実行ボタン名その3", "関数名その3");
  
  //スプレッドシートに反映
  menu.addToUi();
}

　
とっても簡単ですね！

複数の独自メニューを追加しよう！

f:id:yukibnb:20200108215713g:plain

追加できる独自メニューはひとつだけではありません。

上記GIF動画のようにふたつ、もしくはそれ以上の独自メニューを追加することができます。

独自メニューをふたつ追加したい場合、以下のようなコードになります。

function onOpen() {
  var ui = SpreadsheetApp.getUi()
  
  //※※※※※ 独自メニューその1 ※※※※※
  //メニュー名を決定
  var menu = ui.createMenu("メニュー名その1");
  
  //メニューに実行ボタン名と関数を割り当て
  menu.addItem("実行ボタン名その1","関数名その1");
  menu.addItem("実行ボタン名その2", "関数名その2");
  menu.addItem("実行ボタン名その3", "関数名その3");
  
  
  //※※※※※ 独自メニューその2 ※※※※※
  //メニュー名を決定
  var menu02 = ui.createMenu("メニュー名その2");
  
  //メニューに実行ボタン名と関数を割り当て
  menu02.addItem("実行ボタン名その4","関数名その4");
  menu02.addItem("実行ボタン名その5", "関数名その5");
  
  
  //スプレッドシートに反映
  menu.addToUi();
  menu02.addToUi();
}