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

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

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

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

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

HTML

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

Q&A

解決済

1回答

3071閲覧

Gasで作ったhtmlサイドバーのフォームに入力した値をスプレッドシートへ出力できません。

shoshinsha_001

総合スコア4

Google スプレッドシート

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

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

HTML

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

0グッド

1クリップ

投稿2023/01/22 10:47

編集2023/01/22 10:54

前提

現在、スプレッドシートで簡単な商品一覧表を作っています。
内容としては、スプレッドシートにhtmlのサイドバー(簡単な商品情報登録フォーム)を表示させ、サイドバーフォームに入力した内容をスプレッドシートへ出力するというものです。

今回、その過程でスプレッドシートへの書き込みがうまく実行されません。
色々調べて試したのですが、全く実行されずお手上げ状態です。
間違いやテックニックなどをご教示頂けると幸いです。
宜しくお願いいたします。

<追記>
初心者ですので、載せているコードが読みにくい等あると思います。
また、ネットからコピペしてアレンジしている部分もあります。

説明が不十分なところも多々あると思いますがご容赦ください。

実現したいこと

サイドバーのフォームに入力した値をスプレッドシートへ出力したい。

発生している問題・エラーメッセージ

送信ボタンを押してもGASが実行されない。

該当のソースコード(.gs)

var sh = SpreadsheetApp.openById("シートID"); var st = sh.getSheetByName("シート1"); function menuSidebar() { let ui = SpreadsheetApp.getUi(); let template = HtmlService.createTemplateFromFile('sidebar'); let htmlOutput = template.evaluate(); htmlOutput.setTitle('商品登録フォーム'); ui.showSidebar(htmlOutput); } function doPost(e) { var lastrow = st.getLastRow()+1; st.getRange(lastrow,1).setValue(e.parameter.datetime); st.getRange(lastrow,2).setValue(e.parameter.user); st.getRange(lastrow,3).setValue(e.parameter.item_name); st.getRange(lastrow,4).setValue(e.parameter.quantity); st.getRange(lastrow,5).setValue(e.parameter.notes); return menuSidebar(); }

該当のソースコード(.html)

<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> <form action="/exec" method="POST"> <label>【登録日】</label><br><input type="datetime-local" name="datetime" placeholder="日時を選択してください" required><br><br> <label>【登録者】</label><br><input type="text" name="user" list="user" placeholder="その他登録者は記名" autocomplete="off" required> <datalist id="user"> <? var user = SpreadsheetApp.openById("シートID").getSheetByName("User").getDataRange().getValues(); ?> <? for(var i = 0;i<user.length;i++){ ?> <option name="user"><?= user[i][0] ?></option> <? } ?> </datalist><br><br> <label>【商品名】</label><br><input type="text" name="item_name" placeholder="(例:〇〇" required><br><br> <label>【数 量】</label><br><input type="text" name="quantity" placeholder="(例:1※数字のみ" required><br><br> <label>【備 考】</label><br><textarea name="notes"></textarea><br><br> <input type="submit" value="送信"> </form> </body> </html>

イメージ説明

試したこと

GAS側でsidebar.js.htmlを作りgoogle.script.runを実行。

イメージ説明
イメージ説明

補足情報(FW/ツールのバージョンなど)

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

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

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

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

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

guest

回答1

0

ベストアンサー

多分 、サイドバーを開いた状態でデベロッパーツールを開き、送信すると、コンソールに「unsafe attempt to initiate navigation for frame with origin」というエラーが出ていると思います。

サイドバーからスプレッドシートへ書き込むコードを実行する場合において、値の受け渡しにフォームの submit を使うならば、公式リファレンス記載のコードに沿った書き方をするのが無難です。

コード.gs

js

1var sh = SpreadsheetApp.openById("シートID"); 2var st = sh.getSheetByName("シート1"); 3 4 5function menuSidebar() { 6 let ui = SpreadsheetApp.getUi(); 7 let template = HtmlService.createTemplateFromFile('sidebar'); 8 let htmlOutput = template.evaluate(); 9 htmlOutput.setTitle('商品登録フォーム'); 10 ui.showSidebar(htmlOutput); 11} 12 13function processForm(e) { 14 var lastrow = st.getLastRow()+1; 15 st.getRange(lastrow,1).setValue(e.datetime); 16 st.getRange(lastrow,2).setValue(e.user); 17 st.getRange(lastrow,3).setValue(e.item_name); 18 st.getRange(lastrow,4).setValue(e.quantity); 19 st.getRange(lastrow,5).setValue(e.notes); 20}

sidebar.html

js

1<!DOCTYPE html> 2<html> 3 4<head> 5 <base target="_top"> 6</head> 7 8<body> 9 <form id="myForm" onsubmit="handleFormSubmit(this)"> 10 <label>【登録日】</label><br><input type="datetime-local" name="datetime" placeholder="日時を選択してください" required><br><br> 11 <label>【登録者】</label><br><input type="text" name="user" list="user" placeholder="その他登録者は記名" autocomplete="off" required> 12 <datalist id="user"> 13 <? var user = SpreadsheetApp.openById("シートID").getSheetByName("User").getDataRange().getValues(); ?> 14 <? for(var i = 0;i<user.length;i++){ ?> 15 <option name="user"> 16 <?= user[i][0] ?> 17 </option> 18 <? } ?> 19 </datalist><br><br> 20 <label>【商品名】</label><br><input type="text" name="item_name" placeholder="(例:〇〇" required><br><br> 21 <label>【数 量】</label><br><input type="text" name="quantity" placeholder="(例:1※数字のみ" required><br><br> 22 <label>【備 考】</label><br><textarea name="notes"></textarea><br><br> 23 <input type="submit" value="Submit" /> 24 </form> 25 <script> 26 // Prevent forms from submitting.(エラー抑止のおまじない) 27 function preventFormSubmit() { 28 var forms = document.querySelectorAll('form'); 29 for (var i = 0; i < forms.length; i++) { 30 forms[i].addEventListener('submit', function(event) { 31 event.preventDefault(); 32 }); 33 } 34 } 35 window.addEventListener('load', preventFormSubmit); 36 37 function handleFormSubmit(formObject) { 38 // コード.gs の processForm 関数を呼び出す。成功したら、 この script 内の completion 関数を呼び出す。 39 google.script.run.withSuccessHandler(completion).processForm(formObject); 40 } 41 42 function completion() { 43 console.log("success"); 44 } 45 </script> 46</body> 47 48</html>

投稿2023/01/22 12:19

編集2023/01/22 12:37
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

shoshinsha_001

2023/01/22 12:44

ご教示ありがとうございます。 また、コードの修正もして頂きありがとうございます。 まだまだ勉強不足だったことを痛感しました💦 一度、gasでwebアプリを作っていたので、同じ原理でできるものだと思っていました💦 ご教示頂いた方法を用いて色々と遊んでみたいと思います。 誠にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問