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

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

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

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

Google Apps Script

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1881閲覧

GASでSpreedsheetをhtmlフォーム化、javascriptからgsコードの値のやりとり

hiro04kon

総合スコア46

Google スプレッドシート

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

Google Apps Script

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

1クリップ

投稿2022/12/11 10:02

編集2022/12/11 11:38

GASでスプレッドシートをHTMLでフォーム化

GASでシートのデータをhtmlで表示、操作できるをことを知り、勉強中です。
Javascriptを実行し、エラーの詳細がよく分かりません。

プルダウン2つを連携したい。

シートを1つ目のプルダウンで選択
→選んだシートからデータを読み取る
→それを2つめのプルダウンにしたい。

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

1つ目のプルダウンで選択後、send_work 実行→ get_work を実行するのですが、
その結果、get_work がうまく働かず、withFailureHandlerno_dateが実行されてしまいます。

chromeのコンソールで確認すると、以下のエラーがでています。

Uncaught ReferenceError: date is not defined at send_work (userCodeAppPanel:5:54) at HTMLSelectElement.onchange (userCodeAppPanel:1:1363)

get_workreture dateしているのですが、渡せていないようです。

該当のソースコード

html

1<!DOCTYPE html> 2<html> 3 4<head> 5 <base target="_top"> 6 7 <script> 8 function send_work(){ 9 let obj = document.getElementById("select_sheet"); 10 alert("obj=" + Number(obj.value)); 11 google.script.run.withSuccessHandler(work_list) //ここがうまく動かない元のプログラム 12 .withFailureHandler(no_date()) 13 .get_work(obj); 14 }; 15 16 function work_list(date){ 17 alert("work_list ON!"); 18 var selObj = document.getElementById('select_work'); 19 while(selObj.lastChild){ 20 selObj.removeChild(selObj.lastChild); 21 } 22 for(var i=0;i<date.length;i++){ 23 let op = document.createElement("option"); 24 op.value = date[i].cd; 25 op.text = date[i].label; 26 selObj.appendChild(op); 27 } 28 } 29 30 function no_date(){ 31 alert("dateがありません") 32 } 33 34 </script> 35</head> 36 37<body> 38 <h1>セレクトアプリ</h1> 39 <table style="text-align: left; width: 100%;" cellpadding="5" cellspacing="5"> 40 <tbody> 41 <tr> 42 <td style="vertical-align: middle;" width="20%" class="sorth one">シートを選択→</td> 43 <td style="vertical-align: middle;" > 44 <select id="select_sheet" width="50%" onchange="send_work()"> //シートを選択するとsend_workを実行する 45 <option value="0">▼シートを選択</option> 46 <option value="1">シート1</option> 47 <option value="2">シート2</option> 48 <option value="3">シート3</option> 49 </select> 50 </td> 51 </tr> 52 <tr> 53 <td style="vertical-align: middle;" class="sorth two">項目選択→</td> 54 <td style="vertical-align: middle;" > 55 <select id="select_work" class="select" name="select_works"> 56 <option>1番目</option> //ダミーです 57 <option>2番目</option> 58 <option>3番目</option> 59 </select> 60 <br> 61 </td> 62 </tr> 63 <tr> 64 <td style="vertical-align: middle;" class="sorth three"> 65 新規項目を追加 66 </td> 67 <td style="vertical-align: middle;" width="30%"><input name="add" > 68 <button id="add_button" name="add_button" type="button" style="width:20%;padding:2px;font-size:15px;">追加</button><br> 69 </td> 70 </tr> 71 </tbody> 72 </table> 73</body> 74</html>

gs

1コード.gs 2function doGet() { 3 return HtmlService.createTemplateFromFile("index").evaluate(); 4} 5 6//シート名選択から提出物名を反映       ←ここがうまく動いていないらしい。 7function get_work(obj){ 8 var ss = SpreadsheetApp.getActiveSpreadsheet(); 9 var sheet = ss.getSheets()[ Number(obj)-1 ]; 10 //最終列取得 11 var last_col = sheet.getRange(1, sheet.getMaxColumns()).getNextDataCell(SpreadsheetApp.Direction.PREVIOUS).getColumn(); 12 var date = sheet.getRange(1, 1, 1, last_col).getValues()[0]; 13 return date; 14}; 15

試したこと

function get_work(obj)を引数をなくし、var obj = 1とすると、シートデータを読み取れることは確認しています。


javascriptとGASのgsコードのやりとりがうまくいかないのだと思います。
いろいろ検索しましたが、解決方法が見つかりません…。
すいませんが、お知恵を貸してください!

修正したコード

qnoirさんのアドバイスで解決しました。
以下、修正したコードです。

html

1 function send_work(){ 2 let obj = document.getElementById("select_sheet"); 3 alert("obj=" + Number(obj.value)); 4 google.script.run.withSuccessHandler(work_list) //work_listの引数を削除 5 .withFailureHandler(no_date)            //no_dateの()を削除 6 .get_work(obj.value);                 //.valueを追加 7 }; 8 9  function work_list(date){ 10 ... 11 op.value = i;        //そもそもcdとかなかった… 12 op.text = date[i]; 13 ...

冷静に考えれば、.valueを付け忘れたり、簡単な間違いもありました…。
けど、1人で考えても見つけられなかったので、本当に助かりました。

退会済みユーザー👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

すくなくとも、コード.gs の

js

1 google.script.run.withSuccessHandler(work_list(date)) 2 .withFailureHandler(no_date()) 3 .get_work(obj);

js

1 google.script.run.withSuccessHandler(work_list) 2 .withFailureHandler(no_date) 3 .get_work(obj.value);

に直してください。


ポイント

  • withSuccessHandler/withFailureHandler には関数を渡す(関数の評価結果ではない)
  • withSuccessHandlerの前に実行させるGAS側の関数には引数としてJavaScript の プリミティブ型しか渡せません。(なので obj [オブジェクト]ではなく、 obj.value(数値)を渡す)

参照→ https://developers.google.com/apps-script/guides/html/reference/run#parameters


残り、コード.gsのget_workで

js

1 var date = sheet.getRange(1, 1, 1, last_col).getValues()[0]; 2 return date;

としている一方

index.html で

js

1 op.value = date[i].cd; 2 op.text = date[i].label;

としている部分も(仮にそのままであれば)うまく動かない原因ですが、要件が明らかになっていない以上修正できません。
(「var obj = 1とすると、シートデータを読み取れることは確認しています。」とのことから、実際に動かしているコードは質問文とまた異なるのでしょう)

投稿2022/12/11 10:42

編集2022/12/11 11:21
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

hiro04kon

2022/12/11 11:27

ありがとうございます! withSuccessHandler()がうまく動作しない理由が分かりました! また、op.~は、その前がうまくいがず、動作確認していませんでした。 訂正したら直りました! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問