HTML5に書き換えてみた
１１．postmailをHTML5へ
書き換えの最後はpostmailです。 HTML5ではform機能が強化されましたので、これを反映したmailページを作ります。
mailページは、KentWebさんの「POST MAIL」（→こちら） を使用させて頂いていますので、引き続きこれを使います。
postmailには、文字コード別にShift-JIS版とUTF-8版が用意されており、これまではShift-JIS版を使っていましたが、書き換え後はUTF-8判を使いたいと思います。
両方の版ともに「POST MAIL」のページに用意されていますので、ダウンロード、解凍します。解凍したフォルダーの構成は下の様になっています。
この後の作業は、①int.cgi、postmail.cgi, check.cgi を自分のメールアドレスへの送信用に書き換え、 ②HTML文書とCSS文書の書き換え、の２ステップで行います。
int.cgiの書き換え
int.cgiはメール送信の諸条件設定の為のファイルで、設定の方法が１項目づつ判りやすく補足説明してあります。 また、HTML文書の記述に関する注意事項も丁寧に記載されています。
では、１つづつ項目を追って設定します。
・送信先ﾒｰﾙｱﾄﾞﾚｽの設定
$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ファイル上で右クリックすると、下の様な作業リストが出て来ます。
「属性変更」をクリックすると、下の様なウインドウが出て来ますので、設定値を700にして「OK」をクリックします。
転送した全てのcgiファイルの設定値を700に変更できたら、テストして見ます。ブラウザ上でpostmail.htmlを立ち上げます。
画面は下の様になっています。これがテンプレートとして用意されたものです。適当に記入して「送信する」ボタンを押します。
cgiが順調に働いていれば、画面は下の様に変わります。ここでも「送信する」ボタンを押します。
画面が下の様に変われば、ここまでは成功です。
この後は、メール受信ボックスを確認して、文字化けなど無い正常なメールが届いている事を確認します。
HTML文書とCSS文書の書き換え
postmail.htmlのテンプレートのheadタグ内は下の様に記述されています。
これをhtml5に書き換え（参照：２．ｼﾝﾌﾟﾙな宣言部とﾍｯﾀﾞｰ部） 、同時にスマホ対応させる（参照：７．ｽﾏﾎ対応ﾍﾟｰｼﾞへ）と、下の様になります。
次にbodyタグ内の書き換えに移ります。書き換え前のテンプレート用HTML文書は下の通りです。
formタグ内は、html5で機能強化されており書き換え必須ですが、その前後の部分も、 デザイン修正の為に、書き換えます。又、blockquoteの使用は止めdiv.container、mainを使用、 strongの使用は止めheaderを使用、ol-liの使用は止めpを使用します。 文章の修正も含めて下の様に書き換えます。
尚、テンプレートではformの属性としてactionとmethodを指定しており、ここは書き換え無しです。
同時にCSS文書（PC用）も下の様に書き換えています。
さて、formタグ内ですが、書き換え前は下の通りです。
この部分を下の様に書き換えました。赤のアンダーラインの部分が機能強化された部分、すなわち以前はJavaScriptの役割であった機能です。
機能強化された部分の個別説明をします。
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とその内部の要素のプロパティを下の様に書き換えます。
出来上ったPC画面は下の通りです。
スマートホン用の画面は、HTML文書の一部手直しと新設SP用CSS文書によって下の様に仕上げました。
この後は、同様に、確認画面用のconf.html、エラー表示用のerror.html、正常終了確認用のthanks.htmlを書き換えて終了です。
