時代はレスポンシブWEBデザイン(コンテンツは一つでデバイス幅によってレイアウトを変える)ですが、今あえて、コンテンツをPC用とスマホ用と二つ設けて、自動的に切り替えたい(リダイレクト)という要望も根強くあります。
しかも、スマホサイトには[PCサイトを見る]というボタンが付いており、スマホサイトに自動的にリダイレクトさせるという機能と矛盾する拡張機能がついているという場合です。
リダイレクトサンプル
デモを設けましたので、とりあえずPCとスマホのそれぞれからクリックしてみてください。
デバイス切り替えサイトのデモ
PC用URL(http://yahss.net/demo/useragent/pc)
括弧内URL名から分かるとおり、PCサイトへのリンクです。
リンクをクリックするとPCはこのままPCサイトへ、しかしスマホならスマホサイトにリダイレクトします。
しかし、逆にスマホ用URLの場合は
スマホ用URL(http://yahss.net/demo/useragent/smart)
PCはPCサイトへリダイレクト、スマホならそのままスマホサイトを表示、といことになります。
リダイレクトの実装
上記のサンプルのファイル構造は
pc index.php smart index.php agent.php
それぞれのページ(index.php)のファイルの先頭は次のようになっています。
<?php include '../agent.php'; ?>
意味は「ファイルを読み込む時にその最初にagent.phpを読み込みなさい」ということです。
agent.php の内容は
<?php session_start(); #リダイレクト先の指定(wwwは付けない) $http = 'http://'; $lacationSmt = 'yahss.net/demo/useragent/smart/index.php'; $lacationPC = 'yahss.net/demo/useragent/pc/index.php'; #リクエストしたURL $requestedURL = $_SERVER["HTTP_HOST"] . $_SERVER['SCRIPT_NAME']; #wwwのありなし判定 if ( strpos($requestedURL,'www') === 0 ) { $lacationSmt = 'www.' . $lacationSmt; $lacationPC = 'www.' . $lacationPC; } #query取得 $smart = $_GET[ 'smart' ]; #セッション取得・設定 if ($smart == 'smart') { $_SESSION[ 'smart' ] = 'smart'; } elseif ($smart == 'PC') { $_SESSION[ 'smart' ] = 'PC'; } #user_agent取得(デバイス判別) $agent = $_SERVER["HTTP_USER_AGENT"]; if ( (strpos($agent,'iPhone')!==false) || (strpos($agent,'Android')!==false) ) { $device = 'smart'; } else { $device = 'PC'; } #リダイレクト実行 if ( $device == 'PC' && $requestedURL == $lacationSmt ) { header("Location: ". $http . $lacationPC); } elseif ( $device == 'smart' && $_SESSION[ 'smart' ] != 'PC' && $requestedURL == $lacationPC ) { header("Location: ". $http . $lacationSmt); } ?>
ざっくり解説すると
30行目 $_SERVER[“HTTP_USER_AGENT”] ここでデバイス情報を取得し
参照しているURLによって、デバイスごとにリダイレクト先を切り替えています。
PC用index.phpの内容は:
<h1>デバイス切り替えデモ</h1> <p>これはPCサイトのデモです。</p> <?php if( $device == 'smart' ): ?> <p><a href="../smart/index.php">スマホサイトを表示</a><br /> このリンクはiphoneかandroid端末で参照している時にのみ表示され、PCでは表示されません。</p> <?php endif ?>
スマホ用index.phpの内容は:
<h1>デバイス切り替えデモ</h1> <p>これはスマホサイトのデモです。</p> <?php if( $device == 'smart' ): ?> <p><a href="../pc/index.php?smart=PC">PCサイトを表示</a><br /> このリンクはiphoneかandroid端末で参照している時にのみ表示され、PCでは表示されません。</p> <?php endif ?>
スマホはスマホサイトにリダイレクトするけどPCサイトも見たい
こんなわがままなご要望は・・・
上記、スマホ用index.phpには「PCサイトを表示」というリンクがあることに気付かれることでしょう。
そのURLには ?smart=PC というパラメータが付加されており、スマホからリンクをクリックした時は、
- agent.phpの20行目 $_GET[ ‘smart’ ] で情報を取得して
- 22行目以降でsession情報に保持させています
これにより、スマホで参照する時のみ、デフォルトではスマホサイトを表示させ、「PCサイトを表示」をクリックしたらPCサイトも参照できるということになります。
もう少しスマートに記述できるような気もしますが・・・。
ちなみに今回掲載したコードは、iphone と android にのみ対応しています。
DoCoMo, J-PHONE, Vodafone, SoftBank, WILLCOM
このあたりの文字列を使ってもう少し頭をひねればガラ携にも対応できますね。
おかしな点にきづかれましたらぜひお気軽にご指摘くださいますようお願いいたします。