システム構築 サービス SYTEM CONSTRUCTIOIN SERVICE

「HPにお問い合わせフォームを設置したが、問い合わせとは関係のないスパムメールがたくさん送られてくる」
そんなお悩みを耳にすることがあります。

実は、こうしたスパム投稿は、スパムbotと呼ばれるロボットによって行われているケースが多いのです。
この対策として、Google社の「reCAPTCHA」というツールを導入すると、ロボットによるスパムをブロックできます。
このツールは、基本的には無料で使うことができますが、注意が必要です（後述）。

Google reCAPTCHAを導入するか？ 検討事項

実装するとどうなるのか

ページの下部に下記のようなアイコンが表示され、今、操作を行っているのが「人かロボットか」を判定します。
以前は、画像認証（例：写真の中から信号機のタイルを選択する）などで、人かロボットかの判定をしていたのですが、今は、ユーザーは何もする必要はありません。すべて自動で判定されます。

料金は基本的には無料だが、上限あり

基本的には、無料で利用できます。
ただし、2025年4月から、無料版での1カ月の評価可能件数は、10,000件までに制限されます。
有料版のreCAPTCHA Standardに移行した場合は、評価可能件数が100,000件まで増えますが、１ヶ月に８ドルかかります。

ここで、請求先情報（クレジットカード）を登録すべきかどうかが問題になります。クレジットカードを登録しておけば、評価可能件数の10,000件を超えた場合は、有料版に移行します。
「自分のHPに届くお問い合わせは１ヶ月で20件程度だから、クレジットカードの登録はせずに、無料版のままで問題ない」と高をくくってはいけません。
もし、ロボットが大量にクリックをしてしまうと、10,000回を超えてしまうしまうかもしれません。そうなると、本命であるはずの人が、翌月までお問い合わせフォームの送信ができなくなってしまいます。

そのため、ビジネスユースのサイトであれば、クレジットカードの登録をおすすめします。
もちろん、サイト所有者が上限に達したことに気づいた後に対応すれば問題ないというサイトであれば、クレジットカードの登録をしないという選択もありだと思います。

また、プログラミングの方法よっては、無料版で１ヶ月の評価件数が上限を超えた場合に、評価のみを停止して、人の問い合わせをそのまま受け付けるかわりに、ロボットからのスパムもブロックしない、というふうに設定することも可能です。

導入に際して、オフィスアンツのお客様にやっていただくこと

オフィスアンツではお客様のreCAPTCHAの設定を代行いたします。
御社でお使いのGoogleアカウントをご用意いただき、そのログイン情報を共有してください。

Googleアカウントの共有に抵抗がある場合は、お客様ご自身で設定をすることも可能です。
次の項目からは、お客様ご自身で設定をする場合の方法を記載します。

GoogleでreCAPTCHAの設定をする

ご自身で設定をする場合も、プログラミングの実装作業は開発者に依頼する必要があります。下記の解説に記載の「☆メモ１～３」をオフィスアンツ(開発者)にお伝えください。

それでは、実際の作業についてご覧ください。

Googleアカウントにログイン

個人のアカウントではなく、reCAPTCHAを実装するサイトのアカウントでログインしましょう。

プロジェクトを作成する（既存プロジェクトでも可能です）

１．Google Cloudにアクセスする

https://console.cloud.google.com/

２．ロゴの右隣の選択中のプロジェクト名をクリックする

ポップアップでプロジェクトの一覧が表示されます。

３．「新しいプロジェクト」をクリックする

　プロジェクト名：officeants-recaptcha(例)（「サイト名-recaptha」といった名称がおすすめです）
　場所：デフォルト（組織なし）
※後でプロジェクトを整理するために、わかりやすい名称にしましょう。
※テストの場合は先頭にtestを付け、削除しても問題ないことを暗示させましょう。

４．上記のプロジェクトを選択する

上部に選択中のプロジェクト名と「ようこそ」といったメッセージ表示されます。
　プロジェクトID：officeants-recaptcha-xxxxx(例)　☆メモ1

reCAPTCHAの設定をする

１．検索窓から「recaptcha」と入力し、「reCAPTCHA」を選択する

