携帯やスマートフォンでコンテンツを切替える"魔法"のapache設定 #apache

apache tips

リキッドデザインとかレスポンシブウェブデザイン流行ってるけどやっぱりPC,スマートフォン,携帯(ガラケー)は別に別にコンテンツ用意したほうが良い時もありますよね。
でも「SEOとか考えると…」「URLがばらばらになっちゃって…」なんてお客様のお悩みを解決する為にいまさら感がすごいですが魔法の設定をご用意いたしました！

apacheの設定を書き換えよう

httpd.confで以下を書くだけでOKです。
virtualhostとかしてるときは適切に気書き換えてね。

#####################################################################
#(C)makoto@2ch.to
LoadModule rewrite_module    modules/mod_rewrite.so
LoadModule setenvif_module   modules/mod_setenvif.so
#browser判定
BrowserMatchNoCase "DoCoMo|KDDI|UP\.Browser|Vodafone|J\-PHONE|MOT\-|SoftBank|WILLCOM|DDIPOCKET" browser=mb
BrowserMatchNoCase "Android|BlackBerry|iPhone|iPod|Windows Phone|IEMobile" browser=sp
SetEnvIf browser ^$ browser=pc
#URLがsp,pc,mb,commonから始まってない時だけ書き換える
RewriteEngine on
RewriteLog "logs/rewrite_log"
RewriteLogLevel 0
RewriteCond %{REQUEST_URI} !^/(sp|pc|mb|common)
 RewriteRule ^/(.*) /%{ENV:browser}/$1 [PT]

※UA判定ルールは時代で変わるので新鮮な情報を調べてね

コンテンツをアップロードしよう

コンテンツの配置にちょっと工夫が必要です。

  • (ドキュメントルート)/pc/ …PC向け
  • (ドキュメントルート)/sp/ …スマフォ向け
  • (ドキュメントルート)/mb/ …携帯向け
  • (ドキュメントルート)/common/ …共通のファイル

リンクの仕方に気をつけよう

「(ドキュメントルート)/(pc|mb|sp)/index.html」には
・http://サーバ/index.html
・http://サーバ/pc/index.html
というアクセスパターンがあるので基本的に相対pathでコンテンツ作ってください。
commonは共通パーツ置き場で必ず絶対pathで指定します。

URLはどうなるの？

といった、公開するURLはPC,SP,MBをつけないでください。

でOKです。

  • http://サーバ/pc/
  • http://サーバ/mb/
  • http://サーバ/sp/
  • http://サーバ/common/

に明示的にアクセスがある場合自動判定しませんので「PC版はこちら」みたいな誘導が可能です。

注意事項

自動判定を効率的に使うためpc,sp,mbは可能な限りディレクトリ構成を同じにしてください。
PCの1ページが携帯だと複数ページに分かれる事が多いのでファイル名は仕方ないと思います。(…ができるだけ統一)
外部サイトからのリンクは可能な限り、端末名(pc/,mb/,sp/)をつけずファイル名も指定しない(DirectoryIndexをうまく使う)ようにしてください。

関連リンク

僕が考えた最強のサーバ設定もお役に立つと思いますので是非はてなブックマークをお願いします。

最後に

はてなブックマークだと返事やお礼が大変なのでtwitterかコメでお願いします。(twitterが嬉しいです)
こういう話出来る人が周りにすくないので是非twitterで語り合いましょう。