アーカイブ: コラム

WordPressは世界中で広く使われているウェブサイト構築プラットフォームですが、悪意あるbotによるスパムや不正アクセスのリスクも高まっています。今回はGoogleが提供しているbot対策サービスであるreCAPTCHAをWordPressサイトに導入する方法についてご紹介します。

1. reCAPTCHA とは？

reCAPTCHAとは、Googleが提供しているbot対策サービスです。
botとは自動プログラムやスクリプトによる不正なアクセスのことを言います。
Google reCAPTCHAの旧バージョンであるv1、v2では、テキストや画像などの認識が難しいタスクをユーザーに実行させることでbotからのアクセスを防いでいましたが、最新バージョンのv3からはマウスの動きなどからbotと人間の判別を行っているため、実質ユーザーの負担無しにbot対策をすることが可能となっています。

2. 設定手順

2-1. GoogleアカウントでreCAPTCHAを有効にする

reCAPTCHAの設定にはGoogleアカウントが必要になります。
Googleアカウントをお持ちでない方は先にアカウントの作成を済ませておいて下さい。

作成済みの方は以下のURLにアクセスし、v3 Admin Consoleにアクセスします。
https://www.google.com/recaptcha/about/
 

 
このページで、reCAPTCHAを有効にするドメイン等の設定を行います。
初めてコンソールに入る場合、以下の新規作成画面になるかと思いますが、既に別サイトを登録済みの場合、管理画面の「新規作成」から下記画面に遷移して下さい。
 

 

ラベル：任意の文字列です。サイト名などわかりやすい名前にします。
reCAPTCHAタイプ：スコアベース(v3)を選択します。
ドメイン：対象のドメインを入力します。
入力内容を確認し、「送信」をクリックします。

問題なく作成されればサイトキーとシークレットキーが生成されます。この後の手順でサイトキーとシークレットキーを使用しますので、控えておいて下さい。
 

 

2-2. WordPressにプラグイン「Advanced Google reCAPTCHA」を設定する

WordPressのプラグインメニューの検索窓で「Advanced Google reCAPTCHA」を検索し、インストール・有効化します。
 

 
メニューに「Advanced Google reCAPTCHA」の項目が追加されるのでクリックします。
 

 
サイトキーとシークレットキーの入力欄があるので、「2-1. GoogleアカウントでreCAPTCHAを有効にする」で控えたサイトキーとシークレットキーを入力します。
 

 
ステータス設定はデフォルトでほぼすべてのフォームが監視されるようになっているため、特に指定が無ければそのままで問題ありません。問題なければ「変更内容を保存」をクリックします。
 

Contact Form 7にGoogle reCAPTCHAを設定する。

フォームにプラグイン「Contact Form 7」を使用している場合、Contact Form 7のメニューから別途reCAPTCHAを設定する必要があります。
Contact Form 7を使用していない場合、スキップして「2-3. サイトにアクセスしてreCAPCHAが反映されているか確認する」へ進んで下さい。
 
管理画面「お問い合わせ」の中にある「インテグレーション」をクリックすると、アプリケーションごとの設定リンクありますので、reCAPTCHAの「インテグレーションのセットアップ」をクリックします。
 

 
こちらも同様にサイトキーとシークレットキーを入力すればContact Form 7側の設定も完了です。
 

 

2-3. サイトにアクセスしてreCAPCHAが反映されているか確認する

サイトの任意のページを開きます。右下にreCAPTCHAのロゴマークが表示されていれば、reCAPTCHAが有効になっています。
 

 
「2-2. WordPressにプラグイン「Advanced Google reCAPTCHA」を設定する」でContact Form 7にも設定した場合、お問合せフォームもreCAPTCHAが有効になっているのが確認できるかと思います。
 

 

3. reCAPTCHAのロゴマークを消す方法

上記の設定をしただけの状態だと、すべての画面で右下にreCAPTCHAのロゴマークが表示されます。
このままだとページトップへ戻るボタン等の右下に配置するボタンの邪魔になる可能性があるため、ロゴマークを非表示にする方法をご紹介します。
なお、プラグインで非表示にすることも可能ですが、不具合も報告されているため、以下に示すGoogle公認の方法で実施することをおすすめします。

3-1. Contact Form 7にhtmlのコードを貼りつける

まずはGoogleのreCAPTCHAサポートページを開き、「reCAPTCHA バッジを非表示にします。どうすればよいですか？」のセクションに移動します。
reCAPTCHA サポートページ
「ユーザーフローに reCAPTCHA のブランドを視覚的に表示している限り、バッジを非表示にできます。」とあるので、お問い合わせフォーム下部に以下のHTMLを貼り付けます。

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.

上記コードを追加した後の表示はこのような感じです。
 

 
テキストのサイズと色は調整して問題ないので、薄いグレーなどにしておけば、フォーム入力の邪魔にならないので良いでしょう。
 

 

3-2. 追加CSSのコードを貼り付ける

CSSに以下を貼り付けます。

