【コラム】

Useful Web Applications

4 コメントスパム防止機能を実装できる無料ツール - reCAPTCHA

4/18

ネットサービスのユーザー登録画面などで、そのユーザーが「人間かどうか」を判定するために使われる「読みづらい文字」のことを「CAPTCHA(キャプチャ)」といいます(「Completely Automated Public Turing test to tell Computers and Humans Apart」の略)。今回は、そのCAPTCHAを自分のサイトで使えるフリーのCAPTCHAサービス「reCAPTCHA」の使い方を紹介しましょう。

reCAPTCHAとは?

reCAPTCHAは元々アメリカのカーネギーメロン大学で開発されたシステムで、OCRで読み取れない文字の解読にCAPTCHAを利用するという発想から生まれています。

reCAPTCHAでは2つの単語が提示されます。

1つはすでにreCAPTCHA側で答えがわかっている単語で「ユーザーが人間かどうか」を判定するのに使われます。もう1つはまだ答えがわかっていない単語で、こちらの回答はOCRの精度向上に利用されます。

reCAPTCHAは2009年にGoogleに買収され、現在はGoogleのサービスとして提供されています。蓄積されたデータは、現在The New York Timesのデジタル化やGoogle Booksで提供される書籍のスキャンなどに利用されているそうです。

reCAPTCHAを自分のサイトに導入してみよう


1. reCAPTCHAに登録してAPIキーを取得

Get reCAPTCHA」のページにある「Sign up Now!」ボタンをクリックするとサイトの登録画面が開きます。その画面でreCAPTCHAを導入したいサイトのドメインを登録し、reCAPTCHA Keyを取得します。

なお、reCAPTCHAを利用するにはGoogleのアカウントが必要です。ご自身のGoogleアカウントでログインしてください。

reCAPTCHAの登録画面

ここで取得できるreCAPTCHA Keyは、初期設定では登録したドメイン及びそのサブドメイン上のサイトでしか利用できません。一つのreCAPTCHA Keyを複数のドメイン上で利用したい場合は、以下のいずれかの方法で登録しましょう。

  • 「Enable this key on all domains (global key)」のチェックボックスにチェックを入れて登録する。
  • Tipsの3番目にある「sign up for multiple keys」をクリックするとドメインの入力欄がテキストエリアになるので、そこにカンマ区切りで複数のドメインを入力する。

サイトの登録が完了すると、「Public Key」と「Private Key」という2種類のAPIキーを取得できます。なお、過去に取得したreCAPTCHA Keyは、サイトの左メニューにある「MY ACCOUNT」から確認できます。

JavaScriptのコードを貼り付ける

ここからはreCAPTCHAのドキュメントを見ながら作業を進めていく必要があります。reCAPTCHAのドキュメントはGoogle Codeのサイト上に用意されています。

reCAPTCHAをサイトに導入するには、まずページ上にJavaScriptのコードを貼り付ける必要があります。貼り付ける箇所は通常は登録フォームなどのformタグの子要素となる部分です。

<!-- ユーザー登録フォームなど -->
<form action="signup.php" method="post">
<script type="text/javascript"
  src="http://www.google.com/recaptcha/api/challenge?k=your_api_key">
</script>
<noscript>
  <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_api_key" 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 type="submit" value="送信" />
</form>

上記のコードには「your_api_key」と記述されたところが2箇所ありますが、そこは手順1.で取得した「Publick Key」に置き換えてください。

このJavaScriptによって、ブラウザ上ではform内にinput要素が生成されます。これによりユーザーがCAPTCHAを読み取って入力した「回答」を自サイトのプログラム側で受け取ることができます。上記のコードの例では「signup.php」に送信されます。

reCAPTCHAの入力フォーム

3. 回答を検証する

次に、ユーザーが入力した「回答」が正しいかどうか検証します。reCAPTCHAにはそのためのAPIが用意されているので、「回答」を受け取ったプログラム内でそのAPIをリクエストし、結果を受け取ることができます。

