WEB担当者のためのスキルアップノート別ファイルでスマホ対応：phpでページごとのリダイレクトと表示切替
最近、自分のサイトで初めてスマートフォンサイトを導入したのですが、セーノのサイトはさくらのサーバライトプランにPHPを自分でインストールして使っているヘンテコ環境なため、.htaccessやjavascriptを使った表示切り替えが上手く動作しませんでした。
※ 当サイト（/）とは別のサーバです。
そこで、プログラマの@ken_zookieさんにPHPだけで【リダイレクト】と【PC版との表示切り替え】を出来るようにしていただきました！ありがとう！
- ・PHPファイルを用意
- ・表示切り換えボタンの設置
PHPファイルを用意
実際に@ken_zookieさんが作ってくれたPHPがこれです。
<?php
if (isset($_GET['viewmode'])) {
$viewmode = $_GET['viewmode'];
setcookie("viewmode", $viewmode, null, "/");
} else {
$viewmode = $_COOKIE['viewmode'];
}
if ($viewmode != "pc") {
$regex_ua_spn = "(iPhone|iPod|Android.*Mobile|BlackBerry)";
if (preg_match($regex_ua_spn, $_SERVER['HTTP_USER_AGENT']) != 0) {
setcookie("viewmode", "spn", null, "/");
header("Location: /spn/");
}
}
?>
セーノはPHPがさっぱりなのでよくわかりませんが、Cookieに’viewmode’という値を設定して、
訪問ブラウザがスマートフォンの場合はスマホサイトにリダイレクトする。って感じみたいです。ありがたい事に【タブレットはスマートフォンに含まない】設定になってるそうです！
今回はサブディレクトリ/spn/にスマホサイトを設置してるので、
/index.php ←に来たスマホブラウザを
/spn/index.html ←にリダイレクトします。
※ 当サイト（/）ではこの記事執筆時点でスマホサイトは用意していません。
設置は、ルート直下にlibというディレクトリを作り、このソースを放り込むだけです。
あとはリダイレクト元である/index.phpの一番上に
<?php include_once( "lib/prerouting.php"); ?>
を挿入してリダイレクトの作業は完了。
例：
<?php include_once( "lib/prerouting.php"); ?> <!DOCTYPE html PUBLIC "-//W3...
※[spn]の部分は、適宜自分のスマホ版ファイルディレクトリに書き換えてください。
2014.06.24 追記
ちなみにこのままでは、PC版下層ページへのアクセスは全てスマホ版トップへとリダイレクトしてしまうので、2014年現在のSEO環境やユーザビリティを考えるとあまり好ましくありません。ページごとのリダイレクトを行う場合は、上記prerouting.phpを使わず、PC版の各ページに直接下記を記入しましょう。
<?php
if (isset($_GET['viewmode'])) {
$viewmode = $_GET['viewmode'];
setcookie("viewmode", $viewmode, null, "/");
} else {
$viewmode = $_COOKIE['viewmode'];
}
if ($viewmode != "pc") {
$regex_ua_spn = "(iPhone|iPod|Android.*Mobile|BlackBerry)";
if (preg_match($regex_ua_spn, $_SERVER['HTTP_USER_AGENT']) != 0) {
setcookie("viewmode", "spn", null, "/");
header("Location: /spn/リダイレクト先のスマホ版URL");
}
}
?>
jsを挟めば全ページに書きこまずに外部ファイルとしても裁けそうですね。
表示切り換えボタンの設置
スマホサイトとPCサイトに、それぞれ切り替えるためのリンクを設置します。
● スマホ→PC
<a href="http://sukobuto.com/?viewmode=pc">PC表示</a>
● PC→スマホ
<a href="http://sukobuto.com/?viewmode=spn">スマホ表示</a>
sukobuto.com部分は自分のホームページのURLに変更してください。
※ ちなみにsukobuto.comは@ken_zookieさんのブログです。
link rel=”canonical”、link rel=”alternate”設定も忘れずに！
ちなみに、スマホ版を別ファイルで制作する場合は、スマホ版の各ページには「このページは他のページと同じ内容を掲載しているよ」という意味のlink rel=”canonical”を、PC版の各ページには「このページには対応するスマホページがあるよ」という意味のlink rel=”alternate”をそれぞれ追加する必要があります。
スマホ版にはlink rel=”canonical”
<link rel="canonical" href="対応するPC用ページのURL">
PC版にはlink rel=”alternate”
<link rel="alternate" href="対応するスマホ用ページのURL">
これで完了！