XHTMLを使ってケータイサイトを作成する際には、HTMLの冒頭にDOCTYPE宣言を記述する必要があります。
先日からこの「DOCTYPE宣言」に関するブログエントリーが人気を集めているようなので、当サイトも触れてみようと思います。
下記2つのサイトでは、どちらもif文でユーザエージェントを判定して、DOCTYPEを出し分けるという処理を紹介しています。
→ ma-san.org 携帯サイトをHTMLではなくPHPで組むときのDOCTYPE分岐方法 [ma-san.org]
→ ある人のぼやき 携帯サイトのDOCTYPE分岐方法 [d.hatena.ne.jp]
DOCTYPE宣言とは
DOCTYPE宣言とは以下に続くHTMLが、どのようなバージョンで記述されているかを宣言するものです。
ブラウザ側はこの宣言を解釈して、記述内容に合わせた細かい表示方法を調整したりしています。
各キャリア公式サイトからDOCTYPE宣言の書き方をおさらいしてみましょう。
【docomo】
→ NTTdocomo 作ろうiモードコンテンツ iモード対応XHTMLのバージョン [nttdocomo.co.jp]
iモード対応XHTMLのバージョンに合わせて記述します
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/[iモードXHTMLバージョン]) 1.0//EN" "i-xhtml_4ja_10.dtd">
例: iモード対応XHTML 1.0用のDOCTYPE
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd">
【au】
→ KDDI au: コンテンツの制作 > XHTML Basicの基本 [au.kddi.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
【softbank】
→ ソフトバンク Mobile Creation XHTMLとCSSによる携帯サイト制作 [creation.mb.softbank.jp]
<!DOCTYPE html PUBLIC "-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN" "xhtml-basic10-plus.dtd">
出し分けする場合にはどうするか
各キャリアや、iモードバージョンなどで宣言が異なっているため、ユーザエージェントで判定し、出し分ける方法が一般的です。
上記のサイトのようにif文でユーザエージェントを判定する方法もありますが、PHPであればPEARの「Net_UserAgent_Mobile」などのライブラリを使う方法がおススメです。
キャリアや機種が簡単に取得できます。
他の言語を使った場合でも、大抵の言語には同様のライブラリがあるでしょう。
→ PEAR Package :: Net_UserAgent_Mobile [pear.php.net]
そもそも本当に出し分けが必要なのか?
しかしながら、本当にDOCTYPEの出しわけが必要なのでしょうか?
以前軽くテストをしてみたところ、DOCTYPEの変更によって表示に違いがあることは確認できず、疑問に思ってフォーラムで聞いてみました。
→ ke-tai.org Forum – XHTMLのDOCTYPEについて [ke-tai.org]
すると皆さん、出し分けは特に行っていないという返答が帰ってきました。
結論
ケータイブラウザが高度化するにつれ、DOCTYPEによる表示調整を行わなければならなくなるでしょう。
しかしながら今のところ特に苦労して出し分けを行う必要は無いと思っているのですがいかがでしょうか?
もちろんXTHMLを使用する以上、なんらかのDOCTYPE宣言が必要になります。
私はモバイル用の標準的な例として、「XHTML Mobile Profile 1.0」のDOCTYPE宣言を使うことが多いです。
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
参考:
→ w3c XHTML Basic [www.w3.org]
ドコモはDOCTYPE宣言がないとXHTML表記が使えなかったりしますが、上記の宣言で大丈夫なようです。
3キャリア共通ページのサンプルHTMLは次の通りです。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
</head>
<body>
3キャリア共通ページのサンプル<br />
</body>
</html>
みなさんはどのような対応を取っているのか知りたいところです。
よろしければフォーラムやコメント欄からご投稿お願いします。
関連: