Flash プロの現場の仕事術 CS5/CS4/CS3対応
体系的に学ぶ 安全なWebアプリケーションの作り方
ケータイHTML ポケットリファレンス
携帯サイト年鑑2010
PHP×携帯サイト デベロッパーズバイブル
携帯サイトSEO&SEM向上テクニック
ブックレビュー：ユーザー視点でつくる 携帯サイト制作の基礎知識
札幌のソーシャルゲーム開発なら
ケータイ3キャリアに対応するためのDOCTYPE宣言について
Tweet
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>
みなさんはどのような対応を取っているのか知りたいところです。
よろしければフォーラムやコメント欄からご投稿お願いします。
関連：
- ドコモ端末でCSSを利用するには
- 3キャリア対応HTMLの作成について実例をあげて解説している記事「モバゲーのような携帯サイトを作るための12のTips」
- ケータイフォームでの入力モードの仕様について詳細にまとめられた「携帯XHTMLでの入力モードのまとめと、ちょっとしたハマりどころについて」
10月 15th, 2009 at 10:35:22
[…] ケータイ3キャリアに対応するためのDOCTYPE宣言について | ke-tai.org ケータイ3キャリアに対応するためのDOCTYPE宣言について | ke-tai.org […]
10月 15th, 2009 at 11:37:55
[…] ケータイ3キャリアに対応するためのDOCTYPE宣言について | ke-tai.org 10月.15, 2009 in iPhone, ガジェット ケータイ3キャリアに対応するためのDOCTYPE宣言について | ke-tai.org […]
10月 15th, 2009 at 23:47:02
[…] ケータイ3キャリアに対応するためのDOCTYPE宣言について こちらは携帯サイト作成に参考になりますね。 […]
10月 16th, 2009 at 0:58:14
[…] Posted by admin on 10/16/09 • Categorized as hatena ケータイ3キャリアに対応するためのDOCTYPE宣言について | ke-tai.org […]
10月 16th, 2009 at 7:01:43
[…] ケータイ3キャリアに対応するためのDOCTYPE宣言について | ke-tai.org (tags: development mobile) […]
10月 17th, 2009 at 9:07:03
[…] ケータイ3キャリアに対応するためのDOCTYPE宣言について | ke-tai.org […]
10月 18th, 2009 at 7:24:01
[…] ケータイ3キャリアに対応するためのDOCTYPE宣言について […]
10月 18th, 2009 at 23:55:47
[…] ケータイ3キャリアに対応するためのDOCTYPE宣言について | ke-tai.org […]
2月 15th, 2010 at 17:48:21
[…] http://ke-tai.org/blog/2009/10/14/doctype/ http://ke-tai.org/forum/comments.php?DiscussionID=8&Focus=354 […]
9月 24th, 2010 at 6:22:05
[…] ke-tai.orgの人 参考：http://ke-tai.org/blog/2009/10/14/doctype/ <?xml version=”1.0″ encoding=”Shift_JIS”?> <!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/ […]
6月 28th, 2011 at 10:10:14
[…] ケータイ3キャリアに対応するためのDOCTYPE宣言について | ke-tai….de group (ja)//dtd xhtml i-xhtml(locale/ver.=ja/[iモードxhtmlバージョン]) 1.0//en" "i-xhtml_4ja_10.dtd"> 例: iモード対応xhtml 1 […]