#312 Sending HTML Email
- Download:
- source code
- mp4
- m4v
- webm
- ogv
HTML形式のメールを送りたいとしましょう。通常の方法でHTMLをコーディングし、CSSのfloatやpositionを使って希望通りの見た目になるようにして、ブラウザで確認するときれいに表示されます。
さて、このメールを何千人もの購読者に送信しようとしたところ、いくつかのメールクライアントではひどい見た目になっていました。どうすればいいでしょう?
ありがたいことにHTMLメールを送信する場合のベストプラクティスについては多くの記事があり、Googleで検索すれば、例えばこの記事などがすぐに見つかります。指摘されている大事なポイントは、レイアウト処理のためにCSSの代わりにテーブルを使うということです。つまり、きれいなsemanticなHTMLはあきらめて、代わりに昔のやり方であるテーブルを使うということです。これはきれいではありませんが、やりたいことは何とか達成できます。
記事で触れられているもう一つの大事なポイントとして、多くのメールクライアントではheadタグの中身はすべて無視されてしまうので、メールの中でCSSを使う場合はインライン形式で記述する必要があります。つまり使用するCSSはすべてHTML要素のstyle属性の中で定義しなくてはいけません。これを自分で書いて保守をおこなうのは骨が折れますが、幸いこの作業を楽にしてくれるツールがあります。例えばMailchimpが提供するWebアプリケーションでは、HTMLとCSSを貼るとそれらを結合してインライン形式に変換してくれます。
HTMLメールをRailsアプリケーションから送信する場合は、作業を自動化してくれるツールがあります。その一つがPremailer Rails 3 gemで、Premailer gemを利用しています。この作業をしてくれるもう一つのgemがRoadieで、これはMailStyle gemのforkです。これらはどちらも設定が簡単で、その方法を紹介するためにここでmailitという名前の新しいRailsアプリケーションを作成して、そこにnewsletter_mailerというメーラを新規に作成します。
$ rails new mailit
$ cd mailit
$ rails g mailer newsletter_mailer weekly
create app/mailers/newsletter_mailer.rb
invoke erb
create app/views/newsletter_mailer
create app/views/newsletter_mailer/weekly.text.erb
invoke test_unit
create test/functional/newsletter_mailer_test.rb生成されるnewsletter_mailerは以下のとおりです。
class NewsletterMailer < ActionMailer::Base default from: "from@example.com" # Subject can be set in your I18n file at config/locales/en.yml # with the following lookup: # # en.newsletter_mailer.weekly.subject # def weekly @greeting = "Hi" mail to: "to@example.org" end end
weeklyアクションを修正してメールアドレスを渡せるようにして、メールのタイトルも設定します。
def weekly(email) @greeting = "Hi" mail to: email, subject: "RailsCasts Weekly" end
書き出し用のテキストテンプレートがすでに利用できるようになっています。送信するメールのテキスト版を常に持っておくのはいいことなので、まずそちらから書きましょう。
RailsCasts - Ruby on Rails Screencasts Weekly Episodes --------------------------------------------- Episode 310: Getting Started with Rails Learning Ruby on Rails can be overwhelming, especially if you are new to programming. Here I will take you on a tour through various resources to help get started with Rails. Watch Episode (7 minutes): http://railscasts.com/episodes/310-getting-started-with-rails --------------------------------------------- (rest of file omitted)
次にHTML版を書きます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>RailsCasts Weekly</title> <style type="text/css"> body, td { color:#000000; font-size:14px; font-family:Verdana,Helvetica,Arial; } .divider { background-color:#555555; height:2px; } .episode h2 { margin-top:0; margin-bottom:8px; font-size:18px; } .episode p { margin:8px 0; } .episode img { border:solid 1px #777777; } .episode .duration { font-size:11px;color:#555555; } #footer { font-size:11px; color:#555555; } #footer a { color:#555555;} </style> </head> <body> <table width="100%" id="background" border="0" cellpadding="0" cellspacing="0"> <tr><td align="center" valign="top"> <table width="650" id="main" border="0" cellpadding="0" cellspacing="20"> <tr> <td id="header" colspan="2"> <a href="http://railscasts.com/"><img src="http://railscasts.com/images/railscasts_logo.png" width="423" height="56" alt="RailsCasts"></a> </td> </tr> <tr> <td class="divider" colspan="2" bgcolor="#555555" height="2"></td> </tr> <tr class="episode"> <td> <a href="#"><img src="http://railscasts.com/assets/episodes/stills/310-getting-started-with-rails.png" width="200" height="125" alt="#310 Getting Started with Rails"></a> </td> <td valign="top"> <h2>#310 Getting Started with Rails</h2> <p>Learning Ruby on Rails can be overwhelming, especially if you are new to programming. Here I will take you on a tour through various resources to help get started with Rails.</p> <p> <a href="#">Watch Episode</a> <span class="duration">(7 minutes)</span> </p> </td> </tr> <tr> <td class="divider" colspan="2" bgcolor="#555555" height="2"></td> </tr> <tr> <td id="footer" colspan="2" align="center"> <p><a href="#">Unsubscribe</a> if you do not wish to receive these emails in the future.</p> <p>©2011 RailsCasts</p> </td> </tr> </table> </td></tr> </table> </body> </html>
HTML版をhead内のstyleタグ内でスタイル設定したことに注意してください。これらのスタイルはPremailerかRoadieによってすべて自動的にインラインに移動されます。また外部のスタイルシートを使いたければ、通常のスタイルシートのリンクを使って設定します。これらのスタイルも同じようにインラインに移動されます。このようにしたければ、これらのgemのいずれかをアプリケーションに追加します。Premailerを使用する場合は、そのgemと一緒にNokogiriかHpricotのいずれかを利用するのでそれも一緒に追加します。
gem 'hrpicot' gem 'premailer-rails3'
ここではRoadieを使用するので、それを追加してbundleコマンドを実行してインストールします。
gem 'roadie'Development環境でこれをテストするために、developmentの設定ファイルにいくつかのメールの設定をおこないます。
Mailit::Application.configure do config.action_mailer.default_url_options = { host: "railscasts.com" } config.action_mailer.raise_delivery_errors = true config.action_mailer.delivery_method = :smtp config.action_mailer.smtp_settings = { address: "smtp.gmail.com", port: 587, domain: "railscasts.com", authentication: "plain", enable_starttls_auto: true, user_name: ENV["GMAIL_USERNAME"], password: ENV["GMAIL_PASSWORD"] } # Rest of file omitted. end
ここでいくつかの設定をおこないます。default_url_optionsを自分のドメインに設定します。メールの送信時に問題があった場合に送信エラーが表示されるようにします。送信方法をSMTPにしてメールサーバ用の情報を設定します。ユーザ名とパスワードは別に設定できるように環境変数を使用しますが、好みによって直接設定してもかまいません。
メーラの設定ができたのでRailsコンソールで動作を確認してみます。その時にCSS Parser gemが警告を出すかも知れません。これについては対策はないのですが、それによる問題はなく、近々修正されるでしょう。それではテストメールを送信してみます。
> NewsletterMailer.weekly('railscasts.example@gmail.com').deliverメールは正常に送信され、表示も問題ありません。
これらのgemを利用する場合は、ここですべてを説明することができなかったので、Githubのページにあるドキュメントを読むことをお勧めします。例えばRoadie gemでは、mailメソッドにcssオプションを渡してどのファイルをインライン形式にするかを指定することができるなど、多くの情報があります。
