.htaccess(mod_rewrite)でスマートフォン向けページへリダイレクトさせる方法

.htaccess(Apacheのモジュールmod_rewrite)を利用して、スマートフォンでWebサイトにアクセスされた時に、自動でスマートフォン向けページにリダイレクトする方法を検討してみたので、記録しておくことにします。

前提条件

  • 同一ドメイン内にスマートフォン向けページのディレクトリを用意する
  • スマートフォン向けページのディレクトリを「/spn」とする
  • ユーザーの希望に応じてPC向けサイト・スマートフォン向けサイトを選択して閲覧できるようにする

.htaccessの設定例

RewriteEngine On
RewriteCond % !^/spn/.*$
RewriteCond % (iPhone|iPod|Android.*Mobile|BlackBerry|Windows.Phone) [NC]
RewriteCond % !iPad [NC]
RewriteCond % !viewmode=pc
RewriteRule ^(.*)$ /spn/$1 [R=302,L]

/spnディレクトリ以外のURIにiPhone・Android(スマートフォンの場合。タブレットは除く。)でアクセスした場合で、Cookieのキー「viewmode」に値「pc」がセットされていない時、/spn以下にリダイレクトを実施するという設定です(Cookieに関しては後述)。

なお、User-Agent文字列に「iPad」が含まれない場合という条件も含めています。これに関しては、ASCII.jpの「実践!iPhone&Androidサイト制作ガイド ― 第8回 JavaScriptで振り分けてスマホサイト完成!」(もしくは、書籍「iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)」)を参照してください。

(2015年1月27日追記)Googleのウェブマスター向けモバイルガイドには、HTTP ステータス コード 301 または 302 のどちらを用いても問題ありませんが、可能な限り 302 を使用することをおすすめします。と記述があります。

PC向けサイト・スマートフォン向けサイトの切り替え方法

Yahoo!などで採用されているように、画面表示をPC向け・スマートフォン向け相互に切り替えてそれを維持する方法として、Cookieの利用を採用しました。具体的には、下記のようなJavaScript(jQuery、及びjQuery Cookieを利用)・HTMLで実現しています。

JavaScript

Cookieの設定を行う「changeView」関数を定義します。PC向けサイトの閲覧を希望したユーザーには、キー「viewmode」に値「pc」をセットします。再度スマートフォン向けサイトの閲覧を希望した場合は、値を空にすることとします。

<script>
function changeView() {
 $.cookie("viewmode", "pc", { path: "/" });
}
</script>

HTML

リンクをクリックした際、Cookieの設定を行う関数を呼び出しています。スマートフォンサイトの場合は下記のような記述になります。

<ul>
<li><a href="/index.html" onclick="changeView()">PC用ページ</a></li>
<li>スマートフォン用ページ</li>
</ul>

検討課題

  • 単純にUser-Agentの文字列にiPhone・Androidが含まれる場合のみリダイレクトでよいのか? iPhone・Android以外のデバイス、Androidを採用したタブレット端末の場合はどうするのか?
    →(2011年5月10日追記)Android端末に関して、新たに記事「User-Agent文字列を利用したAndroid搭載携帯端末(スマートフォン)とタブレットの区別について」を投稿しました。
  • mod_rewriteのRフラグの利用について。301・302どちらに設定するのがベターなのか。→(2015年1月27日追記)前述の通り、302が推奨されています。
  • 振り分けの是非。

参考サイト

追記

2012年1月11日

Windows Phoneに対応させました(実機は所有していないため検証はできておりません)

2012年2月18日

"Windows Phone"に含まれるスペースが原因で500エラーが出るとの報告を頂きましたので、コードを修正させて頂きました。ご迷惑をおかけいたしましたことお詫びいたします。

2015年1月27日

Apache(.htaccess)・nginx・JavaScriptをはじめ、各種言語でデバイス判定を行うコードを配布する「Detect Mobile Browsers - Open source mobile phone detection」があります。様々な機種に対応するコードがダウンロードできます。

この記事のタグ