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

by

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

    • XHTMLバージョンにより、DOCTYPE宣言内のLocale部分の数値が変わる。
    • content-typeがapplication/xhtml+xmlでないとXHTMLとして認識されない。
    • Content-Length（ファイルサイズ）が必須。サーバーが付けてくれない場合はmeta手書き。
    • HR要素のsize属性/height属性の値に関わらず、常に0.5emのマージンを取る。
    <?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

    • 文字エンコードがUTF以外の場合でもencodingの省略が可能である。
    • 端末搭載ブラウザがDTD（文書型定義）をチェックしない→省略可能
    <?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

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

    • インライン要素のコンテントにブロックレベル要素を入れることは出来ない。
    • ol要素内のli要素は99個まで
    • 同種要素を組み合わせた入れ子は3個ないし5個まで（リスト3、テーブル5）
    • select要素内のoption要素は50個まで
    • object要素内のparam要素は10個まで一部の端末には以下の制限がある

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

    • 1ページに配置可能な要素は520個まで
    • １ページに配置可能なフォーカスの当たる要素（a・input・option）は50個まで
    • 1ページに配置可能なform要素は4個まで
    • form要素内に配置可能な要素の数は30個まで
    <?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>

    ３キャリア共通サイトを作る場合のポイント

    • XHTML Mobile Profile1.0
    • DOCTYPE宣言を省略しない。キャリア別に変更できるなら変更を推奨
    • 文字コードはShift-jis
    • iモードブラウザ1.0端末に対応する場合はstyle属性を使ってCSSを記述する
    • 要素を入れ子にする記述をなるべく避ける
    • PC98系機種依存文字を使用しない
    • スペース、タブ、改行の扱いに注意する
    • テキストのみで10kb以下、全体で100kb以下を目安にする

    共通ベーステンプレートのサンプル

    <?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

    • ブラウザはMobile Safari
      • デフォルトでは横幅が960pxと仮定したレンダリング。ジャストフィットは320px
      • スクロールバーが存在しない
      • GIF、PNG、TIFFは画素数が2メガピクセル（2×1024×1024ピクセル、約200万ピクセル）まで
      • JPEGは画素数が32メガピクセルまで。2メガピクセルを超える場合はサブサンプリングされる
      • アニメーションGIF、canvas要素はファイルサイズ2MBまで
      • そのほかのファイル（HTML、CSS、JavaScriptファイルなど）はファイルサイズ10MBまで
      • Ｆｌａｓｈは非対応
      • JavaScriptの実行時間は最大10秒間
      • フォームの表示（特に入力時）が特殊である
    • HTML5、CSS3にも対応している（WebKitの対応状況参照）
    • XHTML 1.0、XHTML mobile profile、WMLに対応
    • framesetは各フレームの内容をすべて表示するように画面が分割される
    • ユーザーエージェント解説ページへ

    専用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" />

    「[XHTML] 携帯サイト（ガラケー）用 XHTML仕様まとめ」への1件のフィードバック

    1. ピンバック: 2009/07/03に気になったこと | debeso

    コメントを残す

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。