SmtpJS v3でフロントからメール送信機能を実装

自分のブログにも載せました！
[SmtpJS v3でフロントからメール送信機能を実装](https://dfruit.page/smtpjs-v3/)
こっちの方がサンプルページもあって親切です。

##実装例 :　資料請求フォーム
SmtpJSを使ったサンプルとして今回作ってみるのが、資料請求フォームです。

機能としては以下の通り

* メールアドレスなどの入力フォーム (インプット)
* メール送信のトリーガー (ボタン)
* 必須事項(今回はメールアドレス)の入力を確認 (エラーメッセージ)
* 送信完了のお知らせ (アラート)


###土台作り (HTML, CSS)
まずはHTML, CSSで資料請求フォームの土台を作ります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1005560/7aff182a-9bda-8314-3684-832955084b57.png" width="300">

```html:index.html
<body>
  <h1>資料請求フォーム</h1>
  <div class="form-group">
    <label for="corp_name">会社名</label>
    <input type="text" name="corp_name" id="corp_name" placeholder="例）株式会社〇〇">
  </div>
  <div class="form-group">
    <label for="full_name">氏名</label>
    <input type="text" name="name" id="name" placeholder="例）ドラゴン太郎">
  </div>
  <div class="form-group">
    <label for="email">メールアドレス<span class="badge">必須</span></label>
    <input type="text" name="email" id="email" placeholder="例）〇〇〇@email.com">
    <div class="alert-msg hidden" id="email_msg">メールアドレスを入力してください</div>
  </div>
  <div class="form-group-bottun">
    <button type="submit" class="button" id="send_Doc">
      このメールアドレスに資料を送信
    </button>
  </div>
</body>
```

```css:style.css
body {
  max-width: 375px;
  margin: 0 auto;
}

h1 {
  text-align: center;
}

.form-group {
  margin: 12px;
}

.form-group label {
  display: block;
  padding: 8px;
}

.form-group input {
  display: block;
  margin: 0 auto;
  width: 280px;
  height: 30px;
}

.alert-msg {
  font-size: 12px;
  width: 280px;
  max-width: 80vw;
  color: #d41010;
  background-color: #fbe6e6;
  border-radius: 3px;
  line-height: 1.5;
  padding: 5px 10px;
  margin: 5px auto;
}

.hidden {
  display: none;
}

.shown {
  display: block;
}

.badge {
  display: inline-block;
  font-size: 10px;
  margin: 0 10px;
  padding: 0 8px;
  vertical-align: 2px;
  line-height: 14px;
  color: #d41010;
  background-color: #fbe6e6;
  border-radius: 3px;
}

.form-group-bottun {
  padding: 15px 30px;
}

```

###SmtpJSの導入

[SmtpJS](https://www.smtpjs.com)こちらの公式HPを参考に、
`body`の閉じタグの直前に`smtp.js`のスクリプトを挿入
その下に`script.js`を追加してjsファイルを作成

```diff_html:index.html
~ ~ ~
  </div>
+ <script src="https://smtpjs.com/v3/smtp.js"></script>
+ <script src="./script.js"></script>
</body>
```

`script.js`に`sendDoc()`の関数を定義して公式HPにあるコードを中に入れます。

```javascript:script.js
const sendDoc = () => {
  Email.send({
    Host : "smtp.yourisp.com",
    Username : "username",
    Password : "password",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body"
  }).then(
    message => alert(message)
  );
}
```
###メールサーバ(SMTPサーバー)を立てる
ご自身でサーバーがある場合はそちらを使っていただければいいですが、もしサーバーが無い場合でも、SmtpJSの公式ページで紹介されている[Elastic Email](https://elasticemail.com/account#/create-account?r=20b444a2-b3af-4eb8-bae7-911f6097521c)というメールサーバーサービスが１日100通までなら無料で使えます。
[SmtpJS](https://www.smtpjs.com)のページにある以下のボタンからElastic Emailのページに飛べます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1005560/4a5f7e46-4b02-1055-350e-23a27c72c933.png" width="300">
Elastic EmailではGoogleアカウントでサインアップできます。
サインアップして左下の「My Account」をクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1005560/a66c6f69-0670-ceb9-5da9-9106bea8c3c5.jpeg" width="600">
「create SMTP Credentials →」をクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1005560/1ab3023b-194d-9893-b59b-f9f0306e5f6d.jpeg" width="600">
User Nameに自分のメールアドレスを入れて「Create」
以下のようなモーダルが出現するので、パスワードを安全な場所に控えておきましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1005560/f77661b3-972b-0e2e-5e14-9af9848b2ae4.png" width="600">
ここに表示されされ情報を`sendDoc()`に入れていきましょう。
`Host`に`smtp.elasticemail.com`、`Username`に設定したメールアドレス、`Password`に保管したパスワードを入れます。ついでに`From`の送信元も`Username`と同じメールアドレスにしておきます。

```diff_javascript:script.js
const sendDoc = () => {
  Email.send({
+   Host : "smtp.elasticemail.com",
+   Username : "xxxxxx@gmail.com",
+   Password : "xxxxxxxxxxxxxxxxx",
    To : 'them@website.com',
+   From : "xxxxxx@gmail.com",
    Subject : "This is the subject",
    Body : "And this is the body"
  }).then(
    message => alert(message)
  );
}
```

###送信ボタンにイベントを設定
ボタンのクリックで`sendDoc()`の関数を発火させます。

```diff_javascript:script.js
~ ~ ~
+ const btn = document.getElementById('send_Doc');
+ btn.addEventListener('click', function() {
+   sendDoc(email,text)
+ }, false)
```

###フォームに入力された内容をメールに反映させる
`sendDoc()`に送信先のメールアドレスとメールの本文を渡せるようにする。ついでに件名も変えておく。

```diff_javascript:script.js
const sendDoc = (email, text) => {
  Email.send({
    Host : "smtp.elasticemail.com",
    Username : "xxxxxx@gmail.com",
    Password : "xxxxxxxxxxxxxxxxx",
+   To : email,
    From : "xxxxxx@gmail.com",
+   Subject : "資料請求",
+   Body : text,
  }).then(
    message => alert(message)
  );
}
~ ~ ~
```
送信ボタンをクリックした時にフォームの内容を取得して`sendDoc()`に渡す。

```diff_javascript:script.js
~ ~ ~
btn.addEventListener('click', function() {
+   const email = document.getElementById("email").value
+   const corp_name = document.getElementById("corp_name").value
+   const name = document.getElementById("name").value

+   const text = corp_name + '　' +  name + '様<br>'
+                + '資料請求ありがとうございます。<br><br><br>'
+                + '========================<br>'
+                + '　株式会社〇〇<br>'
+                + '　〒100-0001　東京都千代田区千代田1-1<br>'
+                + '========================'

+   sendDoc(email,text)
+ }, false)
```
###メールアドレスの入力を必須に
メールアドレスの欄が空だった時の処理を追加します。

```diff_javascript:script.js
~ ~ ~
btn.addEventListener('click', function() {
  const email = document.getElementById("email").value
+ if (email === '') {
+   const emailMsg = document.getElementById("email_msg");
+   emailMsg.classList.add('shown');
+   return;
+ }
  const corp_name = document.getElementById("corp_name").value
~ ~ ~
```
これでメールアドレスが空でボタンを押した時に以下のような表示が出ます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1005560/460add3c-48b6-50f6-c07c-cec63e047cb1.png" width="300">
###メールにPDFを添付
下記のように`Attachments`の項目を追加し、PDFを置いてるURLを入れてあげると、そのPDFがメールで送られます。今回はダミーのPDFを使ってます。

```diff_javascript:script.js
const sendDoc = (email, text) => {
  Email.send({
    Host : "smtp.elasticemail.com",
    Username : "xxxxxx@gmail.com",
    Password : "xxxxxxxxxxxxxxxxx",
    To : email,
    From : "xxxxxx@gmail.com",
    Subject : "資料請求",
    Body : text,
+   Attachments : [
+   {
+     name : "資料.pdf",
+     path : "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
+   }]
  }).then(
    message => alert(message)
  );
}
~ ~ ~
```

###デプロイとセキュリティ対策
ここまでで、ローカル環境で実装の動作確認を行える状態になりました。
最後に[SmtpJS](https://www.smtpjs.com)のページにもある通り、SecureTokenを発行してjs内のパスワードのベタ張を回避しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1005560/12be1275-b194-920d-b581-3a4f19189db6.png)

##コードの完成形

```html:index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>資料請求フォーム</title>
</head>
<body>
  <h1>資料請求フォーム</h1>
  <div class="form-group">
    <label for="corp_name">会社名</label>
    <input type="text" name="corp_name" id="corp_name" placeholder="例）株式会社〇〇">
  </div>
  <div class="form-group">
    <label for="full_name">氏名</label>
    <input type="text" name="name" id="name" placeholder="例）ドラゴン太郎">
  </div>
  <div class="form-group">
    <label for="email">メールアドレス<span class="badge">必須</span></label>
    <input type="text" name="email" id="email" placeholder="例）〇〇〇@email.com">
    <div class="alert-msg hidden" id="email_msg">メールアドレスを入力してください</div>
  </div>
  <div class="form-group-bottun">
    <button type="submit" class="button" id="send_Doc">
      このメールアドレスに資料を送信
    </button>
  </div>
  <script src="https://smtpjs.com/v3/smtp.js"></script>
  <script src="./script.js"></script>
</body>
</html>
```

```css:style.css
body {
  max-width: 375px;
  margin: 0 auto;
}

h1 {
  text-align: center;
}

.form-group {
  margin: 12px;
}

.form-group label {
  display: block;
  padding: 8px;
}

.form-group input {
  display: block;
  margin: 0 auto;
  width: 280px;
  height: 30px;
}

.alert-msg {
  font-size: 12px;
  width: 280px;
  max-width: 80vw;
  color: #d41010;
  background-color: #fbe6e6;
  border-radius: 3px;
  line-height: 1.5;
  padding: 5px 10px;
  margin: 5px auto;
}

.hidden {
  display: none;
}

.shown {
  display: block;
}

.badge {
  display: inline-block;
  font-size: 10px;
  margin: 0 10px;
  padding: 0 8px;
  vertical-align: 2px;
  line-height: 14px;
  color: #d41010;
  background-color: #fbe6e6;
  border-radius: 3px;
}

.form-group-bottun {
  padding: 15px 30px;
}
```

```javascript:script.js
const sendDoc = (email, text) => {
  Email.send({
    SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
    To : email,
    From : "xxxxxx@gmail.com",
    Subject : "資料請求",
    Body : text,
    Attachments : [
    {
      name : "資料.pdf",
      path : "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
    }]
  }).then(
    message => alert(message)
  );
}

const btn = document.getElementById('send_Doc');

btn.addEventListener('click', function() {
  const email = document.getElementById("email").value
  if (email === '') {
    const emailMsg = document.getElementById("email_msg");
    emailMsg.classList.add('shown');
    return;
  }
  const corp_name = document.getElementById("corp_name").value
  const name = document.getElementById("name").value

  const text = corp_name + '　' +  name + '様<br>'
               + '資料請求ありがとうございます。<br><br><br>'
               + '========================<br>'
               + '　株式会社〇〇<br>'
               + '　〒100-0001　東京都千代田区千代田1-1<br>'
               + '========================'

  sendDoc(email,text)
}, false)
```
以上

##参考ページ
[フロントJavaScriptからメール送信できるSmtpJS (v3)](https://qiita.com/shiromofufactory/items/4298848e3e6498368a85)
[SmtpJS.com](https://www.smtpjs.com)