別ファイルでスマホ対応:phpでページごとのリダイレクトと表示切替

2012年7月19日 00:10 

  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • Yahoo!ブックマークに登録
転載記事第三弾です。この記事は僕が過去に運営していたブログ(http://seno.cc)の内容を元に、現在の環境に合わせた内容へ変更・追記した状態でご紹介しています。

2014.06.24 ページ毎のリダイレクトcanonical/alternateについて追記しました



最近、自分のサイトで初めてスマートフォンサイトを導入したのですが、僕のサイトはさくらのサーバライトプランにPHPを自分でインストールして使っているヘンテコ環境なため、.htaccessやjavascriptを使った表示切り替えが上手く動作しませんでした。
※ 当サイト(http://senoweb.jp/)とは別のサーバです。

そこで、プログラマの@ken_zookieさんにPHPだけで【リダイレクト】【PC版との表示切り替え】を出来るようにしていただきました!ありがとう!
実際に@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 ←にリダイレクトします。
※ 当サイト(http://senoweb.jp/)ではこの記事執筆時点でスマホサイトは用意していません。


設置は、ルート直下に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">


これで完了!



シェアする

  • このエントリーをはてなブックマークに追加
comments powered by Disqus

Twitter

Facebookページ


Clip to Evernote このエントリーをはてなブックマークに追加
Yahoo!ブックマークに登録

月別アーカイブ

  • セーノのtwitter
  • セーノのfacebookページ
  • セーノのmixiページ
  • セーノのwordpressブログ
  • セーノのgoogle plusページ