Movable Type で CAPTCHA 認証を使わないでスパム対策をしてみる

CAPTCHA 認証は、フォームに入力した文字列が正しくないと「送信」が行なえないことでロボットのスパムを防止するという仕組みだと思います。だったら初めから「送信」ボタンがなかったらスパムは来ないんじゃない？という単純な発想です。

そこで今回、このブログの Movable Type のコメントフォームに導入して試してみます。最初はソース上でも「送信」ボタンはなくしてしまって（非表示ではなく）、何の変哲もないボタンをクリックすることで初めて「送信」ボタンが生成されるようにしてみました。

これなら、ユーザーは読みにくい文字を解読し入力するという作業が不要になり、クリックするだけで済みます。

「スパムではありません」ボタンをクリックするとコメントを「投稿」するボタンが初めて生成されます。

「実はスパムです」ボタンをクリックするとメッセージのみが表示されます。ここはお遊びです。

ボタン周りのソースは次のようになっています。

<div id="comments-open-footer">
    <div id="comments-open-spam-block">
        <p>このコメントはスパムではありませんか？（スパム対策）</p>
        <p><button id="noSpam" type="button">スパムではありません</button><button id="spam" type="button">実はスパムです</button></p>
    </div>
</div>

コメントフォーム・テンプレートの最後の方の JavaScript に次のように jQuery を追加しています。別に jQuery にする必要はありませんが、普通に JavaScript を書くよりも楽だったので jQuery にしました。

<script type="text/javascript">
// comments-open-spam-block
jQuery(function(){
	jQuery('button#noSpam').click(function(){
		jQuery('p.spam').remove();
		jQuery('div#comments-open-footer').append('<p><input type="submit" name="post" id="comment-submit" value="投稿" accesskey="9" tabindex="9" /></p>');
		jQuery('div#comments-open-spam-block').html('<p style="font-weight: bold;">ありがとうございます。<br />「投稿」をクリックするとコメントが送信されます。</p>');
	});
	jQuery('button#spam').click(function(){
		jQuery('p.spam').remove();
		jQuery('div#comments-open-footer').append('<p class="spam">スパムは遠慮させていただきます f(^_^;</p>');
	});
});
// comments-open-spam-block

mtAttachEvent("load", mtEntryOnLoad);
mtAttachEvent("unload", mtEntryOnUnload);
</script>

なお、jQuery オブジェクトを使うところを「 $ 」ではなく「 jQuery 」にしているのは、いつか Prototype.jsを使いたくなったときのために書き換えなくて済むようにするためです。

これでスパムが防げるかどうか試してみます。