サーバーレスでのwebサイトで問い合わせフォームを作りたい
自分はQiita初投稿のひよこエンジニアなのですが、先日webサービスを新たに開発することになり、インフラ系知識ないし運用しんどいなぁ、、と思ったのでFirebaseを活用して開発することにしました。
その際、小規模とはいえサイトを公開しようとするとお問い合わせフォームがやっぱり必要になるので、なんとかそこもフロント完結しようと探したところ、SmtpJSが非常に簡単だったので使ってみました。
意外と日本語の情報が少なく感じた（特にv3が出てから）ので、記事にすることにしました。
使い方
SmtpJSにアクセスします。
自分のようにクソほど英語がわからなくて困らないくらい簡潔にガイダンスされているので基本的に説明不要なんですが、まず、以下をHTMLに貼り付けます（もちろんダウンロードしてもOK）。
<script src="https://smtpjs.com/v3/smtp.js"></script>
あとはメールを送りたい箇所で、Email.sendのメソッドを呼び出すだけです。以下は公式サイトのサンプルそのままです。
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)
);
メールサーバーも簡単に用意できる
いや、もうひとつありました。メールサーバーの準備。
これもSmtpJSがナビゲートしてくれていまして、SmtpJSのページの「No SMTP server?」のボタンから飛べるElastic Emailというサービスで簡単に用意することができます。
アカウントができたら、Account > Settings のページを開いて、必要な情報を取得します。
前述のEmail.sendの「Host」のプロパティにSettingsページの「Server」の項目（つまりsmtp.elasticemail.com）を、「Username」「Password」のプロパティにSettingsページの「User name」「Password」の項目を設定します。
あとは当たり前ですが、「To」は送信先のメールアドレス（お問い合わせフォームだったら送り先は自分ですね）、「From」は送信元のメールアドレス、「Subject」がタイトルで「Body」が本文。
「From」はいい加減なアドレスだとダメなようです。v2ではいけていた気がしますが、v3でセキュリティ強化されたためと思われます。
セキュリティ対策もOK
フロントJSで使う以上、先の「Password」にパスワードをべたっとコピペすると丸見えになってしまいますが、SmtpJS v3ではそこも対応してくれています。
「Security」のところに「SMTPの資格情報を世界中に公開したくないだって？ふっ、私たちが対策を考えてあげたよ」みたいなことが書いてあって、「Encrypt your SMTP Server」のボタンからトークンが生成されます。ドメインを入力させられるので、トークンが知られても入力したドメイン以外からは使えないということでしょうね。
おわりに
v2ではセキュリティ面がややゆるく、Gmailにやすやすとブロックされたりして少し不安だったSmtpJSですが、v3でかなり初心者にとっても使いやすくなったのではないかと思います。
ちなみに実際に作ったサービスがこちらです（小規模サロン向け予約受付システム）。
https://suzume5489.com/
ほぼweb経験値ゼロからスタートして、Qiitaにめちゃくちゃお世話になってようやく形になったので、ひよこながらも開発中に得た知見で他の方の役に立ちそうなトピックを投稿していこうと思います！