WordPressプラグイン パズル型captcha認証「Captcha Garb」を導入してみた

【この記事を読むのに必要な時間は約 7 分です。】

コメント欄などのスパム対策として多くのcaptcha認証のWordPressプラグインが紹介されている。スパムが多い訳ではないが、入れてみることにする。
オーソドックスな文字入力タイプで有名なのが「SI CAPTCHA Anti-Spam」だ。その他母国語(例えば日本語なら漢数字)の四則演算でcaptcha認証する「Captcha」もよく紹介されている。
個人的に「文字や数字」を「入力」するタイプは避け、画像をドラッグするタイプにしたいと考えた。また、セキュリティレベルにもこだわらないことにした。
今回設置した「Captcha Garb」はセキュリティレベルはそんなに高くないと思うが、スパムは今のところゼロだ。

スポンサーリンク
レクタングル(大)広告




Captcha Garbの特徴

コメント欄のみに対応している。
画像をドラッグするタイプなので、見間違えが少ない。また操作も直感的でわかりやすい。
Localization対応ができていない。(作者にお願いしたところ対応してみるとの返事はあった。)

ドラッグ系captcha認証WordPressプラグイン比較

以下の情報は私の環境での結果なので、違う結果になるかも知れない。

プラグインが動作しなかったもの

「Ajax Fancy Captcha」

「Ajax Fancy Captcha」jqueryプラグインのWordPress版だ。WordPressプラグインページからダウンロードできる。インストールしてみたが、動作しなかった。

AjaxFancy

「Fancy Captcha」

こちらも「Ajax Fancy Captcha」jqueryプラグインペースに、別の方が作成したWordPressプラグインだ。WordPressプラグインページからダウンロードできる。上記同様インストールして有効化しても表示されなかった。

fancycaptcha2

有料版と無料版の差で断念したもの

「Key CAPTCHA」

ジグソースタイルで一番気に入ったのが、「KeyCAPTCHA」だ。ジグソーピースになるのは有料版のみで、無料版はスクエアピース(四角い破片)だったので、残念だが採用しなかった。WordPressプラグインページからダウンロードできる。
有料版画像

keycaptcha4

無料版画像

keycaptcha3

日本語表示が難しそうで断念したもの

「Fun Captcha」

「Fun Captcha」はとても面白いが、利用登録が必要。また、全て英語表記で、WordPressプラグインとしてはローカライズに対応しておらず日本語化が難しそうだったので、断念した。WordPressプラグインページからダウンロードできる。

funcaptcha

「Sweet Captcha」

「Sweet Captcha」も「Fun Captcha」同様面白いが、利用登録が必要。また全て英語表記で、WordPressプラグインとしてローカライズに対応していたが管理画面のみであり、captcha認証部分の日本語化は難しそうだったので、断念した。WordPressプラグインページからダウンロードできる。

Sweet Captcha

「Captcha Garb」のホームページ

ということで「Captcha Garb」に落ち着いた。ローカライズ対応できていないが、captcha認証で日本語が必要な部分は限られているので、直接ファイルを書き換えた。

captchagarb

「Captcha Garb」のインストールとダウンロード

WordPressダッシュボード>プラグイン>新規追加>「captcha garb」で検索してインストールする。ファイルを一部書き換えるので、zipファイルをWordPressのプラグインページからダウンロードする。
ダウンロードファイル:captcha-garb.1.5.zip

WordPress CaptchaGarb

日本語表記へ書き換え

ダウンロードしたcaptcha-garb.1.5.zipを解凍すると中に、output_funtions.phpファイルがあるので、このファイルの以下の部分を書き換える。
書き換え前

$out = '
<div class="captchagarb" id="captchagarb">
<span class="puzit">Drag it to solve it</span>
<img src="'.CAPTCHAGARB_PATH.'/loader.gif" style="display:none;" class="loader"/>
<div class="puz_container">

</div>
<a href="javascript:load_puzzle()" class="refr"> Refresh </a>
</div>
<input type="hidden" id="captchagarb_code_comment" name="captchagarb_code_comment"/>
<input type="hidden" id="captchagarb_coupon" name="captchagarb_coupon"/>
';
$out = str_replace("\n", '\n', str_replace('"', '\"', addcslashes(str_replace("\r", '', (string)$out), "
$out = '
<div class="captchagarb" id="captchagarb">
<span class="puzit">Drag it to solve it</span>
<img src="'.CAPTCHAGARB_PATH.'/loader.gif" style="display:none;" class="loader"/>
<div class="puz_container">

</div>
<a href="javascript:load_puzzle()" class="refr"> Refresh </a>
</div>
<input type="hidden" id="captchagarb_code_comment" name="captchagarb_code_comment"/>
<input type="hidden" id="captchagarb_coupon" name="captchagarb_coupon"/>
';
$out = str_replace("\n", '\n', str_replace('"', '\"', addcslashes(str_replace("\r", '', (string)$out), "\0..\37'\\")));
..'\\")));

書き換え後
ハイライトした行を以下のように書き換える。一応、説明文章を挿入しているが、これは好きにしてもらって構わない。

$out = '
<p>スパム除けにパズル型captcha認証を導入しています。お手数ですが、<br />コメントを残すには下のパズルを完成させてください^^</p>
<div class="captchagarb" id="captchagarb">
<span class="puzit"><font color="white">ドラッグしてパズルを完成させて!</font></span>
<img src="'.CAPTCHAGARB_PATH.'/loader.gif" style="display:none;" class="loader"/>
<div class="puz_container">

</div>
<a href="javascript:load_puzzle()" class="refr"><font color="white">画像変更</font></a>
</div>
<input type="hidden" id="captchagarb_code_comment" name="captchagarb_code_comment"/>
<input type="hidden" id="captchagarb_coupon" name="captchagarb_coupon"/>
';
$out = str_replace("\n", '\n', str_replace('"', '\"', addcslashes(str_replace("\r", '', (string)$out), "
$out = '
<p>スパム除けにパズル型captcha認証を導入しています。お手数ですが、<br />コメントを残すには下のパズルを完成させてください^^</p>
<div class="captchagarb" id="captchagarb">
<span class="puzit"><font color="white">ドラッグしてパズルを完成させて!</font></span>
<img src="'.CAPTCHAGARB_PATH.'/loader.gif" style="display:none;" class="loader"/>
<div class="puz_container">

</div>
<a href="javascript:load_puzzle()" class="refr"><font color="white">画像変更</font></a>
</div>
<input type="hidden" id="captchagarb_code_comment" name="captchagarb_code_comment"/>
<input type="hidden" id="captchagarb_coupon" name="captchagarb_coupon"/>
';
$out = str_replace("\n", '\n', str_replace('"', '\"', addcslashes(str_replace("\r", '', (string)$out), "\0..\37'\\")));
..'\\")));

これでめでたくコメント欄に日本語表記のドラッグ系captcha認証を設置できた。

captchagarb2

「Captcha Garb」の設定画面

英語表記のままだが、非常に簡単なので、理解できると思う。

captchagarb3
captchagarb4

最後に:「Captcha Garb」のCaptcha認証用画像

Captcha認証用画像として62枚用意されているが、難しい画像が多かったので、上の画像程度の簡単なものに変更した。セキュリティーは落ちるのかも知れないが、利用者にストレスを感じさせないように配慮した。
以上

スライダータイプの面白い画像captcha認証のWordPressプラグインを見つけたので、WordPressプラグイン スライダー型captcha認証「minteye」が面白い(広告収入も得られる?)も是非一読してほしい。

スポンサーリンク
レクタングル(大)広告