EmailJS で JavaScript だけで確認のメールを送ろう

2021 4/07

2021年4月7日 2021年4月7日

ポートフォリオなどを作るときに、問い合わせフォームを作ると思います。
問い合わせフォームでは、メールを送る必要がありますよね。その機能のためだけにメールサーバーを契約して、
PHPを書いて、環境構築をするのは面倒です。フロントエンドだけでメールを送ることができるツールを使ってみたので紹介します。

EmailJS
https://www.emailjs.com/

使ってみると、とても便利なのですがドキュメントが英語で、あまり親切でないと感じました。
少し長くなりますが、EmailJSに興味を持ったらぜひ読んでみてください。
インターネットにつながる環境であれば、ローカルの動作確認でもメールが送信できますし、GitHub Pages の環境でも動作しますよ。

送信メール用のGmailのアカウントを一つ用意しておいてください。

1. ユーザー登録

まずはトップ画面からユーザー登録していきます。このときのメールアドレスは、問い合わせフォームで使うものとは違います。このサービスの管理者のIDです。トップページで、「CREATE FREE ACCOUNT」をクリックします。

次の画面でユーザー登録ですね。ここでは送信用のGmailのアカウントではなく、自分のメールアドレス、パスワードを設定してください。特に解説もいらないですが、必要な項目を入力して「Sign Up」をクリックします。

普通ならマイページに遷移しそうなものですが、ログイン画面になります。微妙ですね。
もう一度同じメールアドレスとパスワードを入力して、「Sign In」をクリックします。

2. Gmailアカウントを紐づける

無事にマイページに遷移したら、送信用に準備したGmailのアカウントを紐づけていきます。
EmailJS自体がメールを送るのではなく、JavaScriptを介してGmailの操作を行っています。
「Email Services」タブの「Add New Service」をクリックします。

どのメールサービスを使うのかたずねてきます。「Gmail」を選択します。いろいろなメールサービスが使えるのですね。

Name と Service ID を入力して「Connect Account」をクリックします。Name と Service ID は元々入力されているので、こだわりがなければそのままでかまいません。Service ID はコードの方で使うので、どこかに控えておいてくださいね。

下のようなダイアログが表示されます。GoogleのID とパスワードを入力しなくてもよいのですね。ここで選択するアカウントは、送信用に作成したものです。サービスを信用しないわけではありませんが、自分のアカウントは避けた方が良いと思います。

EmailJS がこのアカウントを操作しても良いか聞いてくるので、「許可」をクリックします。
このあたりの連携が非常に分かりやすくていいですね。

本当に信用できるのか再度確認してきます。Googleさん、親切ですね。「許可」をクリックします。

前の画面に戻ってくると、Connected as xxxx と表示されています。これでEmailJS と送信用のGoogleアカウントが紐づけられました。「Create Service」をクリックすると、内容が保存されてトップページに戻ります。

Email Services に送信用のGmailのアカウントが追加されました。

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

続いてメールのテンプレートを作っていきます。コードに書かなくても良いので、便利ですよね。書体だったりかなり細かな設定もできるみたいです。
始めに「Email Templates」のタブをクリック、次に「Create New Template」をクリックします。

下の様にメールの雛形を作成していきます。赤枠で囲んだ所は、フォームのname属性に紐づいてくるので、適当な名前を付けてください。この例では、以下の様に名前を付けています。

問い合わせをした人の名前： user_name
問い合わせをした人のメールアドレス： user_email
問い合わせの内容： message

青で塗ってあるbccの部分に自分のメールアドレスを入れておけば、都度確認できますね。
作成が終わったら右上の「Save」ボタンを押します。

簡単な雛形ですが、面倒でしたらコピペしてください。

{{user_name}} 様

お問い合わせありがとうございました。以下の内容で受け付けを完了しました。

{{message}}

このメールは送信専用となっております。返信をいただいてもご連絡できませんので、ご注意ください。

送信者の名前

メールのテンプレートが完成しました。赤枠のTemplate IDはコードで使うので控えておいてください。

4. User ID の確認

コードの方で使うUser ID を確認します。自分のメールアドレスを直接コードに書かなくても良いので安心ですね。
「Integration」のタブをクリックして、赤枠で囲んでいるUser ID を控えておいてください。

5. フォームの作成

ここからようやくHTMLに入っていきます。
公式の方にサンプルコードが載っていますので、まずは確認してください。
https://www.emailjs.com/docs/tutorial/creating-contact-form/

<!DOCTYPE html>
<html>
<head>
    <title>Contact Form</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
    <script type="text/javascript">
        (function() {
            // https://dashboard.emailjs.com/admin/integration
            emailjs.init('User ID');
        })();
    </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('Service ID', '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>

分かれば簡単なことなのですが、どこにIDを入れたら良いのか迷うんですよね。
9行目にUser ID、19行目にService ID とTemplate ID を入れます。
これで完成です！

6. 動作確認

作成したhtmlファイルをChromeで開きます。もちろんインターネットに繋がっている環境であれば、サーバーにアップロードされていなくても大丈夫ですよ。
開発ツールを開いて、Consoleのタブを選択します。あとは適当な名前、自分が確認することのできるメーアドレス、メッセージを入力して「Send」のボタンを押します。