LANG SELRCT

コードを書く場所についてはこちら

2019年1月3日木曜日

Webアプリにparameterを渡してWebアプリ内のデータを返したい(別のhtmlで返す)


今回は

こういう配列が.html内にあって
  var temparature_array = [
    "あつい",
    "さむい",
    "ちょうどいい"
  ];


WebアプリのURL?text=temparature_array
を開いたとき、このように返したい



Webアプリにparameterを渡してWebアプリ内のデータを返したい(CSVファイルで返す)

ではCSVで返しましたが
今回はHTMLで画面に返してみます



コード.gs
function doGet(e) {
  var param = e.parameter;
  var keys = Object.keys(param);
  if(keys.length) {
    return HtmlService.createTemplateFromFile('param').evaluate()
    .append('<label id="target">' + param['text'] + '</label><br>' 
            + '<textarea id="ta" style="width:240px;height:360px;"></textarea>');
  } else {
    return HtmlService.createTemplateFromFile('index').evaluate();
  }
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
意訳
この機能がやること
パラメータを取得する
パラメータのkeyを取得する
paramにtextが存在していたら
param.htmlにlabelとtextareaを追加して返す


keyが存在してなければindex.htmlを返す
index.htmlを返す



この機能がやること
受け取ったfilenameの内容をHTMLで返す



デフォルトのindex.htmlはテキストエリアを表示するだけの簡単なもの

index.html
<!DOCTYPE html>
<html>
  <body>
    <textarea></textarea>
  </body>
</html>
意訳
 


テキストエリア




オブジェクトのセットを別の.htmlで用意する
(index.htmlに入れてもよいですがコードが見にくくなるのでここでは分けています)

obj.html
<script>
/************************************
e.parameterのkeyの値に応じて配列を返すためのオブジェクト
返したいデータのセットをここに書く
************************************/
function returnObj() {
  var obj = {
    "weather_array": returnWeatherArray(),
    "temparature_array": returnTemparatureArray()
  }
  return obj;
}

/************************************
返す配列を用意しておく
************************************/
function returnWeatherArray() {
  var weather_array = [
    "はれ",
    "あめ",
    "くもり",
    "ゆき"
  ];
  return weather_array;
}

function returnTemparatureArray() {
  var temparature_array = [
    "あつい",
    "さむい",
    "ちょうどいい"
  ];
  return temparature_array;
}
</script>
意訳
 




この機能がやること
以下のオブジェクトを作って
weather_arrayはreturnWeatherArray()
temparature_arrayはreturnTemparatureArray()

返す
}




この機能がやること
以下の要素を持つ配列を作って
    "はれ",
    "あめ",
    "くもり",
    "ゆき"
  
返す


この機能がやること
以下の要素を持つ配列を作って
    "あつい",
    "さむい",
    "ちょうどいい"
  ];
返す




パラメータのkeyが存在していたときに開くparam.html

param.html
<!DOCTYPE html>
<html>
  <body>
    <script>
    document.addEventListener('DOMContentLoaded', getData)
    
    function getData() {
      var target = document.getElementById('target').textContent;
      var array = returnObj()[target];
      var data = array.toString().replace(/,/g, '\n');
      setTaData(data);
    }

  /************************************
  .gsでappendしたテキストエリアに値を入れる
  ************************************/
    function setTaData(data) {
      document.getElementById('ta').value = data;
    }
    
    </script>
    <?!= include('obj'); ?>
  </body>
</html>
意訳
 



起動時にgetDataを実行する
    
この機能がやること
targetの内容を取得する(コード.gsの中で作ったlabel要素)
obj.htmlのreturnObj()からtargetの項目を返す
カンマを改行に変換する
setDataに渡す





この機能がやること
受け取ったdataをtaに入れる

    

obj.htmlを読み込む





実行結果

WebアプリのURLを開くと
パラメータがない場合はimdex.htmlが開きます

WebアプリのURL?text=temparature_arrayの場合は
このように配列のデータが返ってきます