Captcha 部分のバグ修正とデザイン変更
コメント入力時に Captcha を必須にしています。
大きな問題ではないのだけど、デフォルトだとこの部分に (X)HTML 的なバグがある。
また、デザインというか吐き出される XHTML ソースを修正する場合、Perl のソースを直接編集になる。
これまで保留にしていたこれらを今回は修正することにした。
現在公開されている 4.01BETA2 やそれ以降では修正されているのかは確認していないので、バージョンアップの際にはチェックが必要だ。
大きな問題ではないのだけど、デフォルトだとこの部分に (X)HTML 的なバグがある。
また、デザインというか吐き出される XHTML ソースを修正する場合、Perl のソースを直接編集になる。
これまで保留にしていたこれらを今回は修正することにした。
現在公開されている 4.01BETA2 やそれ以降では修正されているのかは確認していないので、バージョンアップの際にはチェックが必要だ。
まずデフォルト状態で吐き出される XHTML のソース(一部適宜伏せ字にしてある)。
1つ目は、
2つ目は、構成が名前などの入力欄と異なること。
そして3つ目は、指定してある id が異なること。
2つ目のは、バグではないので気にしなくてもOKだけど、1つ目と3つ目は単純なミス(バグ)だろう。
まず1つ目については、コメント入力のテンプレで修正可能。
これはテンプレ見ればすぐにわかる。
2つ目は気になるので修正することにした。
修正項目は以下のもの。
こういう定数的な文字列の日本語は、「lib/MT/L10N/ja.pm」で定義されている。
そのファイルを開いて、43 行目で定義されているので修正し、サーバにアップして上書きする。
これで2は解決。
1と3については、「/lib/MT/Util/Captcha.pm」で定義されているので、そのファイルを開く。
開いたファイルの 57 行目からのヒアドキュメントがこの部分に該当する。
これを書き換え、他の入力欄と同じ構造にし、ラベルの「:」を取り除く。
で、最初に挙げた問題の3つ目も修正する。
他の入力欄を見ていると、id が複数の英単語からなる場合、ハイフンでつながれるのが正しいみたい。
しかし、1行目の label の for で指定してあるのは「_(アンダースコア)」でつながれている。
実際の input で指定している id は正しいのだが。
ということで、この label 部分の for で指定している部分を修正。
なお、input の name はアンダースコアだけど、これ変えると問題が起きる可能性高いのでそのまま放置。
で、最終的にヒアドキュメント部分は以下のようになって終わり。
おまけとして、実際には正しい(X)HTML 的には img に alt は必須なので、代替文字列を指定しておいた。
<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つ目は気になるので修正することにした。
修正項目は以下のもの。
- Label 表示でここだけ「:」が表示されているのでそれをなくす
- 「~~入力してください」の文面に「コメントスパム対策のため」と追加する
- 構造を名前とか他の入力欄と同じにする
こういう定数的な文字列の日本語は、「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 は必須なので、代替文字列を指定しておいた。
カテゴリ:
MovableType
トラックバック
このブログ記事に対するトラックバックURL
http://fakelife.info/mt/system/mt-tb.cgi/23
コメントする