メールをJavaScriptだけで送信できるようになるEmailJSの使い方

お問い合わせフォームなどを作る際には、何らかのサーバーサイドの仕組みを用意するのが一般的です。JavaScriptからSMTPサーバーに直接接続できないため、サーバー側でフォームの入力値を受け取って、メールを送信します。

そうした手間を軽減できるのがEmailJSになります。メールサーバーとWebブラウザの間に立って、メール送信を仲介してくれます。

EmailJSの使い方

EmailJSは無料でも月200通まで送信できます。まずユーザー登録を行って、ログインするとダッシュボードが表示されます。

メールサーバーの設定

まず最初にメールサーバーの設定を行います。各種メールサービスや、メール配信サービスが用意されています。Customers Mail Cloudを利用する際にはSMTPサーバーを指定してください。

そしてSMTPサーバーの設定を行います。SMTPサーバーのアドレスやポート番号は以下の通りです。

サービスプラン	SMTPホスト名	ポート番号
無料トライアル	sandbox.smtps.jp	10025
Standard	te.smtps.jp	10025
Pro	SUBDOMAIN.smtps.jp （SUBDOMAINは各ユーザに割り当てたドメイン)	10025

ユーザ名およびパスワードについて

API設定画面にて、APIユーザを作成します。アクセス権限として、SMTPは必須になります。API経由での配信を行う場合はSMTPに加えて、HTTP-APIも有効にしてください。

メールテンプレートの作成

続いてメールのテンプレートを作成します。このメールは常に指定したアドレス宛に届くので、自分宛を想定して作成します（自動返信設定も用意されています）。

テンプレートの置き換え文字列は {{〜}} という形になっています。この 〜 にはフォームの name 属性が入ります。

メール送信を試す

ではメールを送信してみます。今回はEmailJSで用意されているHTMLテンプレートを利用します。

<!DOCTYPE html>
<html>
<head>
    <title>Contact Form</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
    <script type="text/javascript">
        (function() {
            // https://dashboard.emailjs.com/admin/account
            emailjs.init('YOUR_PUBLIC_KEY');
        })();
    </script>
    <script type="text/javascript">
        window.onload = function() {
            document.getElementById('contact-form').addEventListener('submit', function(event) {
                event.preventDefault();
                // generate a five digit number for the contact_number variable
                this.contact_number.value = Math.random() * 100000 | 0;
                // these IDs from the previous steps
                emailjs.sendForm('EMAIL_SERVICE_ID', 'EMAIL_TEMPLATE_ID', this)
                    .then(function() {
                        console.log('SUCCESS!');
                    }, function(error) {
                        console.log('FAILED...', error);
                    });
            });
        }
    </script>
</head>
<body>
    <form id="contact-form">
        <input type="hidden" name="contact_number">
        <label>Name</label>
        <input type="text" name="user_name">
        <label>Email</label>
        <input type="email" name="user_email">
        <label>Message</label>
        <textarea name="message"></textarea>
        <input type="submit" value="Send">
    </form>
</body>
</html>

この中の3つの文字列を置き換えます。

キー	内容
YOUR_PUBLIC_KEY	https://dashboard.emailjs.com/admin/accountにて確認できるパブリックキーを設定します
EMAIL_SERVICE_ID	作成したメール送信サービスのIDを設定します
EMAIL_TEMPLATE_ID	作成したメールテンプレートのIDを設定します