JavaScript で閲覧プラットフォームの判別

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

「JavaScript でプラットフォーム判別（例えば、携帯 or タブレット or 通常のPC みたいに分離）できることに意味があるかどうか」にまず疑問があるけれど… 「技術的な興味がある」という名目の元、ちょっとやってみる。

閲覧プラットフォーム判定

/**
* @public
* @clas     Platform information クラス。
*/
g.UserAgent.PlatformInfo = function () {
    this.mobile = false;
    this.tablet = false;
    this.windows = false;
    this.mac = false;
    this.linux = false;
    this.unknown = false;
};


/**
* 指定した UserAgent 文字列を解析して、閲覧プラットフォーム種別を取得します。
*
* @public
* @param    {string}    userAgent       解析したい UserAgent 文字列
* @return   {g.UserAgent.PlatformInfo}  閲覧しているプラットフォーム情報の解析結果オブジェクト
*/
g.UserAgent.getPlatformInfo = function (userAgent) {
    var platform = new g.UserAgent.PlatformInfo();
    var mobile = /iphone|ipod|ipad|android|phone|blackberry|symbian|mobile/;

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

    // プラットフォーム判定
    if (mobile.exec(userAgent)) {
        if ((userAgent.indexOf('android' ) >= 0 && userAgent.indexOf('mobile') < 0) ||
            (userAgent.indexOf('ipad') >= 0)) {
            // Android tablet, iPad
            platform.tablet = true;
        } else {
            // Android phone, iPhone, iPod, Windows Phone, BlackBerry, Symbian
            platform.mobile = true;
        }
    } else if (userAgent.indexOf('windows') >= 0) {
        // Windows
        platform.windows = true;
    } else if (userAgent.indexOf('mac') >= 0) {
        // Max OS
        platform.mac = true;
    } else if (userAgent.indexOf('linux') >= 0) {
        // Linux
        platform.linux = true;
    } else {
        platform.unknown = true;
    }
    
    return platform;
};

携帯とタブレットの判別がちょっと手間だった。。一応、判別できてるはずだけど… Android は保障できないかも…。。

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

var platform = g.UserAgent.getPlatformInfo(window.navigator.userAgent);
if (platform.mobile || platform.tablet) {
    // 携帯 または タブレット
} else {
    // 通常のPC
}

おそらく、これだけでは実用に向かないので…、例えば「プラットフォーム別にスタイルシートを切り替える」仕組みを作るとしたら、次のようになると思う。

"携帯&タブレット" と "通常PC" でスタイルシートを切り替える使い方

<html>
<head>
    <!-- スタイルシートを準備。最初は off にしておく。 -->
    <link rel="stylesheet" type="text/css" href="mobileStyle.css" id="mobileStyle" disabled="disabled" />
    <link rel="stylesheet" type="text/css" href="defaultStyle.css" id="defaultStyle" disabled="disabled" />

    <!-- 上記、プラットフォーム判別スクリプトを読み込み -->
    <script type="text/javascript" src="./g/UserAgent.js"></script>

    <!-- window.onload にて、プラットフォームを判別、スタイルシートを切り替え -->
    <script type="text/javascript">
window.onload = function () {
    // プラットフォーム情報の取得
    var platform = g.UserAgent.getPlatformInfo(window.navigator.userAgent);

    // プラットフォーム別にスタイルを分岐
    if (platform.mobile || platform.tablet) {
        // 携帯 または タブレット
        document.getElementById('mobileStyle').disabled = false;
    } else {
        // 通常のPC
        document.getElementById('defaultStyle').disabled = false;
    }
};
    </script>
</head>
<body>

<!-- コンテンツをモリモリ… -->

</body>
</html>

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

ちなみに、ブラウザ判別は以前の記事です。

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

galife

JavaScript で閲覧プラットフォームの判別

Labels

Archives

Pages

Contact