Web Mail Plus 機能解説

機能解説

各入力項目の解説
入力項目の追加について
添付ファイルの送信について
送信データのラベルについて
複数の入力ボックスで一つの入力項目をつくる方法について
各データ入力を必須にする方法について
特定の語句の入力を強制する方法について New!
特定の語句の入力を拒否する方法について New!
２つの入力内容が等しいかチェックする方法について
連続送信拒否機能について
送信完了時のお礼メール自動送信について
携帯からの送信について
Flashからの送信について
デザインの変更について

各入力項目の解説

以下はメール送信の際に使用する、基本的な項目です。パラメータ name の値の最初に system_ のある項目が該当します。

件名
<input type="text" name="system_subject" size="30" value="" />

入力フォームの name に system_subject を指定して送信すると、メールの件名と認識されます。

送信者名
<input type="text" name="system_name" size="30" value="" />

入力フォームの name に system_name を指定して送信すると、メールの送信者名と認識されます。

Ｅメール
<input type="text" name="system_mail" size="30" value="" />

入力フォームの name に system_mail を指定して送信すると、送信者のメールアドレスと認識されます。

<input type="hidden" name="system_mode" value="preview" />

入力フォームの name に system_mode を指定して送信すると、プログラムの動作モードと認識されます。preview を指定すると送信前にプレビューを表示し、send を指定するとプレビュー無しにメールを送信します。

送信者にコピーを送る
<input type="checkbox" name="system_copy" value="on" checked="checked" />

入力フォームの name に system_copy を指定し、on の値を送信すると、メール送信者に控えのメールが送信されます。

<input type="submit" value="確認画面へ進む" />

データ送信ボタンが表示されます。

<input type="reset" value="リセット" />

入力内容初期化ボタンが表示されます。

入力項目の追加について

送信元のHTMLファイルを変更することで、フォームメールの入力項目を追加することができます。ただし、フォームの作成にはHTMLの知識がある程度必要です。

入力フォームのパラメーター name には、半角英数字で input_ からはじまる適当な語句を設定します。

一行入力追加例

ひとこと
<input type="text" name="input_voice" size="30" value="" />

複数行入力追加例

ご感想
<textarea name="input_impressions" cols="50" rows="5"></textarea>

セレクトボックス追加例

職種
<select name="input_job">
<option value="" selected="selected">選択してください</option>
<option value="製造業">製造業</option>
<option value="サービス業">サービス業</option>
<option value="フリーター">フリーター</option>
<option value="その他">その他</option>
</select>

Mac+IEでUTF-8のページを読み込むと、セレクトボックスの内容が文字化けする事があるようです。Mac+IEでは、以下のように言語の指定を記述しておくと大丈夫のようです。

<select name="input_job" xml:lang="ja" lang="ja">
～略～
</select>

ラジオボタン追加例

年齢
<input type="radio" name="input_age" value="" checked="checked" />無回答
<input type="radio" name="input_age" value="20代" />20代
<input type="radio" name="input_age" value="30代" />30代
<input type="radio" name="input_age" value="40代" />40代
<input type="radio" name="input_age" value="その他" />その他

チェックボックス追加例

興味をお持ちの分野
<input type="checkbox" name="input_interest" value="HTML" checked="checked" />HTML
<input type="checkbox" name="input_interest" value="CSS" />CSS
<input type="checkbox" name="input_interest" value="JavaScript" />JavaScript
<input type="checkbox" name="input_interest" value="CGI" />CGI

ファイルアップロード項目追加例（詳しくは、後述する添付ファイルの送信についてをご覧ください。）

添付ファイル１
<input type="file" name="input_file1" size="30" />

また、パラメーター name の末尾を特定の文字列にする事で、書式の簡易チェックができます。利用できる文字列は以下のとおりです。

パラメーター name に _mail で終わる語句を指定すると、送信されたデータをメールアドレスとみなし、書式の簡易チェックを行います。
パラメーター name に _url で終わる語句を指定すると、送信されたデータをURLとみなし、書式の簡易チェックを行います。
パラメーター name に _line で終わる語句を指定すると、送信されたデータを一行入力とみなし、最大送信文字数のチェックを行います。
パラメーター name に _text で終わる語句を指定すると、送信されたデータを複数行入力とみなし、最大送信文字数のチェックを行います。
パラメーター name に _number で終わる語句を指定すると、送信されたデータを数値とみなし、数値以外の入力を禁止します。

具体的には、以下のように記述します。

年齢
<input type="text" name="input_age_number" size="10" value="" />

書式チェックが不要な場合は、特に意識する必要はありません。

