JavaScript【 サンプル 】10 メール送信

JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript を使用してメール送信を行うサンプルを紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. メール送信画面

　
JavaScript を使用して、このようなメール送信画面を作成することができます。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">

window.moveTo(screen.width/2-150, screen.height/2-150);
window.resizeTo(400, 300);
 
// CDO.Message オブジェクト生成
let cdoMsg = new ActiveXObject("CDO.Message");

// CDO オブジェクトコンフィグ用名前空間
let schemas = "http://schemas.microsoft.com/cdo/configuration/";

// 送信時にネットワークを利用するための設定（ 2 ： cdoSendUsingPort ）
cdoMsg.Configuration.Fields.Item(schemas+"sendusing") = 2;

// SMTPサーバ設定
cdoMsg.Configuration.Fields.Item(schemas+"smtpserver") = "★smtp-server★";
// SMTPポート設定
cdoMsg.Configuration.Fields.Item(schemas+"smtpserverport") = 25;
 
// Basic認証設定
cdoMsg.Configuration.Fields.Item(schemas + "smtpauthenticate") = true;
// 認証ユーザ設定
cdoMsg.Configuration.Fields.Item(schemas + "sendusername") = "★username★";
// 認証パスワード設定
cdoMsg.Configuration.Fields.Item(schemas + "sendpassword") = "★password★";
// SSL使用設定
cdoMsg.Configuration.Fields.Item(schemas + "smtpusessl") = true;
 
// コンフィグ更新
cdoMsg.Configuration.Fields.Update();

// 送信元アドレス設定
cdoMsg.From     = "★from-address★";
 
function send(){

    // 送信先アドレス設定
    cdoMsg.To       = document.getElementById("mail_to").value;

    // タイトル設定
    cdoMsg.Subject  = document.getElementById("mail_subject").value;

    // 本文設定
    cdoMsg.TextBody = document.getElementById("mail_textbody").value;
 
    try {

        // メール送信
        cdoMsg.Send();

    } catch(e) {

        // エラー発生時の処理
        alert(e.message);
    }
}
</script>

<div style="background-color : #CCC;">
 
<table>
    <tr>
        <td>宛先</td>
        <td><input id="mail_to" type="text" placeholder="[email protected]"></td>
    </tr>
 
    <tr>
        <td>件名</td>
        <td><input id="mail_subject" type="text" placeholder="タイトル"></td>
    </tr>
 
    <tr>
        <td>本文</td>
        <td><textarea id="mail_textbody" cols=35 rows=10 placeholder="本文"></textarea></td>
    </tr>
</table>

<input id=send_button  type="button" value="送信" onClick="send()">

</div>

　
このサンプルは、SMTP経由でメールを送信するサンプルです。

ソースコードの中の次の値を、ご自身のメール環境の値に設定すると、実際にメールを送信することができます。

★smtp-server★	SMTPサーバ
★username★	認証ユーザ
★password★	認証パスワード
★from-address★	送信元メールアドレス

▲目次へ戻る

　

2. ファイルを添付

　
メール送信画面にファイル添付機能を付けることもできます。

　
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">

window.moveTo(screen.width/2-150, screen.height/2-150);
window.resizeTo(400, 300);
 
let cdoMsg = new ActiveXObject("CDO.Message");
let schemas = "http://schemas.microsoft.com/cdo/configuration/";

cdoMsg.Configuration.Fields.Item(schemas+"sendusing") = 2;
cdoMsg.Configuration.Fields.Item(schemas+"smtpserver") = "★smtp-server★";
cdoMsg.Configuration.Fields.Item(schemas+"smtpserverport") = 25;
cdoMsg.Configuration.Fields.Item(schemas + "smtpauthenticate") = true;
cdoMsg.Configuration.Fields.Item(schemas + "sendusername") = "★username★";
cdoMsg.Configuration.Fields.Item(schemas + "sendpassword") = "★password★";
cdoMsg.Configuration.Fields.Item(schemas + "smtpusessl") = true;
cdoMsg.Configuration.Fields.Update();
cdoMsg.From     = "★from-address★";
 
function send(){
    cdoMsg.To       = document.getElementById("mail_to").value;
    cdoMsg.Subject  = document.getElementById("mail_subject").value;
    cdoMsg.TextBody = document.getElementById("mail_textbody").value;

    // ファイルを添付
    cdoMsg.AddAttachment(document.getElementById("file1").value); 

    try {
        cdoMsg.Send();
    } catch(e) {
        alert(e.message);
    }
}

//-->
</script>

<div style="background-color : #CCC;">
 
<table>
    <tr>
        <td>宛先</td>
        <td><input id="mail_to" type="text" placeholder="[email protected]"></td>
    </tr>
 
    <tr>
        <td>件名</td>
        <td><input id="mail_subject" type="text" placeholder="タイトル"></td>
    </tr>
 
    <tr>
        <td>本文</td>
        <td><textarea id="mail_textbody" cols=35 rows=10 placeholder="本文"></textarea></td>
    </tr>

    <tr>
        <td colspan="2">
        <input id="file1" type="file" /><div id="output"></div>/td>
    </tr>
</table>

<input id=send_button  type="button" value="送信" onClick="send()">

</div>

　

「 cdoMsg.AddAttachment(document.getElementById(“file1”).value); 」として、CDO.Message オブジェクトのAddAttachment プロパティに、添付ファイルのフルパスを設定します。

▲目次へ戻る