携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-
XHTML+CSSで一歩進んだモバイルサイトを作るテクニックを幅広く紹介☆
このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
最近発売されているドコモの機種(FOMA)のブラウザにはたいてい
iモードHTMLとiモードXHTMLの両方に対応したモードが搭載されています。

例えば、最新のハイエンド機種FOMA 904iでは、ドコモの技術情報の端末スペック表を見ると、
iモードHTMLはバージョン7.0、iモードXHTMLは2.1に対応していることが分かります。

これは、携帯電話が機能向上するのと並行して、
携帯に対応したHTMLもバージョンアップを繰り返すためです。

このi-HTMLとi-XHTMLの違いは、多くはHTMLタグで指定できる属性やCSSの対応状況になりますが、簡単に言ってしまえば、i-XHTMLのほうがより豊かな表現が可能になっていると解釈しても間違いではないでしょう。


さて、携帯サイトを作成する際のポイントについてふれますが、
多くの方が勘違いされているのは、

ドコモの機種が割と新しい機種、つまりXHTMLに対応した機種であれば、
HTMLは自動的にXHTMLモードになるということ。


言い換えると、

i-XHTMLでしか対応していないCSSや書き方でも、
普通にHTML内に書けばそれに対応している機種なら表示できるということ。


結論から言ってしまえば、これはどちらも間違いです。

ドコモ携帯のブラウザをi-XHTMLモードで表示させるためには、
以下のような点に注意しなければなりません。

・DOCTYPE宣言が正しく行われていること。
・コンテンツのMIMEタイプが「application/xhtml+xml」であること。

2点目のMIMEタイプはHTMLのヘッダーで

<meta http-equiv="ContentType" Content="application/xhtml+xml">

が指定されていて、
かつサーバー側においても正しいHTTPヘッダが出力されている必要があります。

設定されていない場合は、.htaccessで
「AddType application/xhtml+xml .html」
のいう一文を追加します。

このような条件がそろって初めて、ドコモの機種はi-XHTMLモードでの表示が可能になります。
よりstrictな設定が必要だということですね。

ちなみに、ドコモ向け端末において、XHTMLモード(iモードXHTML)で表示させる場合、
拡張子は「xhtml」でなければならないという解説をしているところもありますが、それは間違いです。
Webサーバーにおいては拡張子はそれほど重要ではなく、
問題はその拡張子がどのようなコンテンツMIMEタイプであり、どんなHTTPヘッダが出力されるか
ということのほうが重要です。

上記例(htaccess)では、「.html」という拡張子においてはHTTPヘッダ
は「application/xhtml+xml」にせよ、という明示なので、この設定がなされていれば、Webサーバーは拡張子htmlで、「application/xhtml+xml」というHTTPヘッダを出力するようになるので、
ドコモの機種はXHTMLモードに切り替わります。
機種によっては「.xhtml」を読まない機種もありますので、私はこのような指定方法を推奨します。



また、このXHTMLモードに切り替えると以下のような表現が可能になります。

DIVタグでbackgroundプロパティを指定したい

というケース。

ドコモ機種では文字の後ろに背景色をつけたような表示をさせるには、
以下の2種類の方法があります。

・tableタグを用いる。(正確にはtdタグのbgcolor要素を使用する)
・DIVタグを用いる。(正確にはstyleでインライン指定する。)

ただ、tdタグでの背景色指定はi-HTMLバージョンが6.0以上、i-XHTMLで2.0以上という条件に対し、
DIVタグのstyle指定ならi-XHTML1.0以上という条件ですから、
DIVタグで指定する方法のほうが、より多くの端末を内包することになります。

従って、上記のようなケースではDIVタグを用いるほうが正解ですが、これも先ほど説明したようにブラウザがi-XHTMLモードになるようにHTML側で正しく設定していた場合の話です。

以下のサンプルを参考によく理解しておきましょう。

■DIVタグのSTYLE属性で背景を指定する例

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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=Shift_JIS" />
<title>テスト</title>
</head>
<body>

<div style="background-color:#808080;">aaa</div>

</body>
</html>

スポンサーサイト




Copyright © 携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-. all rights reserved.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。