かんがるーさんの日記

最近自分が興味をもったものを調べた時の手順等を書いています。今は Spring Boot をいじっています。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その60 )( 確認画面を作成する3 )

概要

記事一覧はこちらです。

Spring Boot + npm + Geb で入力フォームを作ってテストする ( その59 )( 確認画面を作成する2 ) の続きです。

  • 今回の手順で確認できるのは以下の内容です。
    • 確認画面の作成
    • confirm.js を見たら「修正する」ボタンは実装済で変更する必要もなかったので、「送信する」ボタンを実装します。
    • 今回はメール送信処理を書きます。

参照したサイト・書籍

目次

  1. メールを送信する処理を実装する
    1. InquiryMailHelper クラスを作成する
    2. メールのテンプレートを作成する
    3. InquiryConfirmService クラスを変更する
    4. 動作確認
  2. 次は。。。

手順

メールを送信する処理を実装する

InquiryMailHelper クラスを作成する

src/main/java/ksbysample/webapp/bootnpmgeb/helper/mail の下に InquiryMailHelper.java を新規作成し、以下の内容を記述します。

package ksbysample.webapp.bootnpmgeb.helper.mail;

import ksbysample.webapp.bootnpmgeb.helper.freemarker.FreeMarkerHelper;
import ksbysample.webapp.bootnpmgeb.web.inquiry.form.ConfirmForm;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.mail.javamail.MimeMessageHelper;
import org.springframework.stereotype.Component;

import javax.mail.MessagingException;
import javax.mail.internet.MimeMessage;
import java.util.HashMap;
import java.util.Map;

/**
 * 問い合わせフォームのメール用 Helper クラス
 */
@SuppressWarnings("PMD.AvoidThrowingRawExceptionTypes")
@Component
public class InquiryMailHelper {

    private static final String TEMPLATE_LOCATION_TEXTMAIL = "mail/inquirymail-body.ftl";

    private static final String FROM_ADDR = "inquiry-form@sample.co.jp";
    private static final String TO_ADDR = "inquiry@sample.co.jp";
    private static final String SUBJECT = "問い合わせフォームからお問い合わせがありました";

    private final FreeMarkerHelper freeMarkerHelper;

    private final JavaMailSender mailSender;

    /**
     * コンストラクタ
     *
     * @param freeMarkerHelper {@FreeMarkerHelper} オブジェクト
     * @param mailSender       {@JavaMailSender} オブジェクト
     */
    public InquiryMailHelper(FreeMarkerHelper freeMarkerHelper
            , JavaMailSender mailSender) {
        this.freeMarkerHelper = freeMarkerHelper;
        this.mailSender = mailSender;
    }

    /**
     * {@MimeMessage} オブジェクトを生成する
     * メール本文は入力画面1~3で入力された内容から生成する
     *
     * @param confirmForm {@ConfirmForm} オブジェクト
     * @return {@MimeMessage} オブジェクト
     */
    public MimeMessage createMessage(ConfirmForm confirmForm) {
        try {
            MimeMessage mimeMessage = mailSender.createMimeMessage();
            MimeMessageHelper message = new MimeMessageHelper(mimeMessage, false, "UTF-8");
            message.setFrom(FROM_ADDR);
            message.setTo(TO_ADDR);
            message.setSubject(SUBJECT);
            message.setText(generateTextUsingVelocity(confirmForm), false);
            return message.getMimeMessage();
        } catch (MessagingException e) {
            throw new RuntimeException(e);
        }
    }

    private String generateTextUsingVelocity(ConfirmForm confirmForm) {
        Map<String, Object> model = new HashMap<>();
        model.put("confirmForm", confirmForm);
        return freeMarkerHelper.merge(TEMPLATE_LOCATION_TEXTMAIL, model);
    }

}

メールのテンプレートを作成する

src/main/resources/templates の下に mail ディレクトリを新規作成します。

src/main/resources/templates/mail の下に inquirymail-body.ftl を新規作成し、以下の内容を記述します。

問い合わせフォームから入力された内容は以下の通りです。

お名前(漢字):${confirmForm.name!}
お名前(かな):${confirmForm.kana!}
性別:${confirmForm.sex!}
年齢:${confirmForm.age!}歳
職業:${confirmForm.job!}
郵便番号:〒${confirmForm.zipcode!}
住所:${confirmForm.address!}
電話番号:${confirmForm.tel!}
メールアドレス:${confirmForm.email!}

