【Google Apps Script】メルマガ自動配信、Gmail内の画像のインライン表示方法

前提・実現したいこと

メルマガの配信システムを作成しているのですが、
スプレッドシートに名前、メールアドレスリストを作成し、
指定したドキュメント内のテキストは自動で送るよう設定はできたのですが、
ドキュメント内に貼り付けている画像がGメール内でインライン表示されません。

必ずドキュメント内の文章でなければならないというわけではないので
自動化するメール本文内容に画像が添付ではなくインライン表示されていれば問題ございません。

初心者で色々と間違っているところもあると思いますが宜しくお願い致します。

該当のソースコード

function
1 
2  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート名');
3  console.log(sheet.getName());
4  const lastRow = sheet.getLastRow();;
5  
6  const DOC_URL = 'ドキュメントのURL'; 
7  const doc = DocumentApp.openByUrl(DOC_URL);
8  const docText = doc.getBody().getText();
9 
10  const subject = 'メルマガ送信テスト';
11  const options = {name: 'タイトル'};
12   
13  for(let i = 2; i <= lastRow; i++){
14 
15    const company = sheet.getRange(i, 1).getValue();
16    const lastName = sheet.getRange(i, 2).getValue();　
17    const firstName = sheet.getRange(i, 3).getValue();　
18    const recipient = sheet.getRange(i, 4).getValue();
19    
20    const body = docText
21      .replace('{名前}',company)
22      .replace('{姓}',lastName)
23      .replace('{名}',firstName);
24    
25    GmailApp.sendEmail(recipient, subject, body, options);
26  }
27コード

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

ベストアンサー

Gmail.sendEmail()の第４引数の options に htmlBodyとinlineImagesを指定することでインライン画像付きのHTMLメールを送ることができます。

GmailApp.sendEmail(recipient, subject, body, options)

https://developers.google.com/apps-script/reference/gmail/gmail-app#sendemailrecipient,-subject,-body,-options

画像は取得した Blob に setName で任意の名前を付け、HTML に <img src="cid:myImage1">のような形で指定した上で、inlineImages に Blob を指定します。

JavaScript
1function myFunction() {
2    const blob = DriveApp.getFileById("画像ファイルのID").getBlob();
3    blob.setName("myImage1");
4
5    const htmlBody = `<!DOCTYPE html>
6<html>
7    <body>
8        <h3>はじまり</h3>
9        <img src="cid:myImage1" />
10        <h3>おわり</h3>
11    </body>
12</html>`;
13
14    const plainBody = "テキストボディ";
15
16    GmailApp.sendEmail("recipient@example.com", "HTMLテスト", plainBody, {
17        htmlBody: htmlBody,
18        inlineImages: { myImage1: blob },
19    });
20}

（追記）HTMLService/HTMLTemplate を使って、変数の埋め込みとHTMLエンコードを丸投げするサンプルを追記しておきます。

JavaScript
1function myFunction2() {
2  const templateBody = `<!DOCTYPE html>
3<html>
4<body>
5こんにちわ<?=company?> <?=lastName?> <?=firstName?>様<br>
6</body>
7</html>`;
8  
9  const template = HtmlService.createTemplate(templateBody);
10  template.company = "(会社名 & 会社名)";
11  template.firstName = "(名)";
12  template.lastName = "(姓)";
13  
14  const htmlBody = template.evaluate().getContent();
15  
16  console.log(`htmlBody = ${htmlBody}`);
17}

投稿2020/06/12 02:58

編集2020/06/15 02:49

draq

総合スコア2573

sehh

2020/06/15 02:06 編集

