HTMLメールを作るときに気をつけること・TIPS
catnoseHTMLメールを作るときの注意点をまとめていくスクラップ。お気軽にコメントしてください〜
catnose画像は背景が黒でも見えるようにする
例えば背景を白にして、そのうえに透過されたロゴ画像を配置するようなケース。最近のクライアント（確認しているのはiOSのGmailアプリ）では強制的にダークモードに変換されてしまうことがある。
つまり背景をCSSで白にしていても、強制的に黒になる可能性があるということ。このようなケースでは背景が黒でも合うような画像にしておかないといけない。
↓ こんな感じでロゴが見えなくなる
↓ GitHubから送られるメールのロゴ画像は縁が白で囲まれている
catnoseマルチパートメールを送るときにテキストメールの表示確認をする方法
同僚に教えてもらった。送信先アドレスをSMSのものにすればOK。
他の方法として、Thunderbirdをインストールして、メニューから［表示］→［メッセージの表示形式］→［プレーンテキスト］を選ぶことでtext/plainの形式でメールを確認できる。
catnose画像は表示されないことがあることに注意する
メールクライアントとユーザーの設定によってはHTML内の<img>のダウンロードがブロックされることがあるので注意する。装飾以外の<img>にはaltテキストを指定するべき。
また、画像がメール本文のHTML内の位置に必ずしも表示されるとは限らず、添付画像としてまとめられてしまう可能性もあるので注意。
waddy_uRuby on Rails Action Mailer でのマルチパートメールの作り方
- HTMLテンプレートとTEXTテンプレートを用意する方法
- メールを送るときに html と text のボディを明示的に指定する方法
がある。
HTMLテンプレートとTEXTテンプレートを用意する方法
Rails ガイドが参考になる。
html と text のボディを明示的に指定する方法
英語のほうのガイドが参考になる。
class UserMailer < ApplicationMailer
default from: 'notifications@example.com'
def welcome_email
@user = params[:user]
@url = 'http://example.com/login'
mail(to: @user.email,
subject: 'Welcome to My Awesome Site') do |format|
format.html { render 'another_template' }
format.text { render plain: 'Render text' }
end
end
end
上記の例では format.html でテンプレートパスを指定しているが、 format.html { render plainL '<p>hi</p>' } のように直接指定することも可能。別のロジックでレンダー済みのHTMLテキストをただ埋め込みたいだけ、というときに有用。
マルチパートメールの優先順位について
まず、マルチパートメールは複雑なことをやっているわけではなく、ボディ部にテキストメールとHTMLを両方埋め込んでおき、あとはメーラーに出力方法を任せる、という仕組み。
HTMLメールとテキストメールを同時に送信するマルチパートメールとは | SendGrid
で、この区切りの順序が後ろの方ほど優先して表示する、という仕様。
NOTE: From an implementor's perspective, it might seem more sensible to reverse this ordering, and have the plainest alternative last. However, placing the plainest alternative first is the friendliest possible option when mutlipart/alternative entities are viewed using a non-MIME- compliant mail reader. While this approach does impose some burden on compliant mail readers, interoperability with older mail readers was deemed to be more important in this case.
https://www.w3.org/Protocols/rfc1341/7_2_Multipart.html
前置きが長くなったが、Action Mailer で |format| do ~ endブロックを使ってマルチパートメールを構成した場合、format.text { render plain: 'Render text' } を後ろに書いちゃうとマルチパートボディ部もその順序になり、常にテキストが優先され、HTMLが表示されない、というバグが あった模様。
このバグはすでに解消されているので、今は気にしなくて良い。
より正確には 順序を指定できる :parts_order のデフォルト値がHTMLを優先する設定になっているので、何もしなればそのデフォルト値が反映されるよう修正された。