もうひとつの「同一URLで、端末によって違うhtml、cssを返すようにする」を紹介します。
先に「ページが呼び出された際にUA(ユーザーエージェント)を判別して表示内容を振り分けます。サーバーサイド(PHPなど)、クライアンサイド(JavaScriptなど)などを用いて対応します。」と書いてました。
わかる人には、そのままの内容なのですが、もう少し噛み砕いて説明してみます。
ウェブサーバーがcgiやssi、サーブレットなどを呼び出して実行させる際に、環境変数HTTP_USER_AGENTに端末の種類をセットして実行される。このHTTP_USER_AGENTは、「スマホ対応1」にも出てきた。.htaccessに書かれている変数である。
前掲の方式はサーバーでの直接の分岐に使われていたが、この変数の値をphp、ssi、cgi、サーブレット等で取り出して、プログラム内で分岐する。
たとえば、perlで書かれたcgiまたはssiの場合、

$HTM_AGNINF = $ENV{‘HTTP_USER_AGENT’} ;
if( $HTM_AGNINF =~ /iPod/ ||
$HTM_AGNINF =~ /iPhone/ ||
$HTM_AGNINF =~ /iPad/ ||
$HTM_AGNINF =~ /Android/) {
<<スマホ向けの処理とhtmlデータの出力>>
}
else {
<<パソコン向けの処理とhtmlデータの出力>>
}

といったように書いておく。
処理と表示を端末別に行うことができるので、かなり高度な処理をさせることができる。更に同一URLなので、グーグル対策(SEO)も施策しやすい。

スマホ向けに出力するhtmlに、

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes”>

と書いておかなくてはならないことは前稿と同じである。

実はこの環境変数、実にいろいろな値を知らせてくれるようになっている。だから細かく丁寧に端末からのアクセスに合わせて実行する内容を変えていくことができる。環境変数を調べることのできるcgiを下に記載したので、ご興味があればご自身のサーバーに設置して試してみてほしい。

#!/usr/bin/perl
#
print “Content-type: text/html; charset=EUC-JP\n\n”;
print “<HTML><HEAD><TITLE>Environment Display</TITLE></HEAD>” ;
print “<BODY>” ;
print `pwd`,”<BR>\n” ;
while( ( $key, $value) = each %ENV) {
print “$key = $value<BR>\n” ;
}
if( $ENV{“REQUEST_METHOD”} eq ‘POST’) {
read( STDIN, $queryString, $ENV{“CONTENT_LENGTH”});
print “POST DATA<BR>$queryString” ;
}
print “</BODY></HTML>” ;
exit 0 ;

スマホ対応ワードプレスセルフプラン
スマホ対応ワードプレス新規構築プラン
スマホ対応ワードプレスリニューアルプラン