.grecaptcha-badge { visibility: hidden; }

こちらのスタイル指定があたっていれば表示が消えているはずです。作業としては以上となります。
 

 

おわりに

いかがだったでしょうか？いくつかのステップが必要ですが、設定自体は意外と簡単にできることがおわかりいただけたかと思います。フォームのbot対策は重要なセキュリティ対策の一つですので、これを機に検討してみてはいかがでしょうか。

ウェブサイトのコーディングをしている時、簡易的なローカルサーバーを立てたい時はありませんか？
例えばレスポンシブ作業をスマートフォンの実機で確認したい時や、開発環境にアップする程でもない修正の確認など理由は様々です。
今回はそんなちょっとした時に簡単にローカルサーバーを立てる方法を紹介します。

1. 下準備 [Pythonのインストール]

今回の作業は下準備がほとんどと言っても過言ではありません。
Pythonというプログラミング言語を使用するため、まずはPythonを使用できる環境を用意します。
実はmacOSによっては、標準でPythonがインストールされています。既にPythonが使用できる場合は2. ローカル環境の立ち上げまで飛ばしてください。

1-1. Homebrewのインストール

まずはHomebrewをインストールしましょう。
Pythonをインストールするはずなのにいきなり違うものをインストールすることに違和感を感じるかもしれませんが、Homebrewを使用すればより簡単にPythonをインストールすることができますので今回はHomebrewを使用します。
HomebrewとはmacOS上で動作するパッケージ管理ツールで、Homebrewを使用して様々なアプリケーションをインストールすることができます。Google PlayやApp storeのようなものと考えるとイメージしやすいかもしれません。
参考：【完全版】Homebrewとはなんぞや
 
今回の記事ではインストール方法は割愛しますので下記の記事を参考に進めてください。
Homebrewのインストール方法を分かりやすく解説（M1 Macも対応）

1-2. pyenvのインストール

またPythonと違うものをインストールしていると思うかもしれませんが、pyenvはPythonのバージョン管理ツールです。Pythonの複数あるバージョンから任意のバージョンを選んで使用することができます。
pyenvは先ほどインストールしたHomebrew使ってインストールします。
下記のコマンドを実行してください。($は不要です。)

$ brew install pyenv

pyenvが正常にインストールされたかを確認します。

$ pyenv -v

pyenv 0.0.0(バージョン名)が表示されていれば正常にインストールが完了しています。
 
この後は『パスを通す』という初心者の方が最初に躓く作業があるのですが、手順通りに入力すれば問題ありませんので安心してください。画面に変化はありませんが上から順に入力しましょう。

$ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
$ echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc
$ echo 'eval "$(pyenv init -)"' >> ~/.zshrc
$ source ~/.zshrc

これでPythonをインストールする準備が整いました。

1-3. Pythonのインストール

先ほどインストールしたpyenvを使用してPythonをインストールします。
まずは下記のコマンドを実行してください。

$ pyenv install --list

このように使用可能なバージョンがリスト化されて表示されます。
 

 
今回はバージョン3.11.6を使用したいと思います。
下記のコマンドを実行してください。

$ pyenv install 3.11.6

しばらくすると指定したバージョンのインストールが完了するので、完了したら改めて確認してみましょう。

$ pyenv version

先ほど指定したバージョンが表示されていれば正常にインストールが完了しています。
しかしこの状態ではまだPythonを使用することはできません。最後に下記のコマンドを実行してください。

$ pyenv global 3.11.6

これで下準備は全て完了したので、いよいよローカルサーバーを立ち上げてみたいと思います。

2. ローカル環境の立ち上げ

それではローカルサーバーを立ち上げます。
下記のコマンドをターミナルで実行してください。

$ python -m http.server 1010(任意の番号)

以上で作業は完了です。
ブラウザで下記のURLにアクセスしてみてください。
http://localhost:1010(任意の番号)/
 

 
先ほど実行したコマンドは、コマンドを実行したディレクトリをドキュメントルートにしたWebサーバーが立ち上がります。
なので今度はテストフォルダを用意して実行してみましょう。
 
今回はデスクトップに「test」フォルダを用意し、その中にindex.htmlファイルを用意しました。
 

 
index.html内は下記の記述が記載されています。
 

 
まずはターミナルを使用して作成したtestフォルダに移動します。
下記のコマンドをターミナルで実行してください。

$ cd /~自分の環境に合わせてください~/Desktop/test

ディレクトリの移動が完了したらそのまま先ほどのローカルサーバーを立ち上げるコマンドを実行します。

$ python -m http.server 1010

表示される内容がtestフォルダ内のindex.htmlに変わりました。
 

3. スマートフォン実機でのローカル環境確認方法

