JavaScript メール送信

Migel Hewage Nimesha 2023年10月12日

JavaScript JavaScript Email

JavaScript でメールを送信する
JavaScript コードへのサーバー認証情報の設定
まとめ

Web アプリケーションを使用して電子メールを送信する標準的な方法では、SMTP サーバーに電子メールを送信するように、特定の Web アプリケーションのサーバー側の構成がセットアップされている必要があります。 SMTP は Simple Mail Transfer Protocol とも呼ばれ、インターネットブラウザから電子メールを転送するために使用できます。クライアント側はサーバー側に電子メールを送信するように要求し、バックエンドは電子メールを作成して SMTP サーバーに送信します。

JavaScript を使用して、サーバー側の助けを借りずにクライアント側からメールを送信する方法があります。

JavaScript でメールを送信する

サーバーソケットのサポートが少ないため、JavaScript コードのみを使用するとダイレクトメールを送信できないことはよくある事実です。ただし、ブラウザを介した電子メール送信のプロセスでは、SMTPJS を使用できます。 JavaScript で提供されるサードパーティの無料ライブラリ。

このライブラリは、JavaScript からメールを送信する Email.send() メソッドを提供します。通常、コンタクトフォーラムはブラウザ経由でメールを送信します。

例として、次の HTML および CSS コードを使用してお問い合わせフォームを作成できます。その後、電子メールを送信するための JavaScript コードを追加できます。

コード例:

<!DOCTYPE html>
<html>
    <header>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=divce-width, initial-scale=1">
    </header>
    <body>
         <style>
        form{
            display: flex;
            flex-direction: column;
            width: 50%;
            margin: auto;
        }
        #Name,#email,#message,#btn{
            padding: 20px;
            margin-bottom: 20px;
            border: none;
            outline: none;
            background-color: #ddd;

        }
        #btn{
            width: 25%;
        }
       h1{
        text-align: center;
       }
    </style>
    <h1>Contact Us</h1>
  <form method="post">
    <input type="text" id="Name" placeholder="Your Name"><br>
    <input type="email" id="email" placeholder="Your email"><br>
    <input type="text" id="message" placeholder="Your Message"><br>
    <input type="button" value="Send Email"
        onclick="sendEmail()" />
  </form>
    </body>
</html>

上記のコードに役立つフォームを作成できます。次に、HTML ファイルに次の JavaScript コードを含める必要があります。

<script src="https://smtpjs.com/v3/smtp.js"></script>

上記のコードを含めて、smtpJS.com で入手できるコードに SMTPJS ライブラリを追加しました。ブラウザを介して電子メールを送信する以降の手順では、サーバーをセットアップして実行する必要があります。

次のステップでは、電子メールを受信者に送信するための SMTP サーバーを作成する必要があります。無料のサーバーサービスを提供する Elastic Email で SMTP サーバーを作成できます。

smtpJS.com は、Elastic Email Web アプリケーションに転送されます。 SMTP資格情報の作成で詳細を設定することにより、アカウントとSMTPサーバーを作成できます。

資格情報を作成すると、新しいサーバーの資格情報を含むポップアップウィンドウが表示されます。パスワードをコピーして保存し、後で使用することをお勧めします。

JavaScript コードへのサーバー認証情報の設定

サーバーを作成したら、smtpJS.com に戻ります。次のように Email.send() 関数を介して利用できます。

Email
    .send({
      Host: 'smtp.elasticemail.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));

このコードには、関連する詳細を置き換える HTML コードを含める必要があります。 username は、作成したメール、Elastic Email アカウント、およびパスワードです。

To は受信者の電子メールアドレスであり、From は送信者の電子メールアドレスを置き換える必要があります。また、送信ボタンは次のように JavaScript 関数をトリガーする必要があります。

<button type="button" value="send email" onclick="sendEmail()">Send</button>

次のコードで、Email.send() メソッドを含む完全なコードを作成できます。

このコードは、SMTP サーバーの作成時に Elastic Email によって提供される資格情報が含まれるまで機能しません。コードを実行するためのユーザー名とパスワードを含めます。

<!DOCTYPE html>
<html>

<head>
  <title>Send Mail</title>
  <script src=
    "https://smtpjs.com/v3/smtp.js">
  </script>

  <script type="text/javascript">
    function sendEmail() {
      Email.send({
        Host: "smtp.elasticemail.com",
        Username: "sender@email_address.com",
        Password: "Enter your password",
        To: 'receiver@email_address.com',
        From: "sender@email_address.com",
        Subject: "Sending Email using javascript",
        Body: "",
      })
        .then(function (message) {
          alert("mail sent successfully")
        });
    }
  </script>
</head>

<body>
    <style>
        form{
            display: flex;
            flex-direction: column;
            width: 50%;
            margin: auto;
        }
        #Name,#email,#message,#btn{
            padding: 20px;
            margin-bottom: 20px;
            border: none;
            outline: none;
            background-color: #ddd;

        }
        #btn{
            width: 25%;
        }
       h1{
        text-align: center;
       }
    </style>
    <h1>Contact Us</h1>
  <form method="post">
    <input type="text" id="Name" placeholder="Your Name"><br>
    <input type="email" id="email" placeholder="Your email"><br>
    <input type="text" id="message" placeholder="Your Message"><br>
    <input type="button" value="Send Email"
        onclick="sendEmail()" />
  </form>
</body>
</html>

メールを受信する受信者が複数いる場合は、メールアドレスの配列で To を設定できます。

出力：

javascript メール送信

重要なことは、SMTP 資格情報を暗号化して、クライアント側のサーバーからユーザー名とパスワードが表示されるのを防ぐことができることです。 smtpJS.com は、SMTP 認証情報を暗号化するという機能を提供しています。

この機能を使用すると、サーバー資格情報を暗号化し、必須フィールドに入力できます。その後、資格情報を構成するために、HTML コードに以下の JS コードを含めることができます。

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));

HTML コードの Secure トークンの代わりに、資格情報用に作成されたトークンを追加できます。これをコードに含めて、資格情報を暗号化できます。

このメソッドを使用すると、JavaScript を使用してメールを送信できます。

まとめ

Web サイトのフロントエンドから電子メールを送信することは、ユーザーが対話型の Web アプリケーションを構築するのに非常に役立ちます。 JavaScript は、SMTPJ ライブラリを使用してフロントエンドヘルプから電子メールを送信できる方法を提供します。

ページを更新せず、サーバー側のコーディングもせずにメールを送信できます。

著者： Migel Hewage Nimesha

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.