グレンジ Advent Calendar 2021 14日目の記事を担当しました、k_kimura_01 と申します。
グレンジでサーバサイドエンジニアをしております。
Google Apps Scriptを使って簡単なWebアプリ作りたいなと思い、スプレッドシートやHTMLとのデータ受け渡し方法を軽くまとめました。
取得やセットの仕方は他にも色々あるようなので以下も参考に。
使用したスプレッドシートの設定値
GAS ← スプレッドシート
コード.gs
/**
* SpreadSheetから値を取得する
*/
function getSpreadSheetData() {
// 指定IDのスプレッドシート取得
var spreadSheet = SpreadsheetApp.openById('xxxxx');
// 指定の名前のシート取得
var targetSheet = spreadSheet.getSheetByName('xxxxx');
// getRange(row, column) A2を取得
var range1 = targetSheet.getRange(2, 1);
// セルの値を取得 結果：aaa
Logger.log(range1.getValue());
// getRange(row, column, numRows) A2:A5を取得
range1 = targetSheet.getRange(2, 1, 4);
// セルの値を配列で取得 結果：[[aaa], [bbb], [ccc], [ddd]]
Logger.log(range1.getValues());
// getRange(row, column, numRows, numColumns) B2:C4を取得
range1 = targetSheet.getRange(2, 2, 3, 2);
// セルの値を配列で取得 結果：[[eee, hoge1], [fff, hoge2], [ggg, hoge3]]
Logger.log(range1.getValues());
}
GAS → スプレッドシート
コード.gs
/**
* SpreadSheetへ値をセットする
*/
function setSpreadSheetData() {
// 指定IDのスプレッドシート取得
var spreadSheet = SpreadsheetApp.openById('xxxxx');
// 指定の名前のシート取得
var targetSheet = spreadSheet.getSheetByName('xxxxx');
// getRange(row, column) E2を取得
var range1 = targetSheet.getRange(2, 5);
// 取得したセルに値をセット
range1.setValue('abc');
// getRange(row, column, numRows) F2:F5を取得
range1 = targetSheet.getRange(2, 6, 4);
// 取得した範囲のセルに値を配列でセット
range1.setValues([['10'], ['20'], ['30'], ['40']]);
}
GASからスプレッドシートへ値をセットした結果
E2とF2:F5に値がセットされている。
HTMLの設定値
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div>
messageA:<?= messageA ?><br>
messageB:<?= messageB ?><br>
</div>
<?
var message = getMessage();
output.append('<p>getMessage:' + message + '</p>');
?>
<form method="post" action="https://script.google.com/xxxxx/exec">
メッセージ：<input type="text" name="postMessage">
<input type="submit" value="送信">
</form>
<div>
messageC:<?= messageC ?><br>
</div>
</body>
</html>
GAS → HTML（GETリクエスト）
コード.gs
/**
* GETリクエスト
*/
function doGet() {
var htmlTemplate = HtmlService.createTemplateFromFile('index');
// html側で参照する変数に値をセット
htmlTemplate.messageA = 'hoge';
htmlTemplate.messageB = 'fuga';
htmlTemplate.messageC = '';
return htmlTemplate.evaluate();
}
HTML側でmessageA、messageB、messageCを変数として参照できる。
例：
messageA:<?= messageA ?><br>
GAS → HTML（メソッドを用意）
コード.gs
/**
* messageを取得する（HTMLから呼び出しする）
*/
function getMessage() {
var message = 'piyo';
return message;
}
HTML側でgetMessageメソッドを使って値を取得できる。
例：
<?
var message = getMessage();
output.append('<p>getMessage:' + message + '</p>');
?>
HTML側の取得結果（GETリクエスト、メソッド）
GAS ← HTML（POSTリクエスト）
コード.gs
/**
* POSTリクエスト
*/
function doPost(e) {
var htmlTemplate = HtmlService.createTemplateFromFile('index');
htmlTemplate.messageA = 'hoge';
htmlTemplate.messageB = 'fuga';
// POSTで受け取ったpostMessageの値をセット
htmlTemplate.messageC = e.parameter.postMessage;
return htmlTemplate.evaluate();
}
HTML側の取得結果（POSTリクエストされた値）
メッセージのテキストボックスに「foo」と入力して「送信」ボタンを押すと、messageC:の所に入力された値が出力される。
おわりに
こういったデータ受け渡し関連は他にも丁寧に説明されているサイトなど他にもあるのですが、ひとまず備忘録としてまとめてみました（´・ω・｀）
何かの参考になれば幸いです。