最近のWebサイト制作では、通常のPCサイトを制作するだけでなく
iPhoneやAndroidのスマートフォンや、iPadなどタブレット向けにそれぞれサイトを用意し、
デバイス毎にアクセスさせるURLを分けることも増えてきました。

その様な場合のデバイス制御に使える(であろう)
iPhone、iPad、AndroidでPC向けサイトへアクセスした際など、
jQuery(JavaScript)を使って簡単に別のURLへリダイレクトさせる方法を紹介してみます。

jQuery(JavaScript)でiPhone,iPad,Android(アンドロイド)を判別してリダイレクト

例として、サイト構成が以下の様なURLとします。

——————————————————-
【PC向けサイト】
http://black-flag.net/sample/pc/

【スマートフォン向けサイト】
http://black-flag.net/sample/sp/
——————————————————-

PC向けサイトにiPhone、iPad、Android(アンドロイド)でアクセスした際に
スマートフォン向けサイトのURLにリダイレクトさせるには
PC向けサイトのHTML内に以下のようなスクリプトを入れ込みます。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var agent = navigator.userAgent;
	var redirectPass = '/sample/sp/';
	if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
		location.href = redirectPass;
	}
});
</script>

リダイレクトさせるURL(スマートフォン向けサイト)の絶対パス(相対でも可)を
「redirectPass」の変数の中に入れます。
(サンプルではスマートフォン向けサイトへの絶対パスは「/sample/sp/」。)

そこから単純にUserAgentをみて、
iPhone、iPad、Android(アンドロイド)の場合は
「redirectPass」の変数に入れたURLにリダイレクトしています。
※念の為iPod Touch用に「iPod」のUserAgentも入れてあります。

これだけの記述でPCサイトのURLに
iPhone、iPad、Android(アンドロイド)でアクセスした際に
スマートフォン向けサイトのURLにリダイレクトさせることが可能になります。
※上記のスクリプトはPC向けサイトのHTML内に記述します。

ページ数の膨大な大型サイトなどで、
細かなページごとのリダイレクトが必要になる場合はあまり適さないかもしれませんが
小規模サイトなど簡単にデバイスごとにURLを切り替えたい場合などには使えるかと思います。

ご参考までに。。。

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

Related Posts

Comments (8)

  • jQuery(JavaScript)でiPhone、iPad、Android向けにアラートを表示してURLをリダイレクト(選択)させる方法 | BlackFlag | 2012.02.22 10:48

    [...] 少し前に「jQuery(JavaScript)でiPhone、iPad、Androidなどデバイスを判別して URLをリダイレクトする方法」と題して、 スマホ系のデバイスを判別してURLをリダイレクトさせる方法を紹介しま [...]

  • darknesspiper | 2012.08.14 16:33

    jQueryを使わず普通にjavascriptを書いていて
    反応しなかっので大変助かりました、有り難うございました。

  • BlackFlag | 2012.08.15 0:57

    >darknesspiperさん

    コメントありがとうございます!
    この判別スクリプトがお役に立ったようで嬉しく思っております。

    他にもjQueryを使ってのいろいろなサンプルを掲載してありますので
    お暇な時にでも覗いてみて下さい。

    よろしくお願いします。

  • とち | 2012.11.21 11:15

    デバイス判別について参考にさせて頂きました。
    貴重な情報を公開して頂き、誠にありがとうございます。
    その他のTIPSについても色々とご利用させて頂いております。
    そこで一つご質問なんですが、Androidでタブレットとスマホを判別する手段はあるのでしょうか?
    興味がございましたらTIPSとして公開して頂けると幸いです。

  • BlackFlag | 2012.11.22 0:14

    >とちさん

    コメントありがとうございます。
    このデバイス判別がお役に立ったようで嬉しく思っております。

    Androidのスマホとタブレット判別については
    スマホ側にはUserAgentに「mobile」という値が付加されるようなので
    それを使って振り分けることができるようなのですが
    まだ実際に試したことはありません。。。

    またその様な振り分けを検証してみて
    ここで紹介させて頂きたいと思います。

    よろしくお願いします。

  • とち | 2012.11.22 10:21

    貴重なコメントありがとうございます。
    私の方でも検証してみたいと思います。

  • Week Polygonリリース « trace | 2013.05.23 11:33

    [...] [...]

  • 【jQuery】PCとiPhone,iPad,Androidを判別してページを切り替え(リダイレクト)したいとき | 2013.08.02 18:20

    [...] BlackFlagさま「jQuery(JavaScript)でiPhone,iPad,Android(アンドロイド)を判別してリダイレクト」 [...]







コメント内容

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

jQuery(JavaScript)でiPhone、iPad、Androidなどデバイスを判別してURLをリダイレクトする方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR