.htaccess だけで簡単キャリア判定してみる

2011.06.29

まだ 6 月だってのに早くも今年初あせもができちゃったよ！かいーの nakamura です。

サイトのモバイル、スマホ対応もすっかり一般的になってきた今日この頃、みなさんいつもどんな方法でキャリア判定を実装しているでしょうか。がっつりフレームワークなどを使っていればさほど難しくはありませんが、ほとんどプログラムが動いていないような静的なサイトの場合はちょっと面倒ですね。今日はそんな時に有用な .htaccess を使ったキャリア判定の方法をご紹介します。

仕様

今回、ルートディレクトリ / は PC 用サイト、/m/ 以下がモバイルサイト、/sp/ 以下がスマホサイトとして以下の仕様を元に記述方法を考えていきます。

PC で /m/, /sp/ 以下にアクセスしたら /　にリダイレクト。
モバイル、スマホで PC サイトにアクセスしたらそれぞれ /m/, /sp/ にリダイレクト。
モバイルでスマホサイトにアクセスしてきたらファイル名を引き継ぎつつ /m/ 以下にリダイレクト。その逆も同じ。（モバイルサイトとスマホサイトでコンテンツの中身、構成が同じケースを想定）

ちなみに Apache は 2.2 系です。

記述例

それでは実際の .htaccess 記述例です。.htaccess は全部で 3 つ必要です。/home/projects/c-brains.jp/htdocs がドキュメントルートとして、3 つの .htaccess の記述例を解説していきます。

/home/projects/c-brains.jp/htdocs/.htaccess

ドキュメントルート直下の .htaccess 。今回行った記述はこんな感じ。

# Set enviroment value by user-agent
SetEnvIf User-Agent "DoCoMo" UA=mobile
SetEnvIf User-Agent "UP\.Browser" UA=mobile
SetEnvIf User-Agent "KDDI-" UA=mobile
SetEnvIf User-Agent "J-PHONE" UA=mobile
SetEnvIf User-Agent "Vodafone" UA=mobile
SetEnvIf User-Agent "SoftBank" UA=mobile
SetEnvIf User-Agent "emobile" UA=mobile
SetEnvIf User-Agent "WILLCOM" UA=mobile
SetEnvIf User-Agent "DDIPOCKET" UA=mobile
SetEnvIf User-Agent "iPhone" UA=sp
SetEnvIf User-Agent "Android" UA=sp

RewriteEngine On

# Redirect if mobile
RewriteCond %{REQUEST_URI} !^/m.*
RewriteCond %{ENV:UA} ^mobile$
RewriteRule ^(.*)$ /m/ [R,L]
# Redirect if smart phone
RewriteCond %{REQUEST_URI} !^/sp.*
RewriteCond %{ENV:UA} ^sp$
RewriteRule ^(.*)$ /sp/ [R,L]

まず SetEnvIf ディレクティブを使ってユーザエージェントを元に環境変数をセットします。もっときっちり判定したいという方はこの部分をより細かく書くとよいでしょう。

RewriteEngine On から下に実際のリダイレクトの記述をしています。環境変数 UA が mobile であれば /m/ に、sp であれば /sp/ にリダイレクトしています。

/home/projects/c-brains.jp/htdocs/m/.htaccess

モバイルサイトのトップに設置する .htaccess です。

RewriteEngine On

# Redirect if PC
RewriteCond %{ENV:UA} !^mobile$
RewriteCond %{ENV:UA} !^sp$
RewriteRule ^(.*)$ / [R,L]
# Redirect if smart phone
RewriteCond %{ENV:UA} ^sp$
RewriteRule ^(.*) /sp/$1 [R,L]

UA が mobile でも sp でもなければ / にリダイレクトします。また、UA が sp であれば /sp/ 以下にファイル名を保持したままリダイレクトしています。ちなみに環境変数 UA はドキュメントルート直下の .htaccess で設定しているのでここであらためて設定し直す必要はありません。

/home/projects/c-brains.jp/htdocs/sp/.htaccess

スマホサイトのトップに設置する .htaccess です。基本的にはモバイルサイトのものと同様の記述です。

RewriteEngine On

# Redirect if PC
RewriteCond %{ENV:UA} !^mobile$
RewriteCond %{ENV:UA} !^sp$
RewriteRule ^(.*)$ / [R,L]
# Redirect if mobile
RewriteCond %{ENV:UA} ^mobile$
RewriteRule ^(.*) /m/$1 [R,L]

以上で終了です。ユーザエージェントを偽装して動作確認してみてください。

終わりに

今回ご紹介したのはあくまでユーザエージェントをベースにした簡易的なキャリア判定の方法です。文中のユーザエージェントのパターンは全てのクライアントをカバーできるものではありませんし、本当の意味で厳密な判定を行いたいのであれば IP アドレスベースの判定をお勧めします（メンテナンスのコストがバカになりませんが）。というかそこまで考えるのであればキチンとプログラムを書いた方が良いですね。

最低限主要な端末をおさえられればよい、というのであればかなりお手軽でそれなりに有用だと思いますよ！