Mailform Spread Committee

ezPost 活用ガイド

ここでは、ezPostを極めて無意味に活用するための小技とか、ちょっと解り辛そうな操作方法などを解説したいと思います。

FAQ

パスワードに関して
パスワードを忘れてしまった場合
『sendmailのオープンに失敗しました』というエラーが発生する
返信希望の設問とかは要らない
スクリプトのアップデートの方法
extendedでプレビュー機能は使えないのですか？
UTF-8で作成されたページからデータを送信したい

Tips

REFERERチェックで複数のURLを許可したい
HTMLで半角ｶﾀｶﾅを安全に表示させる
送信完了と同時に特定のURLに強制的に飛ばす
送信完了ページの背景にランダムで画像を表示する
各ページで背景を変えてみる
クリックすると現われるメールフォーム
複数のスタイルシートを同時に適用
ブログと組み合わせて運用してみよう
メールアドレスの確認の為にもう一つフォームを追加したい
このサイトへのリンク表示がウゼェ

パスワードに関して

デフォルトでは、送信先に設定したメールアドレスのアカウントがパスワードとなっております。これはコントロールパネル内で自由に変更可能です（使用できるのは半角英数のみ。字数の制限はありません）

▲このページのTOPへ

パスワードを忘れてしまった！

パスワードを忘れてしまった場合はスクリプトと同一ディレクトリに存在する設定保存ファイル『 ezpost_ini.cgi 』をローカルにダウンロードしてきてください。

2<>sample@sample.com<>passward<>0<><>0<><><><><><><>無題<>名無し<>■このメールの送信者は返信を希望しております■<><>0<>0<>0<>1<>0<>shift_jis<>150<>../../<>

テキストエディターで開くと、上記のような内容が記述されていると思います。『<>』で区切られた３番目の要素、上記の例でいうとpasswardのところにあなたの設定したパスワードが格納されておりますので、ここを参照なさってみてください。

▲このページのTOPへ

『sendmailのオープンに失敗しました』というエラーが発生する

滅多に起こらないとは思うのですが、まれにこんなエラーのでる環境の方も中にはいらっしゃると思います。もしもこのエラーが発生するようであれば、コントロールパネルの『詳細設定』の中にある sendmailへのパス という個所に、お使いになっているサーバーのsendmailへのパスを入力してください。
（エラーが発生しない場合は設定する必要はありません）

▲このページのTOPへ

返信希望の設問とかは要らない

デフォルトのindex.htmlには返信を希望するか否かを問い掛けるラジオボタンが設置されております。人によっては「こんなモン要らない」と思う方もいらっしゃるでしょう。そんな場合は、容赦なくHTMLからラジオボタンを削除してしまってもスクリプトは問題無く動作いたします。極端な話このスクリプトは必須入力事項のフォームさえ存在すれば良いのです。

デフォルトの設定のまま運用している場合、必須入力事項はメッセージのみです。つまりはこの場合、最低限メッセージのフォームさえ存在すれば（※）スクリプトは動作するのです。
つまり

■管理者へメッセージ

こんな風に一言フォーム風に運用することだって可能なワケです。
このようにezPostは製作者の性格が如実に反映されて~~極めて適当に~~フレキシブルに動作いたしますので、好き勝手に改造してみてください。

※：フォームが存在しない場合、スクリプトはその存在しない項目は"記入無し"であると判断いたします。故に必須入力に設定してあるフォームが存在しないと、永遠にエラーが起こり続けて絶対に送信できない状態に陥りますので、そこだけはご注意ください。

▲このページのTOPへ

スクリプトのアップデートの方法

アップデートの方法です。基本的にこのスクリプトは動作に関わる全ての設定をスクリプト内部ではなくezpost_ini.cgiという別途作成される外部ファイルに格納いたしております。それ故に仮に不都合等が発生したり、機能拡張等が行われた際には、新たにダウンロードした"ezpost.cgi"並びに"config.cgi"を単純に現在使用しているスクリプトに上書きするのみでアップデートが完了いたします。簡単でしょ？

