デスクトップ／モバイル（スマートフォン）を判断するベストプラクティス

PHP

モバイル環境では通信の帯域が限られているため、内容を絞り込んだコンテンツを提供するのが定石となっている。

その判定を行うのに現在最も有効な方法は、HTTP リクエストに含まれる User-Agent ヘッダを参照する方法だ。数多くのアクセス解析ツールでも、ユーザの環境を判断するのに User-Agent ヘッダが用いられている。

さて、環境ごとの User-Agent を調べるのは骨の折れる作業である。そこで巨人の肩を借りることにする。

WPtouch Mobile Plugin から拝借する

「モバイル向け」などのキーワードで検索するとまず目についたのが Wordpress 用のプラグイン WPtouch Mobile Plugin である。このプラグインも例にもれず User-Agent ヘッダを用いてユーザ環境を判断している。

見たところ有償版の WPtouch Pro も含めそれなりのユーザ数がありそうなので、この仕組みを拝借しよう。

このプラグインをダウンロードして展開すると、 wptouch/core/mobile-user-agents.php にスマートフォンの User-Agent に含まれる文字列が列挙されている。12項目とシンプルにまとまっていて、判定の負荷も少なそうだ。

<?php

/* Smartphones */
global $wptouch_smartphone_list;
$wptouch_smartphone_list = array(
	array( 'iPhone' ), 								// iPhone
	array( 'iPod', 'Mobile' ),						// iPod touch
	array( 'Android', 'Mobile' ), 					// Android devices
	array( 'Opera', 'Mini/7' ), 					// Opera Mini 7
	array( 'BB', 'Mobile Safari' ), 				// BB10 devices
...

判定コードは次のように書ける。

<?php

function is_mobile() {
	static $is_mobile;
	
	if (isset($is_mobile)) {
		return $is_mobile;
	}
	
	$useragent = isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : '';
	
	foreach ($wptouch_smartphone_list as $substrs) {
		$matched = true;
		foreach ((array)$substrs as $substr) {
			$pattern = preg_quote($substr, '/');
			if (! preg_match("/\\b$pattern\\b/i", $useragent)) {
				$matched = false;
				break;
			}
		}
		if ($matched) {
			$is_mobile = true;
			break;
		}
	}
	return $is_mobile;
}

if (is_mobile()) { ... } // モバイル用のコード
else { ... } // デスクトップ用のコード

Mobile Detect

その名の通り Mobile Detect というライブラリもある。こちらはかなり詳細に判定しているようだ。