Web版Gmailは絵文字を画像として扱うためCSSの書き方には注意しよう
PHPでHTMLメールを送信するプログラムを書いていて、なぜか絵文字だけが予期しない形や位置に移動してしまうトラブルにハマったので備忘録として残しておきます。
お急ぎの方用に先に答えを書いておくと、Web版のGmailでは絵文字を画像として扱うため、画像用のスタイルシートが適用されてしまうことが原因でした。
この問題はスマホアプリ版のGmailや、なんなら低速回線用の簡易HTML形式のGmailでも発生しません。
PHPでスタイルシート付きのHTMLメールを送信する基本
サンプルソース
<?php
$subject = mb_encode_mimeheader('HTMLメールのテスト', 'iso-2022-jp');
$header = "From:[送信元メールアドレス]\r\n";
$header .= "Content-Type:text/html;charset=UTF-8;";
$html = '
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
img {
width:50px;
height:50px;
object-fit:contain;
float:left;
}
</style>
</head>
<body>
<img src="/uploads/s/logo300x80.png">
HTMLメールの中に絵文字☺😁🤩❕を入れるテスト
</body>
</html>';
mail('[送信先メールアドレス]', $subject, $html, $header);
?>
解説
PHPでメールを送信するプログラムを書いたことがあるなら、HTMLメールも別にどうってことはありません。ポイントはいくつかありますが、だいたい下記のとおり。- ヘッダーにContent-Type:text/html;charset=UTF-8;を入れておく
- スタイルシートを使う場合はheadタグの中にstyleタグを書く
- 件名はいつもどおりISO-2022-JPにしておくのが無難
- 1行は1000バイト未満になるように調整する
- 行頭にピリオド(.)が入るときはピリオド2つ(..)に変換しておく
まぁNo3以降はプレーンテキストのメールでも注意すべき点なので、HTMLメール固有の注意点はNo.1とNo.2だけです。特にNo2については、最近だとGoogle様のPage Speed Insightsのスコアを少しでも上げるべく、styleタグはページ最下部にまとめて書け、みたいなお作法を取り入れている人もいるので、HTMLメールにそのタグを使いまわそうとするとハマりがち。head内に書きましょーね。
同様に、5番目のピリオドについてもWebページ上で使っているHTMLタグをそのままコピペして持ってくると、スタイルシートのクラス名で、.hogehoge みたいにピリオド付きの定義していることが多いので同じくハマりがち。
そのため、下記のようなHTMLを送信しようとして、
<html>
<head>
<style>
.hogehoge { color:red; }
</style>
</head>
<body>
<span class="hogehoge">テスト</span>
</body>
</html>
なぜかスタイルが適用されないぃ~!と悩むことがあります。..hogehogeと書くか、str_replace("\r\n.", "\r\n.."); のように一括変換するか、対策を取りましょう。
No.4の1行1000バイト云々についてはHTMLメールに限らず、プログラムでメール本文を自動生成するときにやってしまいがち。以前、「HTMLメールで一部だけ表示がくずれるときはここが怪しい」と題した記事も投稿しているので、気が向いたらそちらもどうぞ。
絵文字を入れたHTMLの表示がくずれて小一時間悩む
ブラウザでの表示例
実際にハマったのはもっと複雑なHTMLタグですが、問題箇所の切り分けのために関係なさそうなタグをドンドン削っていき、限界までシンプルにしたのが上の例です。
単純にイメージタグと文字を並べただけの状態。
Web版のGmailでの表示例
「☺」が「😊」へ変換されるのは想定内ですが、文中の絵文字がすべて左に寄っていますし、やたらデカくなっています。
スマホアプリ版のGmailでの表示例
「☺」が「😊」へ変換されているのはWeb版と同じですが、文中から絵文字が外れるようなことはありません。予定どおりのデザインで表示されています。
Web版のGmailでは絵文字が画像として扱われる
原因は最初に書いたとおり、Web版のGmailが絵文字を画像として扱うため、下記のスタイルシートが絵文字にまで反映されてしまうのが原因でした。
<style>
img {
width:50px;
height:50px;
object-fit:contain;
float:left;
}
</style>
実際にはここまで大雑把な指定ではなく、特定のクラスの下のimgタグをfloat:left;にする、みたいなよくある指定をしていたのですが、そのクラスに囲まれる形で絵文字が入っていたため、絵文字にまでfloatが適用されて、文中から飛び出し、左側に寄せられ、かつサイズまで50px 50pxという大きさに変更されてしまい、なんじゃこりゃァァ!!と悩みまくっていたんですね。
同じWeb版でも低速回線用の簡易HTML形式のGmailではこの問題は発生しません。
まとめ
- なんでか知らんけど、Web版のGmailは絵文字を画像として扱う
- 画像として扱われるからimgタグのスタイルシートが絵文字に反映されてしまう
- スマホアプリ版のGmailではそんな問題は発生しない
- Thunderbirdでもそんな問題は発生しない
- 低速回線用の簡易版Gmailでもそんな問題は発生しない
…………どう考えてもWeb版のGmailの落ち度だと思うんだけど、天下のGoogle様のWeb版Gmailを使っている膨大なユーザー数のことを考えると対応しないわけにもいきません。
絵文字が含まれるHTMLメールを送信する際は、imgタグ全体に適用するようなスタイルの書き方は避け、別途クラス名を用意したり、直接imgタグのstyle属性に書くことで、絵文字に影響しないようにしたほうが良さそうです。