お問い合わせの種類1:${confirmForm.type1!}
お問い合わせの種類2:${confirmForm.type2!}
お問い合わせの内容:
${confirmForm.inquiry!}
アンケート:
<#list confirmForm.survey as sv>
・${sv!}
</#list>

InquiryConfirmService クラスを変更する

src/main/java/ksbysample/webapp/bootnpmgeb/web/inquiry/InquiryConfirmService.java の以下の点を変更します。

package ksbysample.webapp.bootnpmgeb.web.inquiry;

import ksbysample.webapp.bootnpmgeb.dao.InquiryDataDao;
import ksbysample.webapp.bootnpmgeb.entity.InquiryData;
import ksbysample.webapp.bootnpmgeb.helper.mail.EmailHelper;
import ksbysample.webapp.bootnpmgeb.helper.mail.InquiryMailHelper;
import ksbysample.webapp.bootnpmgeb.session.SessionData;
import ksbysample.webapp.bootnpmgeb.web.inquiry.form.ConfirmForm;
import org.modelmapper.ModelMapper;
import org.springframework.stereotype.Service;

import javax.mail.internet.MimeMessage;

/**
 * 確認画面用 Service クラス
 */
@Service
public class InquiryConfirmService {

    private final InquiryDataDao inquiryDataDao;

    private final ModelMapper modelMapper;

    private final InquiryMailHelper inquiryMailHelper;

    private final EmailHelper emailHelper;

    /**
     * コンストラクタ
     *
     * @param inquiryDataDao    {@InquiryDataDao} オブジェクト
     * @param modelMapper       {@ModelMapper} オブジェクト
     * @param inquiryMailHelper {@InquiryMailHelper} オブジェクト
     * @param emailHelper       {@EmailHelper} オブジェクト
     */
    public InquiryConfirmService(InquiryDataDao inquiryDataDao
            , ModelMapper modelMapper
            , InquiryMailHelper inquiryMailHelper
            , EmailHelper emailHelper) {
        this.inquiryDataDao = inquiryDataDao;
        this.modelMapper = modelMapper;
        this.inquiryMailHelper = inquiryMailHelper;
        this.emailHelper = emailHelper;
    }

    /**
     * 入力されたデータを INQUIRY_DATA テーブルに保存してメールを送信する
     *
     * @param sessionData {@SessionData} オブジェクト
     * @param confirmForm {@ConfirmForm} オブジェクト
     */
    public void saveToDbAndSendMail(SessionData sessionData, ConfirmForm confirmForm) {
        // INQUIRY_DATA テーブルに保存する
        InquiryData inquiryData = modelMapper.map(sessionData, InquiryData.class);
        inquiryDataDao.insert(inquiryData);

        // メールを送信する
        MimeMessage message = inquiryMailHelper.createMessage(confirmForm);
        emailHelper.sendMail(message);
    }

}
  • フィールドに以下の2行を追加します。コンストラクタにセットする処理も追加します。
    • private final InquiryMailHelper inquiryMailHelper;
    • private final EmailHelper emailHelper;
  • saveToDbAndSendMail メソッドに以下の2行を追加します。
    • MimeMessage message = inquiryMailHelper.createMessage(confirmForm);
    • emailHelper.sendMail(message);

動作確認

動作確認します。npm run springboot コマンドを実行し Tomcat を起動した後、ブラウザで http://localhost:9080/inquiry/input/01/ にアクセスします。今回はメールを送信するので smtp4dev も起動します。

入力画面1~3に以下の画像のデータを入力します。

f:id:ksby:20180617222427p:plain f:id:ksby:20180617222540p:plain f:id:ksby:20180617222726p:plain

確認画面に以下のように表示されますので、「送信する」ボタンをクリックします。

f:id:ksby:20180617222837p:plain f:id:ksby:20180617222918p:plain

完了画面が表示されます。

f:id:ksby:20180617223019p:plain

smtp4dev の画面を見るとメールが1通送信されています。「Inspect」ボタンをクリックしてメールの内容を確認します。

f:id:ksby:20180617223259p:plain

ヘッダとメール本文は問題なさそうです。

f:id:ksby:20180617223613p:plain f:id:ksby:20180617223142p:plain

「職業」「電話番号」「アンケート」を未入力・未選択にしてメールを送信しても、項目が空になるだけでエラーにはなりません。

f:id:ksby:20180617224007p:plain

次は。。。

確認画面のテストを作成します。

履歴

2018/06/17
初版発行。