連絡先フォームに認証機能を付ける



RW3.6検証済み
このエントリの内容は RapidWeaver 3.6 を使用して検証、カスタマイズされた時のものですが、このバージョンでの動作を保証するものではありませんのでご注意下さい。また、表示の無いバージョンでは動作しない、エラーが出ないという意味ではありません。
Nilrog's placeメールフォームに画像での認証を付ける方法が書いてありました。英語で書いてあるので細かいところまではわかりませんが、なんとなく解説しておきます。(ちなみに「連絡先フォーム」ページをカスタムするのではなく、「HTMLコード」ページでゼロから構築します。)


ステップ1

まず、Nilrog's placeのウェブサイトから、Contact Form tutorial v2.0.2をダウンロードします。その中身は…
  • securimage(フォルダ)
  • ContactForm(RWプロジェクト)
  • Nilrog's Place.url
  • README.rtf
となっています。

この中の「ContactForm(RWプロジェクト)」をRapidweaverで開きます。RW3.6.3以上のバージョンをお使いの場合は、プロジェクト間のページの移動が出来るので、認証付きフォームを設置したいプロジェクトを開き、「ContactForm(RWプロジェクト)」内の「Home」というページ(これしかないけど)をドラッグ&ドロップして下さい。ページの移動が出来ない場合は、認証付きフォームを設置したいプロジェクトで「HTMLコード」ページを新規に作り、そこに内容を全てコピーして下さい。コピーする箇所は…
  • 編集画面の全コード
  • ページインスペクタ>ページのヘッダタブ>カスタムJavaScriptの全コード
  • ページインスペクタ>ページのヘッダタブ>ページの接頭辞の全コード
です。アセットは取り合えず無視して下さい。コピーが終わればこのプロジェクトは必要ないので閉じても構いません。

ページをコピー(内容をコピー)し終わったら、ページインスペクタを開き、コード出力が「デフォルト」になっているか、ファイル名の拡張子が「.php」になっているか確認して下さい。
次に、同じくページインスペクタの「ページのヘッダタブ」を表示して「アセットボタン」を押します。ここに先程ダウンロードした「ContactFormフォルダ」の中の、「securimageフォルダ」の中にある…
  • securimage_show.php
  • securimage.php
この2つのファイルをページアセットに追加して下さい。ページをコピーしている場合は、アセットに追加されている項目を一度削除してから追加して下さい。

しかし、このままではフォントファイルが無いのでこのフォームは機能しません。「securimageフォルダ」の中にある「elephant.ttf」は日本語フォントではないので、このままではメールを受信しても文字化けしてしまいます。認証用の画像に使われるだけかと思いましたが、メールの文字化けがどうしても直らなかったので何らかの関係があるのかもしれません。
ですので、今回は、
IPAフォントを使いました。リンク先で、使用許諾に同意した後、「IPAfont00201.zip ( 15.4 MB)」というファイルをダウンロードして下さい。ダウンロード後、この中のフォントファイルをページアセットに追加します。(どれを使っても構いませんが、管理人は「ipagp.ttf」を使いました。)


ステップ2

次に、「接頭辞内」の内容を書き換えていきます。
「ページインスペクタ>ページのヘッダタブ>接頭辞」を表示して下さい。その中に…

// The relative path to the assets folder$assets_folder = 'assets';

という記述があると思いますが、2段目の記述は「ページアセット」に追加したファイルが入るフォルダ名です。

通常はこのままで大丈夫なんですが、認証付きフォームを設置したフォルダの中に、予め他のファイルが入っている場合は、設置する認証付きフォームのファイル名を頭に付けます。分かり難いので例を書きますね(笑)。
仮に、ページインスペクタで、この認証付きフォームのファイルが入るフォルダ名を「test」、ファイル名を「mail.php」とします。
下の図を見ると分かりますが、同じ階層で既に「test」というフォルダ名が使われています。この状態だと、この「test」というフォルダには、2つのページのファイル(index.phpとmail.php)が入っていることになります。



こういう状態で、認証付きフォームを設置した場合に「ページアセット」にファイルを追加すると、「mail_assets」というフォルダが生成されます。(間の記号は「アンダーバー」です。)このような場合には以下のように記述して下さい。

// The relative path to the assets folder$assets_folder = 'mail_assets';

こういうケースは少ないと思いますが、一応気をつけて下さい。


ステップ3

次に、「securimage.php」の内容を書き換えていきます。事前にテキストエディタを用意しておくと良いでしょう。フリーのものではmiSmultron(日本語ローカライズ済み)がオススメです。
「securimage.php」をテキストエディタで開き、143行目の部分を、使用するフォントファイル名に変更します。

/** * The path to the TTF font file to load. * * @var string */ var $ttf_file = "./ipagp.ttf";



ステップ4

次に、編集画面の内容を書き換えます。表示されたコードのはじめの方に、以下の記述があると思います。

// The message that is shown when you open the contact form $form_message = 'Fill in the form below to send me an email.'; // The email to which the form should be sent $email_address = 'your_email@your_domain.com'; // The length of the security code (this must match the setting in 'securimage.php') $security_code_length = 7;

最初の「Fill in the form below to send me an email.」の部分は、連絡先フォームを表示した時、一番上に表示される文章です。
2段目の「
your_email@your_domain.com」には自分のメールアドレスを入力します。
一番下の「
7」という数字は、画像認証する際の英数字の数です。セキュリティレベルを下げる場合には、数字を「4」などに下げればいいのですが、このままでは機能しません。セキュリティレベルを調整するには、アセットに追加した「securimage.php」の中の…

/** * The length of the code to generate. * * @var int */ var $code_length = 7;

この部分の数字を変更します。どちらも同じ値にしておいた方がいいと思います。

他は英語表記になっている部分を変更するだけです。取り合えず個人的に日本語に変更した部分を以下に書きました。

12行目

// The message that is shown when you open the contact form $form_message = 'E-Mail をお送りいただく際は以下のフォームに記入お願いします。';

140行目

$form_message = '' .'メールは送信されました。ありがとうございます。' .'';

150,151行目

$form_message = '' .'セキュリティコードが違います。' .'
新しいコードを入力してからやり直して下さい。
' .'
';

193行目

*

206行目

*

219行目

*

240行目

* The text between the quotation marks can be changed. */ echo " *";

255行目

echo " value=\"取消\" />";

262行目

echo " value=\"送信\" />";

以上です。

途中でプレビューをすると、コードがむき出しになったりするかもしれませんが、アップロードすると解消されます。
一応、これで上手くいくと思いますが、出来なかったらごめんなさい。

→サンプルページ

blog comments powered by Disqus