以下に入力項目を追加したフォームを作成していますので、参考までにどうぞ。

入力項目追加例

添付ファイルの送信について

添付ファイル送信機能を利用する場合、入力フォームを追加するだけでなく、フォームタグに以下の指定を追加する必要があります。

enctype="multipart/form-data"

具体的には、以下のように記述します。

<form action="./mail.cgi" method="post" enctype="multipart/form-data">
～略～
</form>

また、mailplus/init.cgi の『添付ファイルの設定』にある

#添付ファイルの送信(0 … 許可しない / 1 … 許可する)
$init->{file_mode} = 0;

この部分を 1 に設定します。さらに、mailplus/init.cgi の『添付ファイルの設定』にある

#添付ファイル一時保存ディレクトリ
$init->{file_dir} = './tmp/';

この部分で指定したディレクトリを作成する必要があります。初期設定の場合、mail.cgi と同じディレクトリに tmp という名前のディレクトリを作成し、パーミッションを 707 に設定します。添付ファイル送信時、このディレクトリ内に一時的にデータが保存されます。

なお、現状では携帯からのファイルアップロードは多くの機種が対応していないようです。また、Flashもファイルアップロードには対応していないようなので、利用する事はできません。

以下にファイルアップロード項目を追加したフォームを作成していますので、参考までにどうぞ。

ファイルアップロード項目追加例

送信データのラベルについて

メールで受け取るデータやプレビュー画面で表示されるデータは、

input_job : サービス業

や

input_age : 20代

のように、

入力項目のnameで指定した値 : 送信されたデータ

となります。このままでも大丈夫ですが、input_job や input_age の部分に日本語を指定した方もいると思います。任意の語句を指定したい場合は、ラベル機能を使用します。

例えば、職種の input_job の部分を任意の値で受け取りたい場合、フォーム内の任意の場所に以下の情報を記述します。

<input type="hidden" name="label_input_job" value="職種" />

これで、受け取る値は

職種 ： サービス業

となります。設定したい項目名の前に label_ を追加し、value に指定したい語句を記述します。

複数の入力ボックスで一つの入力項目をつくる方法について

以下のように、一つの入力項目に対して複数の入力ボックスを設ける方法です。郵便番号や電話番号の入力欄を設けるときに便利です。

このような入力ボックスを作成するには、以下のようなHTMLを記述します。

電話番号
<input type="text" name="input_tel" size="10" value="" /> - 
<input type="text" name="input_tel" size="10" value="" /> - 
<input type="text" name="input_tel" size="10" value="" />
<input type="hidden" name="join_input_tel" value="-" />

入力フォームの name の部分には同じ値を指定します。また、<input type="hidden" name="join_input_tel" value="-" /> では結合文字を指定しています。結合文字は設定したい項目名の前に "join_ を追加し、value に設定する語句を記述します。

上の場合、input_tel の入力内容を - で結合するようになるので、3つの入力欄にそれぞれ 090 と 1234 と 4567 が入力された場合、受け取る値は 090-1234-5678 となります。結合文字を指定しなかった場合は、改行で結合されます。

各データ入力を必須にする方法について

件名の入力、送信者名の入力、メールアドレスの入力は、設定項目の以下の部分を変更することで入力を必須にすることができます。

#件名の入力(0 … 任意 / 1 … 必須)
$init->{need_subject} = 1;

#送信者名の入力(0 … 任意 / 1 … 必須)
$init->{need_name} = 1;

#メールアドレスの入力(0 … 任意 / 1 … 必須)
$init->{need_mail} = 1;

それ以外の項目は、送信元HTMLファイルで必須と任意を指定します。例えば

ひとこと
<input type="text" name="input_voice" size="30" value="" />

この入力項目を必須にするには、フォーム内の任意の場所に以下の情報を記述します。

<input type="hidden" name="need_input_voice" value="1" />

これで name に input_voice を指定した入力項目を必須入力にする事ができます。設定したい項目名の前に need_ を追加し、value に 1 を設定します。（value の値を空欄にすると、入力は任意になります。）

特定の語句の入力を強制する方法について

特定の項目に、予め指定した文字列が入力されていなければ（完全一致でなければ）、エラーにする事ができます。簡易な投稿キーとしても機能するので、スパム対策にも利用できます。例えば

投稿キー
<input type="text" name="input_key" size="10" value="" />

この入力項目に「1234」と入力させたければ、フォーム内の任意の場所に以下の情報を記述します。

<input type="hidden" name="coincide_input_key" value="1234" />

設定したい項目名の前に coincide_ を追加し、value に任意の語句を設定します。（value の値を空欄にすると、入力の強制は無効になります。）

