JavaScript で 閲覧ブラウザ、バージョン の判別

(2012/05/09 jQueryプラグイン を作成しました → こちら)

jQuery.browser は v1.3 以降では jQuery.support を使うことを推奨します…

と、なってはいるけど、現実的にはまだブラウザ間で描画の誤差、動作の違いがあったりしてそうもいかない。。 やっぱり、ブラウザ判定は欲しいよね。あわよくば、プラットフォーム判定もできるといいね^^

というわけで、今回は、nativeコードだけを使ってブラウザ判定スクリプトを書いてみた。

ブラウザ判定

/**
* @class    Browser information クラス。
*           判定できるのは、このリストにあるブラウザのみ。Mozilaとか古いブラウザはちょっと対象外…。。
*           一応、携帯端末およびタブレットも含めて判定する。
*/
g.UserAgent.BrowserInfo = function () {
    // Browser type.
    this.msie = false;        // Internet Explorer
    this.firefox = false;     // Firefox
    this.chrome = false;      // Chrome
    this.safari = false;      // Safari
    this.browser = false;     // Android標準ブラウザ
    this.opera = false;       // Opera
    this.unknown = false;     // other

    // Browser version.
    this.version = undefined;
};


/**
* 指定した UserAgent 文字列を解析して、ブラウザ情報を取得します。
*
* @param    {string}    userAgent       解析したい UserAgent 文字列
* @return   {g.UserAgent.BrowserInfo}   ブラウザ情報の解析結果オブジェクト
*/
g.UserAgent.getBrowserInfo = function (userAgent) {
    var browser = new g.UserAgent.BrowserInfo();
    var array;

    // 小文字に正規化
    userAgent = userAgent.toLowerCase();

    // ブラウザ、バージョン判定
    if (userAgent.indexOf('opera' ) >= 0) {
        // Opera
        browser.opera = true;

        // Opera 9.00, Opera/9.0
        array = /opera[\s\/]+([\d\.]+)/.exec(userAgent);
        browser.version = (array) ? array[1] : '';
    } else if (userAgent.indexOf('msie') >= 0) {
        // Internet Explorer, Windows Phone, Sleipnir, Adobe Bridge
        browser.msie = true;

        // MSIE 9.0
        array = /msie ([\d\.]+)/.exec(userAgent);
        browser.version = (array) ? array[1] : '';
    } else if (userAgent.indexOf('firefox') >= 0) {
        // Firefox(Mozillaを含まない)
        browser.firefox = true;

        // Firefox/0.9.3
        array = /firefox\/([\d\.]+)/.exec(userAgent);
        browser.version = (array) ? array[1] : '';
    } else if (userAgent.indexOf('chrome') >= 0) {
        // Chrome, Android default browser
        browser.chrome = true;

        // Chrome/6.0.472.55
        array = /chrome\/([\d\.]+)/.exec(userAgent);
        browser.version = (array) ? array[1] : '';
    } else if (userAgent.indexOf('android') >= 0) {
        // Android標準ブラウザ
        browser.browser = true;

        // Version/4.0
        array = /version\/([\d\.]+)/.exec(userAgent);
        browser.version = (array) ? array[1] : '';
    } else if (userAgent.indexOf('safari') >= 0) {
        // Safari
        browser.safari = true;

        // Version/3.0.3
        array = /version\/([\d\.]+)/.exec(userAgent);
        browser.version = (array) ? array[1] : '';
    } else {
        // Other case
        browser.unknown = true;
        browser.version = '';
    }
    
    return browser;
};

ブラウザ判定の使い方

var browser = g.UserAgent.getBrowserInfo(window.navigator.userAgent);
for (var key in browser) {
    console.info(key + ':' + browser[key]);
}

判定の順序が結構重要だったりする。 "opera"って文字列はどこにもないので一番最初に切り出し、"android"も"safari"より手前でないとダメ…といったところ。
バージョン判定はブラウザ毎に正規表現で対応してみた（半分、趣味で使ってるwww）。 メジャー、マイナーとかまでは判定しないので、利用時は要注意で。

ちなみに、ブラウザ情報なんて一度取得したらそれっきりでいいはずなのに、 わざわざメソッドにして引数までつけているのは…

テストコードを書きたかったから。

実際に利用するときはこのコードをベースに static なクラスで、 インスタンス一度作ったら2度と作らなくて良い（同じ処理をしなくて良い）ようにするといいと思う（^^;

それから、なんとなく、気が向いたのでバージョン判定のスクリプトも書いてみた↓↓

バージョン情報判定

/**
* @class    バージョン情報 クラス。
*/
g.Version = function (version) {
    var arr;
    
    arr = /(\d)+.+(\d)+.+(\d)+.+(\d)+/.exec(version);
    
    this.major = (arr && arr[1]) ? arr[1] : '';
    this.minor = (arr && arr[2]) ? arr[2] : '';
    this.revision = (arr && arr[3]) ? arr[3] : '';
    this.build = (arr && arr[4]) ? arr[4] : '';
};

バージョン情報判定の使い方

var versionInfo = new g.Version('6.0.472.55');
console.info(versionInfo.major);    // 6
console.info(versionInfo.minor);    // 0
console.info(versionInfo.revision); // 472
console.info(versionInfo.build);    // 55

バージョン判定書いては見たけど…もっと拡張できそうな気がするので、 また、気が向いたときに別立てて書き起こそうかな…

今回のスクリプトを書く上で userAgent 文字列にどんなんものがあるか参考にしたのは以下のサイトです。

• userAgent（ユーザーエージェント一覧）
• Android のユーザーエージェントの検出について

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！

• Facebook ページ
• twitter