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

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

1. メール送信画面

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

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

<script type="text/javascript">
<!--

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

// CDO オブジェクトコンフィグ用名前空間
var 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="xxx@yyy.com"></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経由でメールを送信するサンプルです。

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

▲目次へ戻る

2. ファイルを添付

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

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

<script type="text/javascript">
<!--

window.moveTo(screen.width/2-150, screen.height/2-150);
window.resizeTo(400, 300);
 
var cdoMsg = new ActiveXObject("CDO.Message");
var 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="xxx@yyy.com"></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 プロパティに、添付ファイルのフルパスを設定します。

▲目次へ戻る