2021-02-10に更新

[GAS]SpreadSheetにカスタムメニューを追加して簡単なUIを作る

はじめに

GASでカスタムメニューを追加するスクリプトについてです。

画像のようにスプレッドシートのメニューバー(ツールバー)の一番右に「カスタムメニュー」という項目が新しく追加され、クリックしたときの処理をカスタマイズすることができます。

スクリーンショット 2021-02-09 23.15.06.png

今回カスタムメニューを作って実装する内容は「最終行へアクティブセルを移動する」というシンプルなものです。
例えば僕は特定のPC作業をしたときのログをスプレッドシートを作っているのですが、行数が増えてくると一番下までスクロールして入力するのが面倒になります。クリックするだけで一番下に飛べると便利だなーと思って作ってみました。

全体のスクリプト

まずは今回作成するスクリプトの全体像です。

スプレッドシートのコンテナバインドスクリプトを作り、以下のスクリプトを記述します。
その後、スプレッドシートのページをリロードすると、カスタムメニューが反映されるはずです。

// 現在のスプレッドシート
const SS = SpreadsheetApp.getActiveSpreadsheet();

// ファイルが開いたときに動作する処理
function onOpen() {
  SS.addMenu('カスタムメニュー', [
    {name: '最新行へ', functionName: 'moveToLastRow_'}
  ]);
}

// 最終行にアクティブセルを移動する関数
function moveToLastRow_(){
  const sheet = SS.getActiveSheet();
  const lastRow = sheet.getLastRow();
  const lastRange = sheet.getRange(lastRow + 1, 1);
  SpreadsheetApp.setActiveRange(lastRange);
}

それでは作り方とカスタマイズの仕方を見ていきます。

1. onOpen()関数を作る

まずはonOpen()という名前で、ファイルが開かれたときに動作する関数を作っておきます。

// 現在のスプレッドシート
const SS = SpreadsheetApp.getActiveSpreadsheet();

// ファイルが開いたときに動作する処理
function onOpen() {
    // [TODO] カスタムメニューを追加する処理
}

SpreadSheetオブジェクトの定義も最初にしておきましょう。のちの関数でもこのオブジェクトを使うため、グローバルスコープに記述しています。

このようにonOpen()という名前で関数を作ると、ファイルが開いたときに動作する処理を作ることができます。トリガーを設定する必要などありません。
こういった特定のイベントが起こったときに処理を実行する関数を「イベントハンドラ」と呼ぶそうです。

2. メニューの選択肢を追加する

続いてカスタムメニューをクリックした時の選択肢を追加していきます。
スプレッドシートオブジェクトのaddMenu()メソッドを使い、先ほどのコードに以下のように記述します。

// ファイルが開いたときに動作する処理
function onOpen() {
    // カスタムメニューを追加する処理
  SS.addMenu('カスタムメニュー', [
    {name: '最新行へ', functionName: 'moveToLastRow_'}
  ]);
}

このaddMenu()の第一引数には、メニューバーに表示させる文字列を書きます。
ここでは「カスタムメニュー」としておきましょう。

第二引数には、追加したいメニューをオブジェクトの配列で書いてあげます。
このオブジェクトにnamefunctionNameというプロパティを持たせることで、メニューに表記する文字列と、選択されたときに実行する関数名を指定することができます。

{name: '<メニューに表記する文字列>', functionName: '<関数名>'}

ここで指定する関数は後ほど作るので、現段階では実装予定の名前で大丈夫です。
ここではmoveToLastRow_という関数名を指定しておきました。

注意点としては、関数名には丸かっこをつけずに書くことです。
もし丸カッコをつけてしまうと、その関数が実行されて戻り値がfunctionNameの値に設定されてしまうことになります。今回は関数名を文字列として指定したいので、丸かっこをつけないで文字列リテラルで書くのが正解になります。

このaddMenu()の第二引数に指定するオブジェクトを増やしていくことで、どんどんメニューを追加することもできます(後ほど備考として記載します)。

3. メニューを選択したときに動作する関数を作る

最後に、先ほど関数名に指定したmoveToLastRow_()関数を新たに定義すればOKです。
ここでは現在のシートの「最終行の次の行の1列目」にアクティブセルを移動させています。

// 最終行にアクティブセルを移動する関数
function moveToLastRow_(){
  const sheet = SS.getActiveSheet();
  const lastRow = sheet.getLastRow();
  const lastRange = sheet.getRange(lastRow + 1, 1);
  SpreadsheetApp.setActiveRange(lastRange);
}

アクティブセルの移動先を指定したい場合
もし移動させるセルを変更したい場合は、上のコードの5行目のgetRange()に渡す引数を変えてあげましょう。

const lastRange = sheet.getRange(lastRow + 1, 1);

例えば、現在のシートの「最終行の3列目」などとしたい場合は、次のようにカスタマイズすればOKです。

const lastRange = sheet.getRange(lastRow, 3);

以上で実装は完了です。
スクリプトを保存して、スプレッドシートを開いているページをリロードして少し待つと、カスタムメニューが追加されているかと思います。

備考

カスタムメニューの選択肢を増やしたい場合
onOpen()に書いたSS.addMenu()の中身のオブジェクトを増やしてみましょう。

function onOpen() {
    // カスタムメニューを追加する処理
  SS.addMenu('カスタムメニュー', [
    {name: '最新行へ', functionName: 'moveToLastRow_'},
    {name: 'マスタ転記', functionName: 'copyFromMaster_'},
    {name: 'ほげほげ', functionName: 'hogehoge'}
  ]);
}

配列の要素としてオブジェクトを追加していく形になるので、注意してくださいね。
構文エラー(SyntaxError)が出てしまう場合は、オブジェクトの書き方やカンマの有無など要チェックです。

スプレッドシートを開いたときに最終行に移動させたい場合
今回はカスタムメニューを使って最終行へ移動するスクリプトを書きましたが、ファイルを開いたときにアクティブセルを移動させるやり方でも良いかもしれません。
そうしたい場合は、onOpen()に直接今回のmoveToLastRow_()の中身の処理を書いてあげればOKです。
ただし、セル数にもよりますが起動が重くなってしまうかもしれないので、ご注意ください。

おわりに

カスタムメニューは、スプレッドシートを使っていて「ボタンをクリックしたら一括で処理するようにしたい」というような場合にシンプルなUIを作ることができて、とても便利です。
他にもスプレッドシートの関数で転記できるような作業でも、GASのカスタムメニューを使った実装をすることでシートを軽くしたりもできるので、よく活用しています。

その他の実装アイデア
- カスタムメニューを実行すると、マスターデータから必要な情報を探して一括で転記する()
- シートでメール送信先リストを作り、カスタムメニューをクリックするとメールが一括送信されるようにする

Originally published at massasquash.github.io
ツイッターでシェア
みんなに共有、忘れないようにメモ

Massa

北海道でアプリ制作に取り組んでるノンプログラマな農夫。仕事や日常生活で感じる小さな不便を解消すべく趣味と実益を兼ねて遊んでます ■Python・GAS + LINE bot

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント