横浜で、ホームページ製作をしている自転車乗りの堅物。　横浜本田WEBブログ: EC-CUBE2.11.X テンプレートカスタマイズ　HTML5化？の覚書

EC-CUBEのテンプレートは基本的にHTML4で書かれています。スマートフォン用のテンプレートはHTML5ですが……　まぁ、ブラウザーもまだIE6あたりも使っている人もいますし、WindwsXPユーザーだと、IEを使っているかぎり、HTML5の恩恵は受けられないですしね。

しかし、制作者サイドとしては既に多くのサイトをHTML5で構築していると、

もうHTML4には戻れない！

というのが正直な感想では？と思うのですが……

ま。HTML5と言うより、CSS3の機能が使いたいだけ、なんですけどね。
CSS3の強力なグラフィカル表現だと、装飾画像の類がかなり省けるので、ブラウザーに優しく、表示も早い？です。

さて、前置きはこのくらいで。

では、HTML5とCSS3を実装するにはどうしたらいいのか。

単純で至極簡単です、ヘッダーのドキュメント宣言を変更すれば、完了です。

EC-CUBEのヘッダー情報はどこのファイルかといいまと、

/data/Smarty/templates/default
内の

site_frame.tpl

になります。

///////////////////////////////////////////////////////////


<!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="text/html; charset=" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

///////////////////////////////////////////////////////////

と、こんな感じです。

で、肝心のドキュメント宣言はどこでされているかと言うと、冒頭の2行目ですね。

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

これを、

<!DOCTYPE html>

と変更すれば、HTML5の出来上がり……ですが、実は、１行目にXML宣言がされています。
ブラウザーからソース確認して頂くとわかりますが、１行目の



によって、XML宣言がされています。これって大丈夫なのかな？
殆どのサイトでは、HTML5は

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>

の様な書き方で書かれています。
つまりXML宣言が無いモノが殆ど。

では、HTML５ではXML宣言は不要なのかな？と思いきや。
どうやら、別段XML宣言がされていても問題は無いようです。
ただし、XML宣言をした場合は下記のように記述する必要があります。

W３C原文　///////////////////////////////////////

The other syntax that can be used for HTML5 is XML. This syntax is compatible with XHTML1 documents and implementations. Documents using this syntax need to be served with an XML media type and elements need to be put in the http://www.w3.org/1999/xhtml namespace following the rules set forth by the XML specifications. [XML]

Below is an example document that conforms to the XML syntax of HTML5. Note that XML documents must be served with an XML media type such as application/xhtml+xml or application/xml.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>

////////////////////////////////////////////////////

つまり、XML宣言されたHTML５ファイルの場合は、application/xhtml+xmlまたはapplication/xmlメディアタイプでないとダメですよ。
と言っています。

では、どうするか？

方法は２つ。

1.上記のようにXML宣言タイプに変更する。
2.XML宣言を消して（テンプレートから、変数を削除）ドキュメント宣言文に変更する。

この２種類になります。
どちらのファイルタイプを製作しても、問題無くブラウザーので動作はするので、使用するテンプレートによって使い分けていいかと思います。

上記の変更で、基本的にHTML5に対応したhtmlファイルになります。

後は通常と同じ作業で製作すれば、OKです。
装飾系にCSSを限定して、HTML構文に変化（HTML5専用タグ）を使用しなければ、HTML5未対応のブラウザーでの表示でも崩れる事は無いかと思います。

このあたり、はクロスブラウザーチェックで回避するしか手段がありませんが、まぁこの程度の変更で、MTML5&CSS3が使えるのであれば、良いのではないかと。

参考サイト
HTML5 differences from HTML4
http://www.w3.org/TR/html5-diff/

神奈川県を中心として主に横浜・川崎・東京23区西部の中小企業・個人事業主向けホームページを制作しております。　横浜本田WEB

横浜本田WEB Facebookページ
http://www.facebook.com/hondaweb?fref=ts

2012年2月15日水曜日

EC-CUBE2.11.X テンプレートカスタマイズ HTML5化？の覚書

EC-CUBE2.11.X テンプレートカスタマイズ　HTML5化？の覚書