こんにちは。ノッツです(^o^)/
久しぶりにWordPressネタについて書いていこうと思います。
当サイトではコメントを投稿していただくときや、問い合わせページから問い合わせいただくときには、一定のスパム対策をしています。
このときのスパム対策の一つとして有効なのが画像キャプチャを使う認証で、画像に表示されている文字や数字を入力しないと送信できないようにする方法です。
当サイトではこの画像認証をずっと使ってきましたが、これを止めてGoogleのサービスである「reCAPTCHA」を導入しました。
Googleアカウントを持っていれば簡単にreCAPTCHAに登録することができ、WordPressでブログを運営していればプラグインで簡単にreCAPTCHAを導入することができましたよ。
最先端感があるので、是非導入してみてくださいね。
reCAPTCHAとは
「reCAPTCHA」とは、Googleが提供するキャプチャ・システムのことです。
従来のように判別困難な文字を入力する作業ではなく、画像を選択するだけで、人間なのかロボットなのかの判定を実現してくれる優れものです。
詳しくはGoogleのヘルプページでご確認ください（英語のみ）。
GIGAZINEには日本語で概要について説明されています。
このreCAPTCHAもVer1では、以前は以下のように文字で認証する方式をとっていました。
これがVer2に進化して、以下のようにシンプルなものになりました。こちらが実際のreCAPTCHAなので色々と試してみてください。
[bws_google_captcha]
Googleのサービスを使っていると一度は目にしたことがあるかもしれませんね。
基本的にはチェックを入れるだけで認証が終わりますが、チェックを入れたのが人間なのかロボットなのかが確信をもてない場合など、時と場合に応じて、画像の選択などが必要になってきたりします。
クッキーやIPアドレスなど様々な情報からロボットなのかを見分けるんだとか。一度認証が終わったIPアドレスは人間だと認識して、それ以降はチェックするだけで認証が終わるようにもなるようです。
さすがGoogleさま。
画像認証としては以下のようなものとなっていて、必要なモノを選択するというものです。スマホなどから利用するときは指ですぐに選択できるので、従来の文字認証と比べると非常に楽です。
画像認証の他にも、音声で認証する方法もあります。
なぜreCAPTCHAを導入したのか
理由は簡単で、Googleの最先端の技術を自分のブログにも導入してみたかったのです。
WordPressでブログをやっている場合は、プラグインで簡単に導入できるようでしたしね。
あと、当サイトではお問い合わせページとコメント欄でスパム対策を一応施していましたが、お問い合わせページはこんな感じで、最後のところでチェックを入れないと送信できない仕組みにしていました。
また、コメント欄はこんな感じ、WordPressのプラグインを使って画像の文字を入力しないとコメントができないようにしていました。「SI CAPTCHA Anti-Spam」というプラグインを使っています。
でも、お問い合わせページではチェックを入れるだけなのでちょっと脆弱そう、コメント欄の文字入力はイチイチ面倒でユーザービリティ的にもよろしくありません。
あと、文字認証は最近のロボットの精度の向上で、突破されることが多くなってきたというデータもあります。
あと、最近にキャッシュ系のプラグインを導入したせいなのか、画像認証の画像が毎回同じ画像が表示されるようになっていました。これは脆弱ですよね。
ということで、reCAPTCHAを導入してみることにしました。
reCAPTCHAの登録
reCAPTCHAを利用するにはまず、reCAPTCHAへの登録が必要になってきます。
登録に必要なモノは、Googleアカウントのみです。Googleアカウントを持っていない場合は取得する必要があります（説明は割愛）。
reCAPTCHAに登録するために、reCAPTCHAの登録ページへアクセスします。Googleにログインしていない場合は、ログイン画面が開くと思いますが、当方はログイン済みだったため表示されていません。
アクセスすると以下のようにreCAPTCHAを利用するサイトの情報を入力します。
サイトの情報といっても、サイトのドメインのみです。
Labelには分かりやすいようにサイト名を入れればOKでしょう。Domainsにはサイトのドメインを入力します。当サイトの場合は「ichigoichielab.com」となります。
「Send alerts to owners」にチェックをいれておくと、サイトに何らかの問題が生じた場合に知らせてくれるので、チェックを入れておくといいでしょう。
あとは、「Register」をクリックすればreCAPTCHAに登録完了です。
クリックすると以下のページに繋がります。
ずらずらっと色々と書かれていますが、WordPressのプラグインを使ってreCAPTCHAを導入する場合で必要なものはKeysの「Site key」と「Secret key」の二つです。
このキーをコピペして以下で使っていきます。もし、WordPressのプラグイン以外での直接コードを記述して書く場合などは、Step1から書かれているコードを使っていくようですが割愛します。
reCAPTCHAの導入方法（お問い合わせページ編）
まず、お問い合わせページへのreCAPTCHAの導入方法を説明します。
WordPressでお問い合わせページを作成している場合は、プラグインである「Contact Form 7」を利用している方が多いかと思います。
このプラグインでは簡単にreCAPTCHAを導入する機能が予め備わっています。
準備
Contact Form 7でreCAPTCHAを使う場合は予め準備が必要で、左側にあるWordPressのメニューの【お問い合わせ】から「インテグレーション」をクリックします。Contact Form7をインストールしていない場合はしてください。
《他のサービスとのインテグレーション》画面となるので、「キーを設定する」をクリックします。
reCAPTCHAのサイトキーとシークレットキーが必要となるので、先ほどreCAPTCHAに登録した際に表示された「Site key」と「Secret key」をそれぞれにコピペします。
コピペしたら「保存」をクリックしましょう。
「設定を保存しました」となれば準備OKです。
導入
準備を終えたらメニューの「コンタクトフォーム」をクリックします。
reCAPTCHAを導入したいコンタクトフォームをクリックします。Contact Form 7をインストールしたばかりなどで、コンタクトフォームを作成していない場合は、メニューから「新規追加」をクリックしてコンタクトフォームを作成しましょう。
私が以前まで使っていたコードは以下のようでした。
「確認ページはございません。内容をご確認の上チェックを入れてください。」の下にreCAPTCHAを導入します。
そこをクリックしてキーボードカーソルを合わせ、上部に複数用意されているボタンの「reCAPTCHA」をクリックします。
テーマとサイズは好みな方を選択して、ID属性とクラス属性は理由がない限り空白でOKです。
「タグを挿入」をクリックすると、[recaptcha]というショートコードが挿入されます。
見栄えを統一するために<p>タグを入力し、以前あったチェックボックスのショートコードは削除すると、以下のようになりました。
あとは、「保存」をクリックすれば完成です。
確認
確認してみるとバッチリ、reCAPTCHAが表示されています。
スマホでの表示もしっかりと表示されております。
reCAPTCHAの導入方法（コメント欄編）
続いて、コメント欄にreCAPTCHAをWordPressのプラグインを使って導入していきます。
コメント欄にreCAPTCHAを導入するプラグインはたくさんあると思いますが、私は「 Google Captcha (reCAPTCHA) by BestWebSoft」を使いました。
「No CAPTCHA reCAPTCHA」というプラグインも使ってみたのですが、コメント送信ボタンの下にしかreCAPTCHAを表示できなかったので（知識不足かも）、上に表示できたGoogle Captcha (reCAPTCHA) by BestWebSoftにしました。
インストール
まず、Google Captcha (reCAPTCHA) by BestWebSoftをインストールします。いつものここからプラグイン名で検索してインストールすればOK。
検索したら「今すぐインストール」をクリックしてインストールしましょう（インストールした後にスクショを撮っているのでインストール済みになっています）。
インストールが完了してプラグインを有効化すると、左のメニューに【BWS Plugins】が追加されるので、ここの「Google Captcha」をクリックします。
設定
「Google Captcha Settings」画面となります。
基本的には「Site key」と「Secret key」に、先ほどreCAPTCHAに登録した際に表示されたキーをコピペすればOKです。
このプラグインは有料プランもあるので、設定できる項目は限られています。でも、無料プラで十分機能を果たしてくれます。
「Enable reCAPTCHA for」ではreCAPTCHAを表示する箇所をログインフォーム画面、新規ユーザ登録画面、パスワードリセット画面、コメント欄から複数選択できます。僕はコメント欄だけで良かったのでここだけにチェックを入れました。この理由は後述するので絶対に読んでください。
「Hide reCAPTCHA in Comments form for」では、reCAPTCHAを表示しない環境を選択できます。例えば「Administrator」にチェックすると管理者権限でログインしている場合はreCAPTCHAが表示されなくなります。
「reCAPTCHA version」は「version 2」にチェックが入っていることを確認。
「reCAPTCHA theme」はreCAPTCHAが表示される場合の色を選択できるので、好みの方を選択しましょう。
有料版だと英語以外も選択できるようですが、普通に日本語で使えています。
設定を終えたら「Save Changes」をクリックして、設定を終えます。
【重要】
設定を終えたら、真っ先に確認してほしいことがあります。reCAPTCHAがコメント欄に正しく表示されているかどうかよりも。
自分のサイトのWordPressのログイン画面にアクセスし、reCAPTCHAが表示されることを確認します。そして、いつものユーザ名とパスワードを入力し、reCAPTCHAにチェックを入れて、正しくログインできるかを確認してください。これをしないと災悪の場合、自分のサイトであるにもかかわらずログインできなるかもしれません。
なぜかと言いますと、私の環境でログインしようと何度もやってみたのですが、ユーザ名とパスワードが正しいのにもかかわらず、ログインできなかったからです。
上記の設定のログインフォームにreCAPTCHAがを表示させないようにすると、ログインすることができました。ってことで、この設定が原因と考えられます。
なので、ログインフォームに表示させないようにして使っています。新規ユーザ登録画面、パスワードリセット画面では試していませんが、怖かったので今のところオフにして使っています。この辺はそんなに必要が無いので、いいのかなって思っています。
もしログインできないままログアウトしたり、ログインのセッションが切れたときに、最悪の状態に陥るかもしれないので、必ず確認しておいてくださいね。
正しくログインできれば、ログインフォームに表示させないようにする設定は必要無いと思います。
確認
ここを確認したら、あとはコメント欄にreCAPTCHAが表示されているのかを確認します。
しっかりとreCAPTCHAが表示されています。でも元々画面認証で使っていた「SI CAPTCHA Anti-Spam」のプラグインの画像が表示されているので、プラグインを停止させます。
バッチリです。
スマホ表示でもバッチグーです。
さいごに
reCAPTCHAを導入しただけで、なんだかブログが最先端になったような気分です 笑
画像で文字を入力するよりreCAPTCHAでは簡単に認証ができるので、ユーザービリティがいいような気がします。
一応動作確認はしていますが、「問い合わせが送られねーよ！」「コメントできねーよ！」など問題がありましたら知らせていただけるとありがたいです。
コメント
ためになりました！ありがとうございます！
＞匿名さん
コメントありがとうございます。
お役に立てたようでよかったです。
参考になります。
＞nanasiさん
コメントありがとうございます。
また、嬉しきお言葉ありがとうございます。
励みになります。