【忍者ブログカスタマイズ】スパム対策強化－コメント欄に認証機能を追加

このところ、このブログに海外からと思われるスパムコメントがポチポチとついています。
しかも、その内容は、音楽とはかけ離れたものばかりです(スパムだから当然か(^^;)。
「管理人の承認後に表示」を選択してあるので、それらのコメントが即表示されることはないのですが、いずれにしてもスパムコメントがつくというのは、あまり気持ちのいいものではありません。【><】

「画像承認機能」があると、それなりの効果は期待できるのですが、いかんせん忍者ブログにはこれがないのです。

そこで、これに代わるようなものが作れないものかと、考えてみました。
結果、頭の中で、以下のようなアイディア(仕様)がまとまりました。

1.コメント投稿欄の項目に、「認証キー」を追加する
2.認証キーは4桁の数とし、ページがロードされる度にランダムに生成される
2.「送信」ボタンは、最初はロックされた状態になっており、正しい認証キーが入力されると、ロックが解除されてコメント投稿が可能となる。

ということでできたのが、以下のjavascriptを使用したスパム対策強化ルーチンです。(^^)v

<tr>
<td class="CommentFormTh">認証キー</td>
<td class="CommentFormTd"><input class="CommentForms" name="key2" id="key2" size="4" onkeyup="check_key();"> <span id="cmes">（投稿時 <font style="color:#dd0000;"><span id="otkey"> </span></font> を入力してください）</span></td>
</tr>
<script language="JavaScript"></script>

さて、それではこのプログラムを実際に組み込んでみます。
管理画面の「テンプレートの設定」→「修正」とcllickすると、画面の左側に「HTML編集」という窓が現われるので、この窓内をclickし、上のプログラムをブログのHTMLに追加します。
追加位置は、ほぼ真ん中あたりです。


　　　.
　　　.
　　　.
この記事にコメントする
　　　.
　　　.
　　　.
ときて、さらにもう少し下を見ていくと、「コメント」...、「パスワード」そして「送信」という文字が現われてくると思います。
この「パスワード」と「送信」の間に、上記の内容をコピペします。

        <td class="CommentFormTh">コメント</td>
        <td class="CommentFormTd"><textarea class="CommentForms" name="comment" cols="40" rows="4"></textarea></td>
        </tr>
        <tr>
                <td class="CommentFormTh">パスワード</td>

                                <td class="CommentFormTd"><input class="CommentForms" type="password" name="pass">  </td>
                          </tr>

<tr>
<td class="CommentFormTh">認証キー</td>
<td class="CommentFormTd"><input class="CommentForms" name="key2" id="key2" size="4" onkeyup="check_key();"> <span id="cmes">（投稿時 <font style="color:#dd0000;"><span id="otkey"> </span></font> を入力してください）</span></td>
</tr>
<script language="JavaScript"></script>

        <td colspan="2" class="CommentFormSubmit">
                 <input class="button" type="reset" value="リセット">  <input type="submit" id="btnn" value=" 送信 " disabled>
        </td>
     </tr>

※上は、このブログに実際に組み込んだ様子で、分かりやすくするために挿入部分に色をつけています。

次に、「送信」ボタン部分のタグに、id=btnn" とdisabledを追加します。

<input type="submit" value=" 送信 ">
         ↓
<input type="submit" id="btnn" value=" 送信 " disabled>

※赤字部分が追加箇所となります。

最後に、「CSS編集」窓内をclickし、CSSの編集です。
CSSの最後に以下を付け加えます。

#cmes {
font-size: 12px;
}

2行目の数字を変えると、認証キーの表示をするカッコつき文字列の大きさを変えることができます。

以上で終了です。

なお、認証キーをテキストではなく、画像にしたいという方もいらっしゃるかと思います。
その場合には、javascript部分を以下のものに差し替えててください。

<script language="JavaScript"><!--
var numimg = new Array();
numimg[0] = '<img src="数字0の画像のURL" border="0" />';
numimg[1] = '<img src="数字1の画像のURL" border="0" />';
numimg[2] = '<img src="数字2の画像のURL" border="0" />';
numimg[3] = '<img src="数字3の画像のURL" border="0" />';
numimg[4] = '<img src="数字4の画像のURL" border="0" />';
numimg[5] = '<img src="数字5の画像のURL" border="0" />';
numimg[6] = '<img src="数字6の画像のURL" border="0" />';
numimg[7] = '<img src="数字7の画像のURL" border="0" />';
numimg[8] = '<img src="数字8の画像のURL" border="0" />';
numimg[9] = '<img src="数字9の画像のURL" border="0" />';

//http://musingbuff.blog.shinobi.jp/
function check_key() {
pw = document.getElementById("key2").value;
if (pw == pword)
document.getElementById("btnn").disabled = false;
}
pword = 0;
document.getElementById("otkey").innerHTML="";
for (i = 0; i < 4; i++) {
pword = pword * 10;
num = Math.floor(Math.random () * 9);
document.getElementById("otkey").innerHTML += numimg[num];
pword +=num;
}
//--></script>

差し替えが終わりましたら、<img src～部分(10ヶ所)に0から9までの画像URLをセットして下さい。
数字画像は、各自ご用意いただくか、以下のものをそれぞれマウスの右clickにてお持ち帰り下さい。

これで、認証キーの数字が画像表示となります。

ちなみに、javascript部分は<head>内に書くとか、別ファイルにするとかの方法も考えられますが、今回は「一番簡単な方法」を選択しました。(^^;v
実際に改造した様子は、この記事のコメント欄でご確認下さい。

さてこれで、あなたの忍者ブログが、プログラムを使用した自動コメントスパムの書き込みに強くなるはずです。
もしよろしければご使用ください。

あっ！(ﾟoﾟ) この改造をされようと思ってらっしゃる方に、注意点が3つほどあります。

1この改造を施すと、javascriptがONになっていないと訪問者がコメントできなくなります(通常はそれで問題ないと思いますが)。
2.改造前に、必ずオリジナルHTMLのバックアップを取ってください。
3.そして、改造は自己責任で。