非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

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

   

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

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

[ad#top-1]

概要

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

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

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

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

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