012-PCとiPhoneでレイアウトの変わるメールを送りたい

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

##PCで表示した場合
こんな感じのデザインを・・・
![kobito.1525050366.047587.png](https://qiita-image-store.s3.amazonaws.com/0/110567/1ee824ca-254b-a050-9c71-46fe8bf42cdf.png "kobito.1525050366.047587.png")

##iPhoneで表示した場合
こんな感じにしたい（手元にiPhoneなかったので画像はPCで幅狭めただけですが）。
![kobito.1525050462.422602.png](https://qiita-image-store.s3.amazonaws.com/0/110567/9d5af8f1-8149-261f-9726-aa746f477107.png "kobito.1525050462.422602.png")

というのが今回のお話。


#結論
CSSの「メディアクエリ」機能を使いましょう。
Gmailは2016年9月から[レスポンシブメールへ対応](http://www.techscore.com/blog/2016/11/01/gmail-%E3%81%8C%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96html%E3%83%A1%E3%83%BC%E3%83%AB%E3%81%AB%E5%AF%BE%E5%BF%9C%EF%BC%81%E3%81%A7%E3%80%81%E3%81%A9%E3%81%86%E3%81%AA%E3%82%8B%EF%BC%9F/ "Gmail がレスポンシブHTMLメールに対応！で、どうなる？")していたそうです。言われてみればそうだったかも？

##動作確認スクリプト
```js:sample-code1.gs
function myFunction() {
  var options = {};
  options.htmlBody = HtmlService.createHtmlOutputFromFile('mail').setSandboxMode(HtmlService.SandboxMode.IFRAME).getContent();
  GmailApp.sendEmail("hoge@example.com", "レスポンシブメールテスト", "HTML形式で表示ください", options);
}

```

```html: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)](https://developers.google.com/apps-script/reference/html/html-service#createHtmlOutputFromFile(filename) "Class HtmlService | Apps Script | Google Developers")を使ってます。
実際に運用する際はメールの内容を動的に変化させることが予想されますので、その場合この部分は`createTemplateFromFile(filename)`を使うことになるかと。

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

#注意したいこと
参考記事で拝見した注意事項を、自分メモ的にこちらにも。
##対応するCSSには限りがある
使いたいものが対応しているかどうかを事前に[確認](https://developers.google.com/gmail/design/reference/supported_css "Gmail Supported CSS Properties & Media Queries")しておきましょう。
さんざん試して「あれ？非対応なんかーい！」となった時の虚しさといったらもう。

##属性セレクタは反映されない
今回ドツボにはまったのがここ。
実は上記サンプルスクリプトは、当初以下のような記述をしていました。

```html:mail.html

@media screen and (min-width:980px) {
  th[class="fluid"]{
    }
}
@media screen and (max-width:980px) {
  th[class="fluid"]{
    }
}
```
（話題の部分だけ抜粋しています）

この記法だと`doGet()`でWeb画面として表示する際は適用されるのですが、HTMLメールとしてGmailで受信しても適用されません。


# 参考記事
- [Google Apps Scriptでレスポンシブメールを送ってみた](https://officeforest.org/wp/2018/03/31/google-apps-script%E3%81%A7%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%92%E9%80%81%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F/)
- [GmailでHTMLメールのCSSが効かない問題の対処法](https://qiita.com/yn-misaki/items/70948922d7a494f810ee)
- [Gmail Supported CSS Properties & Media Queries](https://developers.google.com/gmail/design/reference/supported_css)
- [Googleのブログ記事](https://blog.google/products/gmail/better-emails-tailored-to-all-your-devices/ "Better emails, tailored to all your devices")
- [レスポンシブ ウェブデザインの基本](https://developers.google.com/web/fundamentals/design-and-ux/responsive/?hl=ja)