でれでれどっとねっと

PCサイトも携帯サイトも作るが、今回は特にiPhone用に別のデザインを用意する点が異なる。

1.PC向け (IE6以上 Fx3.x)
2.携帯向け (DoCoMo Softbank AU 各”3G端末”)
3.iPod touch iPhone向け (Safari MobileSafari)
　

最近ではいよいよスマートフォンが無視できなくなってきた。
スマートフォンと言えばAndroidもそうだが、特にiPooneはブラウザにMobileSafari独自仕様だったりFLASH読めなかったりとクセがあるので専用でわけることに。

Androidの搭載ブラウザはブラウジングに必要な機能は全て存在しているし、余計なクセは無いのでそのままで良いと思う。持ってないけど。

まずPC向けとiPhone向けは同一ページでCSSだけ振り分ける。
CSSさえ振り分けていたら後はどうとでもなる。xhtmlまで別で書いてやることは無い。
<!–[if IE]>の部分は、IEがmediaに対応していない為の処理となる。

<link href="./iphone_style.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" />
<link href="./style.css" rel="stylesheet" type="text/css" media="screen and (min-device-width:481px)" />
<!--[if IE]>
<link href=”./style.css" rel="stylesheet" type="text/css" />
<![endif]-->

今回作る(依頼された)飲食店のウェブサイトは携帯3キャリアのアクセスを重視すべきサイトなので、PCサイトにQRコードを乗せておくだけのような対応は出来ない。
同一のURLにアクセスした際に、携帯の主要3キャリアだけ専用のページに飛ばす必要がある。
ここは.htaccessからApacheのmod_rewriteを使ってUA(ユーザーエージェント)で振り分ける。
(携帯サイト向けのコンテンツを守る必要がある場合はUA振り分けはオススメしない)

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|KDDI|DDIPOKET|UP.Browser|J-PHONE|Vodafone|SoftBank)
RewriteRule ^$ ./m/ [R]

これでUAを利用して自動的に振り分けが行われる。
QRコードのURLはPC用で良いし、例えば名刺等にURLを書くときでも./m/みたいな不恰好なURLでは無くなる。
　

これだけで上手く各端末が振り分けられるようになった。
モバイル用のページにPCでアクセスさせたくない時は振り分けのアプローチが異なるが、特別なコンテンツが無い場合はこれで十分だと思う。

関連する記事:

1. 初めて携帯サイトを作る時に知っておくべき15の知識
2. 携帯サイトではインデントを使わない