« HighSlide.jsの使い方 | トップページ | 愛される芸名 »

2008年1月16日 (水)

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

ドコモ(docomo)AUソフトバンク(SoftBank)の3キャリアに対応した3G携帯サイト専用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↓-->
(本文)
<!--↑BODY↑-->

</body>
</html> 

言語:XHTML
3Gより『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" />

関連リンク一覧
ファイルサイズを削るTIPS(最下部)

divタグやSpanタグのstyleが効かない 
HTML文法チェック「Another HTML-lint gateway」

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

[追記]2008.6.12
携帯第4世代になると、通信速度はさらに向上するのでPCサイト並になることを見越し作っておいた方がいいかも。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)
PHPで携帯サイト(phpspot)

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

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

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

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

[追記]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)

*  RSSを表示するニュースサイト
* 簡易BBSアプリ
* 絵文字対応BBS
* 携帯ブログ
* 写メールアルバム
* GPSとWebサービスのマッシュアップ
* 携帯SNSアプリ

携帯サイト作成のバイブルになるかも。

[追記]2009年7月11日
ほとんど情報がないモバイルSEOのまとめ(携帯サイトをつくろう)
携帯サイトのSEO情報は確かに少ない。

[追記]2009年7月13日
iモードブラウザ 2.0まとめ(ウノウラボ)
携帯電話向けWebアプリのセッション管理はどうなっているか(徳丸浩)

[追記]2009年7月14日
Flash Liteで作る携帯コンテンツ実践教科書 東條雅樹
Flash Liteで作る携帯コンテンツ実践教科書(東條雅樹)

docomo、au、SoftBank各キャリアごとのFlash Liteの仕様も詳細に掲載しています。

2009/7/22発売予定。

[追記]2009年7月20日
携帯サイト制作の時に勉強になるサイトとか(linker journal)

[追記]2009年7月22日
ディレクターなら押さえておきたいモバイルSEO34項目(livedoorディレクターブログ)

[追記]2009年7月27日
【携帯サイト】もう1ページ先に進んでもらうための6つのテクニック(ユーザビリティ実践メモ)

[追記]2009年7月30日
携帯XHTMLでの入力モードのまとめ(ゆどうふろぐ)
ゼロからはじめる携帯サイト構築(ウノウラボ)
携帯サイトの作り方まとめ(ITキヲスク)
携帯サイトをつくろう(セルバ)

[追記]2009年10月11日
携帯サイトをHTMLではなくPHPで組むときのDOCTYPE分岐方法(ma-san.org)

[追記]2009年10月31日
携帯サイト(html)の制作に入る前に確認しておきたいチェック項目(これからゆっくり考L)
背景色はtableがポイント。

[追記]2009年11月19日
PHPを使って3分で作る3キャリア対応ケータイサイト(ke-tai.org)

[追記]2009年11月26日
モバイルサイトマークアップ5つの小技(livedoorディレクターブログ)

[追記]2009年11月29日
モバイルサイトを作るときに参考になるサイト(CREAMU)

[追記]2009年12月2日
携帯サイトをはじめて作る時にぜひ読んでおきたい11の記事(携帯サイトをつくろう)
携帯サイト[xhtml]のコーディング前のチェックポイント(これからゆっくり考L)

[追記]2010年1月14日
ユーザビリティをアップさせるチェックポイント7(Livedoorディレクター)

[追記]2010年2月5日
GPS携帯を使った口コミサイト構築 - PHPによるメールの受信処理(CodeZine)

[追記]2010年3月9日
モバイルユーザビリティ改善のチェックポイント保存版 - 全10回総まとめ[Web担当者Forum]

[追記]2010年3月16日
携帯サイトのSEO対策とsitmap.xml(モバイルサイトマップ)登録[SEO対策のススメ]

[追記]2010年4月9日
携帯サイトのアクセスアップ、リリース1週間で1日2万PVにする方法[はてなこわい]

[追記]2010年4月14日
携帯サイトを作る時に役立ちそうな情報まとめ[かちびと]

[追記]2010年7月8日
ケータイサイト制作前にコーダーが確認しておきたいところ[ゆっくり考L]

[追記]2010年7月26日
携帯電話事業者に学ぶ「XSS対策」[徳丸浩]

[追記]2010年8月11日
「これから携帯サイト作成」お役立ちサイト集 2010年version[Feel like A Aallinstar]

スマートフォン時代の電話番号認証の実装[Web屋のネタ帳]
電話番号API「Twilio」を利用する。

[追記]2010年8月18日
どういう人をターゲットにするとモバゲーのように利益500億円の商売ができるのか[村上福之]
トラック運転手と水商売系。

[追記]2010年8月27日
ポータルのポータル【モバイルデバイス編】[カヤック]
携帯サイトのデザイン。

[追記]2010年9月6日
携帯コーディング、これだけ読めばすぐできる!(テンプレートのおまけつき)[カヤック]

[追記]2010年9月18日
手っ取り早く携帯サイトを作成する時のhtmlテンプレート[webの人]

[追記]2010年9月27日
0からモバイルSEOを学ぶ上で役に立った記事のまとめ[ウェブ力学]

[追記]2010年10月11日
PHPで作成する携帯会員サイトの基本[CodeZine]

「PHPで作成する携帯会員サイトの基本」の諸問題[徳丸浩]

[追記]2011年5月11日
1時間で携帯サイトをスマートフォン対応にする方法[GREE]

このエントリーを含むはてなブックマーク

|

« HighSlide.jsの使い方 | トップページ | 愛される芸名 »

携帯サイト作成」カテゴリの記事

コメント

いつも拝見させて頂いております。


もし間違っていたら申し訳ないのですが、
ページ一番上のXHTMLテンプレートで
keywords=(ページ説明)
description=(キーワード)
となっておりますが、逆ではないでしょうか??
ぱっと見て、思いついたまま書いております。


違うようでございましたら、
申し訳ございません。

投稿: ゆうじろう | 2009年3月25日 (水) 17時01分

>>ゆうじろうさん

コメントありがとうございますm(_ _)m

ご指摘どおり「キーワード」と「ページの説明」は逆ですね。ありがとうございます!

今後ともよろしくお願いします。

su-Z

投稿: su-Z | 2009年3月26日 (木) 10時16分

コメントを書く



(ウェブ上には掲載しません)




« HighSlide.jsの使い方 | トップページ | 愛される芸名 »