reCAPTCHAのトップに移動します。

 ２．ページの中ほどにある、「reCAPTCHA のキー」の隣の「＋キーの作成」ボタンをクリックする

表示名：officeantsサイトのrecaptcha(例)　※「サイト名＋の＋recaptcha」がおすすめ
プラットフォームの種類を選択：ウェブサイト
ドメインリスト
　ドメインを追加：officeants.com(例)　※サイトのドメインを入力

３．「鍵を作成」をクリックする

「officeantsサイトのrecaptcha＞システム開発」画面に移動します。
↓そのタイトルの右に「ID:～」と表示されているのがreCAPTCHAキーです。メモしておきましょう。

reCAPTCHAキー：xxxxxxxxxxx　☆メモ２

reCAPTCHA Enterprise APIを有効にする

１．検索窓から「recaptcha」と入力し、「reCAPTCHA Enterprise API」を選択する

reCAPTCHA Enterprise APIのトップに移動します。

２．「有効にする」ボタンをクリックする

API/サービスの詳細画面に移動します。

認証情報（APIキー）を作成する

続けて、
(直接「認証情報」にたどり着くには・・・「recaptcha」で検索し「reCAPTCHA Enterprise API」を選択。「管理」をクリック。続きは下記参照)

１．左に表示されているメニューの「認証情報」をクリック

２．「＋認証情報」を作成をクリックし「APIキー」をクリック

・自分のAPIキーが表示されるので、メモしておきましょう。
　APIキー：xxxxxx　☆メモ３
・APIキーの一覧に表示された、このAPIキーをクリックします。
　ここでAPIの制限を行わないと、他社に利用され、料金がかさんでしまう恐れがあります。

　名前：officeants-recaptcha用(例)　※「サイト名-recaptcha用」がおすすめ
　アプリケーションの制限：ウェブサイトにチェックし下記を追加（そのドメインすべてを許可）
　　*.officeants.com/*
　　※ＩＰアドレスで制限する方法もあります。
　　※エラーが出る場合はアプリケーションの制限は「なし」にしてお試しください。
　　　(1万件未満という条件がありますが無料で利用できます）
　APIの制限：reCAPTCHA Enterprise API

※インストールエラーに対する対応

エラー「 403  Requests from this referer are blocked. statusが PERMISSION_DENIED」が出てしまう場合のほとんどがこの「認証情報の制限」の指定間違いです。

reCAPTCHAバッジのデザインをカスタマイズ

デフォルトでは、フォームの右下に配置されます。
ここは他のボタンなどと被ってしまう場所であるため、カスタマイズしたくなりますよね。
実はこのバッジ、非表示にすることができます。
・css
.grecaptcha-badge { visibility: hidden; }
※ただし、Googleの規約上、下記の文言を表示しなければなりません。
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.
参考）https://developers.google.com/recaptcha/docs/faq?hl=ja

他のドメインでも同じreCAPTCHAを流用したいときは？

別のサイトでも、同じreCAPTCHAを流用して使いたいときは、下記の2か所の設定を変更する必要があります。
１．上記の「reCAPTCHAの設定をする」のところで、新しいドメインを追加する
２．上記の「認証情報（APIキー）を作成する」のところで、もし、ドメインやIPアドレスでの制限を行っている場合は、新しいサイトの情報を加える

請求先登録（クレジットカードの登録）をする

請求先(クレジットカード)を登録することで、月の制限値(10,000件)を超えても利用し続けることができます。

１．Googleクラウドに移動

https://console.cloud.google.com/

２．「recaptcha」で検索し「reCAPTCHA」に移動する

３．右上の「課金を有効にする」ボタンから情報を登録します。

まとめ

以上が、お客様自身でreCAPTCHAの設定を行う場合の方法です。
オフィスアンツでは、お客様のご希望に応じて、設定の代行からプログラミング作業まで行うことができます。

また、疑問点等がありましたら、丁寧にご説明させていただきます。
どんな些細なことでも構いませんので、お気軽にお問い合わせください。
プログラマーの方からのお問い合わせも受け付けております。

お問い合わせフォームは こちら

お電話でも、お気軽にお問い合わせください。
03-6806-5461