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

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

Google Apps Script: html-gsファイル間のデータ受け渡し方法

      2018/08/18

前回、Google Apps ScriptでWebページの作り方を簡単に紹介しました。

広告

 

前回は単純にindex.htmlページを表示させる方法だけでしたが、実はGoogle Apps Script上のWebページでは、JavaScriptファイル(.js)を外部ファイルにすることができません。html内の<script> – </script>内に記述するしかないのですが、せっかく.gsファイルがあるので、ちょっとしたテクニックを使って、JavaScriptを.gsファイルに記述してコールする方法を紹介します。

ベースは前回のコードです。基本的にそこに書き加えていきます。

まず、index.htmlに①と②のコードを記述します。

2

<!– ① –>
<script>
function getdata(){
   google.script.run.withSuccessHandler(result).getData();
   function result(data){
      document.getElementById(“TEST”).innerHTML = data;
   }
}
</script>
 

 

<!-- ② -->
<hr />
<div id="TEST"></div>
<button onclick="getdata()">読込</button>
 

 

次にコード.gs内に③を記述します。

3

// ③
function getData(){
  return "<h2>OK</h2>";
}
 

 

実際にWebアプリとしてブラウザ上で開くと、「読込」ボタンを押すと「OK」が現れます。これで、getData関数の返り値をうまく受け取れたことが確認できました。

4

ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - Google Apps Script, Google Dirve