スマートフォンとPCをユーザーエージェントで振り分ける

公開日：2014年9月15日

スマートフォン用にサイトを用意した場合、ユーザーからのアクセスをPCサイトとスマートフォンサイトに振り分けるにはユーザーエージェントで判別します。.htaccess、PHP、JavaScript それぞれでユーザーエージェントを判別し振り分ける方法を解説します。

Webサイトの振り分け方法としては、ユーザーエージェントの他にスクリーンサイズで振り分ける方法もあります。こちらはレスポンシブWebデザインでよく用いられます。

また WordPress などの CMS を使っているサイトなら、プラグインを使ってテーマごと切り替える方法もあります。

PC用とスマートフォン用にサイトを別々に用意した場合は、ブラウザから送られてくるユーザーエージェントの文字列を、何らかのコードを組んで判別し振り分けるのが一般的です。

【コンテンツ】

モバイル端末のユーザーエージェントの見分け方
３つの振り分け方法の概要
.htaccess による振り分け方法
PHP による振り分け方法
JavaScript による振り分け方法

モバイル端末のユーザーエージェントの見分け方

ユーザーエージェントとは

Webサイトのアクセスにおけるユーザーエージェント(User Agent)とは、「HTTPユーザーエージェント」と呼ばれるものです。

ブラウザはWebサーバーに対して、「自分は何者か」をHTTPリクエストの中にユーザーエージェント文字列として含めます。文字列の中には一般に、デバイス名、アプリケーション名、ブラウザ名、OS、バージョン、言語といった情報を含んでいます。

しかしユーザーエージェントはあくまで自己申告なので、厳密に規定されたルールがあるわけではありません。ブラウザの中には利用者がユーザーエージェントを変更できる機能を持っているものもあります。

そこでWebサイト制作者としては、現在多く利用されているブラウザのユーザーエージェント文字列を解析して傾向を読み解き、「こんなもんだろう」と判断ルールをこしらえるしかありません。新しいデバイスやブラウザが登場したら、ロジックを変更する必要が生じる可能性もあります。

ユーザーエージェント文字列の例

以下に、現在このページをアクセスしているユーザーエージェント文字列を示します。

このページをアクセスしているユーザーエージェントは、
Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
です。

この文字列はPHPで取得しています。
サイトを振り分けるには、この文字列の中から特徴のあるキーワードを判別根拠とするのが基本です。

iPhone のユーザーエージェント

iPhoneは、iOS Safariからアクセスしてきますが、ユーザーエージェントは以下のようになります。
もちろんiOSのバージョンによって文字列は違いますが、"iPhone" というキーワードがあるかないかで判別するようにします。

Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53

iPod のユーザーエージェント

最近のiPodはiOSを搭載しインターネット接続が可能ですから、スマホの１つと考えます。

ユーザーエージェントは以下のようになります。
"iPod" というキーワードが含まれていたら iPod からのアクセスだと判断できます。
あるいは、"iPhone" があれば iPhone または iPod からのアクセスだと考えることもできます。