■注意
以前の professional から最新のバージョンにアップデートする場合のみ、ファイルを上書きした後に必ずコントロールパネルを起動し、設定の上書きを実行してください。これを行わないと"jcode.pl is not found !"というエラーが発生するはずです。コンパネを起動し、何も変更する必要はありませんので登録ボタンを押して設定を上書きすれば、このエラーは出なくなります。

■注意２
また、以前 Basic edition をご利用になっていた方で、バージョンアップしたらメール送信すると"Jcode.pm is not found !"というエラーが発生するようになった方がいらっしゃるかもしれません。その場合は、最新版の圧縮ファイル内に入っていた "Jcode.pm" という名前のファイルをスクリプトと同一ディレクトリにアップロードするようにしてください。

▲このページのTOPへ

extendedでプレビュー機能は使えないのですか？

申し訳ありませんが使えません。仕様です。

いやぁ正直な話、ファイル添付とプレビューの両立ってば不可能ではないんですけど……かーなーり面倒です。ですから我慢していただけると嬉しいです。

▲このページのTOPへ

UTF-8で作成されたページからデータを送信したい

コントロールパネル内で設定した文字コードと異なるコードによって生成されたフォームからデータを送信する場合、スクリプトを呼び出す際に引数を追加いたします。

文字コード	引数
UTF-8	utf
EUC-JP	euc
ISO-2022-JP	jis
USC2	usc

つまり、UTF-8のフォームからメール送信を行う場合は以下のような書式になります。

<form method="post" action="http://sample.com/cgi-bin/ezpost.cgi?utf">

※ユニコードの引数（utf及びusc）はJcodeモード、もしくはEncodeモードでスクリプトが動作している場合にのみ使用できます（動作モードはコントロールパネル内にて確認できます）

▲このページのTOPへ

REFERERチェックで複数のURLを許可したい

コントロールパネルの『REFERERチェックを行う際に、呼び出しを許可するURL』の欄は一つしかありませんが、半角スペースで区切って複数のURLを指定することも可能です（ezPost ver3.08 からの機能）

▲このページのTOPへ

HTMLで半角ｶﾀｶﾅを安全に表示させる

デフォルトテンプレートの『ﾒｰﾙｱﾄﾞﾚｽ』の記述を見て眉をひそめた方も多いのでは？
でもね？あそこの場所に全角で『メールアドレス』と記述するとそこだけ妙に横長になっちゃって格好悪いと思っちゃたんだからしょうがない。え？WEBで半角カタカナの使用はご法度 だろって？んなこたぁありません。要は文字化けをおこさなけりゃ良いだけの話。

でも確かに半角ｶﾀｶﾅをそのままHTMLに記述するのにはやっぱり抵抗があって（単にHTMLに記述する場合は、別にコード変換してるワケでもないから大概は文字化けなんて起こらないんだけどね）、なんか微妙に気持ちが悪いというのも正直な気持ち。精神衛生上あまりよろしくありません。そこで、半角ｶﾀｶﾅは数値文字参照（エンティティ・コード）に置換して記述してあげるのが乙女の嗜み。これなら文字化けを起こす事無く安全に、かつ確実に半角ｶﾀｶﾅを使用できましてよ？

数値文字参照変換

▲このページのTOPへ

送信完了と同時に特定のURLに強制的に飛ばす

「送信完了画面なんかいらないぜ」なんて方は、送信完了画面のテンプレート（thank.html）を以下のように書き直してください。

<html><head>
<meta http-equiv="refresh" content="0; URL=飛ばしたいURL">
</head></html>

これで送信完了画面は表示されなくなり、メール送信をおこなうと指定したURLが表示されるようになります。

追記

携帯端末による閲覧の場合、<meta>タグの内容が反映されない機種もございますので、ご注意ください。

▲このページのTOPへ

送信完了ページの背景にランダムで画像を表示する

ezPostには送信完了の画面の背景に、最大５種類の画像の中から一つをランダムで選択し表示する機能がこっそりと実装されていました。いやマジでコッソリと。なんせスクリプト組んだ張本人がこんな機能があったことすら忘れていた代物です。

