スマホからのアクセスはスマホページへ飛ばす

電脳備忘録

なーんとなくjQueryMobileでスマホ用ページを製作してあったのですがそれっぽく整備しました。
今までよりも多少使い勝手は向上させたつもりですが、UIや見せ方などはいろいろ試してみようと考えています。
このブログは記事を投稿したときにtwitterにつぶやくように設定してあります。当然つぶやきのリックをクリックすれば記事へ飛びます。スマートフォンからも同様で、普通にPC向けのコンテンツが表示されます。
しかし、このブログはtwitter経由でスマートフォンから閲覧してくださる方も結構いらっしゃるようなので、PC向けのページをそのまま表示させるのはやさしくありません。そこでリンクをクリックして記事に飛んだとき、スマートフォンからのアクセスだったらスマートフォン用のページへ飛ばすように工夫してみました。

お約束

参照は自己責任でお願いします。

ユーザーエージェントの確認

スマートフォンからアクセスか否かを判定します。
下記サイトの方法で対応しました。
Web サイトのスマートフォン最適化: UA 判別篇

function is_mobile () {
$useragents = array(
'iPhone',         // Apple iPhone
'iPod',           // Apple iPod touch
'Android',        // 1.5+ Android
'dream',          // Pre 1.5 Android
'CUPCAKE',        // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS',          // Palm Pre Experimental
'incognito',      // Other iPhone browser
'webmate'         // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

スマートフォン用のURLを作って遷移させる

if (is_mobile()) でスマートフォン判定された場合の処理を書きます。
たとえばURLが http://www.560days.com/diary/2011/07/002203.php の場合、$_SERVER["SERVER_NAME"]で560days.com、$_SERVER["SCRIPT_NAME"]で /diary/2011/07/002203.php を取得できます。
この部分をdiary/smartphone/2011/07/002203.phpと書き直したいので、/diaryと2011/07/002203.phpに分けて間に /smartphone/ を入れます。 substr関数を利用して値を抜き出し変数に格納ます。
それぞれの変数をつなげてページを強制的にジャンプさせるheader関数でhttp://www.560days.com/diary/smartphone/2011/07/002203.php にジャンプさせます。

<?php if (is_mobile()) { ?>
<?php
$http = 'http://';
$sitename = $_SERVER["SERVER_NAME"];
$smart = '/smartphone/';
$path1 = substr($_SERVER["SCRIPT_NAME"], 0, 6);
$path2 = substr($_SERVER["SCRIPT_NAME"], 7, 18);
$query = $_SERVER["QUERY_STRING"];
header("Location: $http$sitename$path1$smart$path2$query");
?>
<? php } ?>

PCで閲覧した場合はPC用のページを、スマートフォンから見た場合はスマートフォン用のページに遷移できたのでとりあえずこれでよしとします。爽快爽快

Newer
Older
Dark
Light
menu