今回立ち上げたローカルサーバーは、同じWi-Fiに接続していれば実際のスマートフォンで確認することもできます。
まずは接続しているWi-FiのIPアドレスを調べます。
『システム環境設定』→『ネットワーク』の順で開き、赤枠の部分を確認してください。
そこに表示されている数字が、現在接続しているWi-FiのIPアドレスです。
 

 
そのIPアドレス＋先ほどローカルサーバーを立ち上げた際に入力したポート番号をスマートフォンのブラウザでアクセスすると、PCで立ち上げたローカル環境がスマートフォン側でも表示されます。
例：00.0.0.000:1010
 

おわりに

今回はちょっとした時に使える簡易的なローカルサーバーの立て方を紹介しました。
一度設定してしまえばたった1行のコマンドを実行するだけでローカルサーバーを立てられるので、この記事を参考にぜひ利用してみてください。

WEBデザイナーの中にはデザインやコーディングといったサイト制作だけでなく、サイト公開まで担当されている人も多いかと思います。

サイト公開にあたってはドメインやサーバーについての知識が必要となりますが、まだ経験が浅い間は、例えしっかり準備をしていても緊張するものですよね。特にクライアント業務の場合は「ドメインはそのままでサーバーだけ引っ越したい」「ドメインをサーバーと同じ場所で管理したい」など様々なケースが発生するため、知識がないとどのような手続きを踏めばよいのか、そもそも実行できるのかすぐに判断できないこともあるかと思います。

ドメインとサーバーの関係性についてきちんと理解しておくと、上記のようなケースであっても対応可能であろうといったイメージがしやすくなります。今回は最低限知っておきたいドメインとサーバーの関係性について紹介したいと思います。

1. ドメインについて

ドメインとはインターネット上の住所のようなもので、特定のサイトを識別するための名前のことを指します。ドメインにサイト名やサービス名などを合わせた「yahoo.co.jp」や「youtube.com」のことを「ドメイン名」と呼びます。

ドメインを取得するには「お名前.com」や「ムームードメイン」などドメインを販売しているサイトで購入します。ドメインの値段は販売サイトによって異なりますが、品質に違いはないので、どこで購入しても問題ありません。ただし、ドメインには維持費用がかかりますので、販売価格だけでなく2年目以降の値段や、管理画面の使いやすさなども考慮して検討すると良いでしょう。

また、ドメイン名は重複がなく一意であるため、取得できるかどうかは早いもの勝ちとなっています。欲しいドメイン名があれば早めに調査しておく必要があります。

2. サーバーについて

サーバーとはWebサイトのデータを保管する場所を指します。ドメインが住所であれば、サーバーは土地、サイトは家というふうに例えられることが多いです。

サーバーを用意するには「さくらのレンタルサーバ」や「エックスサーバー」などのレンタルサーバーを使用することが一般的です。レンタルサーバーであれば、使用するデータ容量にもよりますが比較的安く、契約後すぐに利用開始することができます。どこのレンタルサーバーを利用するかは、使いたい機能やサポート体制などを考慮して検討すると良いでしょう。

3. ドメインとサーバーの関係

ドメインを取得してサーバーを契約しても、そのままではサイトは表示されません。ドメインでサイトを表示するためには、ドメインとサーバーを紐づける必要があります。

ドメインとサーバーを紐づけるには「DNS（ドメイン・ネーム・システム）」と呼ばれる、ドメインとサーバーのIPアドレスを紐付ける仕組みを使用します。DNSを使用すると以下のような流れでサイトが表示されるようになります。

1. ドメイン名にアクセス。
2. DNSを介してドメイン名がIPアドレスに変換される。
3. 変換されたIPアドレスをもとにサーバーにアクセス。
4. サイトが表示される。

DNSの設定はドメインを取得したサービスサイト上で行うことができます。ドメイン管理画面にて紐づけたいサーバーのネームサーバーを入力することで、ドメインとサーバーを紐付けることが可能となります。

（例）「Xサーバー」で取得したドメインと「さくらのレンタルサーバ」のサーバーを紐づけ

ネームサーバーの設定方法については利用サービスのヘルプを参照してもらえればと思いますが、ドメインとサーバーは紐づけるもの、ということが理解できると「ドメインはそのままでサーバーを引っ越したい」「サーバーはそのままで新しいドメインに変更したい」といった要望にも対応可能であることがイメージしやすくなると思います。

ドメインとサーバーを同じ会社で契約した場合

「お名前.com」も「さくらのレンタルサーバ」も実はドメインとサーバーの両方をサービス提供しています。ドメインとサーバーを別々の会社で契約しなくても、同じ会社でまとめて契約することが可能です。その場合、紐付けも不要になるので上記のような設定をする必要もありません。（手間がかからず便利ではありますが、この点がドメインとサーバーの関係性がわかりにくくなっている要因かとも思います）

おわりに

今回はドメインとサーバーの関係性について、簡単ではありますが紹介しました。ただ、ドメイン、サーバー周りに関しては、どれだけ本で勉強しても実際に触ってみないことには、なかなか理解するのが難しいところでもあります。一度でも試した経験があれば不安は大分解消されるので、本番で焦らないためにも、ぜひ一度は自分自身でドメイン、サーバー契約をして設定してみることをオススメします。