.htaccessファイルでPCとスマホを振り分ける

スポンサーリンク

はじめに

.htaccessファイルによりPCとスマートフォン(スマホ)でアクセスされた場合の表示ディレクトリを振り分けるためのまとめです。

環境

OS Windows 7 Pro 64bit
Webサーバ Apache 2.2.11

Webサイトのスマホ対応について

Webサイトをスマホに対応させる場合以下の3つの方法があります。

  • レスポンシブウェブデザインで作成する
  • アクセスされたデバイスを判定しサーバ側で対応するコンテンツを表示する
  • アクセスされたデバイスを判定しサーバ側で対応するURLに振り分ける

レスポンシブウェブデザインで作成する

レスポンシブウェブデザインとはデバイスの幅によって表示を切り替えるデザインのことを言います。CSS3メディアクエリを使用してデバイス毎のデザインを調整します。

メリット

デバイスの種類に関係なく幅によって表示を切り替えられるため新しいデバイスへの対応が必要なく、1つのURLなのでSEOにも有利です。

デメリット

既にPC用のWebサイトがある場合はレスポンシブウェブデザイン用にサイトを作り変える必要があります。またデバイス毎に最適化されていないためスマホで見る場合もPCと同じ通信量が必要となり表示が遅くなる可能性があります。

アクセスされたデバイスを判定しサーバ側で対応するコンテンツを表示する

アクセスされたデバイスをユーザーエージェントから判定しサーバ側で対応するコンテンツを返します。

メリット

デバイスの種類毎に最適なページを表示できるため無駄な通信がなく、URLも1つなのでSEOに有利です。(Vary HTTPヘッダを出力する必要があります)

デメリット

デバイス毎にユーザーエージェントを判定し対応するコンテンツを表示する処理を作成する必要があります。また新しいデバイスに対応するために修正が必要になることがあります。

アクセスされたデバイスを判定しサーバ側で対応するURLに振り分ける

アクセスされたデバイスをユーザーエージェントから判定し対応するURLに振り分けます。

メリット

既存のWebサイトに大きく手を加えることなくスマホ用のページを作成することができます。

デメリット

デバイス毎にユーザーエージェントを判定する必要があるため新しいデバイスに対応するために修正が必要になることがあります。デバイス毎にURLが異なるためSEO用の設定が必要です。(rel=”alternate”とrel=”canonical”を設定する必要があります)

ここでは.htaccessファイルを使用してアクセスされたデバイスを判定しサーバ側で対応するURLに振り分けます。

.htaccessファイルによる振り分け

.htaccessファイルを使用してデバイス毎にURLを振り分けます。フォルダの構造は以下のようにします。/sp/フォルダ内のディレクトリ構造はPCと同じである必要があります。

PCサイト
http://example.net/
スマホサイト
http://example.net/sp/

.htaccessファイルの作成

.htaccessファイルに以下の内容を追記します。

RewriteEngine on
RewriteBase /

RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPad|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc [NC]
RewriteRule ^(.*)$ sp/$1 [R,L]

RewriteCond %{REQUEST_URI} /sp/
RewriteCond %{QUERY_STRING} mode=pc [NC]
RewriteRule ^sp/(.*)$ /$1 [R,L]

上記の設定ではユーザーエージェントにiPhone、iPad、Android.*Mobile、Windows.*Phoneの文字列が含まれる場合/sp/フォルダへリダイレクトします。クエリにmode=pcが指定されている場合はPCの方へリダイレクトされます。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする