実は簡単にできる!PCサイトとスマホサイトを選んで振り分ける方法

実は簡単にできる!PCサイトとスマホサイトを選んで振り分ける方法
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

以前、スマホから自分のPCサイトにアクセスした場合、自動的にsmart4meで作ったスマホサイトに転送する方法をご紹介しました。

[かんたん]PC版、スマホ版のサイトを振り分ける方法

ただ、この方法ではあえてスマホでPCサイトを見たい場合でも強制的にスマホサイトが表示されてしまうため、サイトによっては使えない場合がありました。

そこで今回は、スマホからPCサイトにアクセスした場合に、閲覧者がどちらのサイトを見るか選べるようにする方法をご紹介したいと思います。

具体的には、こんな感じになります。

img1

スマホからPCサイトにアクセスした場合には「スマートフォンサイトに移動しますか?」と表示され、「OK」を押すとスマホサイトが、「キャンセル」を押すとPCサイトが表示されます。

■導入方法

前回と同様、JavaScriptを使ってこの機能を実現します。
以下のソースを、ご自分のPCサイトのHTMLソースの</head>の直前に追加してください。

<script type="text/javascript">
	var ua = navigator.userAgent.toUpperCase();
	if(document.referrer.indexOf(location.href.split('/')[2]) == -1 && (ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1))) {
		if(window.confirm('スマートフォンサイトに移動しますか?')) {
			location.href = 'http://smart4me.net/アカウント名/';
		}
	}
</script>

※「アカウント名」の部分を、ご自分のsmart4meのアカウント名に書き換えてください。

navigator.userAgentで、アクセスしてきた端末を判別するところまでは前回と同じですが、window.confirmでスマホサイトに移動するかどうかを表示し、「OK」を押した場合にはsmart4meのURLへ移動させています。

ぜひご活用ください!

(2014/5/28修正)
●スマートフォンサイトに移動せずPCサイトを見た場合、別ページを見て再度トップページに戻った際に2度確認メッセージが出ないように修正しました。
document.referrer.indexOf(location.href.split(‘/’)[2]) == -1の部分で、前に見ていたページが同じURLだった場合には確認メッセージを出さないように指定しています。

●上記のプログラムは、タブレットには対応しておりません。
対応する場合(タブレットからアクセスした場合にもスマホサイトを見せたい場合)には、以下のように修正してください。

<script type="text/javascript">
	var ua = navigator.userAgent.toUpperCase();
	if(document.referrer.indexOf(location.href.split('/')[2]) == -1 && (ua.indexOf('IPHONE') != -1 || ua.indexOf('IPAD') != -1 || ua.indexOf('ANDROID') != -1)) {
		if(window.confirm('スマートフォンサイトに移動しますか?')) {
			location.href = 'http://smart4me.net/アカウント名/';
		}
	}
</script>

2 thoughts on “実は簡単にできる!PCサイトとスマホサイトを選んで振り分ける方法

  1. はじめまして、
    私の家内の雑貨屋のホームページですが先月にsmart4meさんに登録させて頂き
    スマホサイトも作成、運営してます。
    スマホとpcの切り替えはpcサイトの入り口でユーザに選択してもらうようにしています。
    それがこちらです、
    http://favoritethings2012.web.fc2.com/
    貴殿のこの記事を読んでJavaScriptを使ってやってみましたが2点問題がありました。
    ①私の持っているasus memo 7インチpadではスマホと認識されない
    ②pcサイトに移った後にpcサイトが複数階層でありtopに戻るたびに JavaScriptが起動する。
    ということで元に戻しましたが
    もし解決法をご教授くだされば教えて頂きたくよろしくお願いします。

コメントを残す

メールアドレスが公開されることはありません。