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

2016/05/02 2021/03/07

■2021/3/7追記■
この記事の内容は古く現在はうまく動作しません。

以下の記事を参照ください。

5年前にGASからHTMLへのデータの受け渡し方法について書きましたが、どうやら仕様が変わっていたらしくうまく動作できませんでした。改めて現在動作可能な正しい手順を書こうと思います。いつの間にすごくシンプルな仕組みになっていました。いつ仕様が変わったのでしょうか？ HTMLに<?= 変数名 ?>を埋め込むGASからのデータをHTML側で受け取る場合は、＜?=変数名 ?＞というタグを埋め込みます。かつてはHTMLに埋め込んだJavascriptで受け取っていたことを考えると非常にシンプルになりました。以下が例です。変数名をmessa...

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

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

Google Apps ScriptでWebページが作れる！

Webページを作ろうとすると、Webサーバーを用意しなければなりません。安いところはありますが、それでもお金がかかります。ところが、Google Drive上でGoogle Apps Scriptを使ってWebページを作れます。これにはびっくり。まず、Google Drive上で、「新規作成」から「Google Apps Script」を選択します。プロジェクト名は「WebTest」としました。次に、メニューの「ファイル」から「新規作成」－「HTMLファイル」を選びます。下のようなウィンドウが現れるので、ファイル名を入力します。今回は「index」とし...

[ad#top-1]

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

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

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

<!– ① –>
<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内に③を記述します。

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

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

[ad#ad-1]

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

共有:

関連