ホームページを作ったのはいいけど、お問い合わせフォームから大量のスパムメールが来て困っていることはありませんか？
お問い合わせフォームはホームページの管理者とお客様を繋ぐ重要なツールです。
簡単にメールが送れる反面、bot（ロボット）によるメールの大量送信による悪質な嫌がらせを受けてしまう可能性があります。
そのスパムメールをブロックするのがreCAPTCHA（リキャプチャ）と呼ばれる機能です。
reCAPTCHAとは？
reCAPTCHAはGoogleが提供するスパムメールを防止する機能で、現在は改良に改良を重ね、2022年1月現在ではv2とv3が公開されています。
元々は2007年にカーネギーメロン大学ピッツバーグ本校が開発したものですが、2009年にGoogleが技術を買い取りました。
出典：Teaching computers to read: Google acquires reCAPTCHA
reCAPTCHA v1
初期のreCAPTCHAは下記のような歪んだ英数字を表示させ、お問い合わせフォームにテキストを入力させて、botか人間かを区別していました。
ただ、自動化プログラムの技術進化によりreCAPTCHAが突破されたり、人間でも読み取るのが難しいなどという理由で、現在こちらのバージョンの公開は2018年に終了しています。
reCAPTCHA v2
続いて登場したv2は一度は皆さんも見たことがあると思います。
reCAPTCHA v2は、フォーム送信前に「私はロボットではありません」のチェックボックスをクリックする必要があります。
また、マウスの動きやブラウザの動きによっては、チェックを入れたときに画像認証が課される場合があります。
画像認証の画面が表示された場合、これをクリアして初めてbotではなく人間と判断されます。
ただし、チェックボタンを押したり画像認証を課されるのがわずらわしかったり、ユーザビリティが損なわれるといった問題もありました。
reCAPTCHA v2 invisible
こちらのバージョンは、前のreCAPTCHA v2のチェックボックスが表示されないバージョンになります。
お問い合わせフォームで送信ボタンを押したらその場で人間かbotかの判断が行われ、もしbotと判断された場合はreCAPTCHA v2と同じように画像認証が課されます。
ただ、reCAPTCHA v2と違って画像認証の画面が表示される頻度は少ないそうです。
画像認証が完全になくなったわけではありませんが、チェックボックスをクリックする必要がないのでボタンを押す手間が省け、わずらわしさがなくなりました。
Googleが人間とbotをどう判断してるのか内容を公開していませんが、ログインしているGoogleアカウントも判断材料のひとつに入っているそうです。
reCAPTCHA v3
こちらはGoogleが公開している最新バージョンになります。当サイトでもこちらのバージョンのreCAPTCHAを採用しています。
これは前述したreCAPTCHA v2と違い、チェックボックスは勿論、画像認証も完全になくなりました。
reCAPTCHA v3はGoogleのAIがユーザーのWeb上での行動を監視し、その行動をスコアとして算出します。
そのスコアを元に人間かbotかを判別しているようです。
さらにreCAPTCHA v3を設置したユーザーの行動を機械学習し、人間とbotのパターンをさらに精密に判別できるようユーザーのスコア精度を高めてくれるというメリットもあります。
ただし、reCAPTCHA v3を導入するとページの表示（読み込み）速度が遅くなったりするというデメリットも報告されています。
Contact Form 7でreCAPTCHAを設定すると、サイトの右下にreCAPTCHAのロゴマークも自動的に挿入されます。ユーザーによってはこのロゴ表示で見栄えが悪くなると思うかもしれません。
Googleの規約でこちらのロゴは削除できませんが、一定の条件を満たせば後述する方法でロゴを非表示にすることができます。
サイトをreCAPTCHAに登録する
今回はreCAPTCHA v3を導入する方法について解説します。
reCAPTCHAを導入するにはGoogleのアカウントが必要なので、Googleにログインされていない方はまずGoogleアカウントを作成してください。
次にAPIキーを取得する必要があります。APIキーを取得するには以下のURLへアクセスし、画面上部のv3 Admin Consoleをクリックして管理画面にアクセスします。
管理画面を開いたら右上の「+」をクリックし、サイトを登録しましょう。
登録画面が表示されたら順次項目を入力していきましょう。
①ラベル
管理画面上での名称です。
他の人には見られないので自分の分かりやすい名称を付けましょう。
②reCAPTCHA タイプ
v2かv3かを選択します。
前述した通り、v2はチェックボックス＋画像認証でv3はスコア判断で人間かbotか区別します。
③ドメイン
reCAPTCHAを埋め込むサイトのドメインを入力します。
「https://」などは不要です。
④オーナー
こちらにはメールアドレスを登録します。
既に自分のGmailアドレスがデフォルトで設定されています。
必要に応じてメールアドレスを追加しましょう。
⑤reCAPTCHA 利用条件に同意する
これに必ず同意しないとreCPATCHAが動きません。同意にチェックを入れておきましょう。
必ず利用規約を確認してください。
⑥アラートをオーナーに送信する
reCAPTCHAの設定エラーや、不審なトラフィック増加をメールでお知らせしてくれる機能です。
特に問題がなければONにしておきましょう。
全ての設定が完了したら「送信」をクリックします。
⑦サイトキーとシークレットキーを取得する
送信ボタンを押すと以下のような画面が表示されます。こちらのサイトキーとシークレットキーは後ほど使いますので、タブは開いたままにしておきましょう。
reCAPTCHAをWordPressに導入する方法
今度はWordPress側の設定になります。
今回は「Contact Form 7」での導入方法と「Invisible reCaptcha for WordPress」での登録方法を記載します。
どちらかの方法でreCAPTCHAを設定しましょう。
Contact Form 7での設定方法
Contact Form 7の「インテグレーション」をクリックします。
「外部 API とのインテグレーション」というページが開きますので、ページを下へスクロールしreCAPTCHAの「インテグレーションのセットアップ」ボタンをクリックします。
reCAPTCHA のサイトキーとシークレットキーを入力する項目が出てくるので、先ほど取得したキーを入力欄にコピペし「変更を保存」をクリックしましょう。
設定が完了したらホームページの右下にreCAPTCHAのロゴがあるかどうか確認してください。
問題なく設定できていれば、ロゴマークが表示されます。
Invisible reCaptcha for WordPressでの導入方法
Contact Form 7で登録してもうまく機能しなかった場合、もしくはContact Form 7以外の方法は「Invisible reCaptcha for WordPress」のプラグインを使ってみましょう。
Invisible reCaptcha for WordPressのプラグインをインストールしたら、WordPressメニューの「設定→ Invisible reCaptcha」と進めると設定画面が開きます。
設定画面に表示されているサイトキーとシークレットキーを入力し、バッジ位置を「インライン」に設定し「変更を保存」をクリックします。
続いてWordPress保護設定を開き、画像のように4つのチェックボックスにチェックマークをつけ「変更を保存」をクリックします。
Contact Form 7のプラグインを使用しているなら問い合わせフォームの設定画面を表示させ「Contact Form 7の保護を有効化」にチェックを入れて「変更を保存」をクリックして設定完了です。
設定に問題がなければContact Formのお問い合わせページやWordPressのログイン画面などに、reCAPTCHAが適応されて以下のようなマークが表示され、スパム攻撃からサイトを守ってくれます。
右下のロゴを非表示にする方法
Invisible reCaptchaで上記のような設定した方は問題ありませんが、Contact Form 7でreCAPTCHAを設定すると画面の右下にロゴが表示されます。
サイトによってはreCAPTCHAのロゴがトップへ戻るボタンと重なってしまい、ユーザビリティが低下するから邪魔に感じる人もいます。
こちらのロゴはGoogleの規約上表示しないといけないのですが、Googleが推奨している方法でロゴを消すことができます。
「よくある質問」ページを確認する
Googleのよくある質問ページに以下のような記述があります。
「reCAPTCHAのバッジを削除するにはどうしたらいいですか？」という質問に対して「下のテキストを見える場所に貼り付けたらバッジを消していいよ」と回答しています。
This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and
<a href="https://policies.google.com/terms">Terms of Service</a> apply.上記のテキストをコピーし、どこか目に付くページに貼り付ける必要があるみたいです。
今回は例として、お問い合わせページの送信ボタンの下にテキストを貼り付けてみます。
Contact Form 7にテキストを貼り付ける
普段使用しているフォームの編集画面を開き、[submit “送信”]の下に先ほどコピーしたテキストを貼り付けて更新します。
更新後はちゃんとテキストが表示されているか確認してください。
CSSを追加してロゴを非表示にする
最後にreCAPTCHAのロゴを非表示させます。
WordPressの管理画面から外観→テーマエディターとクリックしていただき、 スタイルシート（style.css）を表示させ、以下のスタイルを貼り付けましょう。
.grecaptcha-badge { visibility: hidden; }貼り付けたら「ファイルを更新」ボタンを押せば完了です。
最後にホームページを表示し、右下にロゴが表示されなくなっているのを確認してください。
以上がreCAPTCHA v3の設定になります。