HTMLの部品化

Open-ECは、Alinous-Coreというテクノロジーがベースになって作成されたパッケージです。その中で、ポートレットというHTMLパーツの部品化のテクノロジーを利用しています。このテクノロジーを利用することによって、効率よく、同じHTMLを何回も書かずにデザインの定義をすることが出来ます。

トップページのポートレット例

Open-ECはトップページを含めたほぼすべてのページでポートレット技術を利用しています。トップページの例を知り、ポートレットを利用した部分に関係する部分を一部分でも（どんなに簡単でも）カスタマイズを経験することにより、今後、自由自在にECサイトのカスタマイズを行うことが出来ます。

トップページの部品化

Open-ECのトップページのテンプレートである『/ALINOUS_HOME/templetes/index.html』にもこのポートレットが利用されています。次の図の赤い四角い部分に相当するdivタグには『/ALINOUS_HOME/templetes/default.html』が埋め込まれています。

この埋め込み処理は、サーバーサイドで行われるため、2つのHTMLで合成されていても、ブラウザは一つのHTMLだと認識します。

部品化のメカニズム

この部品化を行うことによって、『/ALINOUS_HOME/templetes/index.html』の外側のテンプレートの部分を様々なページ（たとえば、大カテゴリのページや商品ページ）で再利用が出来るため、同じHTMLを毎回かかなくてもすむようになります。

トップページの表示処理を行う際には、次の順でプログラムが実行されます。

• 『/ALINOUS_HOME/templetes/index.alns』が実行される
• 『/ALINOUS_HOME/templetes/index.html』に変数が埋め込まれる
• 『/ALINOUS_HOME/templetes/default.alns』が実行される
• 『/ALINOUS_HOME/templetes/default.html』に変数が埋め込まれる

この手順が実行されることによってトップページが表示されます。

また、大カテゴリページや商品ページを表示する場合には、『/ALINOUS_HOME/templetes/default.alns』の実行時に、ページに渡されたパラメータから判断して、『/ALINOUS_HOME/templetes/default.html』ではない別のhtmlを内部部品として利用するように切り替えることが出来ます。

その際に使われるhtml部品は『/ALINOUS_HOME/parts/』フォルダーの中にそれぞれが用意されています。

ポートレットの利用と具体的なHTMLのコーディング

ポートレットを利用するためには、『/ALINOUS_HOME/templetes/index.html』のなかに、次のようなコーディングを行います。

このコーディングでは、divタグに「alns:tagid」と「alns:inner」という二つの属性を記述することによって可能になります。「alns:tagid」には、このdivタグに任意の名前をつけることが出来ますが、Open-EC上では「contents」という値に設定します。「alns:inner」には、このdivタグに挿入するほかのhtmlファイルを「/ALINOUS_HOME/」を起点とした絶対パスで指定します。

[↑ページトップ]