やりたいこと

GASでHTMLメールを送るようになって以降、通知メールでテーブルレイアウトを利用することが増えました。
仕事柄「PCでもiPhoneでも／いつでもどこでも」メールを確認しなければならないのですが、iPhoneでテーブルレイアウトを表示すると横にスクロールしなければならず、ちょっとストレスが溜まります。

PCで表示した場合

こんな感じのデザインを・・・

iPhoneで表示した場合

こんな感じにしたい（手元にiPhoneなかったので画像はPCで幅狭めただけですが）。

というのが今回のお話。

結論

CSSの「メディアクエリ」機能を使いましょう。
Gmailは2016年9月からレスポンシブメールへ対応していたそうです。言われてみればそうだったかも？

動作確認スクリプト

sample-code1.gs

function myFunction() {
  var options = {};
  options.htmlBody = HtmlService.createHtmlOutputFromFile('mail').setSandboxMode(HtmlService.SandboxMode.IFRAME).getContent();
  GmailApp.sendEmail("hoge@example.com", "レスポンシブメールテスト", "HTML形式で表示ください", options);
}

mail.html

<head><style>
@media screen and (min-width:980px) { 
    .desktopHidden { display:none;}
    .mobileHidden { display:inline;}
    th.fluid {
     background-color: #ffb6c1; 
    }
}
@media screen and (max-width:980px) {
    .desktopHidden { display:inline;}
    .mobileHidden { display:none;}
    th.fluid{
     display: block !important;
     width: 100% !important;
     clear: both;
    }
    th.fluid {
     background-color: #bde9ba; 
    }
}

</style></head>

<table width="100%" border="1" cellpadding="0" cellspacing="0" style="border: 2px #000000 solid;">
    <tr>
        <th class="fluid" width="50%">項目1</th>
        <td class="fluid" width="50%">テキスト</td>
    </tr>
    <tr>
        <th class="fluid" width="50%">項目2</th>
        <td class="fluid" width="50%">テキスト</td>
    </tr>
</table>
<a href='https://www.yahoo.co.jp/' target='_blank' class='desktopHidden'>モバイルでのみ表示</a>
<a href='https://www.google.com/' target='_blank' class='mobileHidden'>PCでのみ表示</a>

解説

var options = {}

sendEmailメソッドの第4引数に直接描く方法もあるのですが、私は変数optionsを毎回指定して使っています。
（実際に動かすスクリプトではfromやCC、BCCを設定するので、使いまわしの意味で）

HtmlService.createHtmlOutputFromFile('mail')

今回サンプルファイルとして用意した「mail.html」にはスクリプトレットがないためcreateHtmlOutputFromFile(String)を使ってます。
実際に運用する際はメールの内容を動的に変化させることが予想されますので、その場合この部分はcreateTemplateFromFile(filename)を使うことになるかと。

@media screen and (min-width:980px)

今回の本命。
min-widthとmax-widthをいつも間違うのですが
- スタイルが適用される最下限サイズを指定＝min-width
- スタイルが適用される最下限サイズを指定＝max-width
と覚えるようにしましょう。

注意したいこと

参考記事で拝見した注意事項を、自分メモ的にこちらにも。

対応するCSSには限りがある

使いたいものが対応しているかどうかを事前に確認しておきましょう。
さんざん試して「あれ？非対応なんかーい！」となった時の虚しさといったらもう。

属性セレクタは反映されない

今回ドツボにはまったのがここ。
実は上記サンプルスクリプトは、当初以下のような記述をしていました。