jQueryで iPhone & iPod Touch & iPad を判別して振り分ける方法

昨日のエントリー『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 それぞれで振り分け制御が必要になった際に是非。。。


【関連リンク】
≫OSを判別することができるjQueryプラグイン「jQuery Browser Plugin」
≫カテゴリー「G3Y1」の記事はこちらへ引っ越しました。

Comments

ちゃんと動作していません。

Posted by at 2010年09月29日 09:38

この手法は結構使っていますがちゃんと動作していますよ。
iPhone4では未確認ですが…

Posted by G3Y1 at 2010年09月29日 13:10

とても良いものをご提供くださいましてありがとうございます。

是非利用させていただきたいところですが、<p>〜〜〜</p>の置き換わりではわたくしのケースでは利用がしにくい感じがあります。
<p>〜〜〜</p>の中の内容が全て置き換わってしまいました。

<div id="os">〜〜〜</div>という感じで、指定したidの中だけを反応させるにはどうすればよろしいでしょうか。この場合はid="os"としていますが、osの部分は任意と言うことで。


もしよろしければ、お教え下さい。

Posted by uk at 2010年10月06日 15:08

コメントありがとうございます！

<p>タグではなく任意のエリアのみ変更させる場合は、
下記のように記述すればいけると思います。
---------------------------------------------------------------
$(function() {
if($.os.name == 'iphone') {
$('div#os').html('ここに置き換えるテキストやタグを記述');
} else if($.os.name == 'ipod') {
$('div#os').html('ここに置き換えるテキストやタグを記述');
} else if($.os.name == 'ipad') {
$('div#os').html('ここに置き換えるテキストやタグを記述');
}
});
---------------------------------------------------------------

「div#os」となっている部分がID名の指定になります。
ここでの要素が「div」でなはく他のタグの場合は
「span#os」とか「p#os」とかすれば大丈夫です。

IDではなくCLASS要素を書き換える場合は
「div.os」とか「span.os」とか「p.os」という書き方になります。

「#」はID名、「.」はCLASS名ということになります。

是非、お試しくださいませ。

Posted by G3Y1 at 2010年10月06日 15:54

ちょっとした、ドキドキがほしいな
http://2uwb04m.love.chu-g.net/

Posted by 夏だからね at 2011年07月31日 05:06