アーカイブ: コラム

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

おわりに

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

会社サイトや採用サイトの制作案件では、会社の魅力を伝えるコンテンツとして、社員紹介を掲載することが多々あります。しかし、掲載される社員の方の中には、自分の名前で検索した際にサイトが表示されてしまうのは何とかしてほしい、といった要望が出ることもあります。

Webサイトは多くの人に見てもらうことを目的として作成するものですが、このようなプライバシーの観点から検索避けが必要となるケースも存在します。今回はGoogleやYahooなどの検索結果にページを表示させない方法についてご紹介します。

1. 検索結果に表示される仕組み

検索避けの設定方法をご紹介する前に、検索結果にページが表示される仕組みについて簡単に理解しておきましょう。作成したサイトが検索結果に表示される流れは、主に以下の3つの工程に分けることができます。

1. 「クロール」：検索エンジンのロボット（クローラー）がサイトを巡回する。
2. 「インデックス」：巡回して発見したサイトをデータベースに登録する。
3. 「ランキング」：登録したサイトに順位をつける。

検索エンジンがクロールしてサイトをインデックスすることで、各ページが検索結果に表示されるようになります。SEO対策の基本となるので「クロール」と「インデックス」というキーワードはしっかり理解しておきましょう。

2. 検索避けの設定方法

2-1. 「noindex」タグによる設定

ページを検索結果に表示させないためには、検索エンジンによるインデックスをブロックする必要があります。「noindex」タグはインデックスを拒否する設定のことで、検索避けしたいページのmetaタグに下記のように記載すれば、インデックスをブロックすることができます。

<meta name="robots" content="noindex" />

また、name属性の値を変えることで、個別の検索エンジンに対して指示することも可能です。日本ではGoogleとYahooの検索エンジンがシェアの90%を占めているので、この2つをブロックすれば検索避けの対策としては十分かと思います。

//Googleのクローラーだけを拒否したい場合
<meta name="googlebot" content="noindex" />

//Yahooのクローラーだけを拒否したい場合
<meta name="slurp" content="noindex" />

【WordPressサイトの場合】
WordPressでサイト構築をしている場合、SEOに関する設定は「All In One SEO」などのプラグインを利用している方も多いと思います。その場合は下記の手順で、noindexを設定することが可能です。

1. WordPress管理画面から検索避けしたい固定ページや投稿ページを開く。
2. 「AIOSEO設定」→「Advanced」タブを開く。
3. ロボット設定の「デフォルト設定を使用」をOFFにして、「インデックスなし」にチェックを入れる。

2-2. 「robots.txt」による設定

「robots.txt」とは検索エンジンのクローラーに、特定のページやファイルをクロールしないように指示するためのファイルです。「noindex」はインデックスを拒否する設定でしたが、「robots.txt」はクロール自体を拒否する設定なので、対処の段階が異なります。

また、「noindex」はページ上には設定できますが、画像や動画ファイルには設定することができません。画像や動画を検索結果に表示させたくない場合は、「robots.txt」でクロールをブロックすることで対処することが可能です。

robots.txtの次のような書式で記述します。

User-agent: *
Disallow: /wp-admin/
Disallow: /images/staff_01.jpg
Disallow: /movie/staff_01.mp4

Sitemap: https://example.com/sitemap.xml

・ User-agent：対象となるクローラーを指定します。（ * は全クローラーを対象）
・ Disallow：クロールを拒否するページ or ファイルのパスを指定します。
・ Allow：クロールを許可するページ or ファイルのパスを指定します。
・ Sitemap：サイトマップを指定します。（省略可）

上記の場合、すべての検索エンジンを対象に wp-admin以下のページと staff_01.jpg、staff_01.mp4 へのクロールがブロックされて、検索結果に表示されなくなります。robots.txtファイルが用意できたら、サイトのルートディレクトリに設置して設定完了となります。

【WordPressサイトの場合】
WordPressサイトの場合はWordPressをインストールした場所によって、下記の通り robots.txt の仕組みが異なります。しかし、手動で作成したrobots.txtファイルをアップロードすれば、アップロードファイルの方が優先されるので、検索避けを手動で設定する場合はあまり意識しなくて良いかと思います。

・ ルート直下にインストールした場合：仮想robots.txtとなります。
　 （アクセスがあった場合に自動生成されるファイルで、FTPで探してもファイルの実態はありません）
・ サブディレクトリにインストールした場合：仮想robots.txtは生成されません。

2-3. 一部のキーワードを検索避け

検索結果には表示させたいけどページ内の特定のキーワードは検索避けしたい、といったケースもあるかと思います。（冒頭で紹介したような社員名など）ただ、Googleに関して言えば、一部のキーワードのみを検索避けする仕組みはありません。

