昨日のエントリー『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」に書き加える事で
3つの端末それぞれの振り分けが可能になります。

「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 それぞれで振り分け制御が必要になった際に是非。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (1)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR