More than 5 years have passed since last update.

GASでHTMLサービスを使ってサーバとのやり取りをDOMに反映させる

Posted at 2013-06-10

コード.gs

function doGet(e) {
  var tgt_page = "index";
  Logger.log(e.parameters);
  if (typeof e.parameters.page != 'undefined') {
    tgt_page = e.parameters.page[0];
  }
  var app = HtmlService.createTemplateFromFile(tgt_page).evaluate();
  app.setSandboxMode(HtmlService.SandboxMode.NATIVE);
  return app;
}


function sendSampleText(fromWeb){
  Logger.log( fromWeb );
  return 'hoge from gas : "' + fromWeb + '"' 
}

index.html

<html>
  <title>test page</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
  $(function() {
  
  $("#tags").on('change', function(val){
  $("#result").val($( "#tags" ).val());
  });
  
  $("#getfromgas").on("click",function(){
  var send_text = $( "#tags" ).val();
  var src_text = google.script.run.withSuccessHandler(writeDiv).sendSampleText(send_text);
  });
  
  function writeDiv(src_text){
  $("#fromGAS").html( src_text );
  }
  
  
  });
  </script>
  <body>
  <div class="ui-widget">
  <label for="tags">Src: </label>
  <input id="tags" />
  <hr>
  <label for="tags">JS: </label>
  <input type="text" id="result" />
  <hr>
  <button id='getfromgas'>get data from gas</button>
  <br/>
  <label for="tags">fromGas: </label>
  <div id="fromGAS">aa</div>
</div>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up