#やってきたこと
##作ったもの
サービス費用の計算を簡単にしたくて、スプレッドシートにあるデータを用いて計算するアプリを作りました。HTMLに直書きするのではなくスプレッドシートを使用したのは、データの大きさはそれほどではないものの、定期的に計算に使用する値が変更されるためです。
##具体的なデータの流れ
スプレッドシート(９枚)→GAS(doGet())→HTML/javascript
GASからSpreadSheetAppを用いてスプレッドシートにある各データを取得します。その後、HTML側にデータを渡し、サービス費用を計算します。
HTMLからGAS側にデータを戻して計算することもできますが、doPOSTがわからないこと、データ処理自体は複雑ではないことからクライアント側処理としました。
#２つのつまったところ
##1.doGetからHTML側にデータを渡そうとするとうまく渡らない。
###現象
スプレッドシートのシート名をキーとして連想配列を作り、各シートのデータをデータとして持たせました。
これをdoGet()を用いてHTML側に渡そうとすると、"Object object"というよくわからない値を返してしまい、詰まってしまいました。
function doGet() {
let html = HtmlService.createTemplateFromFile("index");
html.priceList=GetSpreadSheet();
return html.evaluate();
}
function GetSpreadSheet() {
let file = SpreadsheetApp.openById("spreadSheetId");
let sheets = file.getSheets();
let res = {};
for (var i = 0; i < sheets.length; i++) {
var sheet = sheets[i];
let last_col = sheet.getLastColumn();
let last_row = sheet.getLastRow();
res[sheet.getSheetName()]=sheet.getRange(1, 1, last_row, last_col).getValues();
}
return res;
}
<html>
(略)
<script>
console.log(<?=priceList?>)
</script>
(略)
</html>
出力
[object Object]
###対処
具体的なエラーがでないため、うまく検索できず…。そんな中、見つけたのが下の記事でした。
GoogleAppsScriptでサーバー側からHTML側に値が上手く渡らない
内容は、"渡せるものと渡せないものがあるよ、渡せないときはJSON使おうね。"というもの。JSONを使うと解決できました。ちなみに初JSONでした…。
(略)
}
return JSON.stringify(res)
}
<script>
console.log(JSON.parse(<?=priceList?>))
</script>
##2.script.htmlでスクリプトファイルを分けると読み込めない。
###現象
googleAppsScript調べていると、出てくるのが"cssとscriptを分けて書くとわかりやすいよ"っていう記事。cssは気持ち程度に分けていたんですが、scriptタグの中身が増えすぎたので分けてみたところ、doGet()で渡したデータが読み込めず、エラー。
function doGet() {
let html = HtmlService.createTemplateFromFile("index");
html.priceList=データ;
return html.evaluate();
}
<html>
<head>
<base target="_top">
<?!= HtmlService.createHtmlOutputFromFile('script').getContent(); ?>
</head>
(略)
</html>
<script>
console.log(<?=priceList?>)
</script>
作った時は、doGetからindex.htmlを読み込み、index.htmlからscript.htmlを読み込むため、データは当然読み込めるんだろうと思っていたんですが、
Uncaught SyntaxError: Unexpected token '<'
とエラーする結果に。
###対処
これについては、正しい対処かわかりませんが、scriptタグの分割を諦めました。当初、ほかの場所も変更していたので、原因探索に時間がかかりましたが、少しずつ試すことで発覚しました。
#まとめ
今後は、２つのエラー共に、もう少しどのような条件でエラーが発生するのか、調べてみたいと思います。