最近のWeb制作の大きな柱となるのが
■PCサイト
■ガラケーサイト（フィーチャーフォン、だっけ）
■スマートフォンサイト
の3つでありますが、
そりゃ同じHTMLでCSSで切り替えるって事もできたりもします。

そしてiPhoneの総本山とも言えるAppleは
実はスマートフォン専用サイトを作っていない。

pxt|考察：Appleはスマホサイトを作らない。
http://www.pxt.jp/ja/diary/article/257/index.html

小さな画面でありながらページ上の構成要素の全体を一目で把握して、
自分が必要な情報に、直感的なダブルタップの操作でフォーカスできる。
興味の順に次々読み進められるし、斜め読みだってできてしまう。

これが、Appleが掲げたモバイルサイトのデザインであり、
Mobile Safari のUI設計の本質なのではないだろうか。
実際に「スマホサイトがないことに今まで気づかずにいられた」のは、
このデザインで特にストレスを感じなかった証拠でもある。

実はAppleは、スマホサイトをしっかり作っていた、というわけだ。

とはいえ、ニッポンにはまだまだガラケーのユーザーがいるのも事実。
そのガラケーですらDocomo,au,softbankの仕様はおろか
各機種の画面サイズやらブラウザのバージョンやらでもうムチャクチャな状態だ。
しかし、これは無視できない。
最近はだいぶと仕様が各キャリアで近づいてきているが
やはり一番クセのあるDocomoの仕様で合わせて制作するパターンが多い。

PCサイトをWordpressで構築して、WPTouchやKetai Styleなどの
プラグインを駆使して制作する手もあるにはあるが
固定ページがTOPページだと色々と手を入れないとけっこうキツい。

なので
■PCサイトは静的サイト
■ガラケーサイトはDocomoに合わせたインラインCSSで3キャリアをカバー
■スマートフォンサイト(iPhone,android)は兼用で制作
と、各自3つのサイトを制作して振り分けるケースを考えてみました。

まずは.htaccessを使ってガラケーからのアクセスを専用ディレクトリに転送する。
ルート下にmbというディレクトリを作ってそこにガラケーサイトを設置した場合、
HTTP_USER_AGENTを使って移動させるための記述。
（正確にはmb以外にアクセスしてくる端末を強制的にmbに飛ばす、って感じ）

RewriteEngine on
RewriteCond %{REQUEST_URI} !(^/mb/)
RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank)
RewriteRule ^(.*)$ /mb/ [R,L]

次はスマートフォンですが、こいつはPCサイトも普通に見れるので
強制的に飛ばすよりも、ユーザーに選択させる方が吉、と思い
PCサイトページにjavascriptを使って、バナーを表示させる事にする。

spというディレクトリにスマートフォン専用サイトを設置するとして

 if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0 ) {
document.write('<p align="center"><a href="./sp/index.html"><img src="./img/tosmart.jpg" width="600" height="140" /></a>');
}

この記述のjsファイルを作って、bodyタグのすぐ下でscriptタグで読み込ませると
iPad以外のスマートフォン端末がPCサイトのTOPにアクセスしてきた場合に
600×140ピクセルのバナーを最上部、中央配置で表示させる事ができます。
PCで見てもこれは表示されません。

後はスマートフォンサイトのフッターにPCサイトへの切り替えスイッチを設置。
これでユーザーがPCサイトとスマートフォンサイトを
行ったり来たり出来る様になります。

それにしてもあと3年とかで、なにもかもが大きく変わってそうですねえ。
だからこそ、この仕事はおもしろいんですけども。