Mozilla/5.0 (iPod touch; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53

iPad のユーザーエージェント

iPadでは、スマートフォンサイト / タブレットサイト / PCサイト、どれを表示するか決め、ユーザーエージェントで判断する必要があります。

ユーザーエージェントは以下のようになります。
"iPad" というキーワードが含まれていたら iPad からのアクセスだと判断できます。

Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53

Android スマートフォンのユーザーエージェント

Android端末は、機種ごとにユーザーエージェントがばらばらです。
またAndroid標準ブラウザとChromeの両方でアクセスしてきます。

以下は一例ですが、"Android" と "Mobile" をキーワードとして Androidスマートフォンからのアクセスと判断します。

Mozilla/5.0 (Linux; Android 4.2.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36

Android タブレットのユーザーエージェント

Androidタブレットもスマホと同じく、機種ごとにユーザーエージェントがばらばらです。

以下は一例ですが、スマホにある "Mobile" のキーワードがタブレットにはないことがわかります。

Mozilla/5.0 (Linux; Android 4.3; Nexus 7 Build/JSS15Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.72 Safari/537.36

Windows Phone のユーザーエージェント

スマートフォンサイトを考える上で、Windows Phone を全く無視する人も多いと思いますが、利用者はおりますので考慮するに越したことはありません。

ユーザーエージェントは以下のようになりますが、"Windows Phone" というキーワードで判断できます。

Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 820)

３つの振り分け方法の概要

各種端末のユーザーエージェントの見分け方がわかったところで、具体的にどういう方法でサイトを振り分けるかというと、「.htaccess」「PHP」「JavaScript」いずれかの方法を用います。

それぞれメリット・デメリットがありますので、以下に示します。

	.htaccess	PHP	JavaScript
概要	Apacheサーバーの設定ファイルである「.htaccess」に振り分けルールを記述する。	アクセスしてきたページの先頭にPHPコードを記述して振り分けを行う。	アクセスしてきたページのheadタグ内にJavaScriptコードを記述して振り分けを行う。
メリット	.htaccess を設置したディレクトリ以下のすべてのページに、振り分けを一括設定できる。	サーバー側の処理のため、クライアント側の設定によらず振り分けが可能。	ユーザーが閲覧したいサイトを選択できるなど、柔軟性のある振り分けを実現できる。
デメリット	スマートフォンからはPCサイトが閲覧できない。サーバー制限により使えないことがある。	スマートフォンからはPCサイトが閲覧できない。振り分けするすべてのページにコードの記述が必要になる。	JavaScript を無効にしているブラウザでは振り分けできない。振り分けするすべてのページにコードの記述が必要になる。

.htaccess による振り分け方法

.htaccess による振り分けは、何といっても１つのファイルに記述するだけで済みますので、一番手軽な方法です。ただしサーバー側で mod_rewrite 機能が有効になっていないとこの方法は使えません。また一般的には、スマートフォンからはPCサイトを閲覧できないことにも注意しましょう。

基本的にはルートドメインの下に「sp」などのスマホ用ページを格納するディレクトリを作成し、ルートドメイン直下に .htaccess を設置します。

以下に記述例を示します。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteRule ^(.*)$ sp/$1 [R,L]
</IfModule>

RewriteEngine On

RewriteBase /

RewriteCond %{REQUEST_URI} !/sp/

RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]

RewriteRule ^(.*)$ sp/$1 [R,L]

</IfModule>

<IfModule mod_rewrite.c>～</IfModule>

サーバーがmod_rewriteを利用できるか確認しているコードです。利用できない環境で mod_rewrite のコードを書いているとエラーになってしまうので、利用できない環境ではこの間のコードが実行されずにエラーを回避しています。

RewriteEngine On

mod_rewrite機能を使用することを宣言しています。

RewriteBase /

基準となるパスをルートに指定しています。

RewriteCond %{REQUEST_URI} !/sp/

アクセスしてきたURLに "/sp/" がないという条件です。つまりスマートフォンページの閲覧ではリダイレクトは行いません。ディレクトリ名 "sp" は適当に書き換えてください。

RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.Mobile|Windows.Phone) [NC]

ユーザーエージェントの文字列の中に、以下のキーワードのいずれかが含まれているかどうかの判定です。

iPhone
Android + Mobile
Windows + Phone

この条件で、iPhone, iPod, Androidスマホ, Windows Phone を含みます。iPad, Androidタブレットははじかれます。

".*" は、任意の文字が間にいくつあってもよいという意味です。

最後の[NC]は大文字/小文字を区別しないという意味ですが、なくても動作します。

RewriteRule ^(.*)$ sp/$1 [R,L]

条件に一致した場合、spディレクトリの下にあるページにリダイレクトします。最後の "R" はリダイレクトするという意味です。"(.*)" を "$1" で受けており、spディレクトリの下にある同じ名前のページにリダイレクトするようにしています。

最後の "L" は書き換えルールの最終行であることを示しており、この行が実行された場合は以降のルールは無視されます。

PHP による振り分け方法

PHP による振り分けはサーバー側の処理のため、JavaScriptが無効になっているブラウザからのアクセスでも振り分けが可能です。

振り分けをするページすべてにコードを記述する必要がありますが、逆に特定のページだけに振り分けを指定することもできます。

PHPコードはPC用ページのHTMLソース先頭に記述します。

以下はトップページを振り分けする記述例です。
コードで使っているpreg_match関数は正規表現によるマッチングを行うもので、ユーザーエージェントの中に指定した文字列がマッチしたときは "1" を返し、マッチしなかったときは "0"を返します。

iPhone, iPod, Androidスマホ, Windows Phone からのアクセスの場合、spディレクトリにあるスマートフォンサイトのトップページに移動します。

<?php
	$ua = $_SERVER['HTTP_USER_AGENT'];
	if (preg_match('/(iPhone|Android.*Mobile|Windows.*Phone)/', $ua)) {
		header('Location: ./sp/');
		exit();
	}
?>

<?php

$ua = $_SERVER['HTTP_USER_AGENT'];

if (preg_match('/(iPhone|Android.*Mobile|Windows.*Phone)/', $ua)) {

header('Location: ./sp/');

exit();

}

あるいは処理が速い strpos関数を使って、以下のように記述することもできます。
strpos関数は、ユーザーエージェントの中から指定した文字列が最初に見つかった位置を返します。文字列が見つからなかったときは "false" を返します。

<?php
	$ua= $_SERVER['HTTP_USER_AGENT'];
	if ((strpos($ua, 'iPhone') !== false)
			|| (strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false)
			|| (strpos($ua, 'Windows Phone') !== false)) {
		header('Location: ./sp/');
		exit();
	}
