サブドメインで公開しているスマートフォン(スマホ)サイトへユーザーエージェントをみて、リダイレクトしてみる。【技術情報】12.02.05

スマートフォン(スマホ)サイトをユーザーエージェント(UA)をみてリダイレクト、いろいろな方法がある。

★JavaScriptを使って、アラート「スマートフォンサイトを表示しますか」などとアラートを表示させて「はい」を押すと、スマートフォンサイトへリダイレクトさせるやり方。

HTMLに下記JSを設置。

<script type="text/javascript"> // iPhoneまたは、Androidの場合は振り分けを判断
 if (document.referrer.indexOf('http://m.webase.jp/') == -1 && ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0)) {
      if(confirm('WEBaseです。\nこのサイトにはスマートフォン専用ページがあります。\n表示しますか?')) {
               location.href = 'http://m.webase.jp/';
   }
}
</script>

HTMLの全ページに上記JSを設置するだけなので、簡単です。
しかし、スマートフォンユーザーがPCサイト側でページ遷移するたびにアラートが出て、ちょっとうっとおしい。

★WEBサーバーがApacheであれば.htaccessを利用して、リダイレクトさせる方法もある。
.htaccessを使ってUA(ユーザーエージェント)で判断して、サブディレクトリにあるスマートフォンサイトへリダイレクトする。
下記のサイトで紹介されている、やり方がスマートだ。
http://www.skyward-design.net/blog/archives/000094.html

.htaccessを使ってスマートフォンページで「PCページを表示する」ボタンを押すと、クッキーにviewmode=PCが保存され、PCページを閲覧したいスマートフォンユーザーと判断する設定がされている。
しかし、上記の方法ではクッキーを利用しているため、スマートフォンサイトをサブドメインで公開する場合は使えない。(セキュリティ上、クッキーはドメイン間で保持されないため。)

そこで、上記の.htaccessでリダイレクトさせる方法でスマホページがサブドメインの場合の改造をしてみる。
今回は、クッキーの代わりにURLの引数として「PC」を設定することによって、PCページを閲覧したいスマートフォンユーザーと判断させてみる。

.htaccessの内容は下記。
QUERY_STRINGでURLの引数をリダイレクトの条件に追加しています。

【.htaccess】

RewriteEngine On
RewriteCond %{HTTP_HOST} !^m.webase.jp [NC]
RewriteCond %{QUERY_STRING} !pc.*$
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android|BlackBerry|Windows\ Phone) [NC]
RewriteCond %{HTTP_USER_AGENT} !iPad [NC]
RewriteRule ^(.*)$ http://m.webase.jp$1 [R=301,L]

上記のみだとスマホでPCサイトを表示させた場合にCSSや画像のパスがリダイレクトされてしまい、間違ったパスに置き換わってうまく表示されないので、ディレクトリを除外する条件も必要に応じて追加してください。
(CSSファイルや画像ファイルがfilesのディレクトリ以下にある場合、RewriteCond %{REQUEST_URI} !^/files/*.*$ など)

PCサイト側のHTMLのJSは下記です。
スマホが「PCページを見る」を押してPCページに遷移してきた際の処理です。URLの引数を画面遷移しても持ち回す処理と、スマホサイトへ戻る処理です。

【HTMLのHEAD内に書くJS】

$.fn.urlAutoLink = function(baseURL){
var foo = "?" + location.href.split("?")[1];
if (location.href.split("?")[1] == null) { foo = "";}
return this.each(function(){
var srcText = this.innerHTML;
this.innerHTML = srcText.replace(/(href=\"[\x2b-\x3a|\x41-\x7e]+)/gi, "$1" + foo );
});
}

$(function () {
$("#wrapper").urlAutoLink();
});

【HTMLのbody内に書くJS】

if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0 ) {
document.write('<div class="uasw"><a href="http://m.webase.jp/news/2011/11/post_1.html">スマートフォンページに切り替え</a></div>');
}

以上です。

※スマホページのURLやパラメータ付きのURLが検索エンジンにインデックスされないように「canonical」によるURLの正規化を行なっておきましょう。

Androidのタブレット端末がスマホサイトにリダイレクトされるのを除外する方法についてもご覧ください。
ユーザーエージェント(UA)判別をしてスマホサイトへリダイレクトする際にタブレット端末を除外する。

このエントリーをはてなブックマークに追加
「WEBaseとつながろう!」LINEでマーケティング情報を定期的に発信していきます。集客に興味がある方は、友達登録お願い致します。
Contents
お知らせ 一覧
使命は集客、戦略的WEB集客サポート「WEBコンサルティング」
お試しWEBコンサルティング
完全成果報酬型SEO対策「インジーニアスSEO」
戦略的ホームページ制作・リニューアル
「WEBaseとつながろう!」LINEでマーケティング情報を定期的に発信していきます。集客に興味がある方は、友達登録お願い致します。
ページTOPへ