11.postmailをHTML5へ


書き換えの最後はpostmailです。 HTML5ではform機能が強化されましたので、これを反映したmailページを作ります。

mailページは、KentWebさんの「POST MAIL」→こちら) を使用させて頂いていますので、引き続きこれを使います。

postmailには、文字コード別にShift-JIS版とUTF-8版が用意されており、これまではShift-JIS版を使っていましたが、書き換え後はUTF-8判を使いたいと思います。

両方の版ともに「POST MAIL」のページに用意されていますので、ダウンロード、解凍します。解凍したフォルダーの構成は下の様になっています。

postmailの構成

この後の作業は、①int.cgi、postmail.cgi, check.cgi を自分のメールアドレスへの送信用に書き換え、 ②HTML文書とCSS文書の書き換え、の2ステップで行います。

 

int.cgiの書き換え

int.cgiはメール送信の諸条件設定の為のファイルで、設定の方法が1項目づつ判りやすく補足説明してあります。 また、HTML文書の記述に関する注意事項も丁寧に記載されています。

では、1つづつ項目を追って設定します。

・送信先メールアドレスの設定

$cf{mailto} = ‘記入された情報を送信する送信先メールアドレス

・sendmailのパスの設定

$cf{sendmail} = ‘/usr/lib/sendmail

上の赤字の様に記入されていますが、プロバイダの指定に書き換えます。

私のプロバイダの指定は下の様になっていましたので、書き換え無しです。

パスの確認

・フォームのname値(英語)を日本語に置き換え(今回は以下の赤字の通り)

$cf{replace} = {

name‘ => ‘お名前‘,

email‘ => ‘メールアドレス‘,

age‘ => ‘年齢‘,

place‘ => ‘住所‘,

comment‘ => ‘コメント‘,

};

・送信者へのメール返信・・・今回は不要なので「0」設定

・メール件名(初期値)・・・下の赤字の部分を書き換え

$cf{subject} = ‘メール件名(日本語可)

・以下は、今回は書き換え無しです。

このプログラムの文字コード、sendmailへの-fコマンド、文字コード自動判別、

メール本文をBase64で送る、メール件名の外部指定、返信向けメールタイトル

本体プログラム、ログファイル、テンプレートディレクトリ、送信後の形態、

送信後の戻り先、フォームのname値の正当性をチェック、

同一IPアドレスからの連続送信制御、送信は method=POST 限定、

最大受信サイズ、ホスト名取得方法、アクセス制限、禁止ワード

postmail.cgiの書き換え

文書先頭にPerlへのパスが記述されています。これを、プロバイダが定めるものに書き換えます。

最初は、「#!/usr/local/bin/perl」と書かれています。

私のプロバイダの指定を調べたところ、下の様になっていましたので、書き換え無しです。

パスの確認

check.cgiの書き換え

postmail.cgiと同様に、文書先頭にPerlへのパスが記述されていますので、必要であればプロバイダが定めるものに書き換えます。

FTP転送とパーミッション設定

cgiの書き換えが終ったところで、FTP転送します。

FTP転送後に、cgiファイルの属性(パーミッション)の設定を行います。

プロバイダの属性指定は以下の様になっていますので、cgiファイルのパーミッションを700に設定します。

パーミッションの確認

FTP転送ソフトがFFFTPの場合、サーバーへ転送されたファイルは右側に表示されています。 この中の.cgiファイル上で右クリックすると、下の様な作業リストが出て来ます。

FFFTP画面

「属性変更」をクリックすると、下の様なウインドウが出て来ますので、設定値を700にして「OK」をクリックします。

FFFTP画面

転送した全てのcgiファイルの設定値を700に変更できたら、テストして見ます。ブラウザ上でpostmail.htmlを立ち上げます。

画面は下の様になっています。これがテンプレートとして用意されたものです。適当に記入して「送信する」ボタンを押します。

入力フォーム画面

cgiが順調に働いていれば、画面は下の様に変わります。ここでも「送信する」ボタンを押します。

確認画面

画面が下の様に変われば、ここまでは成功です。

リプライ画面

この後は、メール受信ボックスを確認して、文字化けなど無い正常なメールが届いている事を確認します。

→ここまでの書き換え結果はこちらです。

 

HTML文書とCSS文書の書き換え

postmail.htmlのテンプレートのheadタグ内は下の様に記述されています。

書き換え前のHTML文書

これをhtml5に書き換え(参照:2.シンプルな宣言部とヘッダー部) 、同時にスマホ対応させる(参照:7.スマホ対応ページへ)と、下の様になります。

書き換え後のHTML文書

次にbodyタグ内の書き換えに移ります。書き換え前のテンプレート用HTML文書は下の通りです。

書き換え前のHTML文書

formタグ内は、html5で機能強化されており書き換え必須ですが、その前後の部分も、 デザイン修正の為に、書き換えます。又、blockquoteの使用は止めdiv.container、mainを使用、 strongの使用は止めheaderを使用、ol-liの使用は止めpを使用します。 文章の修正も含めて下の様に書き換えます。

尚、テンプレートではformの属性としてactionとmethodを指定しており、ここは書き換え無しです。

書き換え後のHTML文書

同時にCSS文書(PC用)も下の様に書き換えています。

書き換え後のCSS文書

さて、formタグ内ですが、書き換え前は下の通りです。

書き換え前のHTML文書

この部分を下の様に書き換えました。赤のアンダーラインの部分が機能強化された部分、すなわち以前はJavaScriptの役割であった機能です。

書き換え後のHTML文書

機能強化された部分の個別説明をします。

inputのtypeが増えた・・・今回使用のemail以外にdate、passwaordなどがある

   type="email="は、入力された値がメールアドレスとして妥当かチェックする。

inputにautofocus属性が追加・・・autofocus属性は、ページが開かれた

   時に、指定された入力欄に自動的にカーソルが当る。

inputにrequired属性が追加・・・required属性は、指定された欄への

   入力が必須である事をブラウザに知らせる。。

inputにlist属性が追加・・・list属性は、入力候補を提示する。

   データーリスト(datalist)のid属性値を指定する。

textareaにrequired属性が追加・・・autofocus属性も追加されている。

textareaにplaceholder属性が追加・・・placeholder属性は、入力する時のヒン

   トを短い文章で紹介する。

PC用CSSでは、formとその内部の要素のプロパティを下の様に書き換えます。

書き換え後のCSS文書

出来上ったPC画面は下の通りです。

書き換え後のPC画面

スマートホン用の画面は、HTML文書の一部手直しと新設SP用CSS文書によって下の様に仕上げました。

書き換え後のスマホ画面

この後は、同様に、確認画面用のconf.html、エラー表示用のerror.html、正常終了確認用のthanks.htmlを書き換えて終了です。

ページトップへ

←前ページへ               目次へ戻る               

コーナー