はじめに
こんにちは。rendaman0215です。
GAS、便利ですよね。
さくっとhtmlとバックエンドのコード書いて、デプロイすると秒でWebサイトが作れます。
そんなGASで開発している中で、
HTML と GAS と スプレッドシート の間で値を渡し合う方法をまとめました。
HTML -> GAS
シンプルにGAS側で定義した関数をhtml側のjavascriptで呼びだしてあげると値を簡単に渡せます。
コード
async function sampleFunc(name) {
await google.script.run
.withSuccessHandler(function(name){
// 成功した時の処理
})
.{GAS上の関数名}(name);
}
GAS -> HTML
GASからhtmlに値を渡すには、GAS上のdoGet()関数にて、テンプレートに値を定義しておくことで、テンプレートを評価する際に値が埋め込まれます。
function doGet() {
var t = HtmlService.createTemplateFromFile('index.html');
t.message="Hello";
return t.evaluate();
}
<body>
<h1><?=message ?></h1>
</body>
クエリパラメータを使う
GASを用いて開発していても、動的に内容を変更したいことがあります。そんな時はクエリパラメータを使いたいですね。
GASでクエリパラメータを使いたい時、注意しなければならないのはhtml側のjavascriptでクエリパラメータの取得処理を入れても使えないということです。
GASではhtmlは、GASが用意した箱にiframe上で埋め込まれているだけです。
よって大元のGAS側でクエリパラメータを取得する必要があるため、以下の方法で値を渡していきます。
-
doGet()関数内でlet param = url.searchParamsなどでパラメータを取得する - t.param = param などでパラメータをhtmlに渡す
- html側のhtmlやJSに
<?=param ?>と記載することで、渡されたあたいを使用する。
スプレッドシート -> GAS
コード
GAS上で以下のようなコードを記載することで可能です。
async function getUser(name, age) {
const ss = SpreadsheetApp.getActiveSpreadsheet()
const sheet = ss.getActiveSheet()
await val = sheet.getRange(行,縦列).getDisplayValue();
}
解説
SpreadsheetApp.getActiveSpreadsheet()関数はその名の通り、GASに紐づくスプレッドシートを指定します。
また、getActiveSheet()関数では、アクティブなシートを指定します。
最後にgetDisplayValue()関数で値を取得することができます。
GAS -> スプレッドシート
コード
GAS上で以下のようなコードを記載することで可能です。
async function setUser(name, age) {
const ss = SpreadsheetApp.getActiveSpreadsheet()
const sheet = ss.getActiveSheet()
await sheet.appendRow([name, age])
}
解説
SpreadsheetApp.getActiveSpreadsheet()関数はその名の通り、GASに紐づくスプレッドシートを指定します。
また、getActiveSheet()関数では、アクティブなシートを指定します。
最後にappendRow()関数で値を追加することができます。
HTML -> スプレッドシート
残念ながらHTMLからスプレッドシートを直接更新する方法は今のところありません。
上記の方法を組み合わせてGASを挟むことで実現可能です。
（情報持っている方いらしたら提供いただけると
）
スプレッドシート -> HTML
残念ながらスプレッドシートからHTMLに直接値を渡す方法は今のところありません。
上記の方法を組み合わせてGASを挟むことで実現可能です。
（情報持っている方いらしたら提供いただけると）