スマートフォン対応ホームページ 作り方 まず分岐(´・ω・)ス | WEB系技術電脳日記

スマートフォン対応ホームページ 作り方 まず分岐(´・ω・)ス

最近の流れで、iPhoneやらAndroidでスマートフォン対応のサイトが増えてきた。
そんな中、M氏からどうしたらと連絡があったので、
こちらもちとサンプルを作ってみる。

スマートフォンって一口でいっても要は携帯電話・PHSとPDA機能が付いた携帯端末
国内ではiPhone、HTC製のDesire、サムスン製のGalaxyなどなど・・・。
分類すると、それぞれのブラウザに対応させる事になるが、
大きくザックリ分類すると、

1.完全に別のページを作る。
2.一部のページだけ用意する。
3.専用アプリを作る。

3のiPhoneのApp StoreやAndroid Marketから専用アプリを提供は、
現実問題、一般的なサイトでアプリを作るのは、それなりに大変。
そうなると、1.2の方法がまずは最初(´・ω・)ス

次に手法だが、安価に思いつくのは、
1.UserAgentでリダイレクト
2.UserAgentでスマートフォンサイトのバナーを表示
問題はちゃんと動くかテスト。

実機とエミュでテスト。
さっそくUserAgentを取ってみる。
$user_agent = $_SERVER['HTTP_USER_AGENT']・・・と、、

今の状態だと、
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; ja-jp)
AppleWebKit/533.17.9
(KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5
・・・となる。

以前確かに記録をみると、
Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0 like Mac OS X;ja-jp) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1Mobile/5A345
Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0 like Mac OS X; ja-jp) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5A347 Safari/525.20
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5
共通してるのは、iPhone 当たり前。
じゃこれを正規表現で抜いて分岐すればよい・・と。

ほかの携帯のも調べておく。
GALAXY S SC-02B  Mozilla/5.0 (Linux; U; Android 2.2; ja-jp; SC-02B Build/FROYO) ・・
Optimus Pad L-06C Mozilla/5.0 (Linux; U; Android 3.0.1; ja-jp; L-06C Build/HRI66) ・・
IS01        Mozilla/5.0 (Linux; U; Android 1.6; ja-jp; IS01 Build/S6191) ・・・
IS02        Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 8.12;・・・
IS03        Mozilla/5.0 (Linux; U; Android 2.1-update1; ja-jp; IS03 Build/S2080)
REGZA Phone IS04  Mozilla/5.0 (Linux; U; Android 2.1-update1; ja-jp; IS04 Build/FEK100)
とえりあえず、Androidはその文字列か・・でもIS02が違うのか。
参照:http://maxfactory.biz/blog/sp_device_profile/

まぁ・・Androidはそれで分岐しておくか。

$agent = $_SERVER['HTTP_USER_AGENT'];
//echo $_SERVER['HTTP_USER_AGENT'];
//分岐 --------------------------------------------------------------------------
if(preg_match("/^DoCoMo/i", $agent)){ header("Location: http://飛ばす先");
}else if(preg_match("/^(J\-PHONE|Vodafone|MOT\-[CV]|SoftBank)/i", $agent)){ header("Location: http://飛ばす先");
}else if(preg_match("/^KDDI\-/i", $agent) || preg_match("/UP\.Browser/i", $agent)){ header("Location: http://飛ばす先");
}else if(preg_match("/iPhone/", $agent)) { header("Location: http://飛ばす先");
}else if(preg_match("/Android/", $agent)){ header("Location: http://飛ばす先");
}

もしくはヘッダーに。
else ifよりswitchのいいけど、まぁ・・いいや。

そんな記述。