(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 文字列にどんなんものがあるか参考にしたのは以下のサイトです。
ちなみに、ブラウザ判別は以前の記事です。