3キャリア対応携帯サイトXHTMLテンプレート: 世界四季報

2008年1月16日 (水)

3キャリア対応携帯サイトXHTMLテンプレート

ドコモ（docomo）、AU、ソフトバンク（SoftBank）の３キャリアに対応した３G携帯サイト専用のXHTMLテンプレートをまとめてみました。

<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="ja" xml:lang="ja">

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="keywords" content="(キーワード)" />
<meta name="description" content="(ページ説明)" />
<meta name="robots" content="index,follow" />
<title>(タイトル)</title>
</head>

<body>

(本文)

</body>
</html>

■言語：XHTML
３Gより『XHTML』共通認識が可能.
Vodafone ⇒ XHTML / CHTML
au by KDDI ⇒ HDML / XHTML
NTT docomo ⇒ CHTML / XHTML
(参考サイト)
・携帯サイト作成時のXHTMLでの相違点

■文字コード：UTF-8
SJISが基本だそうなのですが、UTF-8、EUC-JPも使えるようです。
(参考サイト)
・3G携帯のみに限定したサイトを作る場合
・3キャリア対応サイトを作る際の注意点（エンコード編）

■XML宣言：UTF-8
いらないらしいのですが一応。PHPファイルだとエラーがでる。
<?php echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"; ?>
（参考サイト）
・携帯サイト制作でPHPを使う場合のXML宣言のエラー対処

■DOCTYPE宣言：XHTML用
各キャリア微妙に違うのは、独自拡張タグなどを使用する為だと思われるとのことです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(参考サイト)
・携帯サイトで使えるXHTMLの規格

■METAタグ
キーワードはカンマ(,)区切りで最大5個程度、ページの説明は50文字～100文字で簡潔に。
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
又は
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="keywords" content="キーワード" />
<meta name="description" content="ページの説明" />

(参考サイト)
・XHTMLで書いてみる
au/SoftBankでのcontent-typeは基本的にtext/htmlですが、比較的新しい機種ではi-modeと同じapplication/xhtml+xmlでもページの閲覧が可能です。
・モバイルコンテンツ作りに於ける推奨事項(参考資料)

[追記]
・キャッシュをさせない
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
・検索ボット対策
<meta name="robots" content="index,follow" />

[追記]2008.5.3
■参考リンク
・3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
・ケータイマルチキャリア高機能テスター - P1エミュレータ

[追記]2008.6.12
携帯第４世代になると、通信速度はさらに向上するのでＰＣサイト並になることを見越し作っておいた方がいいかも。FlashLiteの100KB規制もなくなると思う。

[追記]2008.7.30
■参考リンク
　→ケータイWebアプリ開発、9つの注意点 - ＠IT
　→モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう

[追記]2008.8.8
■参考リンク
　→2008年夏「ケータイ livedoor」のアクセスシェア - livedoor ディレクタBlog

[追記]2008.9.6
■参考リンク
　→Firefoxでモバイル端末をシミュレートする独自アドオン「FireMobileSimulator」を公開します - 遙かへのスピードランナー

[追記]2008.9.30
■参考リンク
　→3G端末（FOMA・WIN・3GC）のモバイルサイトのコーディング＆デザイン - Livedoorディレクター

■参考書
携帯サイトの仕様ではなくプログラムに特化した内容らしいです。

→[購入]PHP×携帯サイトデベロッパーズバイブル

[追記]2008.10.8
■第1回：携帯サイトとPCサイトはここまで違う！(Think IT)
■Think ITにて「今から始める携帯サイト制作」を執筆しました。

■参考書(必携)

携帯端末用Web制作バイブル第2版 (ADVANCED WEB DESIGN BOOKS) 八木澤知彦
→携帯端末用Web制作バイブル

基本的なところは網羅されておりました。僕の知っている限りではベストバイブルかと思います。

[追記]2008.10.16
・第2回：携帯サイトの制作から公開まで - Think IT

[追記]2008.10.28

ケータイHTMLコンパクトリファレンスインフォシェル
→ケータイHTMLコンパクトリファレンス（インフォシェル）

2006年7月に発売。評価が高かったので備忘録。

[追記]2008/12/11
■携帯電話のセッションに関して

[追記]2008/12/26
書店で立ち読みしたらよさげだった。

携帯サイトコーディング&デザイン高木悠介
→携帯サイトコーディング&デザイン（高木悠介）

[追記]2009/1/16
■3キャリア対応のCSS変換モジュールHTML::MobileJpCSS

[追記]2009/1/22()
■携帯サイト制作(IT幕府)
■携帯サイトを作る際に読んでおきたいサイトや本 (IDEA*IDEA)
■ＰＨＰで携帯サイト (phpspot)

[追記]2009/2/16
■文字コードと携帯絵文字 (ウノウラボ)

[追記]2009/2/19
■ケータイ大規模サービスの開発・運用に関する資料のまとめ (ke-tai.org)

[追記]2009/3/25
■携帯各キャリアの固有IDについて (ぱらめでぃうす)

[追記]2009/4/2
■Web担当者Forum(第１-３回)
・モバイルサイト構築前に知っておきたいユーザビリティ
・ユーザビリティを考慮した文字サイズ指定&ナビゲーション設計
・モバイルサイトを見やすくする絵文字活用&テキストレイアウト

[追記]2009/5/7
■ケータイ公式サイト&ダウンロードサイトのユーザビリティ6つのポイント (Web担当者Forum)

[修正]2009/6/6
▼携帯サイトの作り方第1回作成方法の基礎(AllAbout)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

↓(変更)

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

「XHTML Mobile Profile 1.0」であれば、3大キャリア共通のページを作成できるとのこと。

[追記]2009年6月27日
▼サンプルコードを丸ごと収録！『PHP×携帯サイト実践アプリケーション集』(IDEA*IDEA)