あのえがちゃんこと永上さんがPCとモバイルでで同じURLでユーザーエージェントによって表示するファイルを変えるphp｜えがちゃん日記 @egachanという記事を今日書かれていました。ちょうど昨年より似たようなことをしていたので、こちらでご紹介します。
違うポイントはPHPファイルにPC用、ケータイ用のコンテンツ双方ともまとめてしまっていることです。
PCとモバイルでで同じURLでユーザーエージェントによって表示するファイルを変えるphp｜えがちゃん日記 @egachan
永上さんの方法だと別ファイルが外部ファイル化されています。
サイト構築の方法上そうしたのかもしれませんが、エントリーで書いてあるように、インデックスされる可能性が否めません。そのため重複URLが発生し、カノニカルURLを設定して対策をするということが必要となります。
ボクのやり方の場合、最初からPCとモバイル用を同一PHPファイル内にすべて書いてしまう方法を採用しています。プログラマー的にはあり得ないやり方かもしれません。
ボクの場合は下記のようにしています（キャリア判定用の関数は外部ファイルかしています）。
- データベースやAPI等、データが必要なもの処理が必要なスクリプトを冒頭にまとめて書いておく
- html冒頭、headタグ内でモバイルかPCかでif文＋振り分け関数で振り分けて、モバイル用とPC用のコンテンツを書き出します。この時にモバイルは文字コードをShift-jis、PC用はUTF-8として出力するようにしています（PHPはUTF-8です）
- bodyタグ内、つまりコンテンツ部分も同様にバイルかPCかでif文＋振り分け関数で振り分けてそれぞれのコンテンツを出力します。
現実的にはモバイルは一度バッファに書き出してから表示したりとかいろいろしています。また文字コードもいろいろと気を使っています。
具体的なサンプル的なソースは下記の通りです。
[php]<?php
require_once ‘Mobile_Common.php’;
// 開始処理
mobileStart();
$output = "アウトプット";
?>
<html>
<head>
<?php
// PCなら
if ($_mobile_carrier == CARRIER_PC ) {
?>
<!– UTF-8 –>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!–[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
<?php
} else {
//ケータイなら
// Google Analyticsのモバイル用のタグをここに入れておく
?>
<!– Shift_JIS –>
<meta http-equiv="Content-Type" content="Application/xhtml+xml; charset=Shift_JIS" />
<?php
}
?>
<title>タイトル</title>
<?php
// PCなら
if ($_mobile_carrier == CARRIER_PC ) {
?>
<script type="text/javascript">
// Google Analytics PC用のタグをここに入れておく
</script>
<?php
}
?>
</head>
<body>
<?php
// PCなら
if ($_mobile_carrier == CARRIER_PC ) {
?>
PC用のコンテンツ<br>
<br>
<?php echo $output; ?>
</body>
</html>
<?php
} else {
//ケータイなら
?>
モバイル用のコンテンツ<br>
<br>
<?php echo $output; ?>
</body>
</html>
<?php
}
mobileFinish();
?>
[/php]
少し長くなってしまい、また冗長的なところ（アクセスログ解析のタグを埋め込む部分など）整理すればもっとすっきりいくかもしません。これのいいところはコンテンツ、データや一部のHTMLタグ部分に関してはPCとモバイルで流用しつつ１ファイルにまとめられることです。ただし、違う部分にいちいち、キャリア判別しての処理が必要なので見た目も動作も重くなるかもしれません（自分が作っているサイトは零細なのでその心配はしていない・・・）。
振り分け用の関数に関しては下記書籍を参考にさせていただいて、それに手を入れています。
念のため、このファイルと振り分け用関数が入ったファイル一式をZIPでアップしておきます。
今後（ずいぶん自分でも忘れていましたが）、さらにスマートフォン向けにも振り分け出来るようにしたいと考えています。jQuery mobile等を利用すると、同じURLで存在させるのが難しいコンテンツも多くなるかもしれませんが見せ方にもよるかもしれません。
コメント