Zenn
⭐

Google Apps Script でスプレッドシードの超シンプルなアドオンを作る

2023/10/29に公開
GAS
Google Sheets
#
アドオン
tech

はじめに

Google Apps Script でスプレッドシートのアドオンを使うと大変便利なのですが、使っている人を全然みないので、やりかたの解説記事を書こうかなーと思ったのが発端です。

本記事では第一弾として超シンプルなスプレッドシートのアドオンを作ります。
第二弾の記事でドメイン内に一括配布する方記事を書こうと思います。

アドオンの作成と実行

サンプルとしてスプレッドシートのサイドバーにアドオン画面を表示、入力した文字列をスプレッドシート上の選択セルに入力するアドオンを作ります。

スクリプトエディタ上で2ファイルを作成

適当なスプレッドシートを一つ新規作成して下記の2ファイルを作ってください。

  • Code.gs
  • Sidebar.html

こんな感じになります。

Code.gs
function onOpen(e) {
  SpreadsheetApp
  .getUi()
  .createAddonMenu()
  .addItem('サイドバーを表示する', 'showSidebar')
  .addToUi();
}

function showSidebar() {
  const sidebarUi = HtmlService
  .createHtmlOutputFromFile('Sidebar')
  .setTitle('選択したセルにhelloを入力するアドオン');
  
  SpreadsheetApp
  .getUi()
  .showSidebar(sidebarUi);
}

function execute(message) {
  const range = SpreadsheetApp.getActiveSheet().getActiveRange()
  range.setValue(message);
}
Sidebar.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div>
      <input type="text" id="message" value="hello" />
      <button onClick="convert()">実行</button>
    </div>

    <script>
    function convert() {
      const message = document.getElementById('message');
      console.log(message.value);
      google.script.run.execute(message.value);
    }
    </script>
  </body>
</html>

アドオンを実行する

拡張機能 > アドオン名 > サイドバーを表示する
でサイドバーのアドオン画面を表示できます。

実行イメージはこうです。
※ 初回実行時はスクリプトへの認可が必要になります。

解説

アドオンのインストール

アドオン用のコードが実行されれば勝手にアドオンのインストール（≒GASの認可）が走ります。

今回のケースだとonOpenでファイルオープンをトリガーにして、アドオンメニューをつくるcreateAddonMenuを呼び出しています。
そのため、「サイドバーを表示する」のボタンを押した際にGASの認可（≒アドオンのインストール）が走ります。

Code.gs
function onOpen(e) {
  SpreadsheetApp
  .getUi()
  .createAddonMenu()
  .addItem('サイドバーを表示する', 'showSidebar')
  .addToUi();
}

インストール直前までの動きはこうなります。

認可すればインストールされます。

サイドバー（HTML）を表示する方法

これはシンプルです。
Sidebar.html のようなhtmlファイルを定義しておき、HtmlService.createHtmlOutputFromFileでファイル名を指定するだけです。

Code.gs
...
  .addItem('サイドバーを表示する', 'showSidebar')
...

function showSidebar() {
  const sidebarUi = HtmlService
  .createHtmlOutputFromFile('Sidebar')
  .setTitle('選択したセルにhelloを入力するアドオン');
  
  SpreadsheetApp
  .getUi()
  .showSidebar(sidebarUi);
}

Tips

「わざわざメニューから実行せずに、onOpenで直接サイドバー表示しちゃえばいいじゃん」と思うかも知れませんが、これはできません。

下記のようなコードのことですね。

Code.gs
function onOpen() {
  const sidebarUi = HtmlService
  .createHtmlOutputFromFile('Sidebar')
  .setTitle('選択したセルにhelloを入力するアドオン');
  
  SpreadsheetApp
  .getUi()
  .showSidebar(sidebarUi);
}

onOpenはシンプルトリガーなのでトリガーを個別に設定する必要がない分、制限が掛かっているためです。
詳細は下記ページのシンプルトリガーの制限を参照ください。
https://developers.google.com/apps-script/guides/triggers?hl=ja

サイドバー（HTML）とGASの連携

google.script.run.execute がGAS上のexcute関数を呼ぶコードになります。
google.script.run.hoge ならGAS上のhoge関数を呼ぶコードになる、ということですね。

Sidebar.html
...
google.script.run.execute(message.value);
...

渡した引数もそのまま渡されるので、messageで受け取ってアクティブなセルにそのまま書き込む、というコードになっています。

Code.gs
...
function execute(message) {
  const range = SpreadsheetApp.getActiveSheet().getActiveRange()
  range.setValue(message);
}
...

Tips

google.script.run はGASの処理成功時の withSuccessHandler 失敗時の withFailureHandler と併用が可能なので、GASからデータを受け取ってほにゃらら、みたいなことをしたい場合は、これらのメソッドとセットで利用します。

詳細はドキュメントを参照ください。
https://developers.google.com/apps-script/guides/html/reference/run

Discussion