【GAS】HTMLから値をGASに受け取る

pyonnyan

4年前

前回、前々回とGASやスプレッドシートから値を受け取る実験をしてきました。今回は、逆にGASに送られてきた値を処理していきたいと思います。

HTMLから値をGASに受け取る

今回はHTMLのフォームに入力された文字をGASで受け取って、HTMLに再出力するものを作ります。

フォームの作成

では、フォームと受け取った文字を表示する場所を作ります。受け取る文字列はmessage2に入れます。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div>
      <?= message1 ?><br>
    </div>
    <?
     var gmessage = getMessage();
     output.append('<p>' + gmessage +'</p>');
    ?>
    <form method="post" action="https://script.google.com/macros/s/××××××/exec">メッセージ：<input type="text" name="postMessage"><input type="submit" value="送信">
    </form>
    <div>
      message:<?= message2 ?><br>
    </div>
  </body>
</html>

フォーム内のactionのURLは「デプロイを管理」からWEBアプリのURLを持ってきて入れてください。

GAS

doGetに加筆します。

function doGet(){
  var htmlTemplate = HtmlService.createTemplateFromFile('index');
  htmlTemplate.message1 = 'HelloWorld';
  htmlTemplate.message2 = '';
  return htmlTemplate.evaluate();
}

送信した後の処理について追記します。

function doPost(e){
   var htmlTemplate = HtmlService.createTemplateFromFile('index');
   htmlTemplate.message1 = 'HelloWorld';
   htmlTemplate.message2 = e.parameter.postMessage;
   return htmlTemplate.evaluate();
}

送信ボタンを押したときにHTMLを表示するので、doGetと同じ処理も含まれています。