Web版Gmailは絵文字を画像として扱うためCSSの書き方には注意しようIT系おじさんのチラシの裏2018年10月~プロフィールAUTHOR:とっちら書きたくなったときに書きたいことを書く雑記ブログ。IT系のネタが多いかも知れません。11:57とっちら1年前の記事に助けられました。14:28とっちらこの記事のお陰で60分録画できるようになりました。16:01とっちらライセンスを明示して貰えると使いやすいのですが。14:37ご回答いただきどうもありがとうございます。21:56とっちら超初心者です。)PHPでHTMLメールを送信するプログラムを書いていて、なぜか絵文字だけが予期しない形や位置に移動してしまうトラブルにハマったので備忘録として残しておきます。お急ぎの方用に先に答えを書いておくと、Web版のGmailでは絵文字を画像として扱うため、画像用のスタイルシートが適用されてしまうことが原因でした。この問題はスマホアプリ版のGmailや、なんなら低速回線用の簡易HTML形式のGmailでも発生しません。$header);?>解説PHPでメールを送信するプログラムを書いたことがあるなら、HTMLメールも別にどうってことはありません。ポイントはいくつかありますが、だいたい下記のとおり。ヘッダーにContent-Type:text/html;charset=UTF-8;を入れておくスタイルシートを使う場合はheadタグの中にstyleタグを書く件名はいつもどおりISO-2022-JPにしておくのが無難1行は1000バイト未満になるように調整する行頭にピリオド(.)が入るときはピリオド2つ(..)に変換しておくまぁNo3以降はプレーンテキストのメールでも注意すべき点なので、HTMLメール固有の注意点はNo.1とNo.2だけです。Insightsのスコアを少しでも上げるべく、styleタグはページ最下部にまとめて書け、みたいなお作法を取り入れている人もいるので、HTMLメールにそのタグを使いまわそうとするとハマりがち。head内に書きましょーね。みたいにピリオド付きの定義していることが多いので同じくハマりがち。class="hogehoge">テスト</span></body></html>なぜかスタイルが適用されないぃ~!と悩むことがあります。ように一括変換するか、対策を取りましょう。No.4の1行1000バイト云々についてはHTMLメールに限らず、プログラムでメール本文を自動生成するときにやってしまいがち。以前、「HTMLメールで一部だけ表示がくずれるときはここが怪しい」と題した記事も投稿しているので、気が向いたらそちらもどうぞ。絵文字を入れたHTMLの表示がくずれて小一時間悩むブラウザでの表示例HTMLメールの中に絵文字☺😁🤩❕を入れるテスト実際にハマったのはもっと複雑なHTMLタグですが、問題箇所の切り分けのために関係なさそうなタグをドンドン削っていき、限界までシンプルにしたのが上の例です。単純にイメージタグと文字を並べただけの状態。「☺」が「😊」へ変換されるのは想定内ですが、文中の絵文字がすべて左に寄っていますし、やたらデカくなっています。「☺」が「😊」へ変換されているのはWeb版と同じですが、文中から絵文字が外れるようなことはありません。予定どおりのデザインで表示されています。Web版のGmailでは絵文字が画像として扱われる原因は最初に書いたとおり、Web版のGmailが絵文字を画像として扱うため、下記のスタイルシートが絵文字にまで反映されてしまうのが原因でした。50pxという大きさに変更されてしまい、なんじゃこりゃァァ!!と悩みまくっていたんですね。同じWeb版でも低速回線用の簡易HTML形式のGmailではこの問題は発生しません。まとめなんでか知らんけど、Web版のGmailは絵文字を画像として扱う画像として扱われるからimgタグのスタイルシートが絵文字に反映されてしまうスマホアプリ版のGmailではそんな問題は発生しないThunderbirdでもそんな問題は発生しない低速回線用の簡易版Gmailでもそんな問題は発生しない............どう考えてもWeb版のGmailの落ち度だと思うんだけど、天下のGoogle様のWeb版Gmailを使っている膨大なユーザー数のことを考えると対応しないわけにもいきません。絵文字が含まれるHTMLメールを送信する際は、imgタグ全体に適用するようなスタイルの書き方は避け、別途クラス名を用意したり、直接imgタグのstyle属性に書くことで、絵文字に影響しないようにしたほうが良さそうです。先日投稿した「SQLiteとMySQLにおける一括更新と逐次更新でパフォーマンス比較をしてみる」に関連して、一部のサイトで実験的に並列更新部分をMySQLへ移行しています。昨日、「SQLiteとMySQLにおける一括更新と逐次更新でパフォーマンス比較をしてみる」と題して簡単なテストを実施しましたが、一括更新ならまだしも、並列処理においてはあまりに圧倒的な差があるため、そ02022-02-21SQLiteとMySQLにおける一括更新と逐次更新でパフォーマンス比較をしてみる2年くらい前だったでしょうか。コメント投稿直後ならコメントの編集/削除が可能です。※24時間経過するか、新しく投稿した場合は古い投稿の編集や削除は出来ません。※ブラウザでCookieが受け入れられない場合はこの機能は使えません。非公開にチェックを入れたコメントは管理人のみ閲覧できます。コメント投稿のガイドライン誰もが閲覧できるコメント欄ですので個人が特定できる情報等は書き込まないようにしましょう。他人のHPやブログの文章を掲載する場合は著作権法第32条「引用」の条件を満たすかご確認ください。誹謗中傷にあたる表現などは場合によっては法的な責任を問われる可能性があるためご注意ください。とっちらか~るTOP。