初心者SEのとりあえずメモ日記

初心者SEが技術的な事とかを、とりあえずメモしておくための日記です。

タブレット系をUserAgentで判別する

   

1.やりたいこと

UserAgentから、「パソコン」「スマートフォン」「タブレット」など判別することができます。

WEBの世界では、この条件に応じて表示するレイアウトを変えたりすることは多々あるかと思います。
あるいは、ログからアクセス数を求めるなんてこともあるでしょう。

今回は、その中でも「タブレット」を判別する方法を検討してみます。

 

2.検討

大きく分けると、「iPad」と「Android」の2種類に分類できると思います。
「windows Phone」「Blackberry」「Kindle」などは、今回は割愛して、その他扱いにします。

iPad

iPadを識別する方法は非常にシンプルです。

例:『iOS 8.0.2 iPad Safari』のUserAgent

Mozilla/5.0 (iPad; CPU OS 8_0_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12A405 Safari/600.1.4

単純にUserAgentに「iPad」というキーワードがあるかをチェックするだけです。

ただし、1つ注意すべきなのが、ここには「iPad mini」の端末も含まれます。
UserAgentから判別することはできないので、注意が必要です。

Android

Androidについては少々厄介です。バージョンによって事情が異なります。

『googleウェブマスター』の中の人によると、

Android 端末については、ブラウザが提供するユーザー エージェント文字列を使えば、スマートフォンとタブレットとを容易に識別できます。Android のスマートフォンとタブレットのどちらも、ユーザー エージェント文字列には「Android」という単語が含まれていますが、ユーザー エージェント文字列に「Mobile」が含まれているのはスマートフォンの場合のみです。

まとめると、ユーザー エージェントに「Mobile」が含まれていない Android 端末はすべてタブレット(あるいはその他の大きな画面を持つ) 端末ですので、PC 版サイトで対応するのが良いでしょう。
http://googlewebmastercentral-ja.blogspot.jp/2012/11/giving-tablet-users-full-sized-web.html

とあるので、基本的にはこの判断方法で良いと思います。

例:「GALAXY Tab S SCT21 ブラウザ」のUserAgent

Mozilla/5.0 (Linux; Android 4.4.4; ja-jp; SCT21 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko) Version/1.5 Chrome/28.0.1500.94 Safari/537.36

 

ただし、上記の記事では触れられていませんが、Android 2.xのタブレットについては、この判別方法が使えません。

例:「GALAXY Tab SC-01C ブラウザ」のUserAgent

Mozilla/5.0 (Linux; U; Android 2.3.6; ja-jp; SC-01C Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

見てわかる通り「Mobile」というキーワードが含まれています。

この問題についてどう対応するかは2パターン。

  1. すべての機種を条件に追加する
  2. あきらめる

すべての機種を条件に追加することはなかなか大変です。
一応、一覧表を用意する予定ですが、全てを網羅できているかは自信ありません。

個人的には、もう利用者が減ってきていると思うので、こんなところに労力を費やすべきではないと思います。

 

スポンサーリンク

 

3.サンプルソース

上記を踏まえて、判別ソースのサンプルを残しておきます。

 

jquery

jqueryを使用した場合の判別ロジックです。
レイアウトやスクリプトの判断に使ってください。

var ua = navigator.userAgent;
if((ua.indexOf('Android') > 0 && ua.indexOf('Mobile') == -1) || ua.indexOf('iPad') > 0 || ua.indexOf('Kindle') > 0 || ua.indexOf('Silk') > 0){
    alert('タブレット');
} else if ((ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) || ua.indexOf('iPhone') > 0 || ua.indexOf('Blackberry') > 0 || ua.indexOf('iPhone') > 0){
    alert('スマートフォン');
} else {
    alert('その他');
}

 

Java

Javaを使用した場合の判別ロジックです。
ログ解析などで使ってください。

public static void device(String userAgent) {
	if ((userAgent.indexOf("iPad") > 0 || userAgent.indexOf("Android") > 0 && userAgent.indexOf("Mobile") == -1)) {
		System.out.println("タブレット");
	} else if ((userAgent.indexOf("iPad") == -1)
		|| (userAgent.indexOf("Android") > 0 && userAgent.indexOf("Mobile") > 0)
		System.out.println("スマートフォン");
	} else {
		System.out.println("その他");
	}
}

 

4.参考

http://www.au.kddi.com/developer/android/kishu/ua/
http://useragent.ipentec.com/UserAgentDevice.aspx?device=sc-01c


 - WEB
 -

  シェアしていただけるとうれしいです

  関連記事

Comment

  1. […] タブレット系をUserAgentで判別する | 初心者SEのとりあえずメモ日記 […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です