htmlとgoogle apps script間の値の引渡しについて

###前提・実現したいこと
GAS初心者です。
html側とGAS側での値の引渡しについて知りたいです。

Google Apps Scriptで作成したindex.htmlにセレクトボックスを作成しました。
県名を選択したときに、その値をGAS側の「SHEET_NAME」という変数に入れて使いたいのですが、どのようにして値を取得して代入するのかが分かりません。
（できればコードをどのように書くのか知りたいです）
そもそも、html⇒GAS、GAS⇒htmlの値の引渡しというものは可能なのでしょうか。

アドバイス頂ければ幸いです。

###index.html

<form name="kenform">
 <select name="ken" onChange="kakunin()">
   <option value="県名1">県名1</option>
    <option value="県名2">県名2</option>
    <option value="県名3">県名3</option>
 </select>
 </form>

###コード.gs

function doGet(e) {
  var tpl = HtmlService.createTemplateFromFile('index');
  return tpl.evaluate();

function test() {
 var SPREAD_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
 var SHEET_NAME =      ←index.htmlで選択した値をここに使いたい
 ss = SpreadsheetApp.openById(SPREAD_ID);
 sheet = ss.getSheetByName(SHEET_NAME);

 ～

行動規範の内容に同意します

回答4件

随分前の質問ですが、私も同じところでつまりここにたどり着きました。
初心者ながら解決しましたので、ご参考までに。

〇GASコード
function doGet(e) {
var tpl = HtmlService.createTemplateFromFile('index');
var ken = e.parameter.ken; //?ken=県名の形でURLに後ろついたパラメータのkenを受け取る。
tpl.ken = ken; //関数kenをindexhtmlに渡す。
return tpl.evaluate();
}

〇GAS(index.html)

<? function test() { var SPREAD_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; var SHEET_NAME = ken; ss = SpreadsheetApp.openById(SPREAD_ID); sheet = ss.getSheetByName(SHEET_NAME); ~ } ?>

html側に送るにはそう難しくありません。
var ken = e.parameter.ken;
で受け取って、
tpl.ken = ken;
で渡せばいいです。

html内のJavascriptにも
var ken = <?=ken?>;
で受取って使えます。

私は、gas → js の受け渡しで配列は受け渡せないのが困りましたが
JSON.stringify()
JSON.parse()
で解決。

これができると、htmlを動的に制御できるので一気に幅が広がりました。

投稿2017/04/20 00:46

k-na

総合スコア33

GAS⇒HTML間の変数の受け渡しをする方法

GAS
1//コード.gs
2function doGet() {
3  var template = HtmlService.createTemplateFromFile('index');
4  //index.htmlにテンプレートを作成
5  tempalate.text = 'あいうえおまるた';
6  //テンプレートに変数textを作成
7  return template.evaluate();
8  //index.htmlをwebページに表示する
9}

HTML
1<!--index.html-->
2<!DOCTYPE html>
3<html>
4  <head>
5    <base target="_top">
6  </head>
7  <body>
8    <?=text?>
9  </body>
10</html>
11```html側に`<?=変数名?>`と書けば設定した変数を取得できます

投稿2020/11/09 06:14

aiueomaruta

総合スコア27

御覧になられているかもしれませんが、下記ページ内容で入出力が確認できると思います。

【Google Apps Scriptで入力補完とプルダウンを作る【詳細版】 | eye4brain】
http://eye4brain.sakura.ne.jp/wp/blog/2016/01/14/google-apps-scriptで入力補完とプルダウンを作る【詳細版】/

追記：

【Class google.script.run (Client-side API) | Apps Script | Google Developers】
https://developers.google.com/apps-script/guides/html/reference/run

【Webアプリケーション開発とHtml Service(7/7):Google Apps Scriptプログラミング [中級編]】
http://libro.tuyano.com/index3?id=926001&page=7

【[GAS] Google Apps Script のHtmlServiceまとめ - dackdive's blog】
http://dackdive.hateblo.jp/entry/2015/02/01/010540

投稿2016/08/03 09:28

編集2016/08/06 16:11

kei344

総合スコア69625

iro_iro

2016/08/04 00:45

ありがとうございます。そちらのページを参照してみます。

iro_iro

2016/08/06 15:54

すみません、やはり分かりませんでした。スプレッドシートの値をhtml側に渡すのではなく、htmlで取得した値をGASで使用したいのですが、コードの書き方が分かりません。

行動規範の内容に同意します

そもそも、html⇒GAS、GAS⇒htmlの値の引渡しというものは可能なのでしょうか。

下記のgoogleの公式サイトによると、外部からGASを実行出来る様になったそうです。
公式Blogサイト
http://googleappsdeveloper.blogspot.jp/2015/09/run-apps-script-code-from-anywhere.html

おおまかに
・作成したスクリプトをExecution APIとして登録（結構面倒です）して外部からのアクセスを可能にする。
・外部プログラムはREST方式でデータの交換を行う。POSTで出来るそうです。
値の引渡しはPOSTで渡せる様です。日本語名称は？？
・htmlだけでは、難しいかも(受信で）、起動は出来るはずREST/POSTなので

下記のサイトにサンプルがありますので、がんばって作成してみてください。私はAPIの登録中で・・・・

Google公式サイト
https://developers.google.com/apps-script/guides/rest/

投稿2016/08/03 01:59