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

前提・実現したいこと

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で取得できていることは確認済

行動規範の内容に同意します

回答3件

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

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

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

投稿2021/08/04 23:14

officeforest

総合スコア412

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

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

行動規範の内容に同意します

ベストアンサー

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

2021/08/04 14:48 編集

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

sawa

2021/08/05 01:44

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

wtst3011

2021/08/07 05:14

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

行動規範の内容に同意します

ちょっと調べただけで自信ないですが、、下記だとどうですか？
<? 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側の変数を参照する場合は、基本的にはグローバル変数でなければアクセスできません。

行動規範の内容に同意します

あなたの回答