実現したいこと
steinを使ってGoogleスプレッドシートに書き込みを行っていますが、適切なセルに文字が入力されない。
発生している問題・エラーメッセージ
サンクスレポートとヒヤリハットレポートをGoogleフォームから入力し、入力されたものがスプレッドシートに記載されています。
このスプレッドシートの一部をウェブ状に表示しレポートを閲覧してもらうというのがwebアプリのベースです。
レポートを閲覧した際にポイントが入るように、レポート閲覧のボタンを押す際に名前をinputタブに入力すると、その入力された名前がnameReadセルに書き込まれていくという仕様をsteinを用いてスプレッドシートをデータベース化することでおこなっています。
inputの部分でnameのidをつけて入力されたものがnameReadセル(W列)、入力した際の時間がタイムスタンプセル(A列)に入力されるようにコードを書いています。
しかし、W列にタイムスタンプが入力され、
右に19マスずれた位置(AS列)に名前（ここでは「氏名」と入力）が入力されます。
さらに続けて入力すると先ほど名前が入力されたセルの真下にタイムスタンプが入力され、また右に19マスずれた位置に名前が入力されます。
入力するたびに名前が入ったセルの下に時間が入力され、その19マスずれたところに名前が入力されていきます。
Chromeの検証画面では特にエラーメッセージは表示されません。
該当のソースコード
サンクスレポートの閲覧画面
html
1<!DOCTYPE html>
2<html lang="ja">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7 <title>スマレポ</title>
8 <link rel="stylesheet" media="print" href="print.css" />
9 <link rel="shortcut icon" href="favicon.ico" />
10 <link
11 href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css"
12 rel="stylesheet"
13 />
14 <link href="./thx.css" rel="stylesheet" />
15 </head>
16 <body>
17 <div class="container px-lg-5">
18 <h1>サンクスレポート</h1>
19 <input
20 type="text"
21 id="name"
22 placeholder="氏名(スペース入れない)"
23 required
24 /><br />
25 <button onclick="thx()">サンクスレポート表示</button>
26 </div>
27 <script src="https://unpkg.com/stein-js-client"></script>
28 <script>
29 const store = new SteinStore(
30 "https://api.steinhq.com/v1/storages/XXXXXXXXXX"
31 );
32
33 async function thx() {
34 const data = await store.read("sheet1", { limit: 1000, offset: 0 });
35 console.dir(data);
36 console.log(" - - - - - - - - - - - ");
37 for (let i = data.length - 1; i >= 0; i--) {
38 const element = data[i];
39 const thxdata = element.サンクスレポートの内容;
40 console.log(thxdata);
41 if (thxdata !== null) {
42 const newDiv = document.createElement("div");
43 const newContent = document.createTextNode(thxdata);
44 newDiv.appendChild(newContent);
45 var currentDiv = document.getElementById("div1");
46 document.body.insertBefore(newDiv, currentDiv);
47 }
48 }
49
50 await store.append("sheet1", [
51 {
52 "nameRead": document.getElementById("name").value,
53 "タイムスタンプ": new Date().toISOString(),
54 },
55 ]);
56 }
57 </script>
58 </body>
59</html>
60
ヒヤリハットレポート閲覧画面
html
1<!DOCTYPE html>
2<html lang="ja">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7 <title>スマレポ</title>
8 <link rel="stylesheet" media="print" href="print.css" />
9 <link rel="shortcut icon" href="favicon.ico" />
10 <link
11 href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css"
12 rel="stylesheet"
13 />
14 <link href="./hyr.css" rel="stylesheet" />
15 </head>
16 <body>
17 <div class="container px-lg-5">
18 <h1 class="pt-3">ヒヤリハットレポート</h1>
19 <input
20 type="text"
21 id="name"
22 placeholder="氏名(スペース入れない)"
23 required
24 /><br />
25 <button onclick="hyr()">ヒヤリハットレポート表示</button>
26 </div>
27 <script src="https://unpkg.com/stein-js-client"></script>
28 <script>
29 const store = new SteinStore(
30 "https://api.steinhq.com/v1/storages/XXXXXXXXXX"
31 );
32
33 async function hyr() {
34 const data = await store.read("sheet1", { limit: 1000, offset: 0 });
35 console.dir(data);
36 console.log(" - - - - - - - - - - - ");
37 for (let i = data.length - 1; i >= 0; i--) {
38 const element = data[i];
39 const hyrdata = element.内容;
40 const hyrrp = element.発生時の対応;
41 const hyrreason = element.原因;
42 const hyrreact = element.今後の対応;
43 const hyrleader = element.上長のコメント;
44 const hyrdirector = element.院長のコメント;
45 console.log(hyrdata);
46 if (hyrdata !== null) {
47 const newDivhd = document.createElement("div");
48 const newContenthd = document.createTextNode("[内容]" + hyrdata);
49 newDivhd.appendChild(newContenthd);
50 var currentDivhd = document.getElementById("div1");
51 document.body.insertBefore(newDivhd, currentDivhd);
52 const newDivhr = document.createElement("div");
53 const newContenthr = document.createTextNode(
54 "[発生時の対応]" + hyrrp
55 );
56 newDivhr.appendChild(newContenthr);
57 var currentDivhr = document.getElementById("div1");
58 document.body.insertBefore(newDivhr, currentDivhr);
59 const newDivhn = document.createElement("div");
60 const newContenthn = document.createTextNode("[原因]" + hyrreason);
61 newDivhn.appendChild(newContenthn);
62 var currentDivhn = document.getElementById("div1");
63 document.body.insertBefore(newDivhn, currentDivhn);
64 const newDivct = document.createElement("div");
65 const newContentct = document.createTextNode(
66 "[今後の対応]" + hyrreact
67 );
68 newDivct.appendChild(newContentct);
69 var currentDivct = document.getElementById("div1");
70 document.body.insertBefore(newDivct, currentDivct);
71 const newDivle = document.createElement("div");
72 const newContentle = document.createTextNode(
73 "[上長のコメント]" + hyrleader
74 );
75 newDivle.appendChild(newContentle);
76 var currentDivle = document.getElementById("div1");
77 document.body.insertBefore(newDivle, currentDivle);
78 const newDivdi = document.createElement("div");
79 const newContentdi = document.createTextNode(
80 "[院長のコメント]" + hyrdirector
81 );
82 newDivdi.appendChild(newContentdi);
83 var currentDivdi = document.getElementById("div1");
84 document.body.insertBefore(newDivdi, currentDivdi);
85 const newDivmm = document.createElement("div");
86 const newContentmm = document.createTextNode("⭐️");
87 newDivmm.appendChild(newContentmm);
88 var currentDivmm = document.getElementById("div1");
89 document.body.insertBefore(newDivmm, currentDivmm);
90 }
91 }
92 await store.append("sheet1", [
93 {
94 nameRead: document.getElementById("name").value,
95 タイムスタンプ: new Date().toISOString(),
96 },
97 ]);
98 }
99 </script>
100 </body>
101</html>
試したこと
簡易版（入力項目が一つしかないもの）を別で作成し表示部分以外は同じコードで作成したところ適切なセルに入力されました。
しかし、別施設に導入している似たコードにおいても、上記と同様の入力部分がずれるバグが発生しています。
Q&A
自己解決
