💌

ActionMailer::Preview をカスタマイズして YAML 管理のメール仕様書を作る

2023/02/22に公開

やったこと

YAML で仕様を書いたら ActionMailer::Preview のプレビュー一覧で仕様が見れるようにした。

具体的なコードなど

テスト環境で ActionMailer::Preview を enable

ActionMailer::Preview はデフォルトではローカルのみだが、ローカル以外でも動かすことができる。
https://pocke.hatenablog.com/entry/2020/04/25/182306

「IP 制限をかけたい」「個人情報を表示したくない」という 2 つの理由で、今回はステージング環境(テスト環境)で閲覧できるようにした。

RAILS_ENV=staging で Preview を enable にするためのコード

# config/environments/staging.rb
Rails.application.configure do

  ...
 
  # mailer preview
  config.action_mailer.preview_path = "#{Rails.root}/spec/mailers/previews"
  config.action_mailer.show_previews = true
  config.autoload_paths += [config.action_mailer.preview_path]
end

テンプレートを上書き

以下記事の通り。
https://zenn.dev/aki77/articles/07b66c7df983b7

【本題】YAML に仕様を定義して、プレビュー一覧に表示

「サンプルタイトル」「配信ターゲット」「配信タイミング」を YAML で定義したら、プレビュー一覧に表示されるようにした。

YAML に仕様を書く

---
mail_magazine:
  weekly_magazine:
    sample_title: もうすぐ春ですね 🌸
    target: 受信許可している全てのユーザー
    timing: 毎週土曜日 21 時
notification_mail:
  like_mail:
    sample_title: あなたの投稿に「いいね」がつきました 👍
    target: 投稿に「いいね」されたユーザー
    timing: 「いいね」された時
registration:
  welcome_mail:
    sample_title: 新規会員登録完了のお知らせ
    target: 会員登録したユーザー
    timing: 新規会員登録で、認証が完了した時

これをテンプレートから読み込む

<!-- spec/mailers/previews/rails/mailers/index.html.erb -->
<% require 'yaml' %>
<% documents = YAML.load_file(Rails.root.join('spec', 'mailers', 'previews', 'mailer_meta.yml')) %>

...
<% @previews.each do |preview| %>
  <% preview.emails.each do |email| %>
      <% mail_doc = documents[preview.preview_name].try(:[], email) %>
    <ul>
      <li>サンプルタイトル: <%= mail_doc.try(:[], "sample_title") %></li>
      <li>配信ターゲット: <%= mail_doc.try(:[], 'target') %></li>
      <li>配信タイミング: <%= mail_doc.try(:[], 'timing') %></li>
    </ul>
  <% end %>
<% end %>
...

【おまけ】Tailwind CSS でデザイン調整

TailwindCSS の CDN を使ったら簡単にデザインを整えられて良かった。

<!-- spec/mailers/previews/rails/mailers/index.html.erb -->
<script src="https://cdn.tailwindcss.com"></script>

...

<div class="bg-white text-sky-900">
  ...
</div>

参考まとめ

https://pocke.hatenablog.com/entry/2020/04/25/182306
https://zenn.dev/aki77/articles/07b66c7df983b7
https://stackoverflow.com/questions/41250196/customizing-actionmailer-preview-header

Discussion