?>

<?php

$ua= $_SERVER['HTTP_USER_AGENT'];

if ((strpos($ua, 'iPhone') !== false)

|| (strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false)

|| (strpos($ua, 'Windows Phone') !== false)) {

header('Location: ./sp/');

exit();

}

JavaScript による振り分け方法

ユーザーが JavaScript を無効に設定していたらこの振り分け方法は使えませんが、強制的にスマートフォンサイトに移動しないでユーザーに選択させるなど、機能を付加することも可能です。

振り分けをするすべてのページのheadタグ内にコードを記述します。

以下はトップページを振り分けする記述例です。
コードで使っているindexOfメソッドは、ユーザーエージェントの中から指定した文字列が最初に現れたインデックスを返します。文字列が見つからなかったときは "-1" を返します。

iPhone, iPod, Androidスマホ, Windows Phone からのアクセスの場合、spディレクトリにあるスマートフォンサイトのトップページに移動します。

<script type="text/javascript">
	var ua = navigator.userAgent;
	if (ua.indexOf('iPhone') > 0
			|| (ua.indexOf('Android') > 0) && (ua.indexOf('Mobile') > 0)
			|| ua.indexOf('Windows Phone') > 0) {
		location.href = './sp/';
	}
</script>

var ua = navigator.userAgent;

if (ua.indexOf('iPhone') > 0

|| (ua.indexOf('Android') > 0) && (ua.indexOf('Mobile') > 0)

|| ua.indexOf('Windows Phone') > 0) {

location.href = './sp/';

}

</script>

アクセスしてきたときに、ユーザーにサイト選択のメッセージを表示するコードは以下になります。

<script type="text/javascript">
	var ua = navigator.userAgent;
	if (ua.indexOf('iPhone') > 0
			|| (ua.indexOf('Android') > 0) && (ua.indexOf('Mobile') > 0)
			|| ua.indexOf('Windows Phone') > 0) {
		if (confirm('スマートフォンサイトに移動しますか？')) {
			location.href = './sp/';
		}
	}
</script>

var ua = navigator.userAgent;

if (ua.indexOf('iPhone') > 0

|| (ua.indexOf('Android') > 0) && (ua.indexOf('Mobile') > 0)

|| ua.indexOf('Windows Phone') > 0) {

if (confirm('スマートフォンサイトに移動しますか？')) {

location.href = './sp/';

}

</script>

iPhone, iPod, Androidスマホ, Windows Phone からのアクセスの場合、以下のようなメッセージダイアログが表示されます。

サイト切り替えメッセージダイアログ

特集記事

WordPress の基礎から応用まで

Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
jQuery Mobile を基本から覚える

スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

提供しているサービス

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金：¥49,500

サービス詳細ページ >>

申し込みフォーム >>

一刻も早く Webサイトが必要な方のために、
一緒に作業し１日で公開までもっていきます。
料金：¥49,500

サービス詳細ページ >>

申し込みフォーム >>

Tipsカテゴリー

スマートフォンとPCをユーザーエージェントで振り分ける

モバイル端末のユーザーエージェントの見分け方

ユーザーエージェントとは

ユーザーエージェント文字列の例

iPhone のユーザーエージェント

iPod のユーザーエージェント

iPad のユーザーエージェント

Android スマートフォンのユーザーエージェント

Android タブレットのユーザーエージェント

Windows Phone のユーザーエージェント

３つの振り分け方法の概要

.htaccess による振り分け方法

<IfModule mod_rewrite.c>～</IfModule>

RewriteEngine On

RewriteBase /

RewriteCond %{REQUEST_URI} !/sp/

RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.Mobile|Windows.Phone) [NC]

RewriteRule ^(.*)$ sp/$1 [R,L]

PHP による振り分け方法

JavaScript による振り分け方法

特集記事

オンライン講座

提供しているサービス

Tips検索タグ

Tipsカテゴリー

スマートフォンとPCをユーザーエージェントで振り分ける

モバイル端末のユーザーエージェントの見分け方

ユーザーエージェントとは

ユーザーエージェント文字列の例

iPhone のユーザーエージェント

iPod のユーザーエージェント

iPad のユーザーエージェント

Android スマートフォンのユーザーエージェント

Android タブレットのユーザーエージェント

Windows Phone のユーザーエージェント

３つの振り分け方法の概要

.htaccess による振り分け方法

<IfModule mod_rewrite.c>～</IfModule>

RewriteEngine On

RewriteBase /

RewriteCond %{REQUEST_URI} !/sp/

RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]

RewriteRule ^(.*)$ sp/$1 [R,L]

PHP による振り分け方法

JavaScript による振り分け方法

関連記事

特集記事

オンライン講座

提供しているサービス

Tips検索タグ

RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.Mobile|Windows.Phone) [NC]