【EC-CUBE】携帯サイトをXHTML仕様にする

今はモバイルサイトの仕様過渡期なので、ちょいと注意が必要なんだけども。

というのも、少し前に、モバイルXHTMLの標準化について、なんとなく関係各処でオーソライズされたらしいので。けれど、しばらくは、色々な事情からこのネタも生きることであろう。

モバイルサイトをXHTMLにすると何がいいかというと、ドコモでインラインCSSが使えるようになる。
ドコモなどで、文字に背景をつけたいとかインラインスタイルを書いて色々ちょいと調整したいとか、ただでさえ制限の多い携帯のコーディングで、少しでも自由な表現をするには、やっぱりスタイルシートが使えないと不便。

画像の多様で容量上げて凝ったデザインにするのはECではつらいので、モバゲーみたいに色々デザインされたページを無理なくコードで実現しようとすると、やっぱりCSSが必要なんである。

細かいところは、携帯サイトのコーディングについて詳しいサイトがいくつも公開されているので、そちらにお願いすることにして、とりあえず抑えておくポイントは、EC-CUBEのようなシステムベースだから3キャリア共通でHTMLソースを使用したいという場合には、XHTMLで、ドコモ向けにコーディングし、小さなところで、auやソフトバンク向けに調整する、ということが必要なんである。

ドコモでは、XHTMLは、docタイプが適切に出力されて、MIMEタイプがapplication/xhtml+xmlとして認識されて、などいくつかの制限がクリアされないとXHTMLと認識されず、HTMLと認識されてしまう。

EC-CUBEはSMARTYのテンプレートを使用しているので、ページがdisplayされる前に、mimetypeにxhtml+xmlをセットする。

【EC-CUBEの携帯サイトを3キャリア対応のXHTMLにするための手順】

1)/data/Smarty/templates/default/mobile/site_frame.tplのヘッダを、

<?xml version=”1.0″ encoding=”Shift_JIS”?> ※この行はなくても可。
<!DOCTYPE html PUBLIC “-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1)1.0//EN” “i-xhtml_4ja_10.dtd”>
<html xml:lang=”ja”> 

または、

<?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” />

とする。

2)/data/class/helper/SC_Helper_Mobile.phpのL253あたりに、

 function sfMobileInit() {
ini_set(“default_mimetype”, “application/xhtml+xml”);  //1行追加
$this->lfMobileInitInput();

これで、OK。