Lesson 08 ユーザーエージェントを使ってPCとスマートフォンの表示を振り分ける - HTML5＋CSS3 次世代Webコーディングの超・最新動向・Smartphone編

2011.9.20 TUE

HTML5＋CSS3
次世代Webコーディングの
超・最新動向

Smartphone編

	Lesson 8			ユーザーエージェントを使って PCとスマートフォンの表示を振り分ける
	制作・文			山田敬美（ネイバージャパン株式会社）

Webブラウザから送られるユーザーエージェントの文字列からアクセス元のデバイスを判別し、Cの場合はPC版のサイトを、スマートフォンの場合はスマートフォン版のサイトを適切に表示しよう。

ユーザーエージェントとは

Webブラウザはサーバへのリクエスト時に、ブラウザごとに決められた識別用の名称文字列を送信している。

ユーザーエージェントとはその識別文字列のことであり、これによってアクセス元のブラウザを判別できる。

iPhone には「iPhone」、Android には「Android」という文字列が含まれているため、これらのキーワードを使えばスマートフォンからのアクセスを判別できる【1】。

【1】各ブラウザのユーザーエージェント一覧

PCとスマートフォンサイトを
振り分ける

ユーザーエージェントを使ってPCとスマートフォンサイトを振り分けるには、サーバ側で振り分ける方法と、ブラウザ側で振り分ける方法の2種類がある。

サーバ側で振り分けるには、PHPなどのプログラム言語か.htaccess を使用し、ブラウザ側で振り分けるには、JavaScriptを使用する。

JavaScript で振り分ける方法は、ブラウザ側での処理が発生してしまうため、可能であればサーバ側で処理することをおすすめする。

.htaccessを使う方法

.htaccess を使う方法は、サーバ上の.htaccessファイルに、振り分け用のコードを記述すればよい【2】。

この例ではhttp://xxx.com/にアクセスしたブラウザのユーザーエージェントを見て、指定した文字列が含まれていれば、スマートフォンサイト（http://xxx.com/sp/）にリダイレクトを行うといった処理になる。

.htaccessとmod_rewrite が利用できれば、一番簡単で確実に振り分けられる方法だが、サーバの制限により.htaccessが使えない場合もあるので、事前に確認をしておこう。

【2】各ブラウザのユーザーエージェント一覧