特定の語句の入力を拒否する方法について

特定の項目に、予め指定した文字列が含まれていれば、エラーにする事ができます。

ひとこと
<input type="text" name="input_voice" size="30" value="" />

この入力項目に「テスト」が含まれていればエラーにしたい場合、フォーム内の任意の場所に以下の情報を記述します。

<input type="hidden" name="refuse_input_voice" value="テスト" />

設定したい項目名の前に refuse_ を追加し、value に任意の語句を設定します。（value の値を空欄にすると、入力の拒否は無効になります。）

なお、すべての項目を対象として禁止ワードを設定したい場合は、設定項目の『送信制限の設定』にある

#送信禁止ワード
@{$init->{ng_word}} = (
  '',
  '',
  '',
  '',
  ''
);

この部分で指定することが出来ます。

２つの入力内容が等しいかチェックする方法について

メールアドレスの確認入力など、同じ項目を2度入力させ、入力内容が一致しない場合にエラーにする事ができます。

Ｅメール
<input type="text" name="system_mail" size="30" value="" />

この入力項目の確認入力欄を表示するには、フォーム内の任意の場所に以下のフォームを追加します。

確認入力
<input type="text" name="confirm_system_mail" size="30" value="" />

これで「Ｅメール」と「確認入力」の値が異なると、エラーになります。設定したい項目名の前に confirm_ を追加して入力欄を作成します。

連続送信拒否機能について

設定項目の以下の部分で連続送信の拒否を行うことができます。不正データ送信の対策になります。

#連続送信を拒否する秒数(0にすると無制限)
$init->{wait_time} = 10;

#送信情報保存ファイル
$init->{info_file} = './info.log';

$init->{wait_time} に 0 以上の数値を指定すると、この機能がONになります。
また、この機能を利用する場合は、$init->{info_file} で指定したファイルをアップロードする必要があります。この場合、mail.cgi と同じディレクトリに info.log を作成し、パーミッションを 606 に設定します。このファイルには、最近送信されたメールの日時と送信ホスト名が記録されます。

送信完了時のお礼メール自動送信について

送信完了時、送信者に対して任意の内容を記述したメールを自動送信することができます。設定は以下の部分で行います。

#自動返信メールの送信(0 … 送信しない / 1 … 送信する)
$init->{reply_mode} = 0;

#自動返信メールの件名
$init->{reply_subject} = 'お問い合わせありがとうございます';

#自動返信メールの送信者名
$init->{reply_name} = '○○商店';

#自動返信メールの送信元アドレス
$init->{reply_address} = 'your@mail.addr';

#自動返信メールの内容
$init->{reply_message} = <<'_MESSAGE_';
${SYSTEM_NAME}さま

お問い合わせありがとうございます。
内容を確認しだい返信いたしますので、しばらくお待ちください。
_MESSAGE_

機能を利用するには、$init->{reply_mode} を 1 に設定し、各項目も適当なものを変更します。

$init->{reply_message} には送信メールの本文を指定しますが、ここには特定の文字列を記述することによって、送信者の入力内容を反映させることができます。使用できる文字列は以下の通りです。

${SYSTEM_SUBJECT}: 送信者が入力した件名になります。
${SYSTEM_NAME}: 送信者が入力した名前になります。
${SYSTEM_MAIL}: 送信者が入力したメールアドレスになります。

初期設定の場合、${SYSTEM_NAME}さま という箇所が該当する部分になります。例えば送信者名に 山田太郎 と入力されていた場合、この部分は 山田太郎さま に置き換わります。

携帯からの送信について

携帯からアクセスされたとき、携帯専用の送信画面を表示する事が可能です。

携帯からのデータを受け取るには、まず mailplus/init.cgi の『システムの設定』にある

#携帯からのアクセス(0 … PCと同じ画面を表示 / 1 … 携帯専用の画面を表示)
$init->{mobile_mode} = 0;

この部分を 1 に設定します。
次に、以下のファイルをダウンロードします。解凍ソフトを使ってファイルを解凍してください。

mobile.lzh をダウンロード

解凍すると以下のファイルが作成されます。

mobile.html: 入力画面スキン
mobile_preview.html: プレビュー画面スキン
mobile_complete.html: 送信完了画面スキン
mobile_error.html: エラー画面スキン

これらを mail.cgi と同じディレクトリにアップロードします。設置ができたら、任意のページから mailplus/mail.cgi にリンクを張ります。（HTMLページではなく、CGIにリンクを張ります。）PCからアクセスするとPC用の画面が、携帯からアクセスすると携帯用の画面がそれぞれ表示されます。

