【JavaScript】SmtpJSで簡単にメール送信【Elastic Email】
今話題の放置ゲー「キノコ伝説」無料DLはこちら(PR)

代表からの切実なお願い
トラッキング「許可」お願いいたしますm(_ _)m

中山テック 代表の中山です。

さて先日「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の場合は「プラグイン」機能で簡単に作れてしまいます(汗

しかし、自前でこしらえる場合はかなり役に立つのかなとおもっております。

※もしくは勉強のため

最後までご覧頂き、ありがとうございました。

  • プログラミング関連記事
※中山テックに掲載しているゲーム画像の著作権、商標権、その他知的財産権は、当該コンテンツの提供元に帰属します


Anker PowerCore 10000 (10000mAh 大容量 モバイルバッテリー)【PSE技術基準適合/PowerIQ搭載】 iPhone&Android対応 (ブラック)

新品価格
¥2,990から
(2024/1/20 01:31時点)

おすすめの記事