質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
Google スプレッドシート

Google スプレッドシートは、フリーで利用できる表計算ソフト。Webアプリのためインターネットに接続することで利用できます。チャートやグラフの作成のほか、シートを他のユーザーと共有したり、同時に作業を進めることも可能です。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

692閲覧

Steinで適切なセルに入力されない。

NaokiUchid

総合スコア14

Google スプレッドシート

Google スプレッドシートは、フリーで利用できる表計算ソフト。Webアプリのためインターネットに接続することで利用できます。チャートやグラフの作成のほか、シートを他のユーザーと共有したり、同時に作業を進めることも可能です。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2022/07/06 15:02

編集2022/07/11 11:01

実現したいこと

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>

試したこと

簡易版(入力項目が一つしかないもの)を別で作成し表示部分以外は同じコードで作成したところ適切なセルに入力されました。

しかし、別施設に導入している似たコードにおいても、上記と同様の入力部分がずれるバグが発生しています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/07/10 04:40 編集

現状の文章だけでは下記の情報がわかりません。 ・現状の記録用スプレッドシートの全体像(どの列にどのような情報が入っているのか)←これが示されていないのは解決の上で致命的です。 ・「nameRead」セルとは、どの位置のセルであり、何を意味するのか ・「さらに続けて入力すると先ほど名前が入力されたセルの真下にタイムスタンプが入力され、また右に19マスずれた位置に名前が入力される」とありますが「先ほど名前が入力されたセル」とは、スプレッドシートのどのような位置なのか。 要するに、 質問文記載コードは、「ブラウザに何らかのUIを表示し、何らかのデータを入力すると、Googleスプレッドシートの何らかの適切な位置に(そのデータをもとに加工された1つ以上の)データを入力する」ものだと思われますが 正しい処理(期待する動作)は、どのような処理で、それが現状、どうなってしまっているのか、ということです。 インプット・アウトプットともに、画像と文章で、何も情報を持たない第三者にもわかるように説明してください。 例) ブラウザの、この部分に、○○を入力し、ボタンを押す ↓ 入力された○○を、プログラム内で、データ△△に変換する。 (記録用スプレッドシートの++からとってきたデータを◎◎に加工する、等) ↓ 正常であれば変換されたデータ△△は、◇という基準に従って、スプレッドシートのs行目・t列目のセルに入るはずである。 ところが、現状、s行目・t列目ではなく、z0列目に入力されてしまっている。 同じことを繰り返すと、さらにz1列目に入力されてしまう。 --- (プライバシーの問題がある場合は、ダミーデータに差し替えてください)
NaokiUchid

2022/07/10 04:33

なるほど。 丁寧にありがとうございます。 質問を修正してみます。
退会済みユーザー

退会済みユーザー

2022/07/10 04:41

コメントしたものの、コードとAPIのドキュメントから想像で補完して、だいたいのところはわかりました。steinsのバグと思われます。 解決法を記載する準備中ですのでしばらくお待ちください。
退会済みユーザー

退会済みユーザー

2022/07/10 05:28

解決策および再現手順について追記しました。
guest

回答2

0

自己解決

あらたなスプレッドシートを用意して、旧データをコピー。
その後、あらたなスプレッドシートのURLをもとにSteinであらたなAPI URLを発行し、これを使ったところ適切なセルに入力されるようになりました。

旧スプレッドシートのままSteinであらたなAPI URLを作ってもうまくいかなかったので、スプレッドシートとSteinの関係でバグが生じていたようです。

qnoirさんのおかげでSteinのバグと確信することができ、この方法が思いつきました。
バグの原因の詳細は不明ですが、ひとまず解決することができました。
qnoirさん、ありがとうございました!!

投稿2022/07/12 13:40

NaokiUchid

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/07/12 14:31

ひとまず解決したようでよかったです。
guest

0

おそらくですがSteinsのバグです。

解決策

解決策としては、下記になります。
① まず念のため、現状の記録シートを別のシートにコピーしてbackupしておいてください。
② 次に現状の記録シートの不要な列(余白列)以降のセル内容を列選択して、消去してください。

