やりたいこと

ECサイトで商品購入した際に購入商品の明細をメールで送りたい.

注意点: 今回はactive mailerの設定とどのようなメールが届くのかというのを開発環境で見ていこうと思います。実際のメールに届くわけではありません。

完成像

全体像

①メーラーを作成する.
②メーラーの編集.
③viewを作成と編集する.
④好きなコントローラーでメーラーのアクションを呼び出す.
⑤letter_opener_webというgemをインストール.
⑥railsでletter_opener_webの設定をする.

①メーラーを作成する

下記のコマンドでメーラーを作成

bin/rails generate mailer Customer　#ここは任意の名前でOK.今回はCustomerとします

⚠️メーラーとはコントローラーのようなものとお考えください(メール専用のコントローラーと認識していただいても大丈夫です)

このコマンドを実行すると

create  app/mailers/customer_mailer.rb

app/mailers/配下にメーラーが作成されます。

②メーラーの編集

⇨メーラーの中にアクションを追加します(この時点でコントローラーと構造は同じことがわかると思います)

class CustomerMailer < ApplicationMailer

  def send_invoice
    @customer = params[:customer]
    @purchased_products = @customer.purchased_products
    mail(to: @customer.email, subject: '購入ありがとうございます')
  end
end

今回は購入処理の後に明細書を送信したいのでsend_invoiceというアクション名で作成していきます。
コントローラーと同じでこのアクション内で使用しているインスタンス変数(@customerや@purchased_productsなど)はこの後作成するメーラーのviewで使用可能です.
目新しいのは以下の部分だと思います。

 mail(to: @customer.email, subject: '購入ありがとうございます')

mail()メソッドで実際にメールを送ります。引数のto:で「どこのメールアドレス」にメールを送信するかを指定して、subject:でメールのタイトルを指定します。

③viewを作成と編集する.

app/views/customer_mailer/配下にメーラーの中のアクション名.html.erbでhtmlファイルを作成します.
app/views/ここは人それぞれ異なる/ 僕の場合下記を作成.

app/views/customer_mailer/send_invoice.html.erb

<html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
  </head>
  <body>
    <h1><%= @customer.first_name %>様、ご購入いただき誠にありがとうございます</h1>
    <p>
     こちら今回のお買い物の購入明細でございます
    </p>
    <table class="table table-striped-columns"> 
    <tr>
     <th scope="col">商品名</th>
     <th scope="col">料金</th>
     <th scope="col">数量</th>
     <th scope="col">合計</th>
    </tr>
    <% @purchased_products.each do |purchased_product|  %>
    <tr>
      <td><%=purchased_product.name%></td>
      <td><%=purchased_product.price%>円</td>
      <td><%=purchased_product.quantity%>個</td>
    </tr>
    <% end %>
     <tr>
      <td></td>
      <td></td>
      <td><%=calc_mail_total_quantity(@purchased_products)%>個</td>
      <td><%=calc_mail_total_price(@purchased_products)%>円</td>
    </tr>


    </table>
 
  </body>
</html>

このようにhtml形式で記載していきます。ここまででメールを送る下準備ができました。

④好きなコントローラーでメーラーのアクションを呼び出す.

下記のアクションで呼び出す

メーラー名.with(キー:値).アクション名.deliver_nowメソッド

withメソッドでキーと値を指定することでメーラーでparams[:キー]とすると値が取り出せます

 def create
    @customer = Customer.new(customer_params)
    if @customer.save 
      create_purchased_products
      @cart.destroy
      redirect_to   products_path, flash: { primary: '購入ありがとうございます' }
      CustomerMailer.with(customer: @customer).send_invoice.deliver_now
end

このままではまだメールは送ることでができません。smtpサーバーを立てないと実際にメールを送ることはできません。しかし、今回は開発環境でどんなメールが送られてくるのかを見たいだけなので次のgemを使うことでサーバーを立てずに済みます。

⑤letter_opener_webというgemをインストール.

group :development do
  gem 'letter_opener_web', '~> 2.0'
end

bundle install

⑥railsでletter_opener_webの設定をする.

railsのconfig/environments/development.rbこのファイルを開き下記2行を追記します

config.action_mailer.delivery_method = :letter_opener
config.action_mailer.perform_deliveries = true

routes.rbに下記一行追記

Rails.application.routes.draw do
  mount LetterOpenerWeb::Engine, at: "/letter_opener" if Rails.env.development? #この行を追記
end

最後にlocalhost:3000/letter_openerこのurlをブラウザーから飛べば完成画像のような画面が表示されます

参考情報

railsguides.jp

GitHub - ryanb/letter_opener: Preview mail in the browser instead of sending.

ume

rails7 開発環境でメールを送信機能実装