【GAS】Google Apps Script 活用事例　inlineImageでメール文面に画像の挿入をした下書きを作成しよう。

メールの自動化は、想像以上に便利

GASのトリガーを使って決まった時間になったら、メールが自動で飛んでくれるのも便利なのですが、なかには、ちょっと加筆したいなとか、スプレッドシートの情報を貼り付けたいなと思うシーンがあります。社外に出すメールであれば、なおさら送る前に相手の社名や担当者の名前、部署、変換ミスがないか確認するフローがあった方がいいでしょうね。誤って送ってしまったら、もう既に後の祭りです。

そんな時は、GmailApp.sendEmail　じゃなくて、GmailApp.createDraft　を使ってみましょう。スクリプトを実行するとGmailの下書きに、あらかじめ用意したテンプレートに沿った文面が作成され、送信先を確認してから送信する事が出来ます。

今回は、シートのグラフを画像化→それをメールに貼り付けて送る下書きを作成するというスクリプトです。

サンプルはこちら

【ブログ公開用】グラフを送信する

便利だけど、グラフの見た目はシートと同じにならない。

ちょっと、グラフのレイアウトが崩れてしまいます。なので、詳細は、シート見てくださいと逃げる算段......。

完成形のスクリプト

2020/11/03　V8で書き換えました。
実務で使った際は、一つのシートに、メール送信したいグラフが2つありました。driveImage1とか、driveImage2の変数の置き方は、もうちょっと良い方法がありそうな気がします.....。

function draftEmail(){
 //送るシートのURLを取得するための記述
 const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
 const sheet       = spreadsheet.getSheetByName('グラフ');
 const url         = spreadsheet.getUrl() + '#gid=' + sheet.getSheetId();
 
 //前月の日付を取得
 const date      = new Date();
 date.setMonth(date.getMonth() -1);
 const lastMonth = Utilities.formatDate(date, 'JST', 'yyyy年MM月度');
 
 console.log('前月の日付', lastMonth);
 console.log('シートのURL', url);
 
 
 //スプレッドシートからグラフを取得する。
 const charts = sheet.getCharts();
 const folder = DriveApp.getFolderById('14By_SmRXnkPCy7GJ4STZA_rMfZgv0Q73');
 
 //フォルダ名の確認
 console.log(folder.getName());
 
 let count = 1;
 //シート上のチャートをあるだけ取得、今回は2つのみ。1つであればfor文は不要。
 for(const chart of charts) {
   const imageBlob  = chart.getBlob().getAs('image/png').setName(lastMonth + 'chart_image_'+ count +'.png');//グラフを画像に変換
   const image      = folder.createFile(imageBlob);
   count += 1;
   
 }//for
 
 
 //1度、Google Driveに保存した画像を取得
 const driveImage1 = DriveApp.getFilesByName(lastMonth + 'chart_image_'+ 1 +'.png').next();
 const driveImage2 = DriveApp.getFilesByName(lastMonth + 'chart_image_'+ 2 +'.png').next();
 
 
 //メールを送信する設定
 const mailListSheet = spreadsheet.getSheetByName('メーリス');　 
 const mailAddress   = mailListSheet.getRange(2, 2, mailListSheet.getLastRow()-1).getValues(); //メールアドレスをリストから取得して配列に入れる
 const mailCc        = "*********@gmail.com,**********@gamil.com";
 const subject       = lastMonth + "　" + "の*******集計結果について";
 const mailBody      = '';
 let mailHtmlBody    = '各位<br><br>お疲れ様です。<br>〇〇です。<br><br>********の集計結果についてご報告致します。<br>下記のグラフのように推移しています。ご確認ください。<br><br>';
 
 
 //該当するスプレッドシートのURLを貼り付ける
 mailHtmlBody += '<img src="cid:chart1"><br><img src="cid:chart2">';
 mailHtmlBody += url + '<br><br>';
 
 const options = {
   cc: mailCc,
   htmlBody: mailHtmlBody,
   inlineImages:{
     chart1: driveImage1.getBlob(),
     chart2: driveImage2.getBlob()
   }
 }
 
 GmailApp.createDraft(mailAddress, subject, mailBody, options);
 
}

ポイントはシート上のグラフ→画像にして→Google Driveに保存→そのあと、ファイル名を指定してDriveから読み込み、取得→HTML形式で貼り付けという感じです。

実は今回、この記事を書こうと思ったのは、下記の記事を読んで、こんな事もGASで出来るのかぁと知り、画像の挿入：インラインも出来るのかなぁと思ったのがきっかけです。

【GAS】レポート共有も効率よく！作成したグラフをGmailで送る方法

画像の添付だと、クリックしないと何の画像か分からない。ちょっと僕は、そこが面倒だなぁと思っていました。通販とかの販促メールだと画像が本文中に掲載されているのとかありますよね？やりたい事はまさにアレです！！

SONYさんから届いたテレビ買いませんか？メールの例、4Kディプレイとか憧れるけど、置く場所がないなぁ.....。

画像を手動で挿入する際は、インラインか添付かを選べます。これ、GASで出来ないのかなと思うのは、ごく自然な流れかなと思います。

ノンプロ研の主催者、高橋さんに聞いてみるも反応が超ドライ.....。

こうすれば、出来ます！！コード貼っときますね〜くらいの回答を期待していたのですが、現実は思い通りにならず、読み漁っていくうちに、この記事にたどり着き、ヒントを掴んで今に至ります。

GASでのメール送信についてまとめてみる - Qiita

//メールを送信する設定
 const mailListSheet = spreadsheet.getSheetByName('メーリス');　 
 const mailAddress   = mailListSheet.getRange(2, 2, mailListSheet.getLastRow()-1).getValues();

for(let i = 0; i < mailAddress.length; i++){

    const address = mailAddress[i];
    
    //送る相手、件名、本文、CCなどのオプション情報
    GmailApp.createDraft(address, subject, mailBody, options);


}

for文の中に、createDraft()や、sendEmail()を書くと名前や、シート上の値を挿入する、差し込みメールを作成する事が出来ます。

GASで送信するGmailのメッセージをプレーンでもHTMLでも送れるようにする

本文が長い場合は？

本文が長い場合は、スクリプトに書くよりも、Google Documentなどにメールのテンプレを作成し、Document本文を取得する方法がオススメです。

日付やZoom URLなど、間違ってはいけないものを、自動で挿入出来るようにしています。