目次

オブジェクトなJavaScriptの基礎講座

mailtoスキームの使い方

◆ はじめに

メール送信はCGIを介してsendmailなどでサーバーから送る場合とクライアントのメール送信機能を利用する2通りがあります。今回は、クライアントのメール機能を利用した「mailtoスキーム」の使い方を説明いたします。

そして、「mailtoスキーム」を使うことにより、難しいCGIのsendmailを使わず、簡単にメール送信をすることができます。

しかし、本機能は、クライアントの環境に依存しますので、そこをよく考慮してお使いください。

尚、以下はRFC2368を参考にしました。

◆ mailtoスキームの書式

mailtoスキームはAタグとFormタグの2通りあり、文法(書式)的には同じです。

AタグとFormタグの違いは以下の通りです。

Aタグは、メーラーが立ち上がり、mailtoスキームで指定したパラメータが to: cc: Subject: などに自動設定され、メーラーアプリで送信します。 だだし、インストールされているメーラーにより振る舞いが異なる場合があります。

Formタグはフォームで入力されたデータをto: cc: Subject:の指定に従いSubmitで送信されます。

◆ サンプル1(Aタグのケース)

To: はchaichanx@parkcity.ne.jp
Cc: はxxx@parkcity.ne.jp
subject: はTEST
メッセージはhello

<a href="mailto:chaichanx@parkcity.ne.jp?subject=TEST&cc=xxx@parkcity.ne.jp&body=hello%20!%0D%0Achaichan">TEST</a>

TEST

補足

尚、body=で指定している %0D%0A は、メール本文の行を改行します。

◆ サンプル2(Formタグのケース)

---------------------------------------------------------Script------------
<p>
<script type="text/javascript">
     var f1=false, f2=false, f3=false, f4=false, f5=false;
     function test_onSubmit(){
         if(document.TestForm.ID.value == ""){
            alert("お名前が入力されていません");
            return false;
         }
         if(f1 == false && f2 == false && f3 == false && f4 == false && f5 == false){
            alert("評価項目が入力されていません");
            return false;
         }
         
         wkmsg="mailto:" + document.TestForm.XTO.value + "?Subject=" + document.TestForm.XSUB.value;
         wkmsg = wkmsg + "&cc=" + document.TestForm.XCC.value;
         document.TestForm.action=wkmsg; 
         alert(wkmsg);
         return true;
     }
     function clear(){
         document.TestForm.ID.value = "";
         f1=false, f2=false, f3=false, f4=false, f5=false;
     }
</script>
</p>
<form name="TestForm" METHOD="POST" ENCTYPE="text/plain" onSubmit="return test_onSubmit()">
<p>
<b>アンケートにご協力ください。</b><br>
<br>
お名前: <INPUT TYPE="text" NAME="ID" SIZE=20><br>
<br>
<b>メールタイトル(Subject)と各メールアドレス(To,Cc)を入力して下さい。</b><br>
Subject: <INPUT TYPE="text" NAME="XSUB" SIZE=50><br>
To:   <INPUT TYPE="text" NAME="XTO" SIZE=50 VALUE="chaichanx@parkcity.ne.jp"><br>
Cc:   <INPUT TYPE="text" NAME="XCC" SIZE=50><br>
<br>
<b>本サイトの評価を一つクリックしてください。</b><br>
<br>
<INPUT TYPE="radio" NAME="hyouka" value="5" onClick="f1=!f1">大変良い(評価5)<br>
<INPUT TYPE="radio" NAME="hyouka" value="4" onClick="f2=!f2">良い(評価4)<br>
<INPUT TYPE="radio" NAME="hyouka" value="3" onClick="f3=!f3">普通(評価3)<br>
<INPUT TYPE="radio" NAME="hyouka" value="2" onClick="f4=!f4">いまいち(評価2)<br>
<INPUT TYPE="radio" NAME="hyouka" value="1" onClick="f5=!f5">いまに(評価1)<br>
<br>
<b>コメントお願い致します。</b><br>
<br>
<TEXTAREA NAME="msg" ROWS="5" COLS="40">
</TEXTAREA><br>
<INPUT TYPE="submit" VALUE="メール送る">
<INPUT TYPE="reset" VALUE="取り消し" onClick="clear()">
</p>
</form>
---------------------------------------------------------Script------------
[補足説明]
  onClick="f1=!f1" は != でなく =! ある事に注意。
  つまり、判断文でなく否定の代入文です。具体的には、クリックされるたびに、ture、falseが入れ替わります。

サンプル実例

アンケートにご協力ください。

お名前:

メールタイトル(Subject)と各メールアドレス(To,Cc)を入力して下さい。
Subject:
To:   
Cc:   

本サイトの評価を一つクリックしてください。

大変良い(評価5)
良い(評価4)
普通(評価3)
いまいち(評価2)
いまに(評価1)

コメントお願い致します。


目次