表示するページをアクセス元で振り分ける
表示するページをアクセス元で振り分ける
- 検索結果などから訪れるユーザーは、通常ルートに当たるPCサイトのトップページに遷移しますが、スマートフォンサイトへ遷移させるためには、そのための記述が必要になります
アクセスを振り分ける目的
- 従来からあるデスクトップ向けサイトと同じ方法でアクセスできるようにする
ユーザーエージェント（HTTPユーザーエージェント）
- Webページにアクセスするプログラム
振り分け方法の種類
- .htaccess ファイルを設置する
- JavaScriptでユーザーエージェントを判定して振り分ける
- PHPでユーザーエージェントを判定して振り分ける
.htaccess ファイルを設置する方法
- 最も確実
- リダイレクト
- Webサーバーで「mod_rewrite」というURLを書き換える機能が有効である場合
- サーバーによって「パーミッション（権限）の設定」が必要になります
- 「.htaccess」というファイル名がデスクトップ上で認識されないため、「htaccess.txt」というファイル名で内容を記述し、アップロードしてから「.htaccess」というファイル名に変更します
ロリポップの場合
さくらサーバーの場合
記述例
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC] RewriteCond %{QUERY_STRING} !mode=pc RewriteRule ^$ /sp/ [R,L] </IfModule>
mod_rewriteモジュールを利用する
RewriteEngine On 〜 は、URLを書き換える機能である「mod_rewriteモジュール」を利用するため記述します
RewriteCond
- RewriteCondを使うことで、「URL書き換え」処理を実行する条件を指定できます
RewriteCond %{変数名} (一致パターン) [フラグ]
1．変数名
- ここでは、変数名に「HTTP_USER_AGENT」を指定しています
- これは、アクセス端末のユーザエージェント名を示します。
2．一致パターン
- その後に続く「(iPhone|Android.*Mobile|Windows.*Phone)」が、一致パターンを示す正規表現です
- ここでは、『「iPhone」または「Android + Mobile」または「Windows + Phone」という文字列が存在する場合』という条件指定になっています
- 「Android.*Mobile」内の「.*」は「Android」と「Mobile」の間に任意の文字がいくつ入っていても良いという意味です
3．フラグ
- 最後に、フラグとして [NC] と記述しています
- これは、「大文字・小文字を区別しない」という意味の指示です
- 一致パターンに「Android」と書いておけば、実際にユーザエージェント名に含まれる文字列が「android」でも「ANDROID」でも、同じだとみなされます
※うまくリダイレクトされるかどうか、PCを使って実験したい場合には、一時的に「一致パターン」の中に、「Firefox」や「Chrome」などブラウザ名を入れておくと良いでしょう。例えば、「Firefox」とだけ加えた場合は、「Firefoxでアクセスした場合にはリダイレクトされ、IEでアクセスした場合にはそのまま」となります。
RewriteCond %{QUERY_STRING} !mode=pc
- 「RewriteCond」を使った条件指定です
- URLの末尾に「?mode=pc」という文字列が付いていた場合には、スマートフォン用ページに移動させない(リダイレクトしない)ようにする記述です
1．変数名
- 変数名には「QUERY_STRING」を指定しています
- これは、URL末尾に付加された「?」記号以降の文字列を指します
- 例えば、「http://www.google.co.jp/search?q=All+About」というURLなら、「?」記号以降の「q=All+About」という部分が「QUERY_STRING」です
2．一致パターン
- 先頭の「!」は否定の記号で、「指定のパターンに一致しない場合」という意味になります
- ここでは、「!mode=pc」と記述していますから、『QUERY_STRING内に「mode=pc」という文字列がなければ』という意味になります
- なお「mode=pc」という文字列は何でも構いません。「pc-site」や「show-pc-edition」など、何でも好きな文字列を指定できます
3．フラグ
- ここではフラグを指定していません
- 先ほどと同様に [NC] と加えておけば、「?mode=pc」でも「?Mode=PC」でも「?MODE=pc」でも有効になります
RewriteRule ^$ /sp/ [R,L]
- RewriteRuleを使うことで、指定した規則に沿ってURLを書き換えられます
- ここでは、リダイレクトするために利用しています
- このRewriteRuleが適用されるのは、直前までに記述したRewriteCondの各条件がすべて成立している場合のみです
RewriteRule ^$ /sp/ [R,L]
仮に、この .htaccessファイルを設置した場所が http://www.example.com/ だとすると、(2行目・3行目のRewriteCondによる条件指定と合わせて)以下のような動作になります。
- スマートフォンでアクセスすると http://www.example.com/sp/ へ移動
- スマートフォン以外でアクセスすると http://www.example.com/ のまま
- スマートフォンでアクセスしても、URLが http://www.example.com/?mode=pc であれば移動しない
フラグとして、[R,L] を指定しています。
「R」は「リダイレクトする」という意味で、ここでは必ず必要です。
「L」は書き換え規則の最終行であることを示しています(これ以降のRewriteRuleは無視されます。ここでは省略しても問題ありません)。
書き換え例
- 移動先を他のドメインにしたい場合は、以下のように記述します
- 例えば、 http://sp.example.com/ へ移動させる場合は、以下のように記述します
RewriteRule ^$ http://sp.example.com/ [R,L]
うまくいかない場合
- もし、うまく移動しない場合は、以下のように「^」と「$」の間に「/」記号を追記してみて下さい
RewriteRule ^/$ /sp/ [R,L] RewriteRule ^/$ http://sp.example.com/ [R,L]
JavaScriptによる振り分け
- .htaccessファイル自体が使えないサーバで自動振り分け機能を用意したい場合
- JavaScriptでユーザーエージェントを判定し、iPhone向けサイトへ転送させる
<script> var ua = navigator.userAgent; if ( (ua.indexOf( 'iPhone' ) > 0 && ua.indexOf( 'iPad' ) == -1 ) || ua.indexOf( 'iPod' ) > 0 || ua.indexOf( 'Android' ) > 0 && ua.indexOf( 'Mobile' ) > 0 || ua.indexOf( 'Windows Phone' ) > 0 ) { location.href = 'sp/index.html'; } else if ( ua.indexOf( 'iPad' ) > 0 || ua.indexOf( 'Android' ) > 0 ) { location.href = 'tab/index.html'; } </script>
- JavaScriptでは、最初に変数uaにユーザーエージェント情報を代入しています
- 続く if文では変数uaに代入された値をもとにして処理を振り分けています
- 変数uaの値が以下のいずれかの場合には、if文内の「location.href = 'sp/index.html';」を実行して、スマートフォンのURLにリダイレクトしています
iPoneを識別する際に「iPad」の文字列をチェックしているのは、初期iPadの中に「Phone」という文字列を含むものがあったため
また、Androidを識別する際に「Mobile」の文字列をチェックしておるのは、「Android」だけだと、各所のタブレットも含まれてしまうからです。
なお、else if文でタブレット向けのサイト（tab/index.html）へのリダイレクトも行っていますが、タブレット向けサイトを用意していない場合は、この記述は不要です。
PHPによる振り分け
- PHPでユーザーエージェントを判定し、iPhone向けサイトへ転送させる
- PHPのコードをPCサイトのトップページから読み込むと、ユーザーエージェントの取得とスマートフォン端末からのアクセス時に行うリダイレクト処理の両方を実行できます
<?php $ua = $_SERVER[ 'HTTP_USER_AGENT' ]; if ( ( strpos ( $ua, "iPhone" ) !== false ) || ( strpos ( $ua, "iPod" ) !== false ) || ( strpos ( $ua, "Android" ) !== false ) || ( strpos ( $ua, "Windows Phone" ) !== false ) ) { header( "location:http://www.exsample.com/sp/" ); }
