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

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

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

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

Q&A

解決済

2回答

48944閲覧

GAS⇔html間の値の渡し方

nono1234

総合スコア25

Google Apps Script

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

1グッド

5クリップ

投稿2017/08/04 07:30

###前提・実現したいこと
GASでVBAでいうとユーザーフォームのようなものを作るために、UserForm.htmlを作成し、そこにテキストボックスなどを配置し、その値をGAS側で受け取りたいのですが方法がわかりません。
また、GAS側の値をhtml側で受け取りたいのですがそれもよくわかりません。どのようにすればよいのでしょうか?そもそも可能なのでしょうか?
###発生している問題・エラーメッセージ
値の受け渡し方法がわからない。
###該当のソースコード
GAS側(コード.gs)
function main(){
var app=SpreadsheetApp;
var html = HtmlService.createHtmlOutputFromFile('UserForm');
app.getActiveSpreadsheet().show(html);
}
function adasu(){
var a = "aaa";
return a;
}

UserForm.html側

<!DOCTYPE html> <html lang="ja"> <head> <base target="_top"> </head> <body> <script type="text/javascript" > var d=//ここでadasu()の値を受け取りたい for(var i=0;i<3;i++){ document.writeln('<input type="text" value='+ d +' name="pra'+ i +'"/>');//このテキストボックス内に入力された値をGAS側で受け取りたい。
} </script>
</body> </html>

###試したこと

<??>,<?=?>を使えばよいとの記述を見たのですが、使い方が間違っているのか、そのまま表示されてしまいます。使い方も教えていただけると幸いです

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

aiueomaruta👍を押しています

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

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

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

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

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

guest

回答2

0

ベストアンサー

強引なやり方かもしれませんが実現できたので回答します。
まずソースコードは以下のようになりました。

コード.gs

function main(){ var app = SpreadsheetApp; var html = HtmlService.createHtmlOutputFromFile('UserForm'); var content = html.getContent().replace(/%adasu\(\)%/, '"' + adasu() + '"'); app.getActiveSpreadsheet().show(HtmlService.createHtmlOutput(content)); } function adasu(){ var a = "aaa"; return a; } function recieveFromHtml(values) { for(var i = 0; i < values.length; i++) { Logger.log(values[i]); } Browser.msgBox("値が送信できました。\nログを確認してください。"); }

UserForm.html

<!DOCTYPE html> <html lang="ja"> <head> <base target="_top"> </head> <body> <button type="submit" onclick="sendGoogleAppsScript()">送信</button> <br> <script type="text/javascript" > var d = %adasu()%; //ここでadasu()の値を受け取りたい for(var i=0;i<3;i++){ document.writeln('<input type="text" value='+ d +' name="pra'+ i +'"/>');//このテキストボックス内に入力された値をGAS側で受け取りたい。 } function sendGoogleAppsScript() { var values = []; for (var i = 0; i < 3; i++) { var element = document.getElementsByName("pra" + i)[0]; values.push(element.value); } google.script.run.recieveFromHtml(values); } </script> </body> </html>

GAS ⇒ HTML の値受け渡し

  1. UserForm.html を取得しHTMLテキストを抜き出す
  2. HTMLテキスト内の変数代入部分(%adasu()%)を function adasu() の値で置換
  3. 置換後のHTMLテキストを HtmlService で再生成

HTML ⇒ GAS の値受け渡し

  1. GAS側でHTMLから値を受け取る用の function recieveFromHtml() を定義
  2. 値を渡すためのトリガが必要なためボタンを追加
  3. ボタンから起動する function sendGoogleAppsScript() を定義
  4. HTMLから受け渡したい値を取得
  5. google.script.run コマンドで recieveFromHtml() を呼び出し、渡したい値を引数に指定

補足

recieveFromHtml() 内で Browser.msgBox() を呼び出しているのは、
表示されている UserForm.html を閉じる役割も兼ねています。
(ボタン押下後に閉じる方法が分からないので…)

投稿2017/08/06 06:25

rokuni

総合スコア174

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

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

nono1234

2017/08/07 04:42 編集

ありがとうございます!!VBAはやったことがあるのですがGASとHTMLは最近勉強しはじめたばかりで、いろいろ探してもこれというものがなくて本当に助かりました! 一つ質問なのですが、adasu()を%で囲むのはなぜでしょうか?念のためコード側とUserForm側の%adasu()%の%を消してやってみたのですが動きました。adasuをfunctionではなく文字列とみるだけなら//で囲んで正規表現にするだけでは不十分なのででしょうか?おそらく何らかのエラーが発生するのを防ぐためだとは思うのですがよくわかりません。ご教授いただけると幸いです。
rokuni

2017/08/07 05:12

nono1234 さんのおっしゃられる通り、% は無くても問題ないです。 "adasu()" ではなく "%adasu()%" としたのは、「この文字列を置換する」ことを明確にしたかったことと、意図しない置換を防ぐためです。 たとえば別の箇所で "new_adasu()" という関数を呼び出していたら、意図しない置換が発生してしまいます。 (var a = new_adasu(); ⇒ var a = new_"aaa"; となってしまう) % で囲むのは必須ではないため、やりやすい文字列をHTMLに埋め込めば大丈夫だと思います。
KASHIF

2023/09/14 14:30

I am glad you take pride in what you write. This makes you stand way out from many other writers that push poorly written content. <a href="high intence pressure match">Good quality match</a>
guest

0

GAS⇔HTML側での値の双方向の受け渡しは、きちんと公式メソッドで用意されています。

具体的にはgoogle.script.runコマンドを使ったり、おっしゃるようなもの(スクリプトレット)を使ってみたり。
ただし、スクリプトレットはcreatetemplatefromfileでしか利用できません。

詳細は以下をご覧くださいませ。好きな方法で都合のよい手段を構築すると良いです。
Google Apps Scriptでウェブアプリケーション作成入門

投稿2019/12/02 01:14

officeforest

総合スコア410

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問