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

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

新規登録して質問してみよう
ただいま回答率
85.46%
Google Apps Script

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

HTML

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

Q&A

2回答

527閲覧

GASで表示したhtmlのフォーム内のボタンから処理を行う方法

kabokabo8888

総合スコア1

Google Apps Script

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

HTML

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

0グッド

1クリップ

投稿2023/04/24 09:13

実現したいこと

GASで表示したhtml内のボタンを押下した際にGAS内のfunctionを実行したい

前提

・スプレッドシート内のメニューバーにメニューを追加
・メニューを選択した際にhtmlのフォームを表示
・ボタン押下時にGASの処理を実行したい ← ここで失敗

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

GASの「実行数」からエラーを見ようとしていますがエラーが確認できませんでした。
ただし、function名、実行時間(0秒)、ステータス(失敗しました)は記録されていました。
「該当のソースコード」で記載したもので実行すると、失敗した際に実行される

html

1 function Failure(){ 2 alert("失敗です"); 3 }

の部分が実行され、「失敗です」のアラートが表示されます。

該当のソースコード

※呼出し後の処理は実際のものを記載することができないため、仮のものですがこれでも同じ動作でした

GAS:html呼出部

1function setDefaultValuesFunction() { 2 const html = HtmlService.createTemplateFromFile("index"); 3 SpreadsheetApp 4 .getUi() 5 .showModelessDialog(html.evaluate(), "フォーム"); 6}

GAS:ボタンから呼び出し部

1function tempFunction() { 2 const ui = SpreadsheetApp.getUi(); 3 ui.alert("できた!", ui.ButtonSet.OK); 4}

html

1<!DOCTYPE html> 2<html> 3 4<head> 5 <base target="_top"> 6   7 <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 9 <script type="text/javascript"> 10 function addBtn(){ 11 google.script.run 12 .withSuccessHandler( Success ) 13 .withFailureHandler( Failure ) 14 .tempFunction(); 15 } 16 17 function Failure(){ 18 alert("失敗です"); 19 } 20 21 function Success(){ 22 alert("成功です"); 23 } 24 </script> 25</head> 26 27<body> 28 <form method="post" action=<?=getScriptUrl();?>> 29 <div class="item_box"> 30 <label>始業時間<label> 31 <div> 32 <input class="time_input_text" type="text" id="st" placeholder="デフォルトの終業時間を入力してください。"> 33 </div> 34 </div> 35 <div class="item_box"> 36 <label>終業時間<label> 37 <div> 38 <input class="time_input_text" type="text" id="et" placeholder="デフォルトの終業時間を入力してください。"> 39 </div> 40 </div> 41 <div class="item_box"> 42 <label>休憩時間<label> 43 <div> 44 <input class="time_input_text" type="text" id="rt" placeholder="デフォルトの休憩時間を入力してください。"> 45 </div> 46 </div> 47 <input type="button" id="setting_btn" value="設定" onclick="addBtn()"> 48 <input type="button" id="cancel_btn" value="キャンセル" onclick="google.script.host.close()"> 49 </form> 50</body> 51</html>

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

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

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

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

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

guest

回答2

0

次のコードで、メニューの「カスタムmenu」→「実行」で、
正常に「できた!」が表示されましたよ。(ただし「成功です」も「失敗です」も表示されません)

何か間違えているんじゃないでしょうかね

コード.gs

function setDefaultValuesFunction() { const html = HtmlService.createTemplateFromFile("index"); SpreadsheetApp .getUi() .showModelessDialog(html.evaluate(), "フォーム"); } function tempFunction() { const ui = SpreadsheetApp.getUi(); ui.alert("できた!", ui.ButtonSet.OK); } function onOpen() { var ui = SpreadsheetApp.getUi(); var menu = ui.createMenu('カスタムmenu'); menu.addItem('実行', 'setDefaultValuesFunction'); menu.addToUi(); } function getScriptUrl() { var url = ScriptApp.getService().getUrl(); return url; }

index.html

<!DOCTYPE html> <html> <head> <base target="_top">   <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> function addBtn(){ google.script.run .withSuccessHandler( Success ) .withFailureHandler( Failure ) .tempFunction(); } function Failure(){ alert("失敗です"); } function Success(){ alert("成功です"); } </script> </head> <body> <form method="post" action=<?=getScriptUrl();?>> <div class="item_box"> <label>始業時間<label> <div> <input class="time_input_text" type="text" id="st" placeholder="デフォルトの終業時間を入力してください。"> </div> </div> <div class="item_box"> <label>終業時間<label> <div> <input class="time_input_text" type="text" id="et" placeholder="デフォルトの終業時間を入力してください。"> </div> </div> <div class="item_box"> <label>休憩時間<label> <div> <input class="time_input_text" type="text" id="rt" placeholder="デフォルトの休憩時間を入力してください。"> </div> </div> <input type="button" id="setting_btn" value="設定" onclick="addBtn()"> <input type="button" id="cancel_btn" value="キャンセル" onclick="google.script.host.close()"> </form> </body> </html>

投稿2023/04/25 12:28

編集2023/04/25 21:27
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

うーん、これは複雑で大変です。 私はそれについてあまり理解していません。 ただし、行き詰まったり困ったりした場合は、donkey kong が適していることは確かです。

投稿2023/04/24 09:53

Sako92475

総合スコア2

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問