reCAPTCHAの導入

そんなreCAPTCHAですが、導入はものすごく楽です。

サンプル

クライアント側

<form name="form">
コメント：<input type="text" name="comment" value="コメントをどうぞ" /><br>
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6Lft_wAAAAAAAB0n8GQVJaube-mA3jLhwRcfStkv"></script>
<noscript>
   <iframe src="http://api.recaptcha.net/noscript?k=6Lft_wAAAAAAAB0n8GQVJaube-mA3jLhwRcfStkv" height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
   <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>
<input id="search-button" type="button" name="search_btn" value="コメント" />
</form>

上記のように、クライアント側はreCAPTCHAを表示したい箇所にscriptタグと
JavaScriptが使えないヒトのためにnoscriptタグを書いておくだけです。

サーバ側

// -> http://recaptcha.net/plugins/php/ よりサンプルまま
require_once('recaptchalib.php');

$privatekey = 'プライベートキー(これは公開ないようにしてください)';
$resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);

if (!$resp->is_valid) {
  die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
       "(reCAPTCHA said: " . $resp->error . ")");
}
// <- http://recaptcha.net/plugins/php/ よりサンプルまま

// 文字数だけチェック
if (mb_strlen($_POST['comment']) > 100) {
	die ("コメント文字数が多すぎます。100文字以内");
}

// コメントを書き込む
$rWrite = fopen('data/comments.txt', 'a');
$sComment = preg_replace("/(\r|\n|\r\n)/", '<br/>', $_POST['comment']);
$sComment = sprintf("%s: %s\n", date('Y/m/d H:i:s'), $sComment);
fwrite($rWrite, $sComment);

上の部分は、reCAPTCHAが提供しているサンプルを $privatekey 以外は
そのまま貼り付けました。これによってreCAPTCHAの認証を行います。

後は、文字数チェックしてコメントをファイルに書いているだけです。

APIの説明については、↓こちらを参考になさってください。

▼reCAPTCHA API Documentation日本語訳
http://kakera.tarenari.jp/document/show/137

reCAPTCHAの文言日本語化

reCAPTCHAに表示する文言は多言語化できるようになっています。
例えば、フランス語にしたければ、

http://api.recaptcha.net/challenge?k=公開キー

を呼び出す前に↓このように記述しておきます。

<script type="text/javascript">
var RecaptchaOptions = {
   lang: 'fr'
};
</script>

ただし、reCAPTCHAが提供している言語のみが対応しています。
下記の lang を参照してください。

▼Look & Feel Customization
http://recaptcha.net/apidocs/captcha/client.html#customization

このドキュメントを見ると、肝心の日本語がありません。そうです。日本語文献から
OCRで読み込めなかったものをreCAPTCHAする文字が提供されていません。

こればかりは仕方ないので、とりあえずは「Type the two words:」という文言や
画像のALTになっている文言を日本語化しておきましょう。

サンプル

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
document.observe("dom:loaded", initialize, false);
function initialize() {
	$('recaptcha_instructions_image').innerHTML = '上の2語を入力してください';
	$('recaptcha_reload').alt       = '新しい語句に変更します';
	$('recaptcha_switch_audio').alt = '音声で確認します';
	$('recaptcha_whatsthis').alt    = 'reCAPTCHAとは? (英語)';
}
</script>

prototype.jsを入れて、該当する箇所を書き換えているだけです。

※以降のサンプルでは、簡略化のため文言日本語化はしていません。

reCAPTCHAの動的な表示

Ajaxで読み込んできたファイルに対してreCAPTCHAをつけるときは
scriptタグをそのまま書いただけでは実行されません。

下記の例では、「include_script.html」にscriptタグでreCAPTCHAを
表示するように書いてあるファイルをAjaxで読み込んできた場合の動作です。

サンプル(失敗例)

下記のように、include_script.htmlに書いてあるscriptタグは実行されません。

Ajaxで読み込むファイル(失敗例)

<div>
<form name="form" method="post" action="post.php">
コメント：<input type="text" name="comment" value="コメントをどうぞ" onclick="this.value='';"/><br>
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6Lft_wAAAAAAAB0n8GQVJaube-mA3jLhwRcfStkv"></script>
<noscript>
   <iframe src="http://api.recaptcha.net/noscript?k=6Lft_wAAAAAAAB0n8GQVJaube-mA3jLhwRcfStkv" height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
   <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>
