[jQuery] ユーザエージェント(userAgent)判別プラグイン

ユーザーエージェントからブラウザの情報をピックアップしてクラスを付与するjQueryプラグインを作ってみました。
パソコン・スマートフォンの他に、JavaScriptの使用が可能だと思われるゲーム機・テレビ・ガラケーのブラウザも判別対象としています。


直接見る

Syntax

$(document.body).checkAgent( [{option}] );

対象にしたHTML要素にプラグインが得た情報に基づいたクラスを付与します。

Option

全てtrueまたはfalseで指定。trueにしたものをクラスに追加します。

type
パソコン:pc、スマホ:smartphone、ガラケー:garapagos、テレビ:nettv
デフォルトは true
os
PC(win, mac)
ガラケー(au, docomo, softbank)
スマホ(apple, android)
ゲーム(wii, ds, psp, ps2, ps3, dreamcast)
PDA(pda)
テレビ(tv)
デフォルトは false
device
デバイス名
ブラウザ名称(InternetExplorer, Safari, Chrome, Opera, Lunascape, Sleipnir, Netscape, Mozilla など)
スマートフォン(iPhone, iPad, iPod Android搭載機種名)
PCサイトビューアー(ガラケー機種名)
テレビのブラウザ(InettvBrowser)
ゲーム機のブラウザ(PlayStationPortable, GameBoy, PlayStation2, PlayStation3, DreamPassport)
デフォルトは true
version
ブラウザバージョン
スマホの場合はOSのバージョン
クラスで出力する時はピリオドをアンダーバーに変換し、先頭にvをつける。(5.0.5 → v5_0_5)
デフォルトは false
lang
言語コード(小文字)
デフォルトは false
country
国名コード(大文字)
デフォルトは false
locale
言語コードと国名コードをハイフンでつないだもの
デフォルトは false
smartphone
スマホからのアクセス時にのみ smartphone を付与
デフォルトは false
garapagos
ガラケーからのアクセス時にのみ garapagos を付与
デフォルトは false

とりあえず判別できそうなユーザーエージェントを持つ機種を全部つっこんでみたんですが、
モノによってはjQueryが実行できなくて判別できないというものがあるかもしれません。

Method

checkAgent(‘add’, type)

typeに指定した情報(オプションと同じ)をクラスとして追加する

$.getAgent([type, [separator, glue]])

プラグインが生成した情報を返します。

何も指定しない、または ‘all’
separatorで指定した文字列をキーと値の間に、glueで指定した文字列を各値の間に使用して全ての情報を返します。
HTML使用可。文字列を指定しなかった場合のデフォルトは 半角コロンと改行タグ。
キーを指定
オプションと同じキーを文字列で指定した場合は、対応する値だけ返します。

$.browser.agent

プラグインが生成した情報の格納場所。キーはプラグインのオプションと同じです。

判別ルールに関するメモ

正規表現が分かる人ならソースを読んだ方が早いかもしれません。

スマートフォンかそうでないかの判別

  1. 機種名の確認
    Android か Appleのやつか
  2. スクリーンサイズとウィンドウサイズの横幅が同じ
    $(window).width() === screen.width
  3. 傾きに関するプロパティ がある
    window.orientation >= 0

以上全部真である場合にスマホとみなしてます。

Webkit

Mozilla/[version] ([Compatibility Flag;][ Version Token;][ Platform Token;][Option]) AppleWebKit/[webkit version] (KHTML, like Gecko) Version/[browser version] Safari/[webkit version]

末尾を見るとSafariなのかそうでないのかが分かる。

【Version/[version]】 〔Safari/[version]〕

末尾から2つ目を【A】、1つ目を〔B〕とします。
A == Version && B == Safari → Safari
A != Version && B == Safari → Chromeとか他のブラウザ
!A && B != Safari → 他のブラウザ

スマホの場合は以下のように機種名が入っているので、まずそれで判別をして振り分けてます。

Apple

Mozilla/[version] ([iPhone|iPad|iPod]; [ Version Token;] CPU [OS name] [OS version] like Mac OS X; [locale]) 

Android

基本的にはWebkitと同じ。機種名が取れます。

Mozilla/[version] (Linux; [ Version Token;] Android [VERSION]; [LOCALE]; [DEVICE_NAME] Build/[version]) 

Gecko

パソコンでなければOSとかが入っているカッコの中にその機種名とかが入ります。

[Mech.]Mozilla/[version] ([Compatibility Flag;][ Version Token;][ Platform Token;][ Locale;][Token])

Mozilla/5.0等の後に[ja]などと言語トークンが入るブラウザもあるらしい。

ゲーム機の場合はCompatibility Flagに機種名が、
iPadやAndroidでないタブレット端末の場合はPDAが、
ネット接続可能なテレビのブラウザだとDTVが入り、そのほかは大抵OSの名前です。

ブラウザ名は末尾で判別。大抵はこういう組み合わせです。

Gecko/[version] (いろいろ) [Browser Name]/[version] (いろいろ)

Trident

IEなのにMozillaってついてるのは歴史的な事情によるもので、判別はMSIEという文字列で可能。
プラグインはjQuery.browser.msieによってTridentかどうかを区別してます。

[Mech.]Mozilla/[version][ lang] ([Compatibility Flag;][ Version Token;][ Platform Token;][Option])

Platform Tokenまではどのブラウザでも同じみたいです。
IEでない場合はその後に続くOption部分にブラウザ名が入るんですが、位置がマチマチなので比較的知名度の高いもの以外はすべてIEとしています。

Opera

Opera/(9.80|[\d\.]+) ([Compatibility Flag;][ Platform Token;][ Version Token;][Option]) Presto/[version] Version/[browser version]

Opera10以降は冒頭がOpera/9.80で固定となっていて、末尾のVersionの後に続く数値が本来のブラウザバージョンになりますが、
それ以前のバージョンの場合は冒頭の数値がブラウザバージョンです。
OperaではなくMozillaだったりするものもあるようです。

Nintendo

任天堂のゲーム機(Wii, DS)の場合はCompatibility FlagかOptionの所に機種名が入っています。

ガラケーのPCサイトビューアー&フルブラウザ

キャリア名等で3社判別してからユーザーエージェントで機種名とかを絞り出しています。

Docomo

ブラウザの種類/ブラウザバージョン(機種名;FOMA;キャッシュ;状態コード;ブラウザ表示可能バイト数)

Mozilla/4.08 (N901iS;FOMA;c300;TB;W24H12)

au

公式発表されてないのですが、どうもOperaらしいです。

Mozilla/バージョン名 (compatible; MSIE バージョン名; KDDI-デバイスID) ブラウザの種類 ブラウザバージョン

Mozilla/4.0 (compatible; MSIE 6.0; KDDI-CA31) Opera 7.60 [ja]

Softbank

ブラウザの種類/ブラウザバージョン(機種名;SoftBank;端末シリアル番号) ユーザエージェント種別/ユーザエージェント名

Mozilla/5.0 (004SH;SoftBank[;Serial]) NetFront/3.5

テレビ等の家電ブラウザ

レンダリングエンジンはTridentだったりNetFrontだったりGeckoだったりと色々なんですが、
InettvBrowserというブラウザ名らしき文字列が入るようなので、それがあるかないかで判別してます。

参考リンク

1件のコメント

Leave a Comment.