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

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

ただいまの
回答率

87.59%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 602

score 1

前提・実現したいこと

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

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

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

メール本文の箇所だけ上手くいかず、
作成したメールにHTMLのコードがそのまま出力されてしまいます。
<?=data[5] ?>
<?=data[6] ?>

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

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

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

該当のソースコード

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 = [];  

 //HTMLメールを取得
 var html = HtmlService.createHtmlOutputFromFile("HTMLメール").getContent();

 //データ(各行)に対して繰り返し
 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 aaa = data[5];
     var bbb = data[6];

     var body = html;

     var attachments = [];

     var status = data[7];

     if(status === "完了"){

       var result = "完了";
       var message = "";

     } else {

       var options = {
         cc:cc,
         bcc:bcc,
         attachments:attachments,
         "htmlBody": 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]);

   }

 });

}

HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<?=data[5] ?>
<?=data[6] ?>
</body>
</html>
```

試したこと

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/08/05 09: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>
    ```

    キャンセル

  • 2021/08/07 14:14

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

    キャンセル

checkベストアンサー

+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 23:48 編集

    申しわけありません。いただいたコメントと参照ページを見て色々やってみたのですが、
    うまくいきませんでした。

    そもそもご回答いただいたアドバイスがよく理解できておらず、、
    もう少し詳細教えていただくこと可能でしょうか。

    キャンセル

  • 2021/08/05 10:44

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

    キャンセル

  • 2021/08/07 14:14

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/08/04 12:50

    ご回答誠にありがとうございます!
    ただ、やはりメール本文に「<? output.append(data[5]); ?>」
    がそのまま出力されてしまいました。

    自分なりに考えたのですが、HTMLにデータを送るスクリプトも追加で入れないといけないなど、
    ございますでしょうか?

    例えば、今は下記しかjsに記載していませんが、
    HtmlService.createHtmlOutputFromFile("HTMLメール").getContent();

    「return html.evaluate(); 」
    をいれないと動作しないものなのかと仮設ですが考えておりまして。。
    見当違いでしたら申しわけありません。

    キャンセル

  • 2021/08/05 17:25

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

    キャンセル

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

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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