- 2008-05-07 (水) 9:00
- WP Theme Hacks | wordpress
日本国内の携帯電話３キャリア(ただし3Gのみ)に対応した WordPress Theme 記述の手抜き版。既存の携帯プラグインは多機能なため、自分でテーマを管理できる場合や、要求精度が低い場合には冗長すぎるので、プラグインなしでPC用と同一テンプレートで処理するには？ということで書いてみた。
アウトプットはPC版の文字コードに依存する。ME では検証していない（たぶん問題なく動く）。UTF-8 以外の文字コードで動作確認をしていないが、変更する場合は記述も変えないといけないことに注意。動作確認は、テストサイト漢字読めるかな？（QRから携帯で確認可能）にて行っている。各々の環境で確認してみて、不具合などあれば教えていただけると非常にありがたい。
<?php
$agent = $_SERVER['HTTP_USER_AGENT'];
$isPC = 1;
if(ereg("^DoCoMo", $agent)){
header("Content-Type:application/xhtml+xml");
$isPC = 0;
$xml=<<<EOF
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
EOF;
}else if(ereg("^J-PHONE|^Vodafone|^SoftBank", $agent)){
$isPC = 0;
$xml=<<<EOF
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
EOF;
}else if(ereg("^UP.Browser|^KDDI", $agent)){
$isPC = 0;
$xml=<<<EOF
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
EOF;
}else{
$xml=<<<EOF
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
EOF;
}
echo $xml;
?>
<head>
中略
<?php if ( $isPC != 1 ){ ?>
<style type=text/css">
<!--
// 携帯用にCSSを記述。利用可能範囲に注意。
//-->
</style>
<?php } ?>
漢字読めるかな？の環境まわりは次のとおり。
- WordPress 日本語版 2.5
- DB は MySQL 5
- 文字コードはUTF-8
- docomo は 705,905 など多数の機種で確認（自前ではないので正確な表示確認はしていない）
- au は W43SA INFOBAR2 などの機種で確認
- SoftBank は、911SH 920T などの機種で確認
Comments:6
- yuriko 08-05-07 (水) 14:33
-
PC 用テンプレートで携帯電話に対応させようという試みは興味深いものがあります。実は、携帯プラグインを使うよりも苦労する点が多くなると予想できます。
UTF-8 そのままだと、3G ないし WILLCOM しか見えません。なので、mova および SoftBank 6-3 シリーズ (PDC) は切り捨てとなります。したがって、J-PHONE や UP.Browser という文字列での判別は無意味です (UP.Browser はひょっとすると UTF-8 対応端末があるかもしれません)。
「携帯用CSS」ですが、ドコモは >style type=text/css”&t; に対応していませんので、おそらくスタイルシート未適用の出力になっていると思います。
あと、WILLCOM と EMOBILE が未対応ですが、わざわざ「3キャリア」に絞る理由はなぜでしょう?? その判断基準は非常に興味があるので教えてください。
- admin 08-05-07 (水) 15:07
-
> yuriko さん
コメントありがとうございます。
外部の人にコメントをいただくのは初めてなので、とてもうれしいですｗＰＣ用テンプレートで携帯電話にも対応する試みそのものは、xhtml（というかxml）としての、ワンライトマルチユースという考え方に基づいているので、それほど珍しい話ではないと思っています。
正直、追っかけ続けるならどこまでも逝っちゃう世界なので、とことんまで行こうと思うなら分離するほうが確かに楽だとは思います。実際そういうシステムのほうが多いわけですし。
今回のエントリーは、そこまでしなくてもいいや、と考えている人（ぶっちゃけウチのクライアントさんの一部のように）向けなので、携帯系プラグインや機能を開発されている方からすると、かなり邪魔くさいかもしれません。判別のラインについては、実機検証できる部分が少ないので、おっしゃっているところの検証すらできていないので恐縮ですが、あってまずいものでもないので記述しています。
このＧＷ中にphpの高速化を検証してて、regよりstrposを使ったほうが早いらしい、ということに気がついた程度ですし、こうじゃなきゃダメだぜ、というところは、ぼちぼち見ていかないといけないレベルです。携帯用CSSについて、docomoが外部スタイルシートに対応していないのは理解しているので、実際には、function.php に専用の関数を用意しており、docomoの時だけ、インラインスタイルシートを吐き出すように準備しています。（今は携帯の時に全部吐いちゃってるんですけど。）
イメージとしては、smartyプラグインや、フィルタチェインのようなもの、です。
なので、docomo携帯でみても、ある程度見えてると思います。
うちのテスト機はSO903iですが、大丈夫なので。最後のウィルコムとイーモバイルに未対応、という点ですが、テスト機がないんですｗ
判断基準として問われるとかなり微妙なのですが、手元にないことまでフォローできない、というのが正直なところです。
（対応する気なら条件を追加すればいいだけ、なのはお分かりいただけると思います。）
むしろ、そういったところをフォローしなければいけない場合は、プラグインを利用する必要があるし、そうじゃなければWPテンプレートでもある程度のことはできるんだよ、というのを見てもらう、のがこのエントリーの趣旨です。でも一番の収穫は、このようにフィードバックをいただくことで、新しい発見をしたり、見識を広げるきっかけができることだな、と思っています。
本当にコメントありがとうございます。
今後ともいろいろご意見いただけるとうれしいです。 - yuriko 08-05-07 (水) 22:46
-
ＰＣ用テンプレートで携帯電話にも対応する試みそのものは、xhtml（というかxml）としての、ワンライトマルチユースという考え方に基づいているので、それほど珍しい話ではないと思っています。
確かに、XHTML+CSS 自体がそういう思想を持っていますよね。ただ、日本の携帯電話がちょっと特殊なので、それを実践することは少ないのではないかと思っています。最近では 3G 端末が普及してきたので、3G 限定とするならば、そこそこいけるかもと思います。
判別のラインについては、実機検証できる部分が少ないので、おっしゃっているところの検証すらできていないので恐縮ですが、あってまずいものでもないので記述しています。
おそらく実機では、文字化けして何がなんだか分からない状態になるか、コンテンツの容量が大きすぎて「表示できません」という画面になるかどちらかでしょう。判別させるならば「あなたの端末には対応していません」という表示をさせる手があるかと思います。
このＧＷ中にphpの高速化を検証してて、regよりstrposを使ったほうが早いらしい、ということに気がついた程度ですし、こうじゃなきゃダメだぜ、というところは、ぼちぼち見ていかないといけないレベルです。
PHP では ereg 系は基本的には使わない方がいいです。バイナリーセーフじゃないので、場合によってはセキュリティーホールになり得ます (今回の場合は問題ないですが)。正規表現を使うなら preg 系の方が推奨されています。ただ、strpos を数回使うのと、正規表現で1回で判定させるのとでは、どちらが速いかはベンチマークしないと分からないと思います。
ウィルコムとイー・モバイルは、テスト機がないというのは残念ですね。イーモバはともかく、ウィルコムは結構なユーザーが存在するので、サイトの想定読者によっては、準備した方がいいと思います。
ドコモ CSS については、理解しておられるのなら大丈夫ですね。ここが非常にガンで、XHTML+CSS とはいかないところが難儀なので。
- admin 08-05-08 (木) 0:54
-
> yuriko さん
実践という点では、MTのようにファイルを作成しないWPのようなシステムでは、普通にやってそうですけど。。。
実際うちのクライアントさんへの（WPではない、普通に開発した）システムでは、３Ｇ限定でネゴ取っちゃってますし、テンプレートシステムなので１つしかソースは書かないです。文字コードに関しては、UTF-8が文字化けるような端末は対象外ということで。。。ｗ
３Ｇのみでネゴの取れないお客さんに納入するシステムならちょっと考えますが、WP単体でなんとかしようと思ってもめんどくさいだけですし。
ここはアレですね、これからWebサイトを作るときに、Netscape や Mac IE をターゲットにするの？って話に似てると思います。
一般的な利用割合とシステム（サイト）の利用状況から鑑みて、そこにどこまで投資（作業コスト、テスト工数など）するかって話だと思うので。イーモバイルとウィルコムについては、、、個人的に持っていない、ということも含めて、当面想定外ですｗ
アドエスが欲しかったりするのですが、そんな贅沢は許されないですし、うちのクライアントさんたちもソコを想定範囲に入れてくれないので。。。ｗ - yuriko 08-05-09 (金) 11:04
-
ここはアレですね、これからWebサイトを作るときに、Netscape や Mac IE をターゲットにするの？って話に似てると思います。
うーん。それは話が違うと思います。Netscape や Mac IE は「サポートが終了したソフト」ですが、PDC 端末はまだサービスが継続していますから。サポートが終了したものなら当然見捨てていいでしょうが、PDC はそれとは違います。例え話を出すなら「Windows 限定にしてしまって、Mac/Linux を切るの?」というレベルになるでしょうか。
Mac を切るとか、PDC を切るとかは、ポリシーの違いなので、是非を問うことは避けておきます。ただ、header.php のサンプルとして提示されるのであれば「3キャリアの 3G のみ対応」ということを明示された方がいいでしょうか。適用可能条件が分かりにくいと、使いたい人にとって不便ですから。
ええと、ウィルコムの試験をするのにアドエスは不適切です。通常の音声端末 (WX シリーズがよい) を用意しなければなりません。Windows Mobile スマートフォンは、ウィルコムの通常の音声端末とは閲覧できるサイトが違いますので。
- admin 08-05-09 (金) 11:30
-
なるほど。例えの範囲がよくなかったですね。
3Gのみ、は冒頭部分に追加してみました。
そもそもこんな辺境のサイト（ｗ）を見てくれる人は少ないですし、ましてやサンプルを使ってみようなんて人はそうそういないとか、タカをくくっちゃってますがｗスマートフォンに関しても、考えてみればその通りですね。
やっぱり（システム屋の）ビジネス的には、顧客のビジネスビジョンと費用対効果を考えて、適用範囲を提案していかなきゃいけないなと思いました。
参考になるお話をありがとうございました！
Trackbacks:0
- Trackback URL for this entry
- http://officel.biz/wordpress/wordpress-theme-hack-on-headerphp-vol02.htm/trackback
- Listed below are links to weblogs that reference
- [WPTH vol.02] 携帯３キャリアに対応した header.php のメモ from Office L