読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 求職者支援訓練Webデザイン フェリカテクニカルアカデミーWebサイト制作科作品紹介



表示するページをアクセス元で振り分ける

SP

表示するページをアクセス元で振り分ける

  • 検索結果などから訪れるユーザーは、通常ルートに当たるPCサイトのトップページに遷移しますが、スマートフォンサイトへ遷移させるためには、そのための記述が必要になります
アクセスを振り分ける目的
  • 従来からあるデスクトップ向けサイトと同じ方法でアクセスできるようにする


ユーザーエージェント(HTTPユーザーエージェント)

  • Webページにアクセスするプログラム

振り分け方法の種類

  • .htaccess ファイルを設置する
  • JavaScriptでユーザーエージェントを判定して振り分ける
  • PHPでユーザーエージェントを判定して振り分ける
.htaccess ファイルを設置する方法
  • 最も確実
  • リダイレクト
  • Webサーバーで「mod_rewrite」というURLを書き換える機能が有効である場合
  • サーバーによって「パーミッション(権限)の設定」が必要になります
  • .htaccess」というファイル名がデスクトップ上で認識されないため、「htaccess.txt」というファイル名で内容を記述し、アップロードしてから「.htaccess」というファイル名に変更します


ロリポップの場合

http://lolipop.jp/manual/hp/htaccess-08/


さくらサーバーの場合

http://support.sakura.ad.jp/manual/rs/web/mod_rewrite.html


記述例
<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.変数名


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による条件指定と合わせて)以下のような動作になります。


フラグとして、[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]
PC用ページへのリンクを加えておく
<a href="http://www.example.com/?mode=pc">PC用サイトはこちら</a>


このリンクから移動した場合には、スマートフォンからのアクセスであっても、PC用サイトを閲覧できます。
「mode=pc」の部分は、2つ目のRewriteCondで記述した文字列に合わせて下さい。


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にリダイレクトしています
    • 文字列に「iPhone」が含まれ、かつ「iPad」が含まれない場合
    • 文字列に「iPod」が含まれる場合
    • 文字列に「Android」が含まれ、かつ「Mobile」が含まれる場合
    • 文字列に「Windows Phone」が含まれる場合


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/" );
}