reCAPTCHAアイコンを非表示にする方法を調べてみました。

芥川賞受賞の「となり町戦争」でどっぷり浸かった三崎亜紀の世界。
久しぶりに手に取った著作「ニセモノの妻」の第１作「終の筈の住処」に、とんでもなく心をざわつかされ、その心地よさに酔いしれました。

そしてオーウェルの「動物農場」を読み、「ニセモノの妻」とは違い、権力という具体的なものに恐怖しました。

みなさま、こんにちは。

ウェブ界隈での恐怖と言えば不正アクセスとか。
最近は「宅ふぁいる便」が不正アクセスを排除しきれずサービス停止を発表しました。

宅ふぁいる便、サービス終了を発表。2020年3月31日をもってサービスを正式に終了。

そんなサイバーテロが蔓延するなか、コンタクトフォームからくるスパムメール対策をしてほしいという依頼をいただきました。

そこで提案したのは、

• コンタクトフォームにチェックボックスを追加
• Google reCAPTCHAの導入

の2点。

１点目のチェックボックスは依頼者の手を煩わけることなく導入可能という手軽さがあるがセキュリティ的にちょっと脆弱。

チェックボックスにチェックを入れることで送信ボタンを機能させるという原始的な方法です。

機械的にスパムを送っているツールの中には引っかかるものもあると思うが、乗り越えて送りつけてくるものもあるでしょう。

チェックボックスにチェックが入っているかを判定し、サブミットボタンを有効にする方法は？

それではあまり意味がないので、今回はGoogle reCAPTCHAを提案させていただきました。

Google reCAPTCHAとはいったい何？

こんなロゴに見覚えはありませんか？

サイトの右端にたまにいる――

赤枠で囲ったアイコンに見覚えありませんか？

――たぶんこれなら絶対にわかるはずの、

「人間証明ボタン」。

たまに間違えていらっとした経験はだれもが持っていると思うのですが……。

この時には人間にも厄介さを与えるボタンこそが「Google reCAPTCHA」になります。

概要としては、

reCAPTCHA（リキャプチャ）とは、ウェブサイトの制限エリアへのアクセスを試みるボットからサイトを防御するためCAPTCHAを利用するのと同時に、そのCAPTCHAに対する返答を紙の本のデジタル化に活かすシステムである。

とのこと。

よくわからないですが、
重要なのは「ウェブサイトの制限エリアへのアクセスを試みるボットからサイトを防御する」の部分。

つまり、機械的に送ってくるスパムからサイトを防御しますよっていうこと。

とても素晴らしい機能ですね。

導入しない手はないですが、気になるのは先程「人間証明ボタン」と名付けた、あの厄介なパズルゲーム。

これのせいで問い合わせ件数が減ってしまうのではないかと不安になりますが、安心してください。

そこは常にユーザーファーストを掲げるGoogle様ですので、問題ございません。

「Google reCAPTCHA v2」から「Google reCAPTCHA v3」へ

v2とかv3とか、なんだか面倒くさそうですが簡単に言えば、ユーザー側で作業するのが「v2」Googleの方で勝手にやってくれるのが「v3」と考えてください。

v2とは？

v2は例の人間証明ボタンをユーザーにクリアさせることで、機械か人間かを証明させる。

それに対し、

v3とは？

v3はユーザーの動きを監視し、その動きをスコア化することで、機械か人間かを判断する。

つまりv3はユーザーに負担をかけません。

お問い合わせするだけで少し引け目を感じるのに、最後に砦のように「機械ではないことを証明してください」なんて言われたら問い合わせする気を失いますよね。

v3ではその理由の離脱がなくなることでしょう。

そんなv3を導入しないわけにはいきません。

さらにこの「reCAPTCHA」WordPressの有名なプラグインのひとつ「Contact Form 7」にも対応していますので、多くのウェブサイトとの親和性が高いというのも導入の背中を押してくれます。

しかしここで問題が発生しました。

reCAPTCHAのアイコンが邪魔

パソコンで見ると、

そんなに問題ないように見えますが、スマホで見てみると、

――確かに邪魔！

常に右端に表示されるアイコン。

コンタクトフォームページだけなら「まあ、仕方ないか」で済ますことができるのですが、今回の案件は全ページ共通のサイドバーにコンタクトフォームが設置してあるとので、それもできませんでした。

reCAPTCHAアイコンを非表示にする方法

それじゃ、「非表示にするしかない」と調べてみると、どうも規約違反とみなされると書かれたブログが多数ありましたが、よくよく調べてみると、GoogleのFAQに非表示にする方法が記載されていました。

方法は

ユーザーフローにreCAPTCHAブランドを視覚的に含める限り、バッジを非表示にすることができます。次のテキストを含めてください

とのこと。

で、肝心のテキストはこちら。

これさえしっかり記載すればもうバッチを非表示にしても問題ありません。

非表示の仕方は、

これで問題なく非表示にすることができました。

これでもう厄介なスパムメールに仕事を邪魔されることがなくなりました。

めでたし、めでたし。