<input id="search-button" type="submit" name="search_btn" value="コメント" />
</form>
</div>

こういう場合は、Ajax用APIを使います。

サンプル

include_script2.htmlには下記のように記述しています。

Ajaxで読み込むファイル

<div>
<form name="form" method="post" action="post.php">
コメント：<input type="text" name="comment" value="コメントをどうぞ" onclick="this.value='';"/><br>
<div id="recaptcha-contents"></div>
<input id="search-button" type="submit" name="search_btn" value="コメント" />
</form>
</div>

以前、
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6Lft_..."></script>
を記述していた箇所を
<div id="recaptcha-contents"></div>
に替えています。

クライアント側

Ajaxの部分だけみると↓このようになります。

function initialize() {
	var ajax = new Ajax.Request(
		'include_script2.html',
		{ method:'get', onComplete:loadedFunc }
	);
}
function loadedFunc(o){
	$('comment-contents').innerHTML = o.responseText;
	// reCAPTCHAをrecaptcha-contentsのdivに生成する
	Recaptcha.create("6Lft_wAAAAAAAB0n8GQVJaube-mA3jLhwRcfStkv",
		"recaptcha-contents", {
		theme: "red",
		callback: Recaptcha.focus_response_field
	});
}

Ajaxでファイルを読み込んだら、Recaptcha.create() でreCAPTCHAを生成しています。

↓こちらにAPIが記述されています。

▼Methods of the Recaptcha object
http://recaptcha.net/apidocs/captcha/client.html#recaptcha-methods

reCAPTCHAをLITBoxで表示

上記、動的なreCAPTCHA生成方法を使えば、LITBoxなどで読み込んだ
ファイルに対してもreCAPTCHAをセットすることが可能です。

サンプル

クライアント側

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/LITBox/scriptaculous.js"></script>
<script type="text/javascript" src="js/LITBox/litbox.js"></script>
<link href="js/LITBox/litbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
function open_litbox() {
	var litbox  = new LITBox(
		'include_script2.html',
		{afterFinish:loadedFunc, width:500, height:300});
}
function loadedFunc(){
	// reCAPTCHAをrecaptcha-contentsのdivに生成する
	Recaptcha.create("6Lft_wAAAAAAAB0n8GQVJaube-mA3jLhwRcfStkv",
		"recaptcha-contents", {
		theme: "red",
		callback: Recaptcha.focus_response_field
	});
}
</script>
(...)
↓クリックでLITBoxによるレイヤーが表示されます<br/>
<button name="open_litbox" onclick="open_litbox();">litbox open!</button>

[litbox open!]ボタンのイベントハンドラで open_litbox() を実行していて、LITBoxを生成します。

第1引数はAjaxで読み込むファイル名です。「reCAPTCHAの動的な表示」と同じ
include_script2.htmlを表示しているだけです。

第2引数のオプションで、afterFinish があるのは弊社オリジナル修正箇所です。
ウィンドウを表示する際にscriptaculousのOpacityでフェードインさせる処理の終わりに
ハンドラを実行できるようにしてあります。

そのフェードイン終了時に loadedFunc が実行されて、reCAPTCHAを埋め込んでいます。

LITBoxについては↓こちらをご覧いただければと思います。

▼LITBoxの使い方サンプル
http://www.ark-web.jp/sandbox/wiki/188.html

CMSに設置する方法リンク集

最後に、上記のように手動でreCAPTCHAをつける他に、ブログなどのCMSでは
既にモジュールがあるので、それらを利用してreCAPTCHAをつける方法もあります。

• [日本語資料]MT4でreCAPTCHAする方法
• WordPressのreCAPTCHA Plugin
• drupalのreCAPTCHAモジュール
• phpbbのreCAPTCHA Plugin

さいごに

ひょっとしたら、日本でたくさん普及すれば日本語化される可能性があるでしょう。
CMS等のフォームに標準装備されるようになって広まれば、日本語文献の役に立てる日もくるかもしれませんね。