これはランダム画像表示ライブラリ"Rund_Image.pl"の機能とよく似ておりますが、"Rund_Image.pl"がHTML中に<img />タグにて画像を表示させるのに対して、こちらはランダムに決定される<body>タグのクラス（.opt0～.opt4）にスタイルシートを用いて背景画像として表示させるものです。そしてついでに言えばこちらの機能はデフォルトで実装済み。動作の為に別途必要なファイル等は必要ありません（あ、無論表示させる画像ファイルは別ですよ？）

この機能を使用するには、メールフォームのスタイルシート（styles-form.css）にて画像を指定してやります。

.opt0 { background:url(画像ファイル名1) right top no-repeat; }
.opt1 { background:url(画像ファイル名2) right top no-repeat; }
.opt2 { background:url(画像ファイル名3) right top no-repeat; }
.opt3 { background:url(画像ファイル名4) right top no-repeat; }
.opt4 { background:url(画像ファイル名5) right top no-repeat; }

こんな感じに。
あとは背景画像として用いる各画像をスタイルシートと同じディレクトリに設置すれば作業は完了です。

▲このページのTOPへ

各ページで背景を変えてみる

デフォルトのテンプレートでは、各ページの<body>要素にそれぞれ異なるIDを割り振っております。コレを利用すれば各ページで異なる背景画像を使い分ける事が可能です（例えばエラーページで叱っているイラストを背景に表示する、とか送信完了画面で感謝絵を表示するなど）

これを実際に行うにはスタイルシートを使用いたします。
メールフォームのスタイルシート（styles-form.css）を編集いたします。

body#index {
background:url(./01.jpg) right top no-repeat;
}
body#pre {
background:url(./02.jpg) right top no-repeat;
}
body#error {
background:url(./03.jpg) right top no-repeat;
}
body#thank {
background:url(./04.jpg) right top no-repeat;
}

例えば上記のソースをスタイルシートに追加すると、フォームを記述したページでは01.jpgという画像が背景に表示され、送信前の確認ページでは02.jpgが。エラーページでは03.jpg、そして完了画面では04.jpgがそれぞれ表示されるようになります。

だからどうしたと言われるとグゥの音も出ないのですが、なんとなく楽しいじゃないですか。
（あんまし大きいファイルサイズの画像だと表示するまで時間がかかるので、程ほどに軽めの画像にしておくのが無難ですね）

▲このページのTOPへ

クリックすると現われるメールフォーム

ええと、説明するより見てもらったほうが一番わかり易いと思うので、下の『メールを出す』っていうアンカーをクリックしてみてください。

メールを出す

こんな風に普段はメールフォームを表示させないでおくってのも面白いと思いませんか？

実装方法

これはJavaScriptを利用しております。まず、HTMLの<head>～</head>内に以下のスクリプトを埋め込みます（無論外部ファイル化してもＯＫです）

<script type="text/javascript">
<!--
function netabare(id){
if( document.getElementById(id).style.display != "block" ){
document.getElementById(id).style.display="block";
}else{
document.getElementById(id).style.display="none";
}
}
//-->
</script>

そして普段隠す個所を任意のタグで囲い、適当なIDを振り当てます。ここでは一例として<div>タグで囲い、formというIDをつけてみました。
そしてスタイルを設定し、displayプロパティの値を"none"とします。これでブラウザには表示されなくなります。

<div id="form" style="display:none;">

  <form method="post" action="./cgi-bin/mail/ezpost.cgi">
  <label for="name">お名前</label><br />
  <input id="name" type="text" name="name" /><br />
  <label for="from">メールアドレス</label><br />
  <input id="from" type="text" name="from" /><br />
  <label for="subj">タイトル</label><br />
  <input id="subj" type="text" name="subject" /><br />
  <label for="comm">メッセージ</label><br />
  <textarea id="comm" name="comment" wrap="soft"></textarea><br />
  <input type="submit" value="　送　信　" />
  </form>

</div>

最後は表示させる為のスイッチ部分。

<a href="#" onclick="netabare('form');return false;">メールを出す</a>

