https://webcode-lab.com/attic/

Coding Rules・SEO施策 チェックサイト

  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
HOME > Common Rules > 自動転送ルール

スマートフォンサイト自動転送ルール


サイトへ、スマートフォン・タブレット・モバイルからアクセスがあった場合の、「スマートフォンサイトへ自動転送プログラム」です。

全サイト必須設置をお願いします。

「CODE」ボタンをクリックすると参考コードを参照できます。


スマートフォン自動転送プログラム (ua_switch.php)設置


1. 自動転送プログラムの設置
スマートフォン自動転送プログラムは、下記コード内容で「ua_switch.php」を作成し、「/_common/php/」ディレクトリの中に置く



<?php
session_start();
/* ===============================================
# PC・スマホ切り分け
# top.htmlの前に設置
=============================================== */

$ua = $_SERVER['HTTP_USER_AGENT'];//デバイス情報取得
$pathData = pathinfo($_SERVER['SCRIPT_FILENAME']);
$filename = $pathData["filename"];
$list = explode( "/",$_SERVER['SCRIPT_NAME']);
$directory_name = $list[ count( $list ) - 2 ];

//スマホ・iPod・Androidアクセス
if ((strpos($ua,'iPhone') !== false)|| (strpos($ua,'Android') !== false && strpos($ua,'Mobile') !== false)|| (strpos($ua, 'Windows Phone') !== false)){


	// PCモード
	if($_GET['dsp'] == "pc" || $_SESSION['dsp'] == "pc"){
			$_SESSION['dsp'] = "pc";
		if(!empty($directory_name) || (empty($directory_name) && $filename <> 'index')){//トップページ以外にアクセスの場合(転送しない)
			$_SESSION['top_num'] = "1";
		}elseif($_SESSION['top_num'] == "1"){//トップページに2回目のアクセス(転送)
			$_SESSION['dsp'] = "";
			$_SESSION['top_num'] = "";
			header("Location:/sm/");
		}

	// PCモード以外(転送)
	}else{
		//アクセスしたPCディレクトリ(またはページ名)からスマホの同名ディレクトリ名を取得
		if(!empty($directory_name)){//ディレクトリ構造サイトの場合(トップページ以外)
			$callurl = "/sm/".$directory_name."/";
		}else{//旧ディレクトリ構造なしサイトの場合&トップページ
			if($filename=="index"){//トップページの場合
				$callurl = "/sm/";
			}else{//トップページ以外の場合
				$callurl = "/sm/".$filename."/";
				if(!is_dir($_SERVER['DOCUMENT_ROOT'].$callurl)){//存在しない場合
					$callurl = "/sm/";
				}
			}
		}
		//ディレクトリが存在するか判定 存在すれば該当ページ(OR SMトップページ)へ転送、存在しなければ転送しない
		if(is_dir($_SERVER['DOCUMENT_ROOT'].$callurl)){//存在する場合
			//スマホ該当ページへ転送
			$_SESSION['dsp'] = "";
			$_SESSION['top_num'] = "";
			header("Location:".$callurl);
		}
	}

}



2. PCサイトでのインクルード
PCサイトの全ページに「スマートフォン自動転送プログラム」をインクルードする
各ページでのインクルード設置場所は、文頭「文字コード宣言」の後とする
「TOP宣言」参照)


3. スマートフォンサイトでの「PCビュー」リンク設定

「PCビュー」へのリンクボタンに貼るリンクには必ず「?dsp=pc」とパラメータを付ける
<スマホ各ページスマホコーディング例>
タグ
<a href="/about/?dsp=pc"><img src="/_common/image/btn/topc.jpg" alt="〇〇" width="50%"></a>

「PCビュー」リンク先
 スマートフォンサイトでの「PCビュー」リンク先は、PCサイトのトップページに飛ばさず、
 できるだけ該当のPCサイト下層ページにリンクを貼る(Google推奨)

「PCビュー」リンク先ディレクトリ名の変数利用(PHP利用)
 「PCビュー」リンクタグが共有パーツの「footer.html」に含まれる場合、
 下記のとおりphpの変数利用で対処する

<スマホ各ページ>
タグ
※各ページ上部で、ディレクトリ名(/付き)を変数に代入
※(TOPページディレクトリは、"/")
<?php
$page_name = "about/";
?>

<スマホ共有パーツ「footer.html」で下記のようにリンクを貼る>
タグ
<a href="/<?=$page_name?>?dsp=pc">PCサイトを見る</a>

   


<SMサイト 各ページHTML>

<?php //各ページ上部で、ディレクトリ名(/付き)を変数に代入 例)about/index.phpの場合 $page_name = "about/"; ?> <html> <body> ・・・ページ本文HTML・・・ <?php //footer.htmlインクルード include("../_common/tag/footer.html"); //このfooter.html内で変数を利用する(下記のとおり) ?> </body> </html>
<SMサイト footer.html>
「PCサイトを見る」リンクの「ページ名」部分に、上で設定した変数($page_name)を利用する  <記述方法> <a href="/<?=$page_name?>?dsp=pc">PCサイトを見る</a>  <実際にブラウザに吐き出されるソース> <a href="/about/?dsp=pc">PCサイトを見る</a>  それぞれ各ページ上部で、$page_name = "○○/";と設定したページ名が代入される ※万が一上部で設定し忘れても、トップページには最低限飛ぶのでリスク回避○。 (゛about/゛の部分が消えてトップページURLになる)


※1. の「設置」と2.の「インクルード」は、スマートフォンサイトがなくても行う
※プログラムの動きや、細かい設定要件は下記「サイト要件」参照


転送の仕組み


toスマホチャート

pcviewチャート
上記転送のサイト要件
※スマートフォンサイトが、「/sm/」ディレクトリ直下にあること
※スマートフォンサイト(/sm/)がない場合、転送はされない
※PCサイトの構造は、ディレクトリ構造・root直下ファイル構造、どちらでもプログラムは動く
※ただし、PCサイトとSMサイトのディレクトリ名(ファイル名)を同名にすること
 例:PCサイト下層URLが「/about/」の場合、SMサイト同ページURLは「/sm/about/」とする
 PCサイト下層URLが「/about.html」の場合、SMサイト同ページURLは「/sm/about/」とする
※SMサイトの「PCビュー」へのリンクURLに「?dsp=pc」パラメータが付いていること
※2階層以上の深いディレクトリ構造では、該当ページを特定できないのでトップページへ転送される

転送されるデバイスの種類
PC・タブレットデバイスは転送しない(PCサイト閲覧)
スマートフォン・モバイルデバイスは自動転送(SMサイト閲覧)
※デバイスは、ユーザーエージェントにより判別 上記code参照
ページの先頭へ


次回までにお願いする課題

  • 課題1. 知っているHTML5のマーキング情報を、みなさんへ共有しましょう。
  • 課題2. 共有CSS・共有JSを構築しましょう。提案をお待ちしています。
  • 課題3. 今後サイトコーディングで必要になるプラグインを教えてください。
  • 課題4. 分からないことなどあれば聞いてください。
12/04勉強会