この記事は116 回閲覧されました。

2016年9月末日、GMailがようやくStyleタグによるCSSを使ったメールに対応しました。これまで、GMailはインラインCSSにのみ対応していて、例えばプログラムでメールの内容を整形するのに、<div>のタグ内に個別にstyle設定するという面倒くさい仕様でした。また、同時にメディアクエリにも対応したので、レスポンシブメールが送れるようになりました。

しかし、検索してみるとあまり情報がなく、海外のサイトでは結構まとまっていたので、Google Apps Scriptで自動応答時に送信するメールに組み込んでみました。なお、今回の新機能に関するドキュメントはこちらで閲覧できます。対応表はこちらです。社内メールで無味乾燥な文字の羅列よりも、CSSで整形したものであれば、スマフォでも読みやすいので、おすすめです。

目次

今回使用するメソッドやファイル

対応状況

CSSとメディアクエリに対応といっても、なんでもかんでも使えるというわけでもないようです。また、レスポンシブメールは受信するメーラーによって対応・非対応が別れるので、そのへんは気をつけなければいけません(といっても、GMailが一番最後発で対応してるわけですが)。とりあえずできない事から。

できない事

  • JavaScriptには対応していません。
  • 外部のCSSファイルをlinkタグで読んでも呼べません。
  • ボタンの装飾などフォームパーツに対して適用できません。(元より、メール内でのフォームパーツは使えないのですが)

できる事

  • <head>タグ内に<style>タグを用意し、その中にCSSを記述可能になりました。
  • メディアクエリが使えるので、端末の画面サイズ毎のCSS設定が可能になりました。
  • メディアクエリを使って、画像を端末の画面サイズに応じて自動リサイズが可能になりました。
  • メディアクエリを使って、端末の画面サイズに応じて特定の文字を表示・非表示可能になりました。
  • ややこしいテーブルのデザイン類も可能になりました。
  • <a>のリンクをボタンのように見せかけることが可能になりました。

対応メディアクエリ

タイプ
all screen
クエリ
min-width max-width min-device-width max-device-width orientation
min-resolution max-resolution
キーワード
and only

以前より、メール内に添付ファイルではなく外部の画像の表示や、ちょっとした画像ならばBase64でエンコードした文字列で画像埋め込み等は可能でしたが、これでより一層レスポンシブなメールが送れることになります。企業内のGoogle Appsであれば全員がGMailを使ってると思われるので、特に気にする必要はないかと思いますが外部に向けて発信するメール類には注意が必要です。

ソースコード

今回は簡単な事として、いつもフォーム等の入力内容を記述してメールで自動応答する際に使うメールの本文に、テーブルレイアウトで綺麗に整形して返してあげようと思います。テーブルレイアウトのCSSは、こちらのサイトのものを自分は使っています。

ノーマルな状態で作る

プログラムのコードの中にCSSの部分をすべて含めてしまう方法です。この方法はコードの中に含めてしまうので、CSSのメンテナンスが面倒になる事や、複数行に跨ってCSSを変数に入れる作業をしなければならないので、インラインCSSの時と面倒さはあまり変わりません。なお、GetUser()とDatekun()は次の事項からは記述を省略していますが、コードの実行には必要ですのでご注意を。

cssheadに<head>や<style>といったタグ類を収めています。cocoshuはHTMLの本文部分。今回はスプレッドシートの1つ目のレコード内容をきれいに整形して送るようにしています。見ての通り、ごちゃっとCSS部分を記述しなければならないので、ちょっと面倒です。ただこれまでのインラインで書くよりかはずっとスッキリまとめることができるようになりました。

HTML ServiceでCSSを取得

次に挑戦したいのが、HTML Serviceを使ったCSSの取り込みです。通常、HTML Serviceとはウェブサービスを生成する為のクラスなのですが、CSSをHTMLファイルの中に記述してしまい、それをgetContentで取得して、Google Apps Script内で変数に入れてしまって利用するという方法です。cssというHTMLをGAS内で作成し、そこにCSSを記述しておきます。

自分は、この方法をよく使います。CSSを使いまわすとトラブルの原因になったり、また、外部サーバの不調まで影響を受けるのが嫌というのが理由です。この辺は一長一短ですね。

GAS側

HTML側(css.html)

cssという変数にHTML Serviceで生成したものをgetContent()で取得して、変数に格納しています。これならば、CSSを分離でき、なおかつ、css.html内で綺麗に自由に書けます。非常に便利な方法です。用意したcss.htmlにはそのまんまコピペで貼り付けてるだけです。最後に、formbodyに各変数パーツを順番に組み入れてメールをしています。この時の順番に注意。

外部CSSを取り込む

GMailではHTMLメール内で外部のCSSをファイル指定して読み込む事はできません。また、HTML ServiceでCSSを組み入れる方法は、メンテナンス性がグッと向上しますが、そのスクリプト内からしか参照が出来ません(ライブラリ化すれば参照できますが、その為に仕組みを作らないといけない)。そうなると、1つのCSSファイルを用意して、使いまわしたり、他人と共有したりができないわけです。

しかし、UrlfetchAppサービスを用いて、外部のCSSファイルを取得し、getContentText()メソッドで内容を変数に取得すれば、それが可能になります。この場合、HTML Serviceは不要ですし、css.htmlといったものをスクリプト内に用意する必要もありません。外部の参照できるウェブ上のURLにCSSファイルがあればOKです。

UrlFetchサービスでCSSのURLからデータを取得し、getContentText()でテキストデータとしてcss変数に入れています。あとはほとんどコードは同じです。

実行結果

スプレッドシートのメニューに出現する「▶作業」を開くと今回の3種類のCSSメールを飛ばす項目がでます。すると以下のような形でメールが飛んできて、整形されたテーブルに値が入っているのを確認する事ができます。

図:綺麗に整形されたメールは見やすいです。

関連リンク

Pocket
このエントリーをはてなブックマークに追加
Bookmark this on Yahoo Bookmark
Pocket