【GAS】HTMLメールで画像をインライン表示させる２つの方法

概要

GASを使えば、アドレス一覧に一斉にメール送信したりできる（一斉送信の記事ではないです）。用途とすればやっぱりメルマガとか？だったらやっぱり、ただのテキストメールじゃなくてHTMLでカッコよく装飾したメールを送りたい！

で、HTMLの書き方なんて分からないから、よくある視覚的にHTMLメールを作れるサービスを使ってテンプレートを作った訳だけど、HTML部分をコピペしても画像が表示されない・・・。

この記事では、HTMLメールで画像をインライン表示させるときの.gs側の記述と.html側の画像部分の記述について、２つの方法を紹介。

前置き...

・使用する画像はGoogleドライブ内にある。
・HTMLファイルの名前は「本文.html」。もちろん任意^^;

①画像を添付してインライン表示させる

画像をメールに添付して、本文中にインライン表示させる方法。「コード.gs」がコチラ。

function sendHtmlMailBlob(){ 

  //ドライブ内にある画像をgetBlob
  var imgA = DriveApp.getFileById('ドライブ内の画像のID').getBlob(); 
  var imgB = DriveApp.getFileById('ドライブ内の画像のID').getBlob(); 

  //本文.htmlをgetContent
  var html = HtmlService.createHtmlOutputFromFile("本文").getContent(); 

  //宛先と件名
  var mail = '[e-mail]'; 
  var title = 'インラインメール'; 

  //メール送信
  MailApp.sendEmail({ 
    to: mail, 
    subject: title,  
    htmlBody: html, 
    inlineImages:{imgA:imgA, 
                  imgB:imgB} 
  }); 
}

HTML側、画像部分の記述がコチラ。

<img src="cid=imgA">

作成サービスで作ってダウンロードしたコード内にsrc=画像の名前みたいに画像を指定してる部分があるので、src="cid=画像の名前"に書き直してあげればOK！

②画像のリンクからインライン表示させる

画像そのものは添付せず、画像のURLからインライン表示させる方法。「コード.gs」がコチラ。

function sendHtmlMailURL(){

  //本文.htmlをgetContent
  var html = HtmlService.createHtmlOutputFromFile("本文").getContent(); 

  //宛先と件名
  var mail = '[e-mail]'; 
  var title = 'インラインメール';

  //メール送信
  MailApp.sendEmail({
    to: mail,
    subject: title, 
    htmlBody: html,
  });
}

HTML側、画像部分の記述がコチラ。

<img id="source" src="https://drive.google.com/uc?export=view&id=画像のID">

ここでポイントが２つ
・src="共有可能なリンク"ではない。
・画像の共有設定は「リンクを知っている全員」。

補足

【画像のID】
ドライブ内の画像の「共有可能なリンク」の、次の部分がIDになる。
https://drive.google.com/file/d/＜この部分＞/view?usp=sharing

【画像の属性】
HTML部分の記述で画像の属性を省略してるけど、もちろん定義してOK。

おしまい