ほとんど静的でバックエンドのいらないサイトでも、唯一バックエンドが必要な部分がお問合せフォームだったりします。このお問合せフォーム等からのメール送信の機能をクラウドサービスとして行ってくれるのがここで紹介するEmailJSです。このサービスを使うことでGUIでポチポチ設定するだけでメール送信機能ができ、自分でプログラムを書いてバックエンドを組む必要がなくなります。
特徴
- ブラウザからREST APIでサービスのURLに直接アクセスしメールを送信できる、REST APIをラップしたJavaScriptのSDKもある
- 予めサービスの管理画面からメールのテンプレートの設定をし、APIからメール送信するときは穴埋めに使うテンプレート変数のみを送る
- 問い合わせ窓口に対するメールと、問い合わせ投稿者に対する確認メールの2通を同時に送れる
- reCAPTCHAを設定できる
- 月200通まで無料
- シンプルだが必要な機能は揃っており、使い方がわかりやすい
- ただしメールサーバー自体は別に用意する必要がある
他のメール送信PaaS(SendGrid等)にもREST APIあるよ？それで良くない？
SendGridなどメール送信のPaaSにはREST APIから使えるものがたくさんありますが、それらはブラウザから直接アクセスすることは想定していないのでそのような使い方をしてはいけません。そのようなAPIを叩くコードをブラウザのJavaScriptに入れて公開すると、テンプレート変数のみ指定するのではなくメール本文全体を指定してAPIから送信するので、任意の内容のメール（フィッシングメール等）を送る悪用ができてしまったり、APIを叩くのに必要な認証トークンの権限が広すぎて他人がメール送信以外の機能にアクセスできてしまったり、さまざまなセキュリティ上の致命的問題を生じます。EmailJSはもとよりブラウザから直接叩く前提で設計されているため、そのような問題は起こりません。
使い方
どんなサービスなのか感覚を掴んでもらうため、大雑把に使い方の手順を説明します。詳細な手順は説明がなくても実際にやればわかると思います。公式ドキュメントはhttps://www.emailjs.com/docs/にあり。
1. ユーザ登録
https://dashboard.emailjs.com/sign-upから指示に従い登録する。月200通までなら無料で、支払い情報もいらない。登録が完了すると管理画面にログインできる。
2. メールサービス設定
EmailJSではメール送信のためのサーバーを別途用意する必要がある。自前で用意したSMTPサーバーから送ったり、自分のGmailアカウントから送ったり、SendGrid等のメール配信PaaSを使うこともできる。
SMTPを使うなら以下のような設定画面。
ちなみにこの送信手段は複数設定でき、ブラウザからAPIを呼び出すときにどれを使うかIDで指定できる。
3. メールテンプレート設定
以下のような画面でメールのテンプレートを設定する。{{}}で囲まれた部分がテンプレート変数で、この部分にAPIを呼び出した時に指定した変数の値が埋め込まれる。Subject欄やReply To欄等、本文以外の場所にも使える。この例ではemail, name, messageの3つのテンプレート変数が使われているが、変数の名前も数も自由。
問い合わせ窓口に対するメールの他に問い合わせの送信者に確認メールを送りたい場合は、上部の「Auto-Reply」タブから設定できる。これを設定するとAPIからの1つのリクエストに対して2つの異なる内容、送信先のメールを送ることができる。
このテンプレートは複数設定でき、ブラウザからAPIを呼び出すときにどれを使うかIDで指定できる。
4. ブラウザからメール送信
実態はREST APIだが、それをラップしたJavaScriptのSDKがあるのでそれを使う。
お問合せフォームのHTMLのheadに以下を追加。PUBLIC_KEYは管理画面の「Account」タブに書いてある。ここではCDNを使うが、npmでインストールすることもできる。
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script>
(function(){
emailjs.init("PUBLIC_KEY");
})();
</script>
実際の送信は以下のように行う。SERVICE_IDは2.で設定したメール送信サービスのID、TEMPLATE_IDは3.で設定したテンプレートのIDである。templateVariablesがテンプレート変数名とその値のオブジェクト。
const templateVariables = {
email: 'tarou@example.com',
name: '田中太郎',
message: 'テストメッセージです',
};
await emailjs.send(
'SERVICE_ID',
'TEMPLATE_ID',
templateVariables,
);
これだけでEmailJSが指定したテンプレートと変数を元に作られたメールを送ってくれる。
あとがき
必要十分な機能がシンプルで分かりやすく提供されていて、良いサービスだと思います。ReactやVueと組み合わせてモダンな設計の問い合わせフォームが作れますね。
メールサーバーを別途用意する必要があるのが面倒と感じるかもしれませんが、メールの送信は送信アドレスのドメインの確認とか電子署名とか色々ややこしい設定が必要な可能性があるので、それは別の専門のプラットフォームに投げるというという形をとってるのでしょう。役割ごとに分業することで柔軟に構成を変えられ、それぞれのサービスはシンプルに保つことができるので悪くはないと思います。