xhtmlを中心にモバイルサイト構築ノウハウまとめ

仕事で某ポータルサイトのモバイルページを構築するようになって1年近く。

ノウハウがある程度溜まってきたのでxhtmlのことを中心に色々とまとめてみる。

雑多なこと

出力は基本Shift_JISで（ドコモ基準）
静的ページを作るときは拡張子を.xhtmlにしないとドコモ端末がxhtmlをhtmlと認識してしまう。
（というか静的ページは絵文字とかヘッダー周りで色々不便なので、止めといた方がいい）
動的ページを作るときはapplication/xhtmlをヘッダとして送信してやらないとドコモ端末がhtmlと認識してしまう。phpだと出力前にこんな感じの処理。
PHP
```
header("Content-type: application/xhtml+xml;charset=Shift_JIS");
```
絵文字は変換テーブルを作っておき、ソース内では１つのキャリアで統一して書いておいて、キャリア毎に変換するのが良い。自分はドコモのunicode（⇒参考）で記載してます
xhtml制作はiモードHTMLシミュレータIIで作成し、ドコモ実機確認⇒調整⇒他キャリア実機確認⇒調整の順がスムーズ
バーのような画像の横幅は228pxで作っておくといい感じ。（ドコモは大体横幅240pxだが、同じ画像だとauでつぶれる）
バーのような画像をSoftBank端末で表示するときはimgタグにwidth=”100%"と入れてやると、きれいに表示される。
ドコモが外部CSSを読めないので、CSSは基本インラインに記述していく。
tableはなるべく使わない。(FOMAの初期型あたりまで非対応なので)
brタグやinputタグもちゃんと閉じてあげる。忘れがちなmetaタグも。(例：<br />)
pngやgifは古いsoftbank端末が使えなかったりする。（変換してあげてもいいけど全体に対してのパイが小さいので気にしなくてもいいかも）

ヘッダー部分

ヘッダーはこんな感じ

HTML

