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

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

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

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

Q&A

解決済

3回答

5194閲覧

【GAS】HTMLの中にjavascriptから取得した値を入れたい

wtst3011

総合スコア7

Google Apps Script

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

0グッド

1クリップ

投稿2021/08/04 01:19

前提・実現したいこと

GASでHTMLメールを複数人に送るシステムを作っています。
メールはGmeilです。

スクリプトの詳細を補足すると、
「アドレス」「メールタイトル」「人名」「会社名」はスプレッドシートから取得し、
メール本文はHTMLから取得するスクリプトを作りたいです。

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

メール本文の箇所だけ上手くいかず、
作成したメールにHTMLのコードがそのまま出力されてしまいます。

<?=data[5] ?> <?=data[6] ?>

完成形イメージ↓
ーーメール本文ーー
「会社名」(スプレッドシート)
「人名」(スプレッドシート)
「HTML」

この「会社名」と「人名」をメール本文に
記載させようとコードがそのまま出力されるように
なってしまう場合の解決方法教えていただけないでしょうか。

どうか、宜しくお願いいたします。

該当のソースコード

javascript

1function myFunction(){ 2 3 //スプレッドシートを取得 4 var ss = SpreadsheetApp.getActiveSpreadsheet(); 5 var sheet = ss.getActiveSheet(); 6 7 //データを取得 8 var rows = sheet.getLastRow()-2; //カラム行は除く 9 var columns = sheet.getLastColumn(); 10 var range = sheet.getRange(3,1,rows,columns); 11 var datas = range.getValues(); 12 13 //配列を宣言 14 var array = []; 15 16 //HTMLメールを取得 17 var html = HtmlService.createHtmlOutputFromFile("HTMLメール").getContent(); 18 19 //データ(各行)に対して繰り返し 20 datas.forEach(function(data){ 21 22 try{ 23 24 var category = data[0]; 25 26 var recipient = data[1]; 27 var cc = data[2]; 28 var bcc = data[3]; 29 30 var subject = data[4]; 31 32 var aaa = data[5]; 33 var bbb = data[6]; 34 35 var body = html; 36 37 var attachments = []; 38 39 var status = data[7]; 40 41 if(status === "完了"){ 42 43 var result = "完了"; 44 var message = ""; 45 46 } else { 47 48 var options = { 49 cc:cc, 50 bcc:bcc, 51 attachments:attachments, 52 "htmlBody": html 53 } 54 55 if(category === "下書き"){ 56 GmailApp.createDraft(recipient, subject, body, options); //下書き作成 57 } else if(category === "送信"){ 58 GmailApp.sendEmail(recipient, subject, body, options); //送信 59 } 60 61 var result = "完了"; 62 var message = ""; 63 } 64 65 } catch(e) { 66 67 var result = "error"; 68 var message = e; 69 70 } finally{ 71 72 array.push([result,message]); 73 74 } 75 76 }); 77 78} 79 80```HTML 81<!DOCTYPE html> 82<html> 83 <head> 84 </head> 85 <body> 86  <?=data[5] ?> 87  <?=data[6] ?> 88 </body> 89</html>

試したこと

<?= ?>

・を使ってGASから取得した値をHTMLに読み込ませようとした
・data[5]の値はLogger.logで取得できていることは確認済

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

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

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

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

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

guest

回答3

2

そもそも、createHtmlOutputFromFileではなく、createTemplateFromFileでなければ、HTML内からGAS側の変数を参照して差し込むことは出来ません。

JavaScript

1let html = HtmlService.createTemplateFromFile('index').evaluate().getContent();

参考リンク:Google Apps ScriptでHTMLメルマガ配信システムを作る

投稿2021/08/04 23:14

officeforest

総合スコア410

wtst3011, sawa👍を押しています

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

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

wtst3011

2021/08/05 00:14

ありがとうございます!できそうな感じがしました! あとは、HTMLでjavascriptの変数を呼び出す方法が上手くいかないみたいで、、 やり方ご存知でしょうか? Logger.logでは変数の呼び出しが確認できたのですが、 HTMLでは呼び出しできていないみたいで、、。 エラー名:「ReferenceError: data is not defined」 ```javascript function myFunction(){ //スプレッドシートを取得 var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getActiveSheet(); //データを取得 var rows = sheet.getLastRow()-2; //カラム行は除く var columns = sheet.getLastColumn(); var range = sheet.getRange(3,1,rows,columns); var datas = range.getValues(); //配列を宣言 var array = []; //データ(各行)に対して繰り返し datas.forEach(function(data){ try{ var category = data[0]; var recipient = data[1]; var cc = data[2]; var bcc = data[3]; var subject = data[4]; var body = data[5]; Logger.log(body); Logger.log(data[5]); var status = data[6]; if(status === "完了"){ var result = "完了"; var message = ""; } else { var html = HtmlService.createTemplateFromFile('index').evaluate().getContent(); var options = { cc:cc, bcc:bcc, "htmlBody": htmlmail //メール本文をhtmlファイルに指定 } if(category === "下書き"){ GmailApp.createDraft(recipient, subject, body, options); //下書き作成 } else if(category === "送信"){ GmailApp.sendEmail(recipient, subject, body, options); //送信 } var result = "完了"; var message = ""; } } catch(e) { var result = "error"; var message = e; } finally{ array.push([result,message]); } }); var outputRange = sheet.getRange(3,7,rows,2);  outputRange.setValues(array); } ``` ```html <!DOCTYPE html> <html> <head> </head> <body> <?=data[5] ?> <?=body ?> </body> </html> ```
wtst3011

2021/08/07 05:14

お陰様で解決しました!誠にありがとうございました!
guest

1

ベストアンサー

forループ内で HTML側に 変数をセットしてから getContent する必要があると思われます。

以下を参考に

http://www.googleappsscript.info/2017-07-25/send_email.html#tocAnchor-1-5


追記

質問に掲載のコードをベースにすると以下のような感じです。(該当箇所のみ)

//createTemplateFromFile に修正 var template = HtmlService.createTemplateFromFile("HTMLメール"); //データ(各行)に対して繰り返し datas.forEach(function(data){ try{ var category = data[0]; var recipient = data[1]; var cc = data[2]; var bcc = data[3]; var subject = data[4];    //data(配列)をHTML側へ展開してから getContent template.data = data; var html = template.evaluate().getContent(); var body = html;

投稿2021/08/04 05:34

編集2021/08/05 01:42
sawa

総合スコア3002

wtst3011👍を押しています

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

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

wtst3011

2021/08/04 14:48 編集

申しわけありません。いただいたコメントと参照ページを見て色々やってみたのですが、 うまくいきませんでした。 そもそもご回答いただいたアドバイスがよく理解できておらず、、 もう少し詳細教えていただくこと可能でしょうか。
sawa

2021/08/05 01:44

追記ましたが、officeforestさんのサイトが、まさにそのまま答えですね。 しっかり読んで理解できるようになると良いです。
wtst3011

2021/08/07 05:14

ありがとうございます!お陰様で解決できました!
guest

0

ちょっと調べただけで自信ないですが、、下記だとどうですか?
<? output.append(data[5]); ?>

投稿2021/08/04 01:59

agumon

総合スコア271

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

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

wtst3011

2021/08/04 03:50

ご回答誠にありがとうございます! ただ、やはりメール本文に「<? output.append(data[5]); ?>」 がそのまま出力されてしまいました。 自分なりに考えたのですが、HTMLにデータを送るスクリプトも追加で入れないといけないなど、 ございますでしょうか? 例えば、今は下記しかjsに記載していませんが、 HtmlService.createHtmlOutputFromFile("HTMLメール").getContent(); 「return html.evaluate(); 」 をいれないと動作しないものなのかと仮設ですが考えておりまして。。 見当違いでしたら申しわけありません。
officeforest

2021/08/05 08:25

HTML側からGAS側の変数を参照する場合は、基本的にはグローバル変数でなければアクセスできません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.54%

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

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

質問する

同じタグがついた質問を見る

Google Apps Script

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