ボタンを押したらGoogleSpreadSheetの特定のセル

やりたいこと

番号リストスプレッドシートのB1の値をdiv#card01の投票数に出力したいです。
投票ボタンを押したらそれに対応したセルの数字が１つ上がる。

(div#card02の投票ボタンが押されたらスプレッドシートのB3を１増やす)

同様なことを実装できるならFirebaseも検討しております。

スプレッドシート(サンプル)

	A	B
1	商品名	投票数
2	商品1	1
3	商品2	4

html
1<div id="card01">
2<h1>商品1</h1>
3<span>[投票数]</span>
4<button>投票</button>
5</div>
6<div id="card02">
7<h1>商品2</h1>
8<span>[投票数]</span>
9<button>投票</button>
10</div>

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1//doGet.gs
2function doGet(e) {
3  var output=HtmlService.createTemplateFromFile("vote");
4  return output.evaluate().setTitle('投票ページ');
5}
6//A1に項目名、A2に投票数。B1に項目名、B2に投票数が入っている前提。ただし、A1、B1は参照していない
7function getVoteCount(index) {
8  const vals = SpreadsheetApp.openById("データを保存するスプレッドシート").getSheetByName("投票データが残るシート").getDataRange().getValues();
9  return vals[index][1];
10}
11function incrementVoteCount(index) {
12  const sh = SpreadsheetApp.openById("データを保存するスプレッドシート").getSheetByName("投票データが残るシート");
13  const cur = sh.getDataRange().getValues()[index][1];
14  sh.getRange(index + 1, 2).setValue(cur + 1);
15  return cur + 1;
16}

html
1<!-- vote.html -->
2<!DOCTYPE html>
3<html>
4  <head>
5    <base target="_top">
6  </head>
7  <body>
8    <div id="card01">
9      <h1>商品1</h1>
10      <span id="s0"><?= getVoteCount(0) ?></span>
11      <button onclick="increment(0);">投票</button>
12    </div>
13    <div id="card02">
14      <h1>商品2</h1>
15      <span id="s1"><?= getVoteCount(1) ?></span>
16      <button onclick="increment(1);">投票</button>
17    </div>
18    <script>
19    function increment(idx) {
20      google.script.run.withSuccessHandler(updateDisp("s"+idx)).incrementVoteCount(idx);
21    }
22    function updateDisp(id){
23      return function(v) {
24        document.getElementById(id).innerText = v;
25      }
26    }
27    </script>
28  </body>
29</html>