SEOのためのスマホ対応 - PHPによるデバイス識別

株式会社オンラインの金沢です。今回もスマホ対応の話になります。

3回にわたりスマホ対応の記事を書きましたが、

SEOでスマホ対応が重要になること
スマホ対応の方法その1 (画面幅の取得により変化させる)
スマホ対応の方法その2 (デバイスの種類により変化させる)

これらの内の3つ目が今回になります。前回のスマホ対応の仕方はCSS、JavaScriptを用いて画面幅を取得しておりましたが、今回のポイントとなるデバイスの種類はPHPにより取得可能です。PHPはサーバーサイドで動作するプログラム言語ですが、動作するトリガーとなる閲覧者からのリクエスト(URLなど)と一緒に様々な情報が付加されます。その情報を使えばスマホ対応にできるということです。

$_SERVER変数の「’HTTP_USER_AGENT’」について

まず、PHPにはあらかじめ定義されている変数があります。よく使われる$_GETや$_POSTなどがそれにあたります。その中に$_SERVERという変数を今回は使います。$_SERVERには、そのサイトのサーバー情報や閲覧者自身の情報、リクエスト情報などたくさんの値が格納されます。その中の「’HTTP_USER_AGENT’」という名前のキーで格納された値が、閲覧者のOSやブラウザなどをまとめた文字列になっています。この値から判別が可能であるということです。

WordPressの「wp_is_mobile」関数

デバイスの種類を判断する例として、参考になりますのはWordPressの条件分岐関数「wp_is_mobile」です。こちらはモバイルであるか否かをまとめた関数になります。下記にコードをコピペさせて頂きます。

/**
 * Test if the current browser runs on a mobile device (smart phone, tablet, etc.)
 *
 * @return bool true|false
 */
function wp_is_mobile() {
	static $is_mobile;

	if ( isset($is_mobile) )
		return $is_mobile;

	if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
		$is_mobile = false;
	} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
			$is_mobile = true;
	} else {
		$is_mobile = false;
	}

	return $is_mobile;
}

「strpos」関数は、第一引数の文字列の中に第二引数の文字列が何文字目に現れるかを返す関数です。第二引数の文字が見つからなければ「false」を返しますので、それにより文字が含まれているかを判断しています。これをテーマのテンプレートファイルの内で使えばPCとスマホで表示ソースや読み込むCSSファイルを変えることができます。

しかし、この関数ではiPadやタブレットもモバイル扱いになってしまいます。iPadやタブレットをPC表示にしたい場合は、関数を拡張する必要があります。下記のサイトが参考になりましたので、よろしければご覧下さい。

・WordPressのスマホ対応に使える!!PCとの表示振り分け関数・プラグイン｜ウェブシュフ

WordPressのテーマをデバイスごとに切り替える

WordPressであれば、デバイスごとにテーマ自体を切り替えることもできます。ただし、テーマ切り替えの処理は割と複雑で、プラグインのインストールを推奨します。私は「Multi Device Switcher」というプラグインをよく使います。このとき、スマホ用テーマはPC用テーマの子テーマとして作成すると、functions.phpなどを共有できて手間が省けます。共有しているファイルの中でデバイスごとの振り分けが必要な場合は、上記の「wp_is_mobile」を使いましょう。

まとめ

PHPを使えば、デバイスの種類ごとに別々の表示ソースを生成できるということを説明させて頂きました。従って、ブラウザで動作するCSSやJavaScriptを用いた方法と違って、デバイスへの負担を極力減らすことができます。サーバーへの負担も、処理の始めにいくつかの条件文が加わるだけですので、さほど重くはならないでしょう。

しかし、こちらの方法ではサイト作成者に負担が掛かってしまうということがデメリットとして挙げられます。PCとスマホで全く別の表示ソースを使うのであれば、それはサイトを2つ作成することと同じであり、作業量は倍になります。修整が必要なときも2倍になってしまいます。それだけの労力を費やすのに見合うだけの効果が得られるかどうかが採用基準になるでしょう。

以上でスマホ対応の話は終了となりますが、いかがでしたでしょうか。いくつかの方法を挙げさせて頂きましたが、他にもやり方はあると思います。いずれの方法でも、一筋縄では対応しきれないかもしれません。サイトのデザインごとに対応の仕方は異なりますから。完璧なものなどなかなか無いとは思いますが、最適な方法をよく考えてサイトを作成させて頂くことが私どもの役目と考えております。

金沢