ご回答ありがとうござます！早速実践してみましたところ画像の貼り付けできました！現在スプレッドシートの指定リストの指定行のメールアドレスリストには送れるようになったのですが。本文中でのスプレッドシートの指定行の名前の差込ができなくて困っています。。下記にコード貼らせて頂くので間違っている部分がございましたらご教示頂けますと幸いです！ function myFunction() { } const blob = DriveApp.getFileById(“画像のID”).getBlob(); blob.setName("myImage1"); const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(‘シート名’); console.log(sheet.getName()); const lastRow = sheet.getLastRow();; const plainBody = "テキストボディ"; for(let i = 2; i <= lastRow; i++){ const company = sheet.getRange(i, 1).getValue(); const lastName = sheet.getRange(i, 2).getValue();　 const firstName = sheet.getRange(i, 3).getValue();　 const recipient = sheet.getRange(i, 4).getValue(); const htmlBody = `<!DOCTYPE html> .replace('{名前}',company) .replace('{姓}',lastName) .replace('{名}',firstName); <html> <body> <h3>こんにちわ{名前}様</h3> <img src="cid:myImage1" /> <h3>おわり</h3> </body> </html>`; GmailApp.sendEmail(recipient, “件名”, plainBody, { htmlBody: htmlBody, inlineImages: { myImage1: blob }, }); }

draq

2020/06/15 02:09

構文レベルでいろいろ間違ってますが、これ本当のコードですか？

draq

2020/06/15 02:20

関係ない部分はバッサリカットしました。 const htmlBody = `<!DOCTYPE html> <html> <body> <h3>こんにちわ{名前}様</h3> <img src="cid:myImage1" /> <h3>おわり</h3> </body> </html>` .replace("{名前}", company) .replace("{姓}", lastName) .replace("{名}", firstName);

draq

2020/06/15 02:42

あと当たり前ですが HTML を動的に変更しているので埋め込む文字列は必要に応じて HTML エンコードが必要です。(& => & とか) 面倒なら HTMLService + HTMLTemplate に丸投げするか。

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

正攻法の回答は draqさんが書かれている通りですが、ちょっとハードルが上がりますよね。本格的なメルマガやりたいなら、GASじゃなくて専用のサービスを利用することをお勧めします。

そこまでのものは不要で、多少の制約は許容できるのであれば、以下が参考になるかも。

html文を用意するのも面倒というか、ユーザーが使えないという難点があり私も以前いい方法ないものかと悩みました。ネット上の記事もHTML文を用意するってのばかりなので・・・。で、いろいろ試行錯誤して、以下の方法を現在は使ってます。

■テンプレートの下準備
・ドキュメントでなく、本文となるメールテンプレートをGmailで作成し自分に送信。（その際、太字や文字の色を変えるなど装飾可能。差し込み用の {名前} などはそのまま使える）
・写真をインラインで挿入する際は、上記テンプレートのメール作成時に ウェブアドレス URLで挿入を選択。（GoogleDrive上の写真もフル公開にして直リンクアドレスに変換すればOK）
※ローカルの写真を直接貼り付けやフォトから選択だと簡単にはいかなくなります。

■GAS側の処理
・件名もしくは、タグ等で条件に合致したGmailを1件だけ取得するコードを書いて、テンプレートとなるメールを取得。
・ .getBody() で本文の部分をHTMLで取得。
・.getBody() で取得したHTMLの本文に対して .replace() する。
・最後の送信処理は draqさんが書かれているコードの通り、GmailApp.sendEmail()のオプションで、htmlBody を指定してあげる。

こんな感じで簡易的にドキュメントを使用した形と同じような使い勝手で、HTMLメールの1to1メールシステムっぽいのが実現できます。

普通に使えてますが細かい検証をしてないので、どんなケースでも大丈夫か？は不明です。もしかするとエンジニアの方からすると突っ込みどころ満載化かも。。

必ずテストで1通送ってテストするのと、画像は公開してよいものである必要があります。

投稿2020/06/13 02:36

sawa

総合スコア3002

sehh

2020/06/15 02:06

sawa様ありがとうございます。完全に初心者でわからないところだらけで苦戦しています^^; ご回答ありがとうございます！テンプレートの下準備はできたのですが、下記のコードが調べてもよくわからずでして【・件名もしくは、タグ等で条件に合致したGmailを1件だけ取得するコードを書いて、テンプレートとなるメールを取得。】色々と試行錯誤しておりますが、もし何かアドバイス頂けございましたらご教示いただけると幸いです！宜しくお願い致します。

sawa

2020/06/15 02:25 編集

https://tonari-it.com/gas-gmail-search-thread/ 上記サイトのコードが参考になるかと。 const max = 1 にして、 forの処理はいらないから messagesForThreads[0][0].getBody() でHTML本文を取得

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

あなたの回答