もし、どうしても対応が必要となった場合は、テキストを画像に置き換えたり、JavaScriptで動的に生成することでインデックスを回避することが可能です。ただ、そうした対応はクローキング（検索エンジンとユーザーに異なる表示をすること）とみなされ、ページが正しく評価されない可能性もあるので注意しましょう。

おわりに

今回は検索避けの設定方法についてご紹介しました。サイトは公開すれば自然と検索結果に反映されるため、Webデザイナーの方でも検索エンジンの仕組みについて詳しく知らなかったという方もいるかと思います。しかし、検索結果に表示される仕組みを知ることで、作成したサイトを意図した形で検索結果に表示・非表示させることができるようになります。SEO対策の基本を身につけておくことで検索結果からの流入を増やすこともできると思いますので、しっかり対処していきましょう。

皆さんはWeb制作をする際、画像の拡張子をどのように使い分けていますか？
写真等はjpeg/jpg、透過画像はpngでしょうか？実はWebPでは写真も透過画像も表現できる上、さらに画像のファイルサイズも大幅に削減できます。
WebPに変換できる無料のWebサービスはいくつか存在しますが、枚数によってはアップロードに時間がかかったり、容量に制限があることも多いです。
そこで今回は、わずか数ステップでローカルにWebP変換の環境を作る方法をご紹介します。

1. WebPとは？

WebPは2010年にGoogleによって開発された画像フォーマットです。
冒頭で述べた通りファイルの軽量化ができるのとフォーマットを統一できるということが特徴です。
以前まではInternet Explorer（以下「IE」）に対応していないというデメリットが有りましたが、2023年7月現在IEのサポートは終了しており、「Can I use」のWebP対応状況もIE以外対応済みのため、基本的にはWebPに移行して問題はないでしょう。
それぞれの拡張子の違いについては、過去の記事「JPG、GIF、PNG、SVG、WebPのメリット・デメリット」でもご紹介していますので、詳しく知りたい方はそちらをご参照いただければと思います。

2. 準備

2-1. WebPをインストールする

jpeg/jpgやpng画像をwebpに変換するには「cwebp」というコマンドをインストールする必要があります。

「cwebp」はMacのパッケージ管理ツールである「Homebrew」からインストールできます。

パッケージ管理ツールとは、PythonやNode.jsといったプログラミング言語や、 SlackやZoom等といったアプリケーションのインストール・管理ができるツールです。
個別でインストールするよりも管理が楽になる等のメリットがあります。
Homebrewのインストール方法や使い方については解説されているサイトが多くありますので、今回の記事では割愛させていただきます。

今回はwebpというパッケージをインストールするので、ターミナルを開き以下のコマンドを実行してください。

$ brew install webp

実行後、「brew list」コマンドを実行して、一覧に「webp」があればインストールに成功しています。

2-2. Shellスクリプトを用意する

変換したい画像をまとめた任意のフォルダに空のテキストファイルを作成し、以下を貼り付けます。

#!/bin/sh
for file in `find . -type f -name "*.jpg" -or -name "*.jpeg" -or -name "*.png"`;
do
cwebp $file -o "${file%.*}.webp" >/dev/null 2>&1
done

ファイル名は任意のファイル名、拡張子は「.sh」で保存します。今回は「webp.sh」にしましょう。

こちらのシェルに「フォルダの中を上から順に見ていき、jpg/jpeg/pngがあればwebpに変換する」という処理が書かれています。

2-3. Shellスクリプトに実行可能な権限を付ける

Shellスクリプトは作った段階では「実行できない状態」ですので、ターミナルで以下のコマンドを実行してファイルを実行できる状態にします。

$ cd path/to/dir  //Shellスクリプトがあるフォルダに移動する
$ chmod 755 webp.sh  //ファイルを実行可能な権限に変更

以上で準備は完了です。

3. 実行方法

webp.shがあるフォルダに変換したい画像を置きます。



ターミナルで以下のコマンドを実行します。

$ ./webp.sh  //シェルスクリプトを実行

設置した画像ファイルの数だけwebpファイルができていれば成功です。


ファイルの容量もかなり少なくなっているのがお分かり頂けると思います。
また、画像の劣化も無く容量のみを削減することができるため、Webサイトの見た目が悪くなるということもありません。

【画像比較】

左：sample1.jpg(2.4MB) / 右：sample1.webp(953KB)
 

 

左：sample2.png(13.6MB) / 右：sample2.webp(953KB)
 

おわりに

いかがでしたでしょうか？初期設定が必要ではあるものの、変換自体はとても簡単にできたのではないかと思います。
昨今はモニターの解像度も上がってきており、高解像度の画像をたくさん使う機会も多いと思います。
そんなときにWebの圧縮サービスに画像をアップロードするのではなく、ローカルで作業することができれば作業の効率化に繋がります。
是非この機会に導入してみてはいかがでしょうか。