Google Apps Scriptでレスポンシブメールを送ってみた【GAS】
Google Apps ScriptではMailAppを使うことで簡単にメールを送信する事が出来ます。主にフォームの自動応答メールや、トリガーを使ったサマリーを自動でメールを送るなど、使い所はたくさんあります。しかし、そのまま使ったのでは、とてもシンプルすぎてなんとなく味気のないメールとなってしまいます。
そこでこのメールをCSSでデコレーションして綺麗に装飾したメールを作ってみたいと思います。またPC用とスマフォ用とで表示を切り替えて、両方で綺麗に表示する事が今回の目標です。ちなみに、GMailは2016年9月よりレスポンシブメールに対応しました。
目次
今回使用するスプレッドシート
サンプルプログラム
今回のエントリーは、CSSで装飾しつつメディアクエリを使ってPC版とモバイル版とで表示切替をしつつ、手書きでは実現できないきれいなレスポンシブ対応のメールを作成して送信しています。
2025年7月30日、Gemini APIを使ってのより高度なレスポンシブでキレイなメール送信を実現出来ました。以下のエントリーで、その手法について記載しまとめています。
プログラムの使い方
サンプルのプログラムはスプレッドシート上から使うように作られています。メニューに「作業」というものが追加されています。この中には、4種類の実行プログラムが登録されています。それぞれ実行すると、実行者にレスポンシブなメールが届くようになっています。その為、このプログラムを実行する為には、Googleアカウントでログインしている必要性があります。
※また今回は1行目のレコードのデータがメールで送られるように固定化されています。ランダムではありません。
図：4種類のCSSメールが送れます
MailAppの注意点
Google Apps ScriptのMailAppではレスポンシブメールを送信する上でいくつかの注意点があります。
- CSSは原則すべてインラインで記述しなければならない。
- 但し、<head></head>内で<style>で記述する場合は、メール本文にそれを加える事が出来る
- メディアクエリなどは全てが使えるわけではない。GMailが対応するCSSやメディアクエリ一覧をご覧下さい。
また、現在デベロッパープレビューを申し込むことで、AMP for emailが利用出来るようですが、今回はこれについては取り上げません。2018年後半にリリースするようなのでその時にでも別途、AMPHTMLメールとして項目を設けたいと思います。GMail上で色々なタスクを実行出来るようになる便利な機能ですね。
図：綺麗に整形されたメール
レスポンシブメールを作る
HTML内に<head>以下を直接コード内に記述する方法がパターン１ですが、ソースコードがとても冗長になる上に管理しにくくなるので、この方法は現在自分も使っていません。現在自分が使ってるパターンは次の３パターンです。レスポンシブメールはHTMLメールですので、MailAppにhtmlbodyオプションが必要になります。
今回使用するCSS
cssというHTMLファイルに上記のCSSを記述しておき、メール送信前のプロセスで、cssという変数にそのcssを記述したHTMLファイルを.getContent()で取得しておき、formbodyという本文用の変数の冒頭に加えています。今回のCSSはTableタグに対して装飾をしてるので、これらが綺麗に整形されます。今回のCSSは、こちらのサイトからお借りしました。
table.type08 {
border-collapse: collapse;
text-align: left;
line-height: 1.5;
border-left: 1px solid #ccc;
}
table.type08 thead th {
padding: 10px;
font-weight: bold;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 2px solid #c00;
background: #dcdcd1;
}
table.type08 tbody th {
width: 150px;
padding: 10px;
font-weight: bold;
vertical-align: top;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #ececec;
}
table.type08 td {
padding: 10px;
vertical-align: top;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.mobileHidden { display:none;}
@media screen and (min-width:480px) {
.desktopHidden { display:none;}
.mobileHidden { display:inline;}
}
HTML ServiceでCSS取得
「HTML Serviceを利用」にて送信する時のパターンです。Google Apps Scriptではファイルとしてcssやjavascriptはサポートしていないのですが、HTMLファイルとしてその中にCSSやJavaScriptを記述し、メールを送る時にHTML Serviceで内容をgetContent()で取得し、bodyにねじ込むことが出来るので、管理も楽な上にソースコードも簡潔です。
また、今回のコードはcreateHtmlOutputFromFileを使う点がポイントです。
メインコード
//HTMLサービスでCSSを取得
var css = HtmlService.createHtmlOutputFromFile('css')
.setSandboxMode(HtmlService.SandboxMode.IFRAME).getContent();
//ヘッダー部分
var formbody = "";
var csshead = "<head><style>";
var cssfoot = "</style></head>";
var cocoshu = "<body><table class='type08'><thead><tr>"
+ "<th>項目名</th>"
+ "<th>入力値</th></tr></thead><tbody>";
for(var i = 0;i<dlength;i++){
//入力値が空の場合はスルー
if(senddata[i] == ""){
continue;
}
//入力値を反映
cocoshu = cocoshu + "<tr>";
cocoshu = cocoshu + "<th scope='row'><b>" + formtitle[0][i] + "</b></th>";
//日付の時だけデータを整形
if(i == 4){
var dateman = Datekun(senddata[0][i]);
cocoshu = cocoshu + "<td>" + dateman + "</td>";
}else{
cocoshu = cocoshu + "<td>" + senddata[0][i] + "</td>";
}
cocoshu = cocoshu + "</tr>";
}
cocoshu = cocoshu + "</tbody></table><body>";
formbody = csshead + css + cssfoot + cocoshu;
//メールを送信
MailApp.sendEmail({
to: GetUser(),
subject: "CSSメールテスト",
htmlBody: formbody,
name: "HTML ServiceなCSSメール",
noReply: true
});
UrlfetchAppで外部CSSを取得
外部のサーバに配置したCSSファイルを用いたい時もあるでしょう。HTML Serviceの場合同じプロジェクト内に作ったCSSの記述したHTMLが常に必要になるので、他で使いまわしが出来ません。しかし、外部に配置したCSSならばいくらでも使いまわしが可能ですので、より便利な手法になります。
メインコード
//UrlFetchサービスでCSSを取得
var url = "https://officeforest.org/Public/cssman/tableman.css"
var css = UrlFetchApp.fetch(url).getContentText();
//ヘッダー部分
var formbody = "";
var csshead = "<head><style>";
var cssfoot = "</style></head>";
var cocoshu = "<body><table class='type08'><thead><tr>"
+ "<th>項目名</th>"
+ "<th>入力値</th></tr></thead><tbody>";
for(var i = 0;i<dlength;i++){
//入力値が空の場合はスルー
if(senddata[i] == ""){
continue;
}
//入力値を反映
cocoshu = cocoshu + "<tr>";
cocoshu = cocoshu + "<th scope='row'><b>" + formtitle[0][i] + "</b></th>";
//日付の時だけデータを整形
if(i == 4){
var dateman = Datekun(senddata[0][i]);
cocoshu = cocoshu + "<td>" + dateman + "</td>";
}else{
cocoshu = cocoshu + "<td>" + senddata[0][i] + "</td>";
}
cocoshu = cocoshu + "</tr>";
}
cocoshu = cocoshu + "</tbody></table><body>";
formbody = csshead + css + cssfoot + cocoshu;
//メールを送信
MailApp.sendEmail({
to: GetUser(),
subject: "CSSメールテスト",
htmlBody: formbody,
name: "外部CSSを用いたメール",
noReply: true
});
冒頭のコードがHTML Serviceではなく、UrlfetchAppにて外部CSSをスクレイピングさせています。その内容を以下同じように、formbodyの冒頭にねじ込んで上げています。外部サーバがBasic認証やOAuth認証されている場合には、UrlfetchAppに別途オプション設定が必要となります。
メディアクエリを使った事例
これまでの上記２つは、CSSを適用してあげる設定のレスポンシブメールでした。しかし、実際にメール送信運用する場合、相手のデバイスがPCとは限りません。PCとスマフォとで例えば「表示を切り替える」ような仕組みが必要な場合、スマフォ表示の時にPC表示されては不便ですね。その為、メディアクエリというものを用いて、PC時とスマフォ時とで表示切り替えが出来ます。
※自分の場合、相手のデバイスによって承認者向けのメールの表示URLを切り替えて上げています。スマフォからもこれでスムーズに承認作業が出来るようになりました。
メインコード
//HTMLサービスでCSSを取得
var css = HtmlService.createHtmlOutputFromFile('css')
.setSandboxMode(HtmlService.SandboxMode.IFRAME).getContent();
//ヘッダー部分
var formbody = "";
var csshead = "<head><style>";
var cssfoot = "</style></head>";
var cocoshu = "<body><table class='type08'><thead><tr>"
+ "<th>項目名</th>"
+ "<th>入力値</th></tr></thead><tbody>";
for(var i = 0;i<dlength;i++){
//入力値が空の場合はスルー
if(senddata[i] == ""){
continue;
}
//入力値を反映
cocoshu = cocoshu + "<tr>";
cocoshu = cocoshu + "<th scope='row'><b>" + formtitle[0][i] + "</b></th>";
//日付の時だけデータを整形
if(i == 4){
var dateman = Datekun(senddata[0][i]);
cocoshu = cocoshu + "<td>" + dateman + "</td>";
}else{
cocoshu = cocoshu + "<td>" + senddata[0][i] + "</td>";
}
cocoshu = cocoshu + "</tr>";
}
cocoshu = cocoshu + "</tbody></table><body>";
formbody = csshead + css + cssfoot + cocoshu;
//PCとスマフォとで表示を切り替えるテスト
formbody += "<a href='https://www.google.com/' target='_blank' class='mobileHidden'>Googleへ飛ぶ</a>"
+ "<a href='https://www.yahoo.co.jp/' target='_blank' class='desktopHidden'>Yahooへ飛ぶ</a>"
//メールを送信
MailApp.sendEmail({
to: GetUser(),
subject: "CSSメールテスト",
htmlBody: formbody,
name: "メディアクエリなCSSメール",
noReply: true
});
途中まではHTML Serviceのメールと同じコードですが、終盤の「PCとスマフォとで表示を切り替えるテスト」のセクションで、PC用とスマフォ用の表示URL切り替え項目を、formbodyに追加してあげています。使用してるCSSには、@media screenにて画面サイズから判定し、各<a>タグに指定したclassを持って、表示・非表示を実現しています。
実際にメールを送信し、それをPCで見た時とスマフォで見た時に、表示される文字とリンク先が異なって表示されるようになっています。PC用サイトとモバイル用サイトとで切り替える時に便利です（リンク先がスマフォによって表示を切り替えてくれるならば必要はありませんが）
