GAS側からスプレッドシートのサイドバーにデータを送る方法

2019/07/23

以前、Google Apps Scriptでスプレッドシート上にサイドバーを出す方法について書きました。

Google Apps Script（GAS）を使って、スプレッドシート上にサイドバーを出す方法です。サイドバーはスプレッドシートの右側に現れるダイアログで、グラフの書式設定とかでよく使われるものです。GASでこのサイドバーを出す方法について書き留めます。今回は下図のサイドバーが現れるところまでです。まずはサイドバーのデザインをHTMLで作るスプレッドシートからスクリプトエディタを立ち上げた上でHTMLファイルを作成します。「ファイル」−「新規作成」−「HTMLファイル」を選択します。HTMLファイル名を聞いてくるので任意のファイル...

今回はGoogle Apps Script側からデータをサイドバーに送り、それをTextAreaに表示するという方法について書きます。gsファイルとhtmlファイル間のデータのやり取りがポイントになります。

[ad#top-1]

1 概要
2 gsファイル側のソースコード
3 index.html側のソースコード
4 実行結果

概要

ざっくりとした概要をまずは説明します。

最初にgsファイルからサイドバーを出すよう指示をします。サイドバーはindex.htmlで構成されています。サイドバーが現れたらJavascriptのonloadイベントでgsファイル側の関数getText()を呼び出し、そこで返されたデータをonSuccess関数でキャッチしてTextAreaに表示するという流れです。

gsファイル側のソースコード

以下がgsファイル側のソースコードです。サイドバーを表示するshowSideBar()関数と単純に"Hello world"という値を返すgetText()関数の２つで構成されています。

function showSideBar() {
  var ui = SpreadsheetApp.getUi();
  var htmlOutput = HtmlService.createHtmlOutputFromFile('index')
                     .setTitle("SideBar Test");
  ui.showSidebar(htmlOutput);
}

function getText() {
  return "Hello world";
}

index.html側のソースコード

こちらがindex.htmlです。onloadイベントでgsファイルのgetText関数にアクセスしていることがわかるかと思います。onSuccessというコールバック関数でデータを受け取ってTextAreaに表示させています。

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <textarea id="text" style="font-size:18pt;"></textarea>
</body>
<script>
  window.onload = function() {
    google.script.run
      .withFailureHandler(onFailure)
      .withSuccessHandler(onSuccess)
      .getText(); //gsファイルの関数にアクセス
  }

  function onSuccess(result) {
    document.getElementById("text").value = result;
  }

  function onFailure(e) {
    document.getElementById("text").value = "Error";
  }
</script>
</html>

実行結果

こちらが実行結果です。gsファイルから送ったデータがちゃんとTextAreaに表示されました。

- Google Apps Script, Google Dirve