WebTecNote

[XHTML] 携帯サイト（ガラケー）用 XHTML仕様まとめ

Tenderfeel

Docomo、au、SoftbankのXHTML仕様をざっくりまとめてみた。最後にiPhoneも追加。
XHTMLに対応している携帯は所謂第３次世代の機種です。
やっぱり三社三様だけどXHTML BasicやXHTML Mobile Profileに準拠しとけば全社に対応が可能な様子。

XHTML Basic　» Kanzakiさんの解説
XHTML Basic　» W3C仕様書

XHTML Mobile Profile » Openwaveのリファレンス

  Docomo au Softbank
表示対応機種 FOMAシリーズ
※機種によりimode-XHTMLの対応バージョンが異なる
（FOMAでも古い機種は未対応の様子）		 WAP2.0ブラウザ搭載端末 3GC型（SoftBank 3G series）
※頭文字が7-9の機種
文字エンコード Shift-JIS・UTF-8 Shift-JIS・UTF-8 Shift-JIS・EUC-JP・ISO-2022-JP・UTF-8
※UTF-8以外の文字コードはゲートウェイにてShift_JISに変換される
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">

(Locale/Ver.=ja/1.0)の数字がバージョンによって変化。
1.0、1.1、2.0、2.1、2.2、2.3

<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd">

※端末はDTDのチェックをしない

 <!DOCTYPE html PUBLIC "-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN"
"xhtml-basic10-plus.dtd">
対応画像フォーマット

iモードブラウザ1.0(XHTML)：JPG・GIF
iモードブラウザ2.0：JPEG・GIF・BMP

 JPEG・PNG・GIF
※256色インデックス以上は減色表示		 JPEG・PNG・GIF
最大ファイルサイズ imodeブラウザ1.0：100KB
imodeブラウザ2.0：500kb 		9KB（画像データ等除く）
画像込みではDocomoとほぼ同等		 300kb
絵文字 公式一覧ページへ
code.cside.com		 一覧ページへ 一覧ページへ
IPアドレス帯域 一覧ページへ 一覧ページへ 一覧ページへ
ユーザーエージェント 一覧ページへ
iモードブラウザ1.0機種の一覧ページへ
iモードブラウザ2.0機種の一覧ページへ		 一覧ページへ 一覧ページへ

Docomoとauは同じバイナリコードで似たような絵文字が表示される。
参考：全キャリア絵文字比較表（絵文字を使いこなして見るためのページ）

公式のシュミレーターはXHTMLに微妙に非対応らしく、仕様書で可とされている要素や属性でエラーが発生するようだ。

CSSへの対応

Docomo

iモードブラウザ1.0

  • インラインのみに対応　→　style属性しか読まないという意味
  • 内部参照対応（style要素による記述）は以下に限る
    • リンク擬似クラスa:link
    • 動的擬似クラスa:focus
    • リンク擬似クラスa:visited

    • iモードブラウザ2.0　» 公式解説
    Styleタグに記述されたCSSや外部参照も対応。対応セレクタはSoftbankと同じ（下記表参照）

    <style type="text/css">
<!&#91;CDATA&#91;
&#93;&#93;>
</style>

    au

    <style type="text/css">
</style>

    仕様書が無くてよくわからない。

    Softbank

    styleの他にLink要素による外部参照にも対応。

    <link href="style.css" rel="stylesheet" type="text/css" />
    対応セレクタ
    パターン 種類 意味
    * 汎用セレクタ すべての要素にマッチ
    E タイプセレクタ 名称がEの要素にマッチ
    E F 子孫セレクタ E要素の子孫であるF要素にマッチ
    E > F 子セレクタ E要素の子要素であるF要素にマッチ
    E.foo クラスセレクタ class属性値が"foo"であるE要素にマッチ
    E#myid IDセレクタ ID属性値が"myid"であるE要素にマッチ
    E:link
    E:visited    		 リンク擬似クラスセレクタ アンカーのリンク先をまだアクセスしていない、あるいはアクセス済みであるE要素にマッチ

    各キャリアの最小サイト構成サンプルと備考

    Docomo

    <?xml version="1.0" encoding="Shift_JIS"?>
<!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">
<head>
	<meta http-equiv="content-type" content="application/xhtml+xml;charset=Shift_JIS" />
	<title>ページタイトル</title>
	<style type="text/css">
	<!&#91;CDATA&#91;
	&#93;&#93;>
	</style> 
</head>
<body>
	<!--Contents-->
</body>
</html>

    au

    <?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN"
 "http://www.openwave.com/DTD/xhtml-basic.dtd">
<head>
	<title>ページタイトル</title>
</head>
<body>
	<!--Contents-->
</body>
</html>

    上記は公式で推奨されているものの例。他に以下の文書型が使用可能である。
    XHTML Basic 1.0

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

    XHTML Mobile Profile1.0

    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
 "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

    WML2.0

    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD WML 2.0//EN"
 "http://www.wapforum.org/DTD/wml20.dtd">

    WML1.3

    <!DOCTYPE wml PUBLIC "-//OPENWAVE.COM//DTD WML 1.3//EN"
 "http://www.openwave.com/dtd/wml13.dtd">

    Softbank

    入れ子や親と子の関係性なんかの仕様が厳しい。

    一部機種には以下の制限もある

    <?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN"
 "xhtml-basic10-plus.dtd">
<head>
	<title>ページタイトル</title>
</head>
<body>
	<!--Contents-->
</body>
</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" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml;charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Page Title</title>
<meta name="Description" content="ページの簡単な説明" />
<meta name="Keywords" content="keyword,keyword,keyword" />
<!--imodeブラウザ1.0機種未対応-->
<link href="style.css" rel="stylesheet" type="text/css" />
<!--ここまで-->
<style type="text/css">
a:link{color:#0000FF;}
a:focus{color:#0099CC}
a:visited{color:#660099}
</style>
</head>
<body>
</body>
</html>

    機種によってDOCTYPEを変更する例

    <?php $agent = $_SERVER&#91;'HTTP_USER_AGENT'&#93;; 
if(ereg("^DoCoMo", $agent)){ ?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.0) 1.0//EN" "i-xhtml_4ja_10.dtd">
<?php }else if(ereg("^Vodafone|^SoftBank", $agent)){ ?>
<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd"> 
<?php }else if(ereg("^UP.Browser|^KDDI", $agent)){ ?>
<!DOCTYPE html PUBLIC "-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN" "xhtml-basic10-plus.dtd"> 
<?php }else{
<?php } ?>

    PHPはUTF-8の選択が妥当だが、文字コードUTF-8でapplication/xhtml+xmlを使用するとauで文字化けするらしいので、
    機種によってhead部分まで細かく分けるのが理想。でもやってたらキリがない。

    iPhone、iPod touch

    専用metaタグなど

    iPhone専用CSS

    <link media="only screen and (max-device-width: 480px)"  href="iphone.css" type="text/css" rel="stylesheet" />

    画面の表示制御（横幅指定）

    <meta name="viewport" content="width=800" />

    iPhone専用アイコン
    ホーム画面に追加した時のボタン。faviconみたいなもの

    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
    モバイルバージョンを終了