PCと携帯の兼用サイトを作成
(2008.07.23)
論より証拠。サイト「
アウターは新品同様」をPC/携帯でご覧ください。
Linux、Apache、Perlを使ってPCと携帯を両方サポートする事ができました。携帯はNTT DoCoMo/au by KDDI/SoftBankの全キャリア(え、まだあるの?)、そして普通のPCです。
LinuxはFedora 8なのでSELinux(NSA謹製のカーネル)入り。特にファイル保護が従来のUnixパーミッション0x777に加えて別世界の機構が入っています。これがApacheの実行でホームページのHTMLファイルの参照までガードが掛かっていたりします。CGIになると更に保護がキツいのでSELinuxの流儀で解除が必要です。実は私のPerlスクリプトでIPCのセマフォを利用していて、もう降参です(スクリプト実行の度に警告ログが出る)。スクリプトにIPC使用許可を与える方法がわからないんです(とほほ)。
Apacheのバージョンは2.2.6で/etc/httpd/conf/httpd.confの他に/etc/httpd/conf.d/*.confを全部読み込むようになっています。httpd.confに手を入れなくても、例えば(olfaの場合)、/etc/httpd/conf.d/olfa.confを用意するとApache起動時にolfa.confを読み込んでhttpd.confに補足してくれます。ウレシいのがhttpd.confに「olfa.conf」を指定していなくても良い点。確か/etc/httpd/conf.d/*.confの指定はあったかな?この設定でhttp://olfa.dip.jp/tougechari/index.htmlにアクセスすると、/home/olfa/www/html/tougechari/virtual/virtual.cgiが呼ばれます。
<Directory /home/olfa/www/html/tougechari/>
Options -Indexes
</Directory>
<Directory /home/olfa/www/html/tougechari/virtual/>
Options +ExecCGI
</Directory>
RewriteEngine On
RewriteCond %{REQUEST_URI} .html
RewriteRule ^/tougechari/(.*)$ /tougechari/virtual/virtual.cgi [L]
CGIのスクリプトvirtual.cgiの中でPC/携帯のキャリア識別をします。識別結果はPC/docomo/auの3つに分類します。SoftBankはauにまとめました。
my $ua = $ENV{HTTP_USER_AGENT};
if (!defined($ua))
{
$ua = '';
}
my $sel_ua = 'pc';
if ($ua =~ /DoCoMo/)
{
$sel_ua = 'docomo';
}
if ($ua =~ /UP\.Browser/)
{
$sel_ua = 'au';
}
if ($ua =~ /SoftBank|J\-PHONE|Vodafone|MOT|J\-EMULATOR|Vemulator|Semulator/)
{
$sel_ua = 'au';
}
次にアクセスしてきたURI(又はURL)を取得。未定義のときはホームのindex.htmlに振り替えます。それと携帯によってはhtmlでもCGIのようにクエリ文字列を付けてくるので削除します。
my $uri = $ENV{REQUEST_URI};
if (!defined($uri))
{
$uri = '/tougechari/index.html';
}
$uri =~ s#^/tougechari/##;
$uri =~ s#\?.*$##;
文字セットとエンコード形式の指定を設定します。au/SoftBankはEUCが通るけどDoCoMoは通らないのでSJISにします。あと入力フォームのエンコード形式はDoCoMoが認めていないので設定を消します。例えば、こんな感じで変数「$enctype」を入れて使います。
<form method="POST" action="entry_2.html" $enctype>
my $charset = 'EUC-JP';
my $enctype = 'enctype="application/x-www-form-urlencoded"';
if ('docomo' eq $sel_ua)
{
$charset = 'SHIFT_JIS';
$enctype = '';
}
httpヘッダ(と言ったっけ?)で文字セットを指定、auの場合には、規定の2行を入れます。この2行、SoftBankに使っても問題ありませんでした。
my @outhtml = ();
push(@outhtml, <<EOF);
Content-type: text/html; charset=$charset
EOF
if ('au' eq $sel_ua)
{
push(@outhtml, <<'EOF');
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd">
EOF
}
PC/au(SoftBank)/DoCoMoごとに振り分けます。ただしDoCoMoはauと実質同じでEUCをSJISに変換します。
if ('pc' eq $sel_ua)
{
push(@outhtml, dispatch_pc($uri));
}
elsif ('au' eq $sel_ua)
{
push(@outhtml, dispatch_au($uri));
}
elsif ('docomo' eq $sel_ua)
{
push(@outhtml, dispatch_au($uri));
foreach $linebuff (@outhtml)
{
$linebuff = jcode::sjis($linebuff);
}
}
htmlの出力。アクセスしてきたURIが何であっても、ここで出力したものがURIの結果となるのが興味深いところ。
foreach $linebuff (@outhtml)
{
print $linebuff . "\n";
}
exit;
最後に全キャリア共通で使うHTML作成のための注意を。
- アルファベットは小文字
- タグtitleは無効/有効どちらもあるので本文の頭にもタイトルを書く
- タグbody〜/bodyの内側にタグdiv〜/divを入れて<body><div>〜</div></body>
- タグform〜/formの内側にタグdiv〜/divを入れて<form><div>〜</div></form>
- タグol、ulを使わない。olの場合、数字の後に記号が入ったり入らなかったり色々
- 改行はタグbr、しかも開始〜終了で閉じる必要があるため<br />のみの1個に
- タグpは使わない。改行の仕方が色々
