読者です 読者をやめる 読者になる 読者になる

技術のメモ帳

気が向いたときに書いてます

[GAS]Spreadsheetでモーダルダイアログやサイドバーを表示する

Google Apps Script

今回は、SpreadsheetでUIをカスタマイズする実装をしてみます。

新規のSpreadsheetを作成して、スクリプトエディタで下記コードを貼り付けます。

HTMLをレンダリングする

まず、カスタムメニューからスクリプトを実行できるよう、onOpen()onEdit()でメニューを追加します。

メニューから実行される各関数を用意して、それぞれ実装します。

HtmlServiceクラスでhtmlを作成し、モーダルダイアログの場合は、UiクラスのshowModalDialog()メソッドを、サイドバーの場合は、同クラスのshowSidebar()メソッドを実行します。

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('script')
    .addItem('show modalDialog', 'showModalDialog')
    .addItem('show sideBar', 'showSidebar')
    .addToUi();
}

function onEdit() {
  onOpen();
}

function showModalDialog() {
  var html = HtmlService
               .createHtmlOutput('<p>Hello, Modal dialog!</p>')
               .setSandboxMode(HtmlService.SandboxMode.IFRAME)
               .setWidth(250)
               .setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(html, 'Modal dialog');
}

function showSidebar() {
  var html = HtmlService
               .createHtmlOutput('<p>Hello, Sidebar!</p>')
               .setSandboxMode(HtmlService.SandboxMode.IFRAME)
               .setTitle('Sidebar')
  SpreadsheetApp.getUi().showSidebar(html);
}

それぞれ実行すると、次のように表示されます。

非常に簡単ですね。

HTMLをテンプレートから呼び出す

上記関数では、HTMLを文字列で入力していましたが、扱いにくいため、テンプレートを指定して表示できるよう修正します。

まず、次のHTMLファイルを用意します。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <p>Hello, Modal dialog @ Template</p>
  </body>
</html>

続いて、先ほどの各関数を修正します。

function showModalDialog() {
  var html = HtmlService
               .createTemplateFromFile('ModalDialog')
               .evaluate()
               .setSandboxMode(HtmlService.SandboxMode.IFRAME)
               .setWidth(250)
               .setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(html, 'Modal dialog');
}

function showSidebar() {
  var html = HtmlService
               .createTemplateFromFile('Sidebar')
               .evaluate()
               .setSandboxMode(HtmlService.SandboxMode.IFRAME)
               .setTitle('Sidebar')
  SpreadsheetApp.getUi().showSidebar(html);
}

実行すると、次のように表示されました。

参考リンク

Class Ui  |  Apps Script  |  Google Developers