携帯サイトのDOCTYPE宣言、切り替え(PHPをSSIにて利用)

| | カテゴリ : サイト制作 , 携帯 | コメント(6) | トラックバック(0)
このエントリーをはてなブックマークに追加  

携帯サイトのDOCTYPE宣言についてで各キャリアごとにDOCTYPE宣言が異なるという記事を書きました。


ひとつのhtmlで携帯サイトを作り、
各キャリアからアクセスがあった場合、DOCTYPE宣言を切り替えるにはどうしたら良いか。


切り替えのPHPを紹介しますので、SSIは必須ですが利用してみてください。
XHTMLベースの紹介になります。(厳密に切り替える必要はないかもしれませんが。。。)


SSIをHTMLで読み出す場合、.htaccess等に
以下を追加し、PHPと同じディレクトリに置きます。


AddHandler server-parsed html
AddType application/xhtml+xml .html
AddType application/xhtml+xml .xhtm .xhtml


ユーザーエージェントの切り替え方法は、
携帯ホームページを作ろう! -ちょっと詳しいモバイルサイトの作り方-参考にしています。




■こちらをそのままコピーするか、
以下ファイルをダウンロードするかになります。

doctype.txt[右クリック・ダウンロード]
(拡張子をphpに変更してください。)


完全フリーです。著作権もありません。改変もどんどんやっちゃってください。

2008年11月11日ちょい変更。preg_matchにて分岐することにしました。

<?php
$agent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match("/DoCoMo/", $agent)) {
print("<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n");
print
("<!DOCTYPE html PUBLIC \"-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.3) 1.0//EN\" \"i-xhtml_4ja_10.dtd\">\n");
print ("<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"ja\" xml:lang=\"ja\">\n");
print ("<head>\n");
print ("<meta http-equiv=\"Content-Type\" content=\"application/xhtml+xml; charset=Shift_JIS\" />");
} elseif(preg_match("/KDDI\-/", $agent)||preg_match("/UP\.Browser/", $agent)) {
print("<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n");
print ("<!DOCTYPE html PUBLIC \"-//OPENWAVE//DTD XHTML 1.0//EN\" \"http://www.openwave.com/DTD/xhtml-basic.dtd\">\n");
print ("<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"ja\" xml:lang=\"ja\">\n");
print ("<head>\n");
print ("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Shift_JIS\" />");
} elseif(preg_match("/J\-PHONE|Vodafone|MOT\-[CV]980|SoftBank/", $agent)) {
print("<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n");
print ("<!DOCTYPE html PUBLIC \"-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN\" \"xhtml-basic10-plus.dtd\">\n");
print ("<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"ja\" xml:lang=\"ja\">\n");
print ("<head>\n");
print ("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Shift_JIS\" />");
} else {
print("<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n");
print
("<!DOCTYPE html PUBLIC \"-//WAPFORUM//DTD XHTML Mobile 1.0//EN\" \"http://www.wapforum.org/DTD/xhtml-mobile10.dtd\">\n");
print ("<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"ja\">\n");
print ("<head>\n");
print ("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Shift_JIS\" />");
}
?>




■読み出しこちらをになります。任意のフォルダで良いと思います。
PHPの場所はトップディレクトリから相対パスで指定してください。

<!--#include virtual="/php/doctype.php"-->




■htmlソースはこんな感じでしょうか。

<!--#include virtual="/php/doctype.php"-->
<meta name="keywords" content="キーワード1,キーワード2" />
<meta name="description" content="サイトの紹介文" />
<title>サイトのタイトル</title>
</head>
<body>
本文
</body>
</html>




少しでもXHTMLベースの携帯サイトが増えることを祈っています。
CHTMLベースは捨てましょう。


絵文字変換、画像縮小変換、全角半角変換などとそれぞれに処理が必要になってくるので、
わたしは「Movable Type(MT)」と「ケータイキット for Movable Type」を利用することをおススメします。

※最近流行の特定の会社へリンクしているスパムではありません。
ケータイキット for Movable Typeは携帯サイトの構築においてコストの面、機能的にも必要最低限用意されていて、自由度が高くわかりやすいからです。

トラックバック(0)

このブログ記事を参照しているブログ一覧: 携帯サイトのDOCTYPE宣言、切り替え(PHPをSSIにて利用)

このブログ記事に対するトラックバックURL: http://takot.sakura.ne.jp/mt/mt-tb.cgi/821

コメント(6)

shibaです。
先日は書き込みありがとうございました!

記事読みました。当ブログへのリンクありがとうございます。
ちょうど僕もSSIとPHPで作ろうかなぁと思っていたので、
ナイスタイミング!便利なスクリプトですね。
参考にさせていただきます。

それでは!

shibaさん

コメント有難うございます。

[Think IT]の執筆お疲れ様でした。
非常に参考になる内容でした。

携帯サイトがもっと盛り上がるよう頑張って行きましょう。

shibaさんを応援してます。

初めまして

拡張子がphpのページで、このスクリプトを使い、XHTMLと認識させるにはどうすればいいのでしょうか

拡張子がphpのページの一番上に、

を記入してアクセスしてみたのですが、XHTMLと認識されなかったためfont-sizeなどが適応されませんでした

接続環境:ドコモFOMA SH-04A


突然のご質問申し訳御座いません。
お返事頂けると幸いです。
どうぞよろしくお願い致します。

申し訳御座いません。

拡張子がphpのページの一番上に、
(A)
を記入してアクセスしてみたのですが、XHTMLと認識されなかったためfont-sizeなどが適応されませんでした

(A)の部分はdoctypeのスクリプトです。

記入したのですが、消えてしまいました。

申し訳御座いません。

toshiさん、コメント有難うございます。

PHPの場合ですが、ユーザーエージェントの切り替えは
出来ているでしょうか。各キャリアでアクセスしたときにDOCTYPE宣言が変わっていれば
PHPは正常に動いています。確認するときはシュミレーター等を利用すといいと思います。

PHPの場合はさらに、HTTPヘッダでMIMEタイプを指定すれば問題ないかと思います。
header("Content-type: application/xhtml+xml");


それと.htaccessで以下を追加すれば問題ないかと思います。
AddType application/x-httpd-php .xhtml

Kamitani79様

お返事有り難う御座います。

ご指摘頂いた、
header("Content-type: application/xhtml+xml");
を書くとXHTMLと認識されました!

有り難う御座いました^^

コメントする

Insert Emoddy tag

画像の中に見える文字を入力してください。

プロフィール

Kamitani79
ニックネーム : Kamitani79
映画鑑賞、音楽、写真、ゲーム。地元・横浜をこよなく愛する( `・∀・´)ノヨロシク
自己紹介 :
このエントリーをはてなブックマークに追加

携帯サイト

つながり

  • ブロガー(ブログ)交流空間 エディタコミュニティ
  • あわせて読みたいブログパーツ
  • フィードメーター - Kamitani79-メロンとバナナとブログ
  • SEO
    loading
Creative Commons License
このブログのライセンスは クリエイティブ・コモンズライセンス.
Powered by Movable Type 6.2.4

最近のアクション

人気のエントリー

最近の写真・画像

空の写真

www.flickr.com
This is a Flickr badge showing public photos and videos from Kamitani79. Make your own badge here.

このブログ記事について

このページは、Kamitani79が2008年10月26日 15:09に書いたブログ記事です。

ひとつ前のブログ記事は「携帯サイト制作-WEBデザインの新しいルールを購入。かなりおすすめ!」です。

次のブログ記事は「見切りの早い女 すぐにあきらめる男」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。