2009年07月29日（水） 22:12　｜　posted by shin2　｜　Comments [0]

携帯サイト制作のメモ。

携帯サイトを制作したい時のメモ。個人的には比較的新しい機種に絞ったとしても、3キャリア共通で1つのファイルですませたい。
共通で作るには、CHTMLベースに各キャリアの共通部分のみのhtmlを使って簡単に書くこともできるが、最近じゃXHTML + CSSにするのが良いみたいだ。
CSSはauとSoftBankは外部cssに対応しているけど…Docomoが非対応なのでインラインで書くことになる。（Docomoも2009年5月モデルからは対応してるとか…）

1．XML宣言

<?xml version="1.0" encoding="Shift_JIS" ?>

2．DOCTYPE宣言

■Docomo 推奨

<!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 "-//J-PHONE//DTD xhtml Basic 1.0Plus//EN" "xhtml-basic10-plus.dtd">

■W3C勧告 XHTML Basic
cssは外部スタイルシートのみに限定しているみたい。Docomoでアウトだ。

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

■XHTML 1.0 Transitional
PCで使うタイプ。これでいけるっぽい？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

■XHTML Mobile Profile 1.0
とりあえずこれがベスト？

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

色々書き方があるけど、3キャリア共通で考えると「XHTML 1.0 Transitional」か「XHTML Mobile Profile 1.0」になるっぽい。
「XHTML Basic」に「XHTML Mobile Profile 1.0」を統合した「XHTML Basic1.1」というのもあるみたいだけど、現時点ではまだまだ。今後各キャリアの対応に期待らしい。

3．MIMEタイプ

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />

ただ、これだとauやSoftBankの機種では比較的新しいモノしか対応していないみたいだ。「application/xhtml+xml」が必須なのは、DocomoのFOMAなので、その辺り気を使いたい場合には、phpでキャリアを判定してDocomoでは「application/xhtml+xml」それ以外のau・SoftBankでは「text/html」を返すようにする。

■.htaccessの設定
「ウェブサーバ側でHTTPヘッダの出力」をするために以下を記述。
これはDocomoのiモードでXHTMLを表示させるために必要。

AddType application/xhtml+xml .html

iモードはDOCTYPE宣言が正しく行われていること。MIMEタイプが「application/xhtml+xml」であること。そして「ウェブサーバ側でHTTPヘッダの出力」がされないとXHTMLとしてを表示しない。

phpを使って判定とかする場合は.htaccessは以下を記述。

AddType application/x-httpd-php .html //拡張子htmlでphpを動くように

htmlファイル内の1番先頭で以下をと記述。（動くかどうか未確認）

<?php
header("Content-type: application/xhtml+xml");
echo '<?xml version="1.0" encoding="Shift_JIS"?>'."\n";
?>

htmlでphpを記述できるようになるなら、DOCTYPEとかもキャリアごと分ければいいような気もしてきた…。
拡張子が.phpのままでよければ、.phpファイル内のheader()関数だけで、htaccessの設定はいらなそうだ。

phpを使うとかちょっと細かくなってきてしまったが、とりあえずこの辺を抑さえておけばOKかな。本格的に取りかかるときにshibaさんの「携帯サイトを作ろう！　-ちょっと詳しいモバイルサイトの作り方-」を参考にするか、「携帯サイト コーディング&デザイン」を買うかしよう…。

【参考にしたサイト】

ちょっと気になることは、phpを使うときはファイルの文字コードはShift_JISなのか？

[この記事へのトラックバックURL]
http://www.mujuu.org/weblog/web_memo/221/trackback

COMMENTs