<?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">
<head>
<meta http-equiv="content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<title>タイトル</title>
<meta name="description" content="サイト説明">
<meta name="keywords" content="キーワード">
<style type="text/css">
<![CDATA[
a:link{color: #006699}
a:visited{color: #999999}
]]>
</style>
</head>

リンク色はヘッダーで一括指定できる。

ちなみにxhtml非対応の端末(mova等)に対しては、html宣言部分を取り除いてやればわりとキレイに表示される。

HTML

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

これを置き換える↓

HTML

<html>

キャッシュコントロール用のタグは以下の2つを書いておけば問題ないが、戻るキーを押したときに再度読み込んでやりづらいのであまり推奨しない。
HTML
```
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
```
ただし、au端末はかなりキャッシュするので、ブックマークしたページがずっと残っていることがある。
なのでau端末だけこのタグを出力するようにしている。

divタグ

最も多く使うタグかもしれない。
PCもそうだが、なによりキャリア間・端末間の動作の差異が少ない。
おすすめの使い方はこんな感じ。

bodyタグの中全体を大きいdivタグで囲ってフォントサイズを指定してやる。
HTML
```
<body>
<div style="font-size:small">
ここにメインのコンテンツ
</div>
</body>
```
こうすることで全体のフォントサイズが指定できる。(デフォルトのフォントサイズは大きすぎるのでsmallが良い。)
また、au端末は他のキャリアより文字が大きく表示されていしまうので、動的にx-smallにすると良い。
背景色を指定する。
xhtmlだからできるのはこの背景色指定だ。普通のhtmlやchtmlに比べ表現の幅が格段に上がる。

HTML
```
<div style="background-color: #fa9cb8;">
ここにコンテンツ
</div>
```

spanタグ

部分的に文字の色やサイズを変える際に使用する。
aタグの中に入れ子にすればリンクの色を部分的に変えることもできる。

brタグ

いわずと知れた改行タグ。
文章を改行するときに使える。
clear="all"を記載することで回り込み解除ができるが、あまりよろしくないのでdivタグに任せると良い。理由は後述

hrタグ

意外とページの装飾に役立つhrタグ。
キャリア毎に動作の差異が大きいので要注意だが、以下のタグの使い方でその差異をある程度吸収できる。

HTML

<hr style="color:#fff;background-color:#fff;height:1px;border:0px solid #ccc;margin:0.3em 0;" size="1" />

この指定に関しては結構複雑なので、以下解説

color要素はau端末がラインの色として認識する
background-color要素はドコモとSoftBank端末がラインの色として認識する。colorと揃えておく必要がある。
height要素はドコモとSoftBank端末がラインの高さとして認識する。
border要素は入れておかないとドコモとSoftBank端末が勝手に黒っぽいボーダーを表示してしまう。なので背景色と同じにしておくのが良い。
ドコモとau端末はhrタグを使うと勝手に上下に2ピクセルぐらいのマージンを付けるが、softbankは付かない。なので、margin要素を記述してその差異を吸収する。
sizeはau端末でのラインの高さを指定している。なので、heightとそろえておく必要がある。
ここには書いていないが、幅を指定する場合はインラインCSSでwidth:80%みたいな感じで3キャリア共通指定が可能

hrタグの使い方はこんな感じ。

ただラインを引くだけではなく、背景色と同じ色にすることで好きな高さのマージンを作ることもでき、デザインの幅が広がる。

imgタグ

普通に画像を表示するタグ。
使いこなしとしては回り込みができる。
3キャリア共通の回り込みは以下のような形

HTML

<img src="img.jpg" style="float:left" align="left" />

回り込みの解除にはdivタグがおすすめ

HTML

<div style="clear:both" clear="all"></div>

中にコンテンツが無いのでマークアップ的にちょっと微妙だけど、うまく動きます。
たまにbrタグで回り込み解除しようとしてる人がいるけど、brタグはインライン要素だから端末によって認識しません。止めといた方がいいです。

aタグ

ページ内リンクはモバイルページでは良く使うが、ちょっと落とし穴がある。

HTML

<a href="#top">top</a>

でリンク元はできるが、リンク先は

HTML

<a name="top"></a>

だと3キャリアで動かない。

ここは

HTML

<a name="top" id="top"></a>

と記載する必要がある。

まぁこれくらい書ければxhtmlでモバイルサイトは作れるんじゃないかなー。
本当はh1とかpとか使えよ！ってガチガチマークアッパーの人とかSEO内部要因対策担当の人は怒るだろうけど、キャリア毎の差異を吸収するのはかなり大変。
まぁ理想と現実は違うってことですね。

一応まとめはこんな感じかな。

もちろん存在する全ての機種で動作を確認してるわけじゃないけど、大体いけると思う。

なんかおかしいところとか「こうしたほうがいいよー」みたいなのあったら教えてください。

サンプル

一応今回のまとめ情報を色々と使って書いたソースはこんな感じ（デザインとか見た目は適当。imgタグが呼び出してる画像は適当に用意してください。）

HTML

<?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">
<head>
<meta http-equiv="content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<title>タイトル</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta name="description" content="サイト説明" />
<meta name="keywords" content="キーワード" />
<style type="text/css">
<![CDATA[
a:link{color: #006699}
a:visited{color: #999999}
]]>
</style>
</head>
<body>
<a name="top" id="top"></a>
<div style="font-size:x-small;">
<div style="background-color: #bbb;">
ここにメインのコンテンツ
<hr style="color:#DF0D0D;background-color:#DF0D0D;height:1px;border:1px solid #bbb;" size="1" />
<span style="font-size:large">ここにサブのコンテンツ</span>
<div style="background-color: #ccc;">
<img src="img.jpg" style="float:left" align="left" />
<a href="aa">aaabbb</a>
<div style="clear:both" clear="all"></div>
あ<br />
い<br />
う<br />
え<br />
お<br />
か<br />
き<br />
く<br />
け<br />
こ<br />
さ<br />
し<br />
す<br />
せ<br />
そ<br />
<a href="#top"><span style="color:orange;">topへ</span></a>
</div>
</div>
</div>
</body>
</html>