今回、このサイトの携帯版のページを作成し、携帯電話からの閲覧にも対応させました。（iモード等の専用サイトではなく、いわゆる勝手サイトです。）

これまでも何度か携帯サイトを作った経験はありますが、キャリアによって仕様が様々で分かり難く、単にHTMLやXHTMLだけを使い、配置や色を変えるために非推奨とされるタグや属性を使って制作していました。

でも今回は、新着リストなどの背景に色を付けたかったということもあり（テーブルを使って背景色を付けることもできますが）、きちんとXHTMLとCSSを使って制作しました。

また、Movable Type で携帯サイトを作るために導入したプラグインなどもありますので、それらについての覚え書きです。

docomoでのXHTMLとCSSの制約

携帯サイトでCSSを使ってデザインする場合、softbankやauは特に問題ありませんが、docomoでは以下のような条件があります。

  • DOCTYPE宣言を正しく書かなければならない。
  • コンテンツのMIMEタイプを「text/html」ではなく「application/xhtml+xml」としなければならない。

つまり、「XHTML Mobile Profile 1.0」を使用する場合のHTMLヘッダは次のようになります。

<?xml version="1.0" encoding="Shift_JIS"?>
<!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">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
：
<title>タイトル</title>
</head>

その上で、サーバ側で正しいHTTPヘッダが出力されている必要があり、これが設定されてない場合は、.htacessで

AddType application/xhtml+xml .html

の一行を指定してやる必要があります。今回、携帯用ページを置いているディレクトリに、これを記述した.htaccessを置きました。

また、docomoでは外部スタイルシートは使えず、インラインで指定しなければなりません。ただ、リンクに関する疑似クラス（a:link，a:focus，a:visited）に限って内部参照（<head>〜</head>の中にstyle要素で記述）に対応しています。
（7月27日追記）docomoは2009年5月発売の端末でようやく外部スタイルシートに対応したようです。

softbank、auでは外部スタイルシートを推奨していますが、各キャリア共通のページを作ろうとするのなら、docomoに合わせる必要があります。

因みに、MIMEタイプをapplication/xhtml+xmlとすると、Internet Explorer ではダウンロードを要求し、表示することはできません。また、FirefoxなどではXHTMLに文法エラーがあると表示されません。

拡張子に .php を使えない

PCサイトでは、ヘッダなどの共通部品のインクルードや"New"の表示にphpを使い、拡張子も".php"としていますが、携帯サイトでも"New"は表示させたいと思い、同じようにしたらCSSが反映されなくなりました。

たぶん上記のMIMEタイプの指定が関係してしると思われますが、ややこしいので携帯サイトは拡張子を".html"とし、とりあえず"New"の表示はあきらめました。

SSLが使えない

お問い合わせフォームも携帯用に作り、SSL下に置いたのですが、実際にページを開こうとすると「安全性が確認できません」などといったエラーが出て開くことができません。どうも携帯サイトでは利用できる認証局が限られているようです。他のウェブサービスの利用も考えましたが、とりあえず携帯サイトではフォームは設置していません。

携帯環境での確認

携帯サイトを作る上で、主要3キャリアでの確認は欠かせません。しかし私はiPhoneしか持っていませんので、携帯サイトを表示することができません。そこで、以下のツールを使っています。

ひとつはFirefoxのアドオン「FireMobileSimulator」。
各キャリアの複数の端末を設定し、切り替えて表示を確認することができるので重宝しています。ただ、若干怪しいところもあるので、各キャリアのWindows用シミュレータも使って確認してます。

あと、iPhone用の携帯ビューワアプリと、スタッフや家族の携帯を借りていくつかの実機でも。

Movable Type で携帯サイトを作るためのあれこれは次のエントリーで。