読者です 読者をやめる 読者になる 読者になる

ゆとり日記

心にゆとりを持って生きたいプログラマーの雑記です。気が向いたら書きます。

JavaScriptでメーラーを起動してメール送信したい時

「自動でメールを送るよりも、ボタンを押したらメーラーが立ち上がるようにして欲しい」

ある日のクライアントの鶴の一声・・。

これまではCakePHPのCakeEmailを使ってメールを自動送信するようにしていたんですが、そうもいかなくなりました。

ということで、今回JavaScriptで作った処理をメモしておきます。(地味に苦戦したのは内緒です)

書いた処理としては以下の通り。

# index.html
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>メール送信テスト画面</title>
   <link rel="stylesheet" href="">
   <script src="javascript/index.js" type="text/javascript" charset="utf-8" ></script>
</head>
<body>
    <input type='hidden' id='hidden_data' value='送信したい情報をここに記載'>
    <button id='mail'>メール送信</button>
</body>
</html>
# index.js
/**
 * メーラーを起動してメールを送信する
 */

window.onload = function() {

    /**
   * メールに記載する情報を格納する変数
   */
    var address, subject, body, hiddenData;
    var sendmail = document.getElementById('mail');

    sendmail.onclick = function() {

        // メールに記載したい情報をhiddenタグから取得
        hiddenData = document.getElementById('hidden_data').value;
        address = '~@co.jp';
        subject = '件名';
        body = '本文' + hiddenData;

        location.href = 'mailto:' + address + '?subject=' + subject + '&body=' + body;
    };

};

画面上の「メール送信」ボタンを押下すると、メーラーが立ち上がる動きをします。 JS内でhiddenタグのvalueを拾って、メールの本文に載るようにしています。

ちなみに 「宛先にCCを追加」「メール内で改行を行う」という2つの処理を追加した場合は以下のようになります。

# index.js
/**
 * メーラーを起動してメールを送信する
 */

window.onload = function() {

    /**
   * メールに記載する情報を格納する変数
   */
    var address, ccAddress, subject, body, hiddenData;
    var sendmail = document.getElementById('mail');

    sendmail.onclick = function() {

        // メールに記載したい情報をhiddenタグから取得
        hiddenData = document.getElementById('hidden_data').value;
        address = '~@co.jp';
        ccAddress = 'sub@co.jp';
        subject = '件名';
        body = '本文' + '%0D%0A' + hiddenData; // 「'%0D%0A'」を入れて改行

        // 「'?cc='」部分でCC追加
        location.href = 'mailto:' + address + '?cc=' + ccAddress + '&subject=' + subject + '&body=' + body;
    };

};

こんな感じでメーラー起動処理を実装できました。

同じ事で悩んでいる人の参考になれば幸いです。