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

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

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

1 Captcha Garbの特徴
2 ドラッグ系captcha認証WordPressプラグイン比較
3 「Captcha Garb」のホームページ
4 「Captcha Garb」のインストールとダウンロード
5 日本語表記へ書き換え
6 「Captcha Garb」の設定画面
7 最後に：「Captcha Garb」のCaptcha認証用画像

Captcha Garbの特徴

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

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

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

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

「Ajax Fancy Captcha」

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

「Fancy Captcha」

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

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

「Key CAPTCHA」

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

無料版画像

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

「Fun Captcha」

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

「Sweet Captcha」

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

「Captcha Garb」のホームページ

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

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

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

日本語表記へ書き換え

ダウンロードした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認証を設置できた。