2012-06-19

【PHP】PC用・スマートフォン用・携帯用のページ振り分けする方法

PC、スマートフォンおよび携帯電話のページを自動的に切り替える方法を考えてみました。
SEO的にどのような影響が出るかはわかりませんw


◆仕様
・(1)切り替え用のプログラムは、公開しているディレクトリ直下に置く
・レスポンスされるHTMLを生成するプログラムは公開されていないディレクトリに、「pc/」、「smart/」および「mobile/」という名前にしておく
・レスポンスされるHTMLを生成するプログラムは、(1)に置いてある切り替え用のプログラムで読み込む(インクルードする)
・PC用ページは「/pc」以下のURLでアクセスする
・スマートフォン用ページは「/smart」以下のURLでアクセスする
・携帯電話用ページは「/mobile」以下のURLでアクセスする
・振り分けのは「ユーザエージェント」を検査して行うものとする



参考)ディレクトリ構成
├─public/ (公開ディレクトリ)
│  │
│  ├foo.php(振り分けプログラム1)
│  └bar.php(振り分けプログラム2)
│
└─template/ (非公開ディレクトリ))
    │
    ├─pc/
    ├─smart/
    └─mobile/
        │
        ├foo.php (携帯HTML生成用プログラム1)
        └bar.php (携帯HTML生成用プログラム2)
          ※この2つのプログラムはpc/、smart/ディレクトリにも存在する。



◆.htaccess
mod_rewriteを使用して、/pc、/smart、/mobileにアクセスしてきたリクエストを仕様の(1)にアクセスさせます。
例として、
---
RewriteRule /pc/([a-zA-Z\.]+)$ /$1
RewriteRule /smart/([a-zA-Z\.]+)$ /$1
RewriteRule /mobile/([a-zA-Z\.]+)$ /$1
---
といった感じでしょうか。

◆振り分けプログラムのすること
振り分けを厳密にするのは大変なので、今回はユーザエージェントを使用して振り分けすることにします。
たとえば、以下のようなプログラムになるでしょう。


  define( 'PC',       0 );
  define( 'SMART',    1 );
  define( 'MOBILE',   2 );
 
  switch( true ) {
    case preg_match( '/DoCoMo/i',    $_SERVER[ 'HTTP_USER_AGENT' ] ):
    case preg_match( '/KDDI/i',    $_SERVER[ 'HTTP_USER_AGENT' ] ):
    case preg_match( '/J\-PHONE|Vodafone|SoftBank/i',  
      $_SERVER[ 'HTTP_USER_AGENT' ] ):
      define( 'USER',   MOBILE );
      break;
    case preg_match( '/Android/i',  $_SERVER[ 'HTTP_USER_AGENT' ] ):
    case preg_match( '/iPhone/i',   $_SERVER[ 'HTTP_USER_AGENT' ] ):
    case preg_match( '/iPod/i',     $_SERVER[ 'HTTP_USER_AGENT' ] ):
    case preg_match( '/iPad/i',     $_SERVER[ 'HTTP_USER_AGENT' ] ):
      define( 'USER',   SMART );
      break;
    default:
      define( 'USER',   PC );
  }


これを振り分けプログラムで判別し、それにあったHTML生成プログラムをインクルードすればOKです。
たとえば、


  switch( USER ) {
    case MOBILE:
      include( '/template/mobile/' . basename( __FILE__ ) );
      break;
    case SMART:
      include( '/template/smart/' . basename( __FILE__ ) );
      break;
    default:
      include( '/template/pc/' . basename( __FILE__ ) );
      break;
  }


というような感じになるでしょう。
HTMLを変更するときは、必要となるtemplate/以下のファイルを修正するだけでOKです。

ZenBack

WebMoney ぷちカンパ