太文字で表した個所には、表示させないエリアのIDを指定してください。こうすることにより、『メールを出す』というテキストを部分をクリックするとID"form"のスタイル"display"の値が"none"から"block"に変更されるので、それまで表示されなかったものが表示されるようになるのです。

取り敢えず例では<a>タグをスイッチとして用いましたが、別にこれは何のタグを使っても問題ありません。画像とかを使っても面白いと思います（早い話が『onclick="netabare('id');return false;"』というプロパティさえタグに設定してやればどんな種類のタグでも動作いたします）

▲このページのTOPへ

複数のスタイルを同時に適用

フォームの表示関連の設定は/skin/ディレクトリ内の"styles-form.css"というスタイルシートファイルで行っているわけですが、これとは別にあなたのサイトで使用している既存のスタイルシートも同時に適用させて、他のページとデザインを共通化させたい！なんて時のやり方。

これはスタイルシートの@import命令を使えば容易く実現可能です。

<link rel="stylesheet" href="./skin/styles-form.css" type="text/css">
<style>
@import"新たに適用させたいスタイルシートへのパス";
</style>

こんな風にhtmlのヘッダ内に記述してやれば、同時に二つのスタイルシートファイルを適応させる事が可能となります。なによりこの書式であればstyles-form.cssよりも新たに読み込むスタイルの方が優先度が高いとブラウザは認識します。

これならばもしも重複して設定した個所があっても優先的にあなたのサイトのスタイルが適用されますので、簡単にデザインの統一が実現できます。是非お験しください。

補足

無論このような迂遠な方法ではなく、"styles-form.css"内にて@import命令を実行しても全然構わないのですが、それだと@import命令を書き込む場所如何によって優先度が変化いたします。ですから、そこいらへんの知識が無い場合は『既存のスタイルを確実に優先させる』為にも、<style>タグ内での使用をお薦めいたします。

▲このページのTOPへ

ブログと組み合わせて運用してみよう

最近大流行のブログ。自分のWEBサイト運営とはまた別に、各社のブログサービスを併用しているという方も多いのでは？折角ですからそのブログにもメールフォームを付けちゃおうぜ？という提案。

<h2>メールフォーム<h2>
<form method="post" action="ezpost.cgiのURL">
 <label for="name">お名前</label><br />
 <input id="name" type="text" name="name" /><br />
 <label for="from">メールアドレス</label><br />
 <input id="from" type="text" name="from" /><br />
 <label for="subj">タイトル</label><br />
 <input id="subj" type="text" name="subject" /><br />
 <label for="comm">メッセージ</label><br />
 <textarea id="comm" name="comment" wrap="soft"></textarea><br />
 <input type="submit" value="　送　信　" />
</form>

こんな感じにサイドバーのテンプレートにでも書き込んでやれば、簡単にメールフォームが実装できちゃいます（無論サイドバーではなく独立したページを作成しても良いですしね）

但しブログとの併用の際に一つだけ注意をしなくてはならない事があります。それは文字コードの問題です。ブログでは大概その書式にXHTMLを採用いたしております。難しい話ははしょりますが、基本的にこのXHTMLというのはUnicodeという文字コードで記述する、というのがスタンダードとなっております。ですんで色々な会社がブログサービスを提供しておりますが、やっぱりその殆どがUnicodeを採用しているのです（私の知る限りではさくらインターネットが提供する「さくらのブログ」が例外的にShift-JISを採用）
んでUnicodeでエンコードされたWEBページからデータを送信すると、その送信されたデータもUnicodeになってしまうんですよ…

現在Perl4互換モードでスクリプトが動作している場合は、残念ながらUnicodeのデータを扱えません（動作モードはコントロールパネルで確認できます）
こればっかりはご使用になっているサーバーの仕様で決定されてしまうものですから、泣き寝入りするより他ございません。自力でJcodeモジュールをインストールする手段もあることはあるのですが、あまりお薦めできない力技ですので、もしも実行なさる場合は自己責任で行ってください。

また、『自分の使っているブログが何の文字コードを採用してるかなんて知らないよ』
このような方も多いかと思います。そんな場合は一度ご自身のブログのソースを確認してみてください。WEBブラウザでブログを表示した状態で、IEならAlt＋V→C、FirefoxならCtrl＋U、OperaならCtrl＋F3でページのソースが表示されると思います。

