Captcha 部分のバグ修正とデザイン変更

コメント入力時に Captcha を必須にしています。
大きな問題ではないのだけど、デフォルトだとこの部分に (X)HTML 的なバグがある。
また、デザインというか吐き出される XHTML ソースを修正する場合、Perl のソースを直接編集になる。

これまで保留にしていたこれらを今回は修正することにした。
現在公開されている 4.01BETA2 やそれ以降では修正されているのかは確認していないので、バージョンアップの際にはチェックが必要だ。
まずデフォルト状態で吐き出される XHTML のソース(一部適宜伏せ字にしてある)。

<div class="label">
    <label for="captcha_code">Captcha:</label>
</div>
<div class="field">
    <input type="hidden" name="token" value="****" />
    <img src="****/captcha/****/****" width="150" height="35" /><br />
    <input name="captcha_code" id="captcha-code" value="" />
    <p>画像に表示されている文字を入力してください。</p>
</div>
<div id="comments-open-captcha">
</div>
問題は主に3つある。
1つ目は、comments-open-captcha の div は captcha 部分表示用の div であると思うのだけど、これが実際には機能していないこと。
2つ目は、構成が名前などの入力欄と異なること。
そして3つ目は、指定してある id が異なること。

2つ目のは、バグではないので気にしなくてもOKだけど、1つ目と3つ目は単純なミス(バグ)だろう。

まず1つ目については、コメント入力のテンプレで修正可能。
これはテンプレ見ればすぐにわかる。

2つ目は気になるので修正することにした。
修正項目は以下のもの。
  1. Label 表示でここだけ「:」が表示されているのでそれをなくす
  2. 「~~入力してください」の文面に「コメントスパム対策のため」と追加する
  3. 構造を名前とか他の入力欄と同じにする
一番簡単なのは2なので、まず2を実行してみよう。
こういう定数的な文字列の日本語は、「lib/MT/L10N/ja.pm」で定義されている。
そのファイルを開いて、43 行目で定義されているので修正し、サーバにアップして上書きする。
これで2は解決。

1と3については、「/lib/MT/Util/Captcha.pm」で定義されているので、そのファイルを開く。
開いたファイルの 57 行目からのヒアドキュメントがこの部分に該当する。

<div class="label"><label for="captcha_code">$caption:</label></div>
<div class="field">
<input type="hidden" name="token" value="$token" />
<img src="$cgipath$commentscript/captcha/$blog_id/$token" width="150" height="35" /><br />
<input name="captcha_code" id="captcha-code" value="" />
<p>$description</p>
</div>


これを書き換え、他の入力欄と同じ構造にし、ラベルの「:」を取り除く。

<label for="captcha_code">$caption</label>
<input type="hidden" name="token" value="$token" />
<img src="$cgipath$commentscript/captcha/$blog_id/$token" width="150" height="35" />
<input name="captcha_code" id="captcha-code" value="" />
<p>$description</p>



で、最初に挙げた問題の3つ目も修正する。
他の入力欄を見ていると、id が複数の英単語からなる場合、ハイフンでつながれるのが正しいみたい。
しかし、1行目の label の for で指定してあるのは「_(アンダースコア)」でつながれている。
実際の input で指定している id は正しいのだが。
ということで、この label 部分の for で指定している部分を修正。
なお、input の name はアンダースコアだけど、これ変えると問題が起きる可能性高いのでそのまま放置。

で、最終的にヒアドキュメント部分は以下のようになって終わり。

<label for="captcha-code">$caption</label>
<input type="hidden" name="token" value="$token" />
<img src="$cgipath$commentscript/captcha/$blog_id/$token" width="150" height="35" />
<input name="captcha_code" id="captcha-code" value="" />
<p>$description</p>


おまけとして、実際には正しい(X)HTML 的には img に alt は必須なので、代替文字列を指定しておいた。

カテゴリ:

関連する記事

この記事に関連する記事は、2 件です。

トラックバック

このブログ記事に対するトラックバックURL
http://fakelife.info/mt/system/mt-tb.cgi/23

コメントする


画像の中に見える文字を入力してください。