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

はじめに

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

環境

• OS : Windows 7 Pro 64bit
• その他 : 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 ファイルに、以下の内容を追記します。

1RewriteEngine on
2RewriteBase /
3
4RewriteCond %{REQUEST_URI} !/sp/
5RewriteCond %{HTTP_USER_AGENT} (iPhone|iPad|Android.*Mobile|Windows.*Phone) [NC]
6RewriteCond %{QUERY_STRING} !mode=pc [NC]
7RewriteRule ^(.*)$ sp/$1 [R,L]
8
9RewriteCond %{REQUEST_URI} /sp/
10RewriteCond %{QUERY_STRING} mode=pc [NC]
11RewriteRule ^sp/(.*)$ /$1 [R,L]

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