★掲載記事中のタバコの価格について
2018/10/01 以前に購入したものについては、改定前の価格に取り消し線を入れ、改定後の価格を太字にて併記しています。


私はロボットではありません! ~ Google reCAPTCHA v2 ~

2019-02-14 16:31WordPress

私はロボットではありません Google reCAPTCHA v2 - モニター画像 -
私はロボットではありません Google reCAPTCHA v2 – モニター画像 –

手巻きタバコのレビューが続いたので、ここらでちょっと変則ネタを。
今回は「私はロボットではありません」で有名(?)な、Google reCAPTCHA 設置話です。

Google reCAPTCHA とは・・・

ブログのコメント欄などで時々見かけるコレですね。

グーグル・reCAPTCHA:ウィジェット

そしてコレが何なのかというと、一言で説明するなら「不正なログインや大量の登録、迷惑な書き込みなどを試みる悪質なプログラム(ロボット)への対策ツール」・・・と言う事になりますか。

まあ、このブログのコメント欄も賑やかとは言いがたい状況なのですが、その裏では「高品質!激安コピーブランド!」とか「○○はブラック企業!」ってな具合のスパムコメントが低頻度ながら来ていたりもするわけです。

これまでは、そういうのを見かけるたびに一つ一つ手作業で消して・・・・・と言うことも無く、今のところは Akismet というスパム対策ツール君が、皆様のお目に触れないよう良き計らってくれておりますです、ハイ。

そんな感じなので必要に迫られて・・・・・というより、見た目「いろいろやってますよー」的なアピールをしてみたいかな・・・と。

自転車とかなら「小型で明るいライトを付けたい」とか、「ペダルをフラットから折りたたみに変えたい」とか、まあそんな感覚でちょっと導入してみました。

 

設置作業(1):サービスの利用登録

まずは reCAPTCHAサービスの利用登録からですね。

そうそう、このサービスを利用するにあたってはあらかじめ Googleアカウントが必要なのですが、その取得に関してはここでは割愛します。

難易度も高くないですし、何よりこんな記事読みに来る人が Google のアカウントを持ってないなんてまず無いでしょうからね。

Google reCAPTCHAのトップページURLは以下になります。

reCAPTCHA: Easy on Humans, Hard on Bots
https://www.google.com/recaptcha/intro/v3.html

グーグル・reCAPTCHA:入口ページ

このページ右上にある「Admin console」ボタンをクリック、Googleアカウントでログインすると下記の登録画面が表示されるので、自分の環境に合わせて各項目を設定していきます。
※すでにログイン済みならクリックのみでこの画面に移動します。

グーグル・reCAPTCHA:設定ページ

各項目の設定

  • ラベル
    識別用の名前なので何でもいい(と思う)のですが、ここは例に倣って利用するサイトのドメイン名がよろしいかと思います。
    グーグル・reCAPTCHA:ラベル設定

  • reCAPTCHA タイプ
    reCAPTCHA v2 を選ぶと、3つの選択肢が出てくるので「私はロボットではありません」チェックボックス形式を選択します。
    グーグル・reCAPTCHA:タイプ設定
    reCAPTCHA v3 を選ぶとこの選択肢は出てきません。

    なお、reCAPCHA タイプは登録後に変更することはできないので注意しましょう。
    もし間違ったまま登録してしまった場合は、設定全てを一度削除してから改めて登録をやり直す必要があります。
    ※削除の手順はコチラになります。

  • ドメイン
    ここも単純にドメイン名を入力。
    グーグル・reCAPTCHA:ドメイン設定
    サブドメインがある場合は「+」ボタンで追加記入する。

  • オーナー
    下記のアラート(警報)メールの送信先になります。
    ログインしたGoogleアカウントのGmailアドレスがそのまま入っていて、変更不可になってます。
    グーグル・reCAPTCHA:オーナー設定
    スマホ等、他のメールアドレスにも送信する場合は「+」ボタンで追加記入します。

  • reCAPTCHA 利用条件に同意する
    ここにチェックを入れずに送信すると「reCAPTCHA 利用規約に同意してください。」と表示され利用登録ができません。
    グーグル・reCAPTCHA:利用条件に同意する

  • アラートをオーナーに送信する
    ここは初期状態でチェックが入っているのでこのままでOK。
    グーグル・reCAPTCHA:アラートをオーナーに送信する

各項目の入力が終わったら「送信」ボタンをクリックして、下の画面が表示されたら利用登録完了です。

グーグル・reCAPTCHA:登録完了

サイトキー、シークレットキーは WordPress でreCAPTCHAサービスを利用する際に必要になりますが、とりあえず「GO ANALYTICS」ボタンでメインのアナリティクス画面に移動します。
※キーの確認方法は後記参照。

これが今後reCAPTCHAサービスにログインした際、最初に表示されるメイン画面になります。

グーグル・reCAPTCHA:アナリティクス画面

画面上部にラベル名、reCPTCHA タイプ、登録済みサイト数と、右側に「グーグル・reCAPTCHA:プラス(作成)アイコン:作成」「グーグル・reCAPTCHA:歯車(設定)アイコン:設定」「グーグル・reCAPTCHA:ダウンロード(Download)アイコン:Download」の操作ボタンが表示されています。

「サイトキー」、「シークレットキー」を確認する

グーグル・reCAPTCHA:アナリティクス画面上部、設定ボタン

設定の確認や後から変更する場合は前記、アナリティクス画面右上の「グーグル・reCAPTCHA:歯車(設定)アイコン:設定」アイコンをクリックして設定画面を開きます。

グーグル・reCAPTCHA:サイトキー、シークレットキーの確認画面

設定画面で「reCAPTCHA のキー」をクリックすると下に展開表示します。

グーグル・reCAPTCHA:キーの表示

設定を削除する

グーグル・reCAPTCHA:アナリティクス画面上部、設定ボタン

設定を削除する場合も、まずアナリティクス画面右上の「グーグル・reCAPTCHA:歯車(設定)アイコン:設定」アイコンをクリックして設定画面を開きます。

開いた画面の右上「グーグル・reCAPTCHA:ゴミ箱(削除)アイコン:削除」アイコンをクリック、最終確認のダイアログが開くので「削除」ボタンを押して終了です。

グーグル・reCAPTCHA:設定画面(削除ボタン)
※設定は完全に削除されるので元に戻せません。

以上の手順でreCAPTCHAが利用可能になったら、次はいよいよブログに設置します。

 

設置作業(2):プラグイン導入・設定

ブログへの設置方法はいろいろあるようですが、一般的にはプラグインを利用します。

そのためのプラグインもいろいろあるわけですが、自分は「Google Captcha (reCAPTCHA) by BestWebSoft 」を使用しました。

ここではWordPressプラグインのインストール方法については正直、画面で説明するまでも無いと思うので流れだけ。

左メニューの「プラグイン」→「新規追加」→『Google Captcha (reCAPTCHA)』をキーワードで検索→「今すぐインストール」→「有効化」

WordPressプラグイン:「Google Captcha (reCAPTCHA) by BestWebSoft」インストールの流れ

・・・・・で、終了。
成功すると、左メニュー「設定」の下に「Google Captcha」が表示されるようになります。

WordPressプラグイン:グーグル・reCAPTCHA、インストール成功

ここをクリックして設定画面を開きます。

プラグインの設定

いろいろ表示されますが、設定するのは4箇所のみ。

  • Authentication:Site Key、Secret Key
    こちらの手順を参考に「サイトキー」、「シークレットキー」を確認、コピー&ペーストします。
    WordPressプラグイン:グーグル・reCAPTCHA、Site Key, Secret Key 設定

  • General:Enable reCAPTCHA for
    reCAPTCHA を有効にする箇所の設定する。
    今回はコメントフォームのみ必要なので、「Comments form」にチェックを入れる。(それ以外は外す)
    WordPressプラグイン:グーグル・reCAPTCHA、Enable for 設定
    ※蛇足ながら、参考にしたサイトでは「Login Form」にチェックを入れたところログインできない不具合に遭遇したとあったので、よくわからない場合は不要な設定を切っておくほうが無難だと思います。

  • reCAPTCHA Version, Theme
    今回は「reCAPTCHA v2」を利用するので「Version 2」を選択。
    WordPressプラグイン:グーグル・reCAPTCHA、Version 設定

    「Theme」は「Light」、「Dark」の2種類をお好み・・・というかブログの色合いで選択。

    Light:
    グーグル・reCAPTCHA:ライト・テーマ

    Dark:
    グーグル・reCAPTCHA:ダーク・テーマ

入力が終わったらページ下部の「Save Changes」ボタンをクリックして設定を保存します。

