WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

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

「jquery.browser.js」の72行目あたり、
[javascript]
$.os = {
name: (/(win|mac|linux|sunos|solaris|iphone)/.exec(navigator.platform.toLowerCase()) || [u])[0].replace(‘sunos’, ‘solaris’)
};
[/javascript]
となっている部分に「ipod」と「ipad」を追加します。

◆変更後
[javascript]
$.os = {
name: (/(win|mac|linux|sunos|solaris|iphone|ipod|ipad)/.exec(navigator.platform.toLowerCase()) || [u])[0].replace(‘sunos’, ‘solaris’)
};
[/javascript]
ただこれだけ。

変更した「jquery.browser.js」をHTMLソースから読み込んだ後、(もちろんjquery.jsも必要)
下記の様な記述方法で振り分けます。

[javascript]
$(function() {
if($.os.name == ‘iphone’) {
$(‘p’).html(‘ご使用の環境は「iPhone」です。
OS:’ + $.os.name);
} else if($.os.name == ‘ipod’) {
$(‘p’).html(‘ご使用の環境は「iPod(Touch)」です。
OS:’ + $.os.name);
} else if($.os.name == ‘ipad’) {
$(‘p’).html(‘ご使用の環境は「iPad」です。
OS:’ + $.os.name);
} else {
$(‘p’).html(‘ご使用の環境は「iPhone/iPod/iPad」ではありません。
OS:’ + $.os.name);
}
});
[/javascript]
これを実際に動作させてみると

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

jQueryで iPhone & iPod Touch & iPad を判別して振り分ける方法」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です