Ⅰ．きっかけ

先日、会社のテニス部員に大会の案内メールを送った際、よく来るメンバー以外（特に新人さん達）の反応がいまひとつでした。その理由として、「メールを通して大会の魅力を十分アピールできていなかったのではないか？」と考え、もっと魅力を伝えるべくHTMLメールを作ることにしました。

f:id:shiisuke1229:20191022190530p:image:w350 — 実際にテニス部員に送った大会の案内メール

Ⅱ．前提

会社の規定で「社員同士のメールのやり取りは会社のGmailを使うこと」と定められているため、HTMLメールの作成・送信サービスは使わずにGmailを使って送信する
私が調べた限り、Gmailの通常のメール作成画面ではHTMLメールのコードを書けないようなので、Google App Script（GAS）を利用する
HTMLメールのコードは一から書かずにSendGridで用意する
HTMLメールが表示できない（または表示不可の設定をしている）受信者がいる場合を想定して、マルチパートメールを作る

※マルチパートメールとは、受信者の環境に合わせてテキストメールとHTMLメールの形式を切り替えられるメールのこと。これを使うことで、受信者の環境がHTMLメール非対応の場合に、メールの本文や画像が表示されなかったり、レイアウトが崩れたり（下図）といった問題を回避できる。¹

f:id:shiisuke1229:20191022200417p:image:w450 — HTMLメール(左)をテキスト(右)で表示した例。ボタンのリンクが消えており、行間も広い。

Ⅲ．使用したもの

Windows10 Home 64bit
Google スプレッドシート
SendGridアカウント

Ⅳ．手順

１．HTMLメールのコードを準備する

（１）SendGridのマーケティングキャンペーン機能を使ってHTMLメールを作成・保存する²

（２）キャンペーン一覧で「Export HTML」を選択し、コードをエクスポートする

f:id:shiisuke1229:20191022211348p:plain

２．テキストメールの内容を準備する

（１）メモ帳などでテキストメールの文面を作成し、1行改行する行の末尾には"\n"を、2行改行する行の末尾には"\n\n"を記載する

f:id:shiisuke1229:20191022213932p:plain

（２）スペース部分を全て削除して1行にまとめる

３．スクリプトを準備する

（１）Google スプレッドシートを開いてタイトルを付ける（今回は「HTMLメールテスト」とした）

（２）シートのメニューから「ツール > スクリプトエディタ」を選択する

f:id:shiisuke1229:20191022211857p:plain

（３）開いたプロジェクトに名前を付ける（今回は「HTMLメール送信プロジェクト」とした）

f:id:shiisuke1229:20191022212312p:plain

（４）プロジェクトのメニューから「ファイル > 新規作成 > HTML」を選択し、「message」という名前でファイルを作成する

f:id:shiisuke1229:20191022212517p:plain

（５）初めから書かれているコードを削除し、手順１で作成したコードを貼り付ける

f:id:shiisuke1229:20191022213101p:plain

（６）「コード.gs」ファイルに戻り、以下の内容を記述する

function myFunction() {
  //「message.html」ファイルの中身を取得
  var html = HtmlService.createHtmlOutputFromFile("message").getContent();
  
  MailApp.sendEmail({
    to: 'xxxx@xxxx', //宛先メールアドレスを指定
    subject: '【テニス部】〇〇テニス大会のお知らせ', //件名を指定
    name: 'しいすけ', //差出人名を指定
    //テキストパートの本文を記述
    body: 'テニス部の皆様\n\nお疲れ様です。〇〇です。\n\n〇月〇日(〇) に、△△テニス大会が開催されます\n初心者・経験者別でトーナメントが行われ、成績上位チームには豪華賞品もあります。\n\n練習の成果を試す良い機会ですので、みなさま奮ってご参加ください。\n\n=============================\n■日時：2019年〇月〇日(〇) 9時～17時\n■場所：〇〇テニスクラブ\n■参加費：無料\n■持ち物：昼食\n■その他：終了後に懇親会あり\n=============================\n\n参加を希望される方は、以下への回答をお願いいたします。\nhttp://xxxxxxxxxxxxxxx\n\nどうぞよろしくお願いします。',
    //HTMLパートの本文を指定 
    htmlBody: html 
  });
}

（７）メニューの「ファイル > 保存」または「Ctrl + S」（Macの場合は command + S）で保存する

４．スクリプトを実行する

（１）下図の赤枠２か所の文字が一致していることを確認（一致していなければプルダウンで選択）して、メニューの「実行 > 関数を実行」または「▶ボタン」または「Ctrl + R」（Macの場合は command + R）を押す

f:id:shiisuke1229:20191022215626p:plain

（２）「承認が必要です」というダイアログが表示されるので、「承認を許可」→自分のアカウントを選択→「詳細 > HTMLメール送信プロジェクト（安全ではないページ）に移動」→「許可」という手順を踏む（初回実行時のみ）³

（３）メールが届き、HTMLメールを確認できる環境であればHTMLメールが、そうでない環境であればテキストメールが表示されていることを確認する⁴

f:id:shiisuke1229:20191022221140p:image:w450 — 実際に届いたHTMLメール

f:id:shiisuke1229:20191022221154p:image:w450 — 実際に届いたテキストメール

Ⅴ．感想

私はデザインセンスがないので、GASでのメール送信よりもHTMLメールのデザインの方がずっと大変でした💦しかし、先日送ったメールと今回作ったメールを比べた時に、今回のメールの方が見栄えが断然良かったので、頑張って作った甲斐があったなと思いました(^^) 今後、実際にテニス部員に送ってみて反応を確かめたいです。

※今回はお試しということでメールの宛先数を1件としていましたが、実際に使う場合には複数の宛先に送る方法を考える必要があります。