ユーザーエージェントからブラウザの情報をピックアップしてクラスを付与する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
プラグインが生成した情報の格納場所。キーはプラグインのオプションと同じです。
判別ルールに関するメモ
正規表現が分かる人ならソースを読んだ方が早いかもしれません。
スマートフォンかそうでないかの判別
- 機種名の確認
Android か Appleのやつか - スクリーンサイズとウィンドウサイズの横幅が同じ
$(window).width() === screen.width - 傾きに関するプロパティ がある
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というブラウザ名らしき文字列が入るようなので、それがあるかないかで判別してます。
「[jQuery] ユーザエージェント(userAgent)判別プラグイン」への2件のフィードバック