mobile.html が携帯用の入力フォームなので、PC用と同様に入力項目の追加などが可能です。ただし、機種によっては送信データの容量制限が厳しい場合があります。入力項目を増やしすぎると送信できない機種が出てくる可能性があるので注意してください。

Flashからの送信について

送信画面はFlashで作成することも可能です。（閲覧にはFlashプレイヤーが必要です。）Flashファイルを修正するだけで、入力項目の追加もできます。ただし、Flashからのファイルアップロードはできません。（Flashがファイルアップロードに対応していません。）

Flash使用例

Flashからのデータを受け取るには、まず mailplus/init.cgi の『システムの設定』にある

#Flashからのアクセス(0 … PCと同じ処理を実行 / 1 … Flash専用の処理を実行)
$init->{flash_mode} = 0;

この部分を 1 に設定します。
次に、以下のファイルをダウンロードします。解凍ソフトを使ってファイルを解凍してください。

flash.lzh をダウンロード

解凍すると以下のファイルが作成されます。

flash.html: メール送信ページ用HTMLファイル（Flashの設置用）
form.swf: 送信フォームFlashファイル
form.fla: form.swf の編集用ファイル（アップロードは不要）

まず flash.html を開き、CGIへのURLを変更します。

<object data="./form.swf?script=http://～ CGIへのパスを指定 ～/mail.cgi" width="500" height="400" type="application/x-shockwave-flash">
  <param name="movie" value="./form.swf?script=http://～ CGIへのパスを指定 ～/mail.cgi" />
</object>

2箇所ある http://～ CGIへのパスを指定～/mail.cgi の部分を mail.cgi のURLに変更します。また、上記のHTMLを任意のHTMLファイルに貼り付けることでも、Flashを呼び出すことができます。その際、2箇所ある ./form.swf の部分は form.swf までのパスを指定してください。

以下に設置例を示しておきます。（カッコ内の数字はパーミッションの値。）

mailplus / mail.cgi [705]
  |        init.cgi
  |        flash.html
  |        form.swf
  |        common.css
  |
  +-- lib / ～略～

設置ができたら、任意のページから mailplus/flash.html にリンクを張ります。

送信画面の編集について

圧縮ファイルに同封されている form.fla を編集すれば、フォームのデザインを変更することができます。（著作権表示は削除しないでください。）
ただし、編集するには Macromedia Flash MX 2004 などのアプリケーションが必要です。（付属の form.fla は、Macromedia Flash MX で作成しています。）また、簡単なデザインのカスタマイズ以外を行う場合、ActionScript の知識が必要になります。

送信画面作成について

FlashとCGIでのデータのやり取りについて、簡単に解説します。送信画面を一から作成する場合には、知っておくといいかもしれません。（送信画面を一から作成する場合でも、著作権表示と Web Liberty へのリンクは必須です。）

以下のような ActionScript で、FlashからCGIにデータを送信することができます。

//データ送信
var sender = new LoadVars();

sender.label_input_message = 'メッセージ';  //本文のラベル
sender.input_message       = input_message; //本文

sender.system_flash   = 1;              //動作モード指定（必須）
sender.system_mode    = 'send';         //送信モード指定（必須）
sender.system_mail    = system_mail;    //送信者のメールアドレス
sender.system_name    = system_name;    //送信者名
sender.system_subject = system_subject; //件名

sender.sendAndLoad('http://～ CGIへのパスを指定 ～/mail.cgi', sender, 'post');

メールの送信に成功すると、以下のデータがFlashに返されます。

system_info=complete

つまり、変数 system_info に complete が代入されれば送信完了です。また、メールの送信に失敗すると、以下のデータがFlashに返されます。

system_info=error&system_message=エラーメッセージ

つまり、変数 system_info に error が代入され、変数 system_message にエラーメッセージが代入されます。

さらに具体的なコーディング方法については、form.fla を参考にしてください。ちなみに、Flash MX 以降のActionScriptはまったく知らないため、書き方が古いかもしれません。（＾＾；

デザインの変更について

付属の各HTMLファイルをHTMLの文法に従って自由に編集することができます。
スタイルシートの知識があれば、mailplus/common.css を編集するだけでも、色々なデザインにする事ができます。
「スキンを編集したら文字化けして表示された」「プログラムを編集したら動作しなくなった」という場合、文字コードをUTF-8Nに指定して保存してください。（TeraPadなら、『ファイル』→『文字/改行コード指定保存』で『UTF-8N』を指定します。）

Web Liberty

サイト内検索

目次