ブログトップ 記事一覧 ログイン 無料ブログ開設

大人になったら肺呼吸 RSSフィード Twitter

2010-03-26

iPhoneからのアクセスかどうか判定できるJSライブラリDetecting WebKit with JavaScript

f:id:replication:20090407180521j:image

はじめに

iPhoneでは、基本的にUA(UserAgent)を変更することができないため、サーバサイドでUAを判定すればiPhone用のページにリダイレクトをかけたり、iPhone用のスタイルシートを適用したりすることができます。

iPhone/iPod touchのMobileSafariは基本的にUserAgent偽装が出来ないため、UAを文字列判定することでphp/Java/Perlなどサイトの開発言語側で判定を行うことが可能です。※PCのブラウザによる偽装は、Webアプリでは判定できない。

基本的な知識 - iPhone 3G DevWiki はてなブックマーク - 基本的な知識 - iPhone 3G DevWiki

JavaScriptでiPhoneかどうか判定する

クライアントサイドのJavaScriptでも、iPhoneかどうかを判定することができます。具体的には、navigator.userAgentでUA文字列を取得し、それがiPhoneのものと同じであれば、iPhoneと判断します。僕のiPhoneで取得したUA文字列は、以下のとおりです。

Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_3 like Mac OS X; ja-jp)

AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7E18 Safari/528.16

iPhoneかどうかを判定できるDetecting WebKit with JavaScript

米アップルが提供するDetecting WebKit with JavaScriptというライブラリを使用すると、簡単にiPhoneからのアクセスかどうかを判定することができます。使い方は、以下のとおりです。

1.以下のサイトからDetecting WebKit with JavaScriptをダウンロードします。

2.ダウンロードした圧縮ファイルを解凍します。

3.任意のページでWebKitDetect.jsをインクルードします。

<script type="text/javascript" src="WebKitDetect.js"></script>

4.以下のようなコードでiPhoneかどうかを判定することができます。

if(WebKitDetect.isMobile()) {
  document.write("iphone");
}
else {
  document.write("not iphone");
}
Mac上で検証する

検証する際は、実機のiPhoneを使用するのが一番ですが、iPhoneを持っていないMacユーザの方は、Marketcircle | iPhoney はてなブックマーク - Marketcircle | iPhoneyというiPhoneのエミュレータソフトウェアが使えます。ちなみにiPhoneyのUAは以下のようになっています。

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A538a Safari/419.3


参考サイト


関連するエントリ

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証