2018年9月15日土曜日

Google Apps Script(GAS)上でPOSTメソッドの値をjavascriptから扱う方法

Google Apps Script(以下GASと略す)ではformによる、ユーザからの入力をdoPostメソッドで扱える。
このユーザからの入力値をJquery等のjavascripで扱いたい。
GAS側で出来る事が多く、また関連する情報の多くがjavascriptでの扱いについては触れていない。
この投稿ではdoPostからの入力値をjavascriptで扱う為の一連の情報をまとめて扱う。
GAS側での処理で完結してしまう情報は多いが、javascriptで扱う記事が少ないので投稿した次第。
GAS上のhtml内でjavascripからPOSTのデータを扱う事で、Bootstrap等と併用が可能となり表現が多彩となる。

およその流れ
1) doGet側で通常のwebページ作成。ここにformを設定する。
2) doGetから送られたPOSTデータをdoPostで受けとる。
3) doPostから新たなwebページを表示する。
 この時の変数をjavascripから参照する。

やや冗長に記載したが、要点としては僅かなので、以降実際のページを記載する。
全てを記載せず、説明を簡単にすませる目的で部分的な記載とした。

1) doGet側で通常のwebページ作成。
任意のhtmlページでformを書く。
actionで目的のdoPostでURLをGASのURL(execで終わるもの)を指定する。
通常のwebページと違い気をつけたい点は、targetの記載がないと動作しない様だ。
以下ではnameで受け取る事とした。
<form method="post" action=“【https://script.google.com/で始まるGASのURL】” target="_blank">
    <p>
      <label>名前を入力してください:<br><input type="text" name="name"></label>
    </p>
    <br>
    <p>
      <input type="submit" value="送信">
    </p>
</form>
2) doGetから送られたPOSTデータをdoPostで受けとる。
function doPost(e){
  //データ取得
     var title = e.parameter.name;
     var temp = HtmlService.createTemplateFromFile('results');
     temp.data = title;
     return temp.evaluate().setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
3) doPostから新たなwebページを表示する
results.htmlでは
<?= data > と記載する事で表示できる。
javascriptで参照したい場合は

<script>
var inputdata = String("<?= data ?>");
</script>
となる。
もちろんタグ内で他のスクリプトと併用できる。

0 件のコメント: