携帯サイトをコーディングする
携帯サイトも当然WEBサイトですから、根幹の部分にはコーディングが必要になります。
こんなに進化した時代ですから、別にコーディングなんかしなくても、
簡単に携帯サイトを作ることはできますが、コーディングから何もかもすべてを自分で作ることで、
画一化された携帯サイトを脱して、自分だけのオリジナリティに溢れたものを作ることができます。
じゃあ、自分で1からコーディングして、携帯サイトを作ってみよう！
と、思い立ってはみたものの、いざ作ろうとした時に、
色んな疑問が湧いてきて一歩を踏み出せずにいる人が多くいます。
PCサイトとコーディングの仕方が違うのか？
携帯サイト特有の制約があるのか？
どんな風にコーディングすれば携帯サイトっぽくなるのか？
などなど、そんな携帯サイトのコーディングについて、今日から色々と書いていきます。
モバイルサイトの言語は？
まず、やっぱり一番始めに気になるのは言語でしょう。
PCサイトではHTMLやXHTMLあとCSSとか、
思う存分使いたいものを気にせず使えますよね。
じゃあ携帯サイトはどうなんでしょう？
結論から言うと、現在はそれほど違いはなく、
今まで使っていたマークアップ言語で記述ができます。
しかし、あくまでも携帯用サイトとであるということと、携帯キャリアは1社だけではないので、
それぞれのキャリアごとに独自の拡張や制約があります。
とりあえずは携帯サイトなので、CHTML（携帯電話やPDAなどの携帯情報端末向けのコンテンツ記述言語。
HTMLの携帯サイト版）で記述しておけば、殆どの端末で表示させることができます。
しかし、携帯電話の機能自体進化して、目の肥えた利用者だらけのこの時勢には、
携帯サイト用のCHTMLでは表現力はもとより全然ついていけません。
さらにPCでは当然となっているCSSの活用などもできません。
また、HDMLは、auの昔の端末向けの仕様になっているので、
わざわざ学習してまで使う必要はありません。
じゃあ何を使って書けばいいのか？
現在の主流
現在の携帯の主流になっている3G端末以降であれば、
XHTML＋CSSでの制作が可能です。
※ただし、ごく初期のFOMA21xxシリーズでは使えません。詳しくは下記一覧表を見てください。
FOMA210V以前の携帯がＸＨＴＭＬに対応していないことが分かります。
→ iモード対応機種 対応コンテンツ・機能一覧
基本的にページの作成には、HTMLかXHTMLを使いますが、
HTMLは仕様自体が古くなってきて標準化の流れはXHTMLに傾いています。
各キャリアの今後出荷される携帯端末もXHTML対応機種であるため、
大規模なサイトで新旧一緒くたのユーザーと勝負しなければいけない場合以外は、
XHTMLでページを記述することをおすすめします。
ただ、docomoの場合、ほとんど独自のCSS（インラインのみの対応）
になっているので、上記のような汎用サイトの作成には現状は向いていません。
下記に、各キャリアによる仕様の違いを載せておきます。
XHTMLを使用する上での、各キャリアの仕様の違い
DOCTYPE宣言の比較
●DoCoMo
<!DOCTYPE html PUBLIC “-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN” “i-xhtml_4ja_10.dtd”>
<!DOCTYPE html PUBLIC “-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1) 1.0//EN” “i-xhtml_4ja_10.dtd”>
<!DOCTYPE html PUBLIC “-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.0) 1.0//EN” “i-xhtml_4ja_10.dtd”>
●au
<!DOCTYPE html PUBLIC “-//OPENWAVE//DTD XHTML 1.0//EN” “http://www.openwave.com/DTD/xhtml-basic.dtd”>
●SoftBank
<!DOCTYPE html PUBLIC “-//JPHONE//DTD XHTML Basic 1.0 Plus//EN” “xhtml-basic10-plus.dtd”>
Content-Type
●DoCoMo
application/xhtml+xml
●au
text/html
application/xhtml+xml
●SoftBank
text/html
application/xhtml+xml
CSS
DoCoMoがインラインのみの対応のためstyle=””のように指定しないといけません。
その他
Content-Lengthが必須
文字コードはShift_JIS
XHTML関連
要素/属性は小文字
空要素以外のタグは省略不可
属性の省略不可
(例) <input type=”checkbox” name=”hoge” value=”abc” checked=”checked” />
キャリアごとにこんな違いがあるそうです。
今回は携帯サイトのコーディングに使う言語について色々書きました。
では、今回はこんなところで。
===========================================
参考にさせて頂いたサイト
===========================================
DoCoMo
http://www.nttdocomo.co.jp/service/imode/make/content/xhtml/
au
http://www.au.kddi.com/ezfactory/tec/spec/xhtml.html
http://www.au.kddi.com/ezfactory/xhtml.html
SoftBank
http://developers.softbankmobile.co.jp/dp/tool_dl/web/tech.php
ウノウラボ
http://labs.unoh.net/2006/12/xhtml.html
携帯サイト必勝のプロセス
http://jazzfunk.heteml.jp/mobile/2008/06/post-3.html
携帯サイトnet
http://www.keitai-site.net/sakusei/