(例:「不要な列を削除する」とは、たとえば正常な記録範囲が「AからD列までの4列」であるならば、5列目以降(E列以降)を列選択してdeleteキーを押し、内容を全部クリアする、という意味です)

例:
イメージ説明

 

上記の操作で正常に追記できるようになると思います。


<Steins APIのバグの内容>

・後から同名の列が追加された場合、その列が正しい列として扱われてしまい、追記後の最初は、その列にデータが追記される。
・その後、その列にデータを追記すると、もともとの列の列の1列目からの位置だけ離れた列に、データが記録される。

・仮に1行目の列名だけを後から消去したとしても、
・その消去した列の前後に連続した列名ラベルがなく、
・かつ、その列以降、2行目以降にデータが残っている場合
上記の状況は変わらない。(右にずれ続ける)

(上述の通り、不要列の列を全選択してデータを消去すれば、正常に追記されるようになる模様)

再現方法

① 例として、正常な記録シートが下記のようであるとします。(カッコ内は、Steinsがデータを読み書きする際のキーとなるラベル名=スプレッドシートの1行目に入力する値)
A列に、サンクスレポートを投稿した人がフォームに入力した名前(「name」)
B列に、サンクスレポートを投稿した人が記入した内容(「サンクスレポートの内容」)
C列に、サンクスレポートを投稿した日時、またはブラウザで「サンクスレポート表示」ボタンを押した日時(「タイムスタンプ」)
D列に、ブラウザで「サンクスレポート表示」する際に入力された名前(「nameRead」)
イメージ説明

 
② ここで 「S1」セルにC1セルと同じ値である「タイムスタンプ」と入力します。
イメージ説明
③ ブラウザから、任意の名前を入力して「サンクスレポート表示」ボタンをクリックします。
イメージ説明

④ すると、S列の1つ下の行に、タイムスタンプが追記されます。
イメージ説明

 
⑤ さらに ブラウザから、同様に任意の名前を入力して「サンクスレポート表示」ボタンを入れてクリックすると、
今度はU列とAK列に検索した日時のタイムスタンプが、V列に検索欄に入力した名前が追記されます。
イメージ説明
⑥ブラウザで検索するたびに、右にずれてデータが入力される。

⑦ ここで S1 セルの「タイムスタンプ」という文字だけ削除しても、今度は1つずつ右にずれて追記されるようになります。
イメージ説明

⑧E列以降を列選択して削除すると、正常に追記されるようになります。

 

推定原因

おそらく記録用シートを編集しているときになんらかの間違いで、S列に他の正常な記録列と同じ文字列である「タイムスタンプ」という文字を入力してしまい、一定期間その状態で記録がされていた。
その後、間違いに気づいてS列の「タイムスタンプ」の文字を消す等の措置をとったかもしれない。
しかし、上記に記載した通り、列名だけ消してもバグは残る。余分な列全部を選択してdeleteキーを押して内容消去しなければならない。

投稿2022/07/10 05:27

編集2022/07/10 05:45
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

NaokiUchid

2022/07/11 08:27

わかりにくい質問にも関わらずとても丁寧に回答くださってありがとうございます。 図も作成し解説くださったことで、どのように質問すればよかったかもイメージできました。 残念ながらご指示の方法では解決しませんでした。 似たコードを用いた複数のシートで同様の減少が生じており、ご指摘の推定原因は当てはまらないようです。 状況が正確に伝わるように、図などを使いあらためて質問をさせていただきます。
退会済みユーザー

退会済みユーザー

2022/07/11 13:31

質問をわかりやすく編集していただきありがとうございます。 同じようなレイアウトにして試しましたが、こちらの環境では列消去すると直るため、消去しても治らない状況を再現することはできませんでした。 おそらく何らかの原因で不明なバグが残っているのだと思われます。 Steiinの公式が対応してくれるまで待つか、Steinの使用をやめ、他のツールを使う、GASでWebアプリを作りSteinと同じ動作をさせる、のいずれかになると思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問