Open2022/01/13にコメント追加5

HTMLメールを作るときに気をつけること・TIPS

mail

catnose

HTMLメールを作るときの注意点をまとめていくスクラップ。お気軽にコメントしてください〜

catnose

画像は背景が黒でも見えるようにする

例えば背景を白にして、そのうえに透過されたロゴ画像を配置するようなケース。最近のクライアント（確認しているのはiOSのGmailアプリ）では強制的にダークモードに変換されてしまうことがある。

つまり背景をCSSで白にしていても、強制的に黒になる可能性があるということ。このようなケースでは背景が黒でも合うような画像にしておかないといけない。

↓ こんな感じでロゴが見えなくなる

↓ GitHubから送られるメールのロゴ画像は縁が白で囲まれている

catnose

マルチパートメールを送るときにテキストメールの表示確認をする方法

同僚に教えてもらった。送信先アドレスをSMSのものにすればOK。

他の方法として、Thunderbirdをインストールして、メニューから［表示］→［メッセージの表示形式］→［プレーンテキスト］を選ぶことでtext/plainの形式でメールを確認できる。

catnose

画像は表示されないことがあることに注意する

メールクライアントとユーザーの設定によってはHTML内の<img>のダウンロードがブロックされることがあるので注意する。装飾以外の<img>にはaltテキストを指定するべき。

Thunderbirdでメールの画像が表示されない例

また、画像がメール本文のHTML内の位置に必ずしも表示されるとは限らず、添付画像としてまとめられてしまう可能性もあるので注意。

waddy_u

Ruby 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を優先する設定になっているので、何もしなればそのデフォルト値が反映されるよう修正された。