スマホ表示の時にPC表示切替ボタンを作る方法・手順

目的

  • スマホ表示にPC切替サイトとの切り替えボタンを表示させること
  • PCの際はボタン自体を表示させない

前提

  • ディレクトリ’sp/’内にスマホ用のサイトを作成している
  • PC版とスマホ版のhtmlファイル名が同じ

スマホの場合に初期表示時にはスマホサイト、その後は切替のボタンに応じてそれぞれの表示が継続されるようにします。
phpでセッション変数を使い、切替ボタンが押されたらブラウザを閉じるまでその情報を保持し、この機能を作っていきます。

ボタンの押された時の判定はGETのパラメータを利用します。

※今回は条件を漫然としてしまいましたが、ベストは
①スマホ表示の時
②PC表示の時
の2つで分けきることだと思います。

phpソース

<?php 
//セッションスタート
session_start();

//現在のURLを取得
$request_dir_file = $_SERVER['SCRIPT_NAME'];
//'sp/'が入っている場合は削除
$request_dir_file = str_replace( 'sp/' , '' , $request_dir_file);

//URLに使用する変数の指定
$http = 'http://';
$pc_url = 'PCサイトのURL.com'.$request_dir_file;
$sp_url = 'PCサイトのURL.com/sp'.$request_dir_file;

//リクエストしたURL(spを取らない)
$request_url = $_SERVER['HTTP_HOST'] . $_SERVER['SCRIPT_NAME'];

//ページ遷移時の初期のセッション変数を
$session_forpage = $_SESSION['forpage'];

//GETに値を持ってる時は、セッション変数に
if( $_GET['forpage'] ){
	$_SESSION['forpage'] = $_GET['forpage'];
};

//デバイスを判別する
$agent = $_SERVER["HTTP_USER_AGENT"];
if ( 
		 (strpos($agent,'iPhone') == true) 
		 ||(strpos($agent,'Android') == true) 
		 ||(strpos($agent,'Windows Phone') == true)
	 ) {
    $device = 'sp';
} else {
    $device = 'pc';
}

//条件分け (ループしないように &&以降の指定が必要)
if( $session_forpage == 'sp' && $request_url == $pc_url ){	//セッション変数にspが入っている時
	header("Location: ".$http. $sp_url);
} elseif( $session_forpage == 'pc' && $request_url == $sp_url ){	//セッション変数にpcが入っている時
	header("Location: ".$http. $pc_url);
} elseif ( !$session_forpage ){		//セッション変数になにも入っていない時(ファーストランディングの際)
	if( $device == 'sp' && $request_url == $pc_url ){	//SPデバイスの時
		header("Location: ".$http. $sp_url);
	}elseif( $device == 'pc' && $request_url == $sp_url ){	//PCデバイスの時
		header("Location: " .$http.$pc_url);
	}
};
;?>

ページソース(ボタン部)

上記のphpソースを予め読み込んでいる前提で下記を記載し切替ボタンを作成します。
id,classは動きとは関係ありません。

各ボタンのリンクURLの末尾に”?forpage=xx”とセッション変数に入れるためのGET値をつけています。

<div id="switcArea">
<?php if( $device == 'sp' ): ?><!--スマホデバイスの時-->
	<?php if( strpos($request_url,'sp/')==false):?><!--PCディレクトリの時-->
		<p><a href="../sp<?php echo $request_dir_file;?>?forpage=sp">スマホサイトを表示</a></p>
	<?php else:?><!--スマホディレクトリの時-->
		<p><a href="<?php echo $request_dir_file;?>?forpage=pc">PCサイトを表示</a></p>
	<?php endif; ?>
<?php endif; ?>
</div>

以上です。

  • このエントリーをはてなブックマークに追加
スポンサーリンク
スポンサーリンク