少し前に「jQuery(JavaScript)でiPhone、iPad、Androidなどデバイスを判別して
URLをリダイレクトする方法
」と題して、
スマホ系のデバイスを判別してURLをリダイレクトさせる方法を紹介しましたが、
ユニクロさんやほぼ日さんのサイトではスマホ系デバイスでアクセスすると
アラートでスマホ向けのサイトがあることをメッセージで促し、
どっちのサイトへアクセスするかユーザーに選択させる方式をとっており
このUIがおもしろかったので試しにjQueryを使って同じ動作を作ってみました。

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

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

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

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

PC向けサイトのURLにiPhone、iPad、Android(アンドロイド)でアクセスした際に
「スマートフォン向けサイトに移動しますか?」というメッセージをアラート表示させ
「OK」を押すとスマートフォン向けのサイトにリダイレクトさせます。

この動作を実行させるスクリプトは以下のようになります。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var agent = navigator.userAgent;
	if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
		redirect();
	}
});
function redirect(){
	if(window.confirm('スマートフォン向けサイトに移動しますか?')){
		location.href = "sp/index.html";
	}
}
</script>

UserAgentを判別してiPhone、iPad、Android(アンドロイド)の場合は
メッセージ付きの確認用アラートを表示して「OK」を押すと
スマートフォン向けのURLへ遷移させています。
※念の為iPod Touch用に「iPod」のUserAgentも入れてあります。

動作サンプルについては以下のリンクからサンプルページを開いてください。
※iPhone、iPad、Androidでアクセスしてください。
(PCでアクセスしてもアラートは表示されません。)

アラートリダイレクトサンプル

このままだとPCサイトにアクセスする度にアラートが表示されることになります。
それが煩わしい場合はCookieを使ってアクセス制御することも可能です。
以前の記事「jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法」と
併せる事で、サイトへ初回アクセスのみにアラートを表示することもできます。

初回アクセスのみの制限を付けたスクリプトは以下のようになります。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
$(function(){
	var agent = navigator.userAgent;
	if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
		if(!($.cookie('access'))){
			redirect();
		}
	}
	$(window).load(function(){
		$.cookie('access',$('body').addClass('access'));
	})
});
function redirect(){
	if(window.confirm('スマートフォン向けサイトに移動しますか?')){
		location.href = "sp/index.html";
	}
}
</script>

「jquery.cookie.js」を使ってクッキー処理をしています。

こっちの動作サンプルについては以下のリンクからサンプルページを開いてください。
※iPhone、iPad、Androidでアクセスしてください。
(PCでアクセスしてもアラートは表示されません。)

アラートリダイレクトサンプル(初回アクセスのみアラートが表示されます)

PC向けとスマートフォン向けにリダイレクトさせる方法はさまざまですが
この様にアラート表示にてユーザーにどちらにアクセスするか選択させる方法も良いかと思います。

ご参考までに。。。

サンプルファイルをダウンロードしたい方はこちらから

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

Related Posts

Comments (0)







コメント内容

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

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

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