中山テック 代表の中山です。
さて先日「HTML+Javascript」でお問合せフォームを作るというブログを執筆しました。
その中で送信ボタンを押下後にメールを送信していましたが、SmtpJSというFW（フレームワーク）を使用しました。
今回はSmtpJSの使い方についてお話したいと思います。
SendMailTransferProtocolの略で、メールを送るためのプロトコル（決まり事）です。
①でメールを送信し、②③で宛先がどこかを特定、④⑤で送り主に届くといった流れになります。
※郵便局の流れと思ってもらえれば。アドレスはいわば住所みたいなもの
メールサーバは弊社代表メールアドレスは「XSERVER」のメールサーバを経由して送られています。
そして、メール送信は「Gmail」や「Thunderbird」といったメールソフトを使用します。
これらは①～の流れを簡単にしてくれますが先日のブログのように問い合わせフォームでは簡単には送れません。
SmtpJSとは
先述した画像の①とSMTPの橋渡しをしてくれるインターフェースだと思って頂ければと思います。
このフレームワークにより、問い合わせフォームからSMTP経由してメール送信（通知）することが出来ます。
使い方
ヘッダにJSを読み込ませる
最も楽なのはサーバに配置されているSmtpJSを読み込ませることです。
下記をヘッダに埋め込みましょう。
<script src="https://smtpjs.com/v3/smtp.js"></script>Elastic Emailに登録
クリックすると「Elastic Email」というサイトに飛びます。
というかSMTPはElastic Emailが指定したSMTP経由でしか送れません。
遷移したらEmail APIの「Try for Free」ボタンを押下します。
すると「Sign up」のラベル下にGmailで登録となっているのでそこをクリックします。
Sign upに成功するとアンケートが出てくるので全て答えます（案外長い）。
それが終わるといよいよ登録作業の開始です。
セキュリティ
この時点でメール送信は可能です。
しかし、Javascript上でユーザ名やパスワードを入力しなければならずブラウザから丸見えになります。
※悪用される可能性が高くなります
そこで払い出された識別子からセキュリティコードを作成し、パスワード等入力しなくてもいいようにします。
会員登録した時に払い出されたパスワードを後述で使用します。
再びSmtpJSのホームページに戻ります。
ちょっと下の方に行くとボタンがあるので押下します。
今後、セキュリティコードがあればユーザ名、パスワードの入力は不要です。
払い出されたセキュリティコードは下記のように使用します。
Email.send({
SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
To : 'them@website.com',
From : "you@isp.com",
Subject : "This is the subject",
Body : "And this is the body"
}).then(
message => alert(message)
);お問合せフォームを作成したブログでJavascriptを観れますので参考にしてみてください。
※ブログ開いたら右クリック→「ページのソースを表示」で確認ください
まとめ
サーバサイドでプログラミングせずともJavascriptで補完することが出来ました。
ただプラットフォームがWordpressの場合は「プラグイン」機能で簡単に作れてしまいます（汗
しかし、自前でこしらえる場合はかなり役に立つのかなとおもっております。
※もしくは勉強のため
最後までご覧頂き、ありがとうございました。