ズラリとワケの分からないソースコードが表示されたと思いますが、その中から以下のような個所を探してください。比較的上のほう、少なくとも10行以内に存在すると思いますので頑張って！

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

charsetっていうのが文字コード（キャラクターセット）のことですので、この場合はUTF-8、すなわち8bitのUnicodeでエンコードされていると言う事が判明いたします。

それでですね、デフォルトで使用している文字コード（大概の人はShift-JISのままで運用しているでしょ？）と違う文字コードで生成されたブログからデータを送信すると『文字化け』が必ず発生しちゃうんですよ、困った事にね。

そんなこんなでようやっと本題。メインで使用している文字コードと異なる文字コードで生成されたフォームからデータ送信した場合の文字化け回避方法を説明いたします。といっても別に難しい事ではなく、例えばUTF-8のWEBページからデータ送信したい場合には<form>タグを書く時に、ほんの一手間加えてあげるだけ。

<form method="post" action="http://sample.com/cgi-bin/ezpost.cgi?utf">

こんな風に<form>タグのactionプロパティの値の最後尾に『?utf』という引数を追加します。これによりそのフォームより送信されるデータの文字コードが、UTF-8である事を強制的にスクリプトに認識させることが可能となります（professionalのみの機能です）。同様に"?euc","?jis","?usc"という指定も可能です。引数は必ず半角アルファベットの小文字で指定してください。

これでどんな文字コードのブログだろうとメールフォームを設置することが可能となりますね。さあレッツトライ！

▲このページのTOPへ

メールアドレスの確認の為にもう一つフォームを追加したい

つまりはこんな感じに。

メールアドレス

メールアドレス（確認用）

でもね？これって本当に必要なのかなぁ？（単に入力の手間が増えるだけのような気がするんですけど…）
だって基本的に自分のメールアドレスを手打ちする人っていないでしょ？自分のメールアドレスは大概単語登録してあるからタイプミスのしようが無い！というのが私の主張です。ですから主義の押し付けのようで恐縮なのですが、ezPostにはこういったケースを解決する機能は実装いたしておりません。

しかしながら法人のWebサイトなどで、あらゆるレベルのユーザーをも取りこぼしたくなかったり、万に一つの間違いをも防止したい場合に、こういった機能を使用したい時があるかもしれません。そんな場合はJavaScriptで実装しちゃいましょう。

フォームのValidate関連のJavaScriptライブラリは結構たくさんの種類がネットで公開されておりますが、使い勝手が良く、尚且つちょっと表示が変わってて面白いtakayama様の作成されたvalidater.jsが私のお気に入りです。

実際の使用例

送信ボタンをそのまま押してみてください。
（メールアドレスのフォームには@をわざと全角にして入力してあります）

このように、折角こういったライブラリを導入するのでしたら必須入力事項のチェックなども同時に行い、スクリプトにデータを送信する前に利用者に間違いを知らせてあげるようにすれば、不要なページ移動も減らせてユーザビリティの向上にも繋がります。

▲このページのTOPへ

このサイトへのリンク表示がウゼェ

メールフォームを表示すると、下端に「ezPost」と当サイトへのリンクが表示されますよね？いやぶっちゃけコレは削除して欲しくないんですけどね？どうしてもデザイン的に気に入らないだとか、法人のWEBサイトで使用したいのでこういう表示は勘弁だーとかいう場合、おおっぴらには言えないけれど消して運用するのもアリかなと思います（コントロールパネルで表示は消せます）

ただ本当になるべくなら当サイトへのリンクは消さないで欲しいのが本音ですので、もしも表示を消すならば別途リンクのページ等に当サイトへのリンクを貼って頂く、等のご配慮を賜りたいなぁ…なんて思ったり。何卒ご理解の上、ご協力をお願い致します。

▲このページのTOPへ

管理 * メールフォーム普及委員会
CSS2、JavaScript使用　モニタ解像度1024×768
MSIE6.02/Firefox2.0/Opera9.02にて動作確認
Copyright © MailForm Spread Committee