seno.ccWebデザイナーと2匹のハリネズミ

seno.cc > 日記 > PHPだけでスマートフォンサイトリダイレクトと表示切り替え

PHPだけでスマートフォンサイトリダイレクトと表示切り替え

2011
12/13
Share Button

この記事は【転載】PHPだけ!スマートフォンサイトリダイレクト&表示切り替えに転載しています。今後、技術系のブログはリンク先ブログで更新していく予定なので、そちらもよろしくお願いいたします!

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

さくらのサーバライトプランでPHPを使う方法はこちら

そこで、プログラマの@ken_zookieさんにPHPだけで【リダイレクト】と【PC版との表示切り替え】を出来るようにしていただきました!ありがとう!

  1. PHPファイルを用意
  2. 表示切り換えボタンの設置

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...

表示き切り換えボタンの設置

スマホサイトとPCサイトに、それぞれ切り替えるためのリンクを設置します。
スマホ→PC

<a href="http://sukobuto.com/?viewmode=pc">PC表示</a>

PC→スマホ

<a href="http://sukobuto.com/?viewmode=spn">スマホ表示</a>

sukobuto.com部分は自分のホームページのURLに変更してください。

これで完了!

僕と同じ環境の人がどれだけいるかは謎ですが、このやり方ならいけると思います。
もっと詳しい仕様については@ken_zookieさんに聞いてみるとよいかもしれません。

  • http://kimama2.hotcom-web.com/wordpress/ koko

    はじめまして。
    ここのサイトを参考に、リンクを押した時にPCサイトとスマフォ向けサイトの表示が、切り替わる様にしたいのですが、色々調べてもうまくいきません・・・。

    解説のとおり のソースの一番上に

    を乗せ、index.php として保存しました。

    自分のサーバーではサブディレクトリは設けてないので、
    http://aimmy-aimmy.com/test2.html
    という風になります。

    ただ解説によると
    「設置は、ルート直下にlibというディレクトリを作り、このソースを放り込むだけです。

    あとはリダイレクト元である/index.phpの一番上に

    を挿入してリダイレクトの作業は完了。」

    とあるのですが、先に挙げた を prerouting.php として保存するのでしょうか?
    それとも index.php として保存するとか・・・?

    一応その名前にしてlibフォルダの中に入れたのですが、反映されませんでした。

    理解力が足りてなくて申し訳ないのですが、上の問を実現するには、何が足りてないのでしょうか??

    • seno

      コメントありがとうございます。
      PHPのファイル名については、PC版の一番上に入れたコードの
      パスさえ合わせれば、お好きなものに変えていただいて大丈夫です。
      —————————————
      今回の件は、おそらく2つ原因?(注意点)があると思います。

      ●1
      まず最初に、この機能はPHPでの実装なので、
      リダイレクト元の拡張子は[ .php ]でなければいけません。
      貼っていただいたURLはhtmlになっているので、これが一番の原因だと思います。

      ●2
      この機能は簡単に言うと、
      ・【sample.com/(←PCサイト)】へスマホからアクセスがあれば、
      ・【sample.com/spn/(←スマホサイト)】にリダイレクトする
      というものです。

      つまり、スマホサイトは/spn/というディレクトリに、
      PC版とは別ファイルとして設置する必要がありますが、
      kokoさんの場合はサブディレクトリが無いということなので、
      【prerouting.php(lib/に設置したファイル)】でリダイレクト先URLを
      /spn/からスマホファイルに変更すればいけると思います。

      —————————————
      長々と書きましたが、/spn/のようなディレクトリを作っていただき、
      そこにスマホサイトのファイルを設置するのが一番簡単かも。。

      僕自身PHPが書けるわけではないので、分かりにくいかもしれませんが、
      やってみてください!

  • http://kimama2.hotcom-web.com/wordpress/ koko

    なるほど、index.htmlをindex.phpにリネームするんでしたか!それだけだとまだダメでしたが、他所で知った
    (function(){
    var ua = navigator.userAgent.toUpperCase();
    var url = document.location.pathname;
    var spDir = '/sm/';
    (ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1))?
    isSP() :
    isPC();
    function isSP(){
    if(url.match(spDir)){
    return false;
    }else{
    location.href = spDir;
    }
    }
    function isPC(){
    if(!url.match(spDir)){
    return false;
    }else{
    location.href = '/';
    }
    }
    }());

    ・・・というソースをuserAgent.js として保存し、
    htmlのhead内に

    というのを合わせて入れたところ、ちゃんとスマフォで見るとスマフォサイトに切り替わる様になりました。

    スマフォのファイルはsmというサブディレクトリに入れていたのですが、やはりindex.htmlをリネームしてなかったのが原因みたいでした。リネームすることを知らなかったので、教えて頂きありがとうございます!

  • http://kimama2.hotcom-web.com/wordpress/ koko

    */
    htmlのhead内に

    */
    <!–
    htmlのhead内に

    –>

    これで表示されますかね(^^;?

  • http://kimama2.hotcom-web.com/wordpress/ koko

    すいません、ブログ内にソースを記述する方法って、ご存知ですか?

    • seno

      codeタグ以外での表示方法ということでしょうか?
      このブログのような表示にするにはプラグイン等を使用することが多いですね。
      最近はプラグインも多く出回っているので、Syntax highlightingとかで検索すると色々出てくると思いますよー

  • http://kimama2.hotcom-web.com/wordpress/ koko

    返信コメントでソースコードを表示させる方法は調べてみます。
    上の問題は時間かかりそうですが、解決したら(見る人のために)簡素にご報告にきます。お返事ありがとうございます。