今回は
こういう配列が.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の場合は
このように配列のデータが返ってきます