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

2013年3月26日 22:28 0 件のコメント

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/**
* @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 は保障できないかも…。。

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

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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 の フォロー」 お願いします！！