ラベル EC-CUBE 2.11.X の投稿を表示しています。 すべての投稿を表示
ラベル EC-CUBE 2.11.X の投稿を表示しています。 すべての投稿を表示

2012年2月15日水曜日

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

になります。


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

<!--{printXMLDeclaration}-->
<!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=<!--{$smarty.const.CHAR_CODE}-->" />
<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の出来上がり……ですが、実は、1行目にXML宣言がされています。
ブラウザーからソース確認して頂くとわかりますが、1行目の

<!--{printXMLDeclaration}-->

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

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

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

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

W3C原文 ///////////////////////////////////////

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宣言されたHTML5ファイルの場合は、application/xhtml+xmlまたはapplication/xmlメディアタイプでないとダメですよ。
と言っています。

では、どうするか?

方法は2つ。

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

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

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

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

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

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

2012年2月10日金曜日

EC-CUBE 2.11.X カスタマイズ テンプレート関連 覚書

EC-CUBEも2.11.Xから、ついにスマートフォン対応になって、非常に便利になった?感じもしますが、元々それなりに複雑な表示テンプレートシステムだったモノが、更に難しく?なった感じも否めないですね……

と言う事で、いじり倒す前に、基本のファイル設定は書き出しておこうと思って書いています。
EC-CUBE 2.11.X 系でテンプレートへの変更を考えている方は、参考にしてください。
(他にも似たようなところは有るし、本家のフォーラムも確認してくださいね)

EC-CUBE 2.11.X は、
  1. PC
  2. スマートフォン
  3. 携帯
の3つの機種に対応、正確には各ブラウザーのユーザーエージェントを取得して、各テンプレートを切り替えているだけの代物です。

つまり、テンプレートは、各機器ごとにあるので、全部で3タイプある事になります。
しかも各テンプレートは完全に独立しているので、PCを変えたからと言って、スマートフォンを変えないと、表示がおかしくなる、と言うような事はありません。

PC用は表示情報量が多いので、変更する事はそれなりに大変ですが、スマートフォンや携帯であれば、比較的簡単に変更が可能です。

また、新しいテンプレートを製作しなくとも、システム上からCSS等の変更が可能なので、かなり自由に変更は出来るかと思います。
むしろ、tplファイルをいじる方が面倒な場合もあります……


前置きはこれくらいで、ではそれぞれの、ファイルの場所を。


PC関連テンプレート //////////////////////////////////


テンプレートファイル .tpl ***************************************

data\Smarty\templates\default フォルダ内

この中の.tplファイルがhtml表示用のテンプレートになります。
この中に更に、各ページ名称が振らたフォルダがありますので、その中に更に各ページに対するテンプレートファイルがあります。

defaultフォルダ内にある、ファイルの主なモノです。

site_frame.tpl //ページ表示用のヘッダー部分になります。CSSやJavaScriptファイルの読み先
site_main.tpl //コンテンツ表示部分この中に各.tplファイルが読み込まれます。

その他のファイルは、だいたいファイル名称通りの内容が記述されています。
あくまでだいたいですよ。



CSS(スタイルシート) .css ***************************************

html\user_data\packages\default\css フォルダ内

メインで使われているファイルは

common.css

他のファイルについては、ファイル名の内容に関するCSSが書き込まれています。



img(イメージファイル) .jpg等  ***************************************

html\user_data\packages\default\img\**** フォルダ内

内部に各使用目的別のフォルダがあるので、その中の画像を使用します。
このフォルダの画像は、CSSと直接.tplファイルに読み込む為のモノと共通です。



スマートフォン関連テンプレート //////////////////////////////////

テンプレートファイル .tpl ***************************************

data\Smarty\templates\sphone フォルダ内


CSS(スタイルシート) .css ***************************************

html\user_data\packages\sphone\css フォルダ内


img(イメージファイル) .jpg等  ***************************************

html\user_data\packages\sphone\img\**** フォルダ内




携帯関連テンプレート //////////////////////////////////

テンプレートファイル .tpl ***************************************

data\Smarty\templates\mobile


img(イメージファイル) .jpg等  ***************************************

html\user_data\packages\mobile\img


CSS(スタイルシート) .css ***************************************

どうやら、携帯にはCSSは適用していないようで、ファイルが存在しません。




ざっと調べた限りでは、上記の箇所を変更すれば、デザインに関する変更は可能です。

まぁ、レイアウト変更と言っても、デフォルトのデザインが3カラムですので、それを2カラムに変更したとしても、変えるべきモノは、TOPにあるメインイメージだけで後は、CSSで対応可能なレベルのテンプレートになっているので、よく出来たモノだと思います。

この各ファイルの場所さえわかれば、変更は簡単ですので、どんどんテンプレートをくつってみてください。


もちろん、テンプレート製作の依頼も受けておりますので、お気軽にご相談ください。