昨日のエントリー『iPhoneサイト構築で役立ちそうなもろもろ & jQueryでiPhone判別方法』で
jQueryを使ってのiPhone判別方法は紹介しましたが、
その後、「jquery.browser.js」プラグインをちょこっといじることで iPhone & iPod Touch & iPad を
それぞれ判別して振り分けができるようになったのでご紹介してみます。
単純にiPhone、iPod Touch、iPadそれぞれの端末でuserAgentを調べてみると、
—————————-
・iPhone → iphone
・iPod Touch → ipod
・iPad → ipad
—————————-
といったようにそれぞれ別々のOS名となっていました。
これらのOS情報を「jquery.browser.js」に書き加える事で
３つの端末それぞれの振り分けが可能になります。
「jquery.browser.js」の72行目あたり、
$.os = {
name: (/(win|mac|linux|sunos|solaris|iphone)/.exec(navigator.platform.toLowerCase()) || [u])[0].replace('sunos', 'solaris')
};
となっている部分に「ipod」と「ipad」を追加します。
◆変更後
$.os = {
name: (/(win|mac|linux|sunos|solaris|iphone|ipod|ipad)/.exec(navigator.platform.toLowerCase()) || [u])[0].replace('sunos', 'solaris')
};
ただこれだけ。
変更した「jquery.browser.js」をHTMLソースから読み込んだ後、（もちろんjquery.jsも必要）
下記の様な記述方法で振り分けます。
$(function() {
if($.os.name == 'iphone') {
$('p').html('ご使用の環境は「iPhone」です。<br />OS：' + $.os.name);
} else if($.os.name == 'ipod') {
$('p').html('ご使用の環境は「iPod(Touch)」です。<br />OS：' + $.os.name);
} else if($.os.name == 'ipad') {
$('p').html('ご使用の環境は「iPad」です。<br />OS：' + $.os.name);
} else {
$('p').html('ご使用の環境は「iPhone／iPod／iPad」ではありません。<br />OS：' + $.os.name);
}
});
これを実際に動作させてみると
iPhoneでこのページを見た場合には 『ご使用の環境は「iPhone」です。』
iPod Touchでは 『ご使用の環境は「iPod(Touch)」です。』
iPadでは 『ご使用の環境は「iPad」です。』
iPhone、iPod、iPad以外は 『ご使用の環境は「iPhone／iPod／iPad」ではありません。』
のメッセージをそれぞれ表示して、閲覧している環境のOS名をおまけに表示しています。
仕方ないのですがiPhoneとiPod Touchが別々のuserAgentになっていることが面倒な気が…。
振り分けを使ってiPhone用の指定を加える場合はiPod Touchの配慮もしておいた方が良さそうです。（自分もiPod Touchユーザーなので…）
iPhone & iPod Touch & iPad それぞれで振り分け制御が必要になった際に是非。。。