回答を検証するには http://www.google.com/recaptcha/api/verify に対してPOSTリクエストを送信します。その際に必要なパラメータは以下の4種類です。いずれも必須項目です。

  • privatekey: 手順1.で取得したPrivate Key
  • remoteip: CAPTCHAの回答を入力したユーザーのIPアドレス
  • challenge: フォームから送信されてきた「recaptchachallengefield」の値
  • response: フォームから送信されてきた「recaptcharesponsefield」の値

ここではプログラムは省略しますが、お好みの方法で記述してください。

リクエストを送信すると、検証結果が返ってきます。レスポンスの形式は改行区切りのテキストとなっています。

  • 1行目: true もしくは false (検証結果)
  • 2行目: エラーコード (1行目がエラーだった場合のみ)

2行目のエラーコードをエラー表示画面のURLに「&error=エラーコード」という形式で付加することで、ユーザーにエラーメッセージを提示することができます。

なお、ドキュメントによると「将来的に3行目以降が使われる可能性がある」そうで、「プラグラムを組む際には改行で分割して利用してください」とのことです。

外観のカスタマイズも可能、WordPress用のプラグインも

reCAPTCHAの外観には何種類かのテーマが用意されていますし、CSSで自由にカスタマイズできるようにもなっています。Webサイトの雰囲気に合わせたい時は、カスタマイズしてみるのもいいでしょう。

またreCAPTCHAには、WordPress向けのプラグインも用意されています。このプラグインを利用するとWordPressのコメント欄にreCAPTCHAを表示させることができます(コメントが減る可能性もあるのであまりおすすめしませんが……)。

普段ネットサービスを作っていて、CAPTCHA機能を使うほどスパムが来ることはあまりないかもしれません。しかし、もし必要となった場合は、フリーで使えるこの「reCAPTCHA」の導入をおすすめします。

著者紹介

F.Ko-Ji

ブログやネットサービスを運営するブロガー兼Webエンジニア。大手IT系企業、ベンチャー系Web開発企業を経てフリーに。『F.Ko-Jiの「一秒後は未来」』というブログや、「Meity」「DailyFeed」「梅酒.in」といったサービスを運営しています。

4/18

インデックス

連載目次
第18回 誰でも簡単にチャット機能をサイトに導入できる「Envolve」
第17回 Webにサクッとテキストを公開・共有できるサービス5選
第16回 無料で最大15GBまで使えるファイルストレージサービス「Uploadingit.com」
第15回 無料のリアルタイムアクセス解析ツール「W3Counter」 - 1日5,000PVまで対応
第14回 Twitterの新しい「フォローボタン」を詳しく見てみよう
第13回 ネット上のコンテンツをまとめてストーリーをつくる - Storify
第12回 ユーザー登録不要のシンプルなチェックリスト共有ツール - Strike
第11回 Webサイト制作時にダミー画像が必要に……そんな時に役立つ無料サービス
第10回 Twitterのタイムラインを新聞風にしてくれるサービス - paper.li
第9回 Twitterのフォロワーに反応されやすい時刻に自動投稿する - Timely
第8回 Twitterに予約投稿できるサービス - 用途に応じて使い分けよう
第7回 これは便利かも! 素早く手軽に使える無料のファイル共有サービス3選
第6回 自分のWebサイトを"ソーシャル"にするソーシャル・ツールバー3選
第5回 Twitterライクな記法によるToDo管理ツール - TheDeadline
第4回 コメントスパム防止機能を実装できる無料ツール - reCAPTCHA
第3回 タスクの作成はメールでOK。クールで手軽なタスク管理ツール - IssueBurner
第2回 Webサイトの配色に迷ったらコレ!! - Web Site Color Picker
第1回 Embedly - 写真や動画のリンクを自動的に埋め込みコンテンツ化

もっと見る

関連キーワード


人気記事

一覧

イチオシ記事

新着記事