CAPTCHA 認証

CAPTCHA 認証は、ブログに限らず多くの Web サービスで取り入れられている代表的なスパム防止策です。もちろん Movable Type でも利用できます。しかし、 Web サービスによっては結構見づらかったり、そもそも規則性のない文字列を入力するのは面倒だったりします。

そこで、効果があるかは分かりませんが、もう少しユーザーに手間をかけないスパム対策を考えてみました。

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

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

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

captcha02.gif

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

captcha03.gif

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

captcha04.gif

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

<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を使いたくなったときのために書き換えなくて済むようにするためです。

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