GAS⇔html間の値の渡し方
解決済
回答 1
投稿
- 評価
- クリップ 1
- VIEW 9,676
前提・実現したいこと
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/ツール等のバージョンなど)
より詳細な情報
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
強引なやり方かもしれませんが実現できたので回答します。
まずソースコードは以下のようになりました。
コード.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 の値受け渡し
- UserForm.html を取得しHTMLテキストを抜き出す
- HTMLテキスト内の変数代入部分（
%adasu()%）をfunction adasu()の値で置換 - 置換後のHTMLテキストを HtmlService で再生成
HTML ⇒ GAS の値受け渡し
- GAS側でHTMLから値を受け取る用の
function recieveFromHtml()を定義 - 値を渡すためのトリガが必要なためボタンを追加
- ボタンから起動する
function sendGoogleAppsScript()を定義 - HTMLから受け渡したい値を取得
google.script.runコマンドでrecieveFromHtml()を呼び出し、渡したい値を引数に指定
補足
recieveFromHtml() 内で Browser.msgBox() を呼び出しているのは、
表示されている UserForm.html を閉じる役割も兼ねています。
（ボタン押下後に閉じる方法が分からないので…）
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
2017/08/07 12:44 編集
一つ質問なのですが、adasu()を％で囲むのはなぜでしょうか？念のためコード側とUserForm側の％adasu()％の％を消してやってみたのですが動きました。adasuをfunctionではなく文字列とみるだけなら//で囲んで正規表現にするだけでは不十分なのででしょうか？おそらく何らかのエラーが発生するのを防ぐためだとは思うのですがよくわかりません。ご教授いただけると幸いです。
2017/08/07 14:12
"adasu()" ではなく "%adasu()%" としたのは、「この文字列を置換する」ことを明確にしたかったことと、意図しない置換を防ぐためです。
たとえば別の箇所で "new_adasu()" という関数を呼び出していたら、意図しない置換が発生してしまいます。
（var a = new_adasu(); ⇒ var a = new_"aaa"; となってしまう）
% で囲むのは必須ではないため、やりやすい文字列をHTMLに埋め込めば大丈夫だと思います。