保存後、Authentication の「シークレットキー」下に WordPressプラグイン:グーグル・reCAPTCHA、Test reCAPCHA ボタン ボタンが現れますので、念のためにテストしておきましょう。

以上でプラグインの設定完了です。

コメント欄に reCAPTCHA が表示されているか確認してみてください。

WordPressプラグイン:グーグル・reCAPTCHA、スクリーンショット

 

最後に:v3(Version 3)ではなくv2(Version 2)を使っている理由・・・

・・・は極めて単純で「v3 だとコメントフォームに reCAPTCHA を表示することができなかった」からで、実は今回、最大のキモはコレだったりします。

もちろん、登録したreCAPTCHA のバージョンとプラグインの設定が合っているか確かめ、何度か登録からやり直したりもしましたが、v3 だとどうしてもうまく設定できませんでした。

おまけに、うまく動いていないにもかかわらず特定の機能だけは働いているらしく、ブラウザ内の右下に reCAPTCHA のウィジェット(?)が常に表示されるようになるわけです。

これがまたページトップに移動するボタンと重なって、見た目的にもあまりよろしくないんですね。

冒頭でも書きましたが、もともと実用よりも「何かしら手を入れてみたかった」・・・言ってしまえば設置することそのものが目的だったわけですから、「うまく動かない」「見た目が悪い」の v3 は早々にあきらめ v2 で試したところあっさりとできたので「これにて終了」としました。

時間があれば、もう少し突っ込んで調べてみようかと思いますが、とりあえず今回はこの辺で。

では、また次回。

 

補足情報:ルクセリタス(Luxeritas)の場合

テーマによっては Google Captcha (reCAPTCHA) プラグインと同じ機能を内包しているものもあり、その場合はプラグインのインストール不要。
カスタマイズ画面等にて設定すれば reCAPTCHA の使用が可能になります。

ルクセリタスの場合は「Luxeritas」→「カスタマイズ」→「画像認証」タブで設定画面が開きます。

ルクセリタス(Luxeritas):「画像認証」画面を開く手順

  • 画像認証の設定
    ルクセリタス(Luxeritas):「画像認証の設定」画面
    Google reCAPTCHA v2、v3 の他、「Securimage PHP CAPTCHA による画像認証」 が選択できます。
    Securimage PHP CAPTCHA は選択するだけですぐに使用できるので、すぐに対処しなければならない場合などはとりあえずコレで様子を見るのもアリだと思います。
    ※自分のように別途プラグインで設置している場合は「画像認証を使わない」のままでOKです。

    Securimage PHP CAPTCHA 画像認証画面
    Securimage PHP CAPTCHA:デフォルトの設定だとこんな感じになります。

  • Google reCAPTCHA の設定
    ルクセリタス(Luxeritas):「Google reCAPTCHA の設定」画面
    「サイトキー」、「シークレットキー」を設定することで使用可能になります。
    v2 の場合は「テーマ」の他「サイズ」や「認証タイプ」に画像、または音声を選択することも可能です。
    そして特筆すべきは v3 の設定。
    右下に表示される「Page Top」ボタンと重ならないように位置関係を設定することも可能なようです。

  • Securimage PHP CAPTCHA の設定
    ルクセリタス(Luxeritas):「Securimage PHP CAPTCHA の設定」画面
    デフォルトで使用しても特に問題ないとは思いますが、いろいろ設定できるので見栄えを良くしたいならお好みで・・・といったところでしょうか?
    文字数を増やしたり見えにくくするなりした場合は、入力の手間や判読困難などユーザビリティの問題も出てくるので、そのあたりのバランス調整は面倒かもしれません。
    まあそういう事態になったら Google reCAPTCHA に鞍替え・・・というのもひとつの手ですかね。

自分は基本的な考え方として「正常に動いているものは極力触らない」主義なので、こちらの機能に切り替えるのはよほど時間があるか、何かあったとき・・・という事になると思います。

プラグインは重くなる原因でもありますので、まじめに高速化に取り組むようなことがあったらこの辺りをいじることになるかもしれません。

このブログはとりあえずこのままで行くことにしますが、ルクセリタスを使っている方は最初からこちらの機能を使用したほうがいいでしょうね。

 

追記情報:

  • 2019/02/12:「補足情報:ルクセリタス(Luxeritas)の場合」追記。


ブログランキング参加中! イワユル「趣味ニ走ッタ」トイウヤツデスナ! ε= ε= ε= ヘ(;>凸<)ノ