概要
スキンの型
- スキンには種類とか型とか呼ばれる種別があります。
- その内容は以下の通りです。
- HTML スキン
- もしくはウェブ用スキン。
- ウェブ出力用のスキンで、execute 用と plugin 用とがあります。
- MAIL スキン
- もしくはメール用スキン。
- メール出力用のスキンです。
- WORDLIST 型スキン
- これは補助的なスキンです。
- 条件に合わせて選択したうえで他のスキンに挿入する必要のある様々な文字列を扱います。
- たとえば曜日のリストといったものになります。
- スタイルシート
- HTML スキンが必要とする外部スタイルシートです。
アドバイス
- 製品を導入するショップのほとんどが、スキンを自作することを考えておられると思います。
- その際は以下の点にぜひご留意ください。
- 標準スキンを改造するより、HP作成ソフトなどを使って新規にデザインを起こしてそれを移植する方がはるかに楽です。
- 標準は全ページ3ペインとなっていますが、ページによっては2ペインとなるようにするとよさそうです。
- 各ページにあるヘルプはくどいので省いたほうがいいかもしれません。
- 2ペインにする場合でも3ペインにする場合でもメインの部分はブラウザの幅に合わせて表示幅が可変になるようにするのがスマートです。
- 公式にスキン製作例がありますのでよく読みましょう。
独自タグについての予備知識
- CAFEMILK SHOPPING CART V5 製品には独自のテンプレートエンジンが搭載されており、通常の HTML ソースに独自タグによる表記を加え、それをテンプレートエンジンに通すことによってウエブ表示等のテキスト出力が完成するという仕組みになっています。
- タグには以下の表記と種類があります。
<#key#>.......... : 低層テンプレートタグ
<##key##>........ : 中層テンプレートタグ
<###key###>...... : 高層テンプレートタグ
<####key####>.... : 低層プラグインタグ
<#####key#####>.. : 中層プラグインタグ
<######key######> : 高層プラグインタグ
- テンプレートタグは主に文字列の出力に用います。
- プラグインタグは plugin 型プラグイン (用語に注意) を呼び出すタグで、プログラムの実行とスキン部品の出力を行います。
- テンプレートタグが簡易、プラグインタグが高度、という位置づけになります。
- が、スキン側から見ればどちらもただのタグです。
- これらは、スキン側から見る限り、違いを気にする必要はあまりありません。
- # 記号の多さは実行の優先度を表します。つまり、# 記号が多いタグほど優先して実行されます。
- どのタグにも必要に応じてオプションをつけることができます。
- オプションは : (コロン) 区切りで複数を指定できます。
- 以下はオプションの付いたタグの一例です。
<#####mail_cart_record:package#####>
path_cgi......... : CGIのファイル名
url_root......... : CGIのURL
url_sslroot...... : SSLでのCGIのURL
path_material.... : スキン内で使用する素材画像ファイルのディレクトリ
user_name........ : 会員のニックネーム
user_point....... : 会員の所有ポイント
mailing_free_cost : 送料無料購入額
make_select...... : フォーム内の SELECT 入力欄
message.......... : 汎用 オプションをつけて様々な語句を出力する
temporal......... : 汎用 オプションをつけて様々な語句を出力する
preview_user_type : ログイン属性
category_bread... : パンくずナビ
cart_stack....... : カートへの投入数
cart_subtotal.... : カートの小計
material_html.... : 汎用 HTML 部品の単純呼び出し
HTML execute スキン
- あるいは単に execute スキン。
- これは、ウェブに表示される各ページの全体をレイアウトするスキンです。
- そこに、プラグインタグやテンプレートタグという形で、スキン部品や各種要素が挿入されていきます。
- スキンのファイル名は以下のようになります。
exe_ + execute 名 + .html
- 通常、スキンは、PC 表示用と MOBILE (携帯) 表示用の 2 種類あって、それぞれ別のディレクトリにあります。
- execute スキンは以下のディレクトリに存在します。
[Apache_server]
└ [cgi-bin]
└ [skin]
└ [user]
└ [cgi]
└ [default]
├ [web]
├ └ [japanese]
├ └ [yen]
├ └ [default]
└ [mobile]
└ [japanese]
└ [yen]
└ [default]
- HTML execute スキンはウェブページとなるものですので、head を出力しなければなりません。
- head においては以下の情報の出力が行われます。
title....... : ページのタイトル
Content-Type : 文字コードは UTF-8 です
robots...... : ロボット型クローラへの指示
product..... : 製品の情報
author...... : 制作者
stylesheet.. : スタイルシートのパス
script...... : JS スクリプトのパス 必要な場合のみ
<head>
<title>会員登録手続 > > 情報の入力</title>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=UTF-8'>
<meta name='robots' content='<#robots#>'>
<meta name='product' content='<##product##>'>
<meta name='author' content='<##author##>'>
<link href='<##path_css##>' type='text/css' rel='stylesheet'>
<script src='<##path_js##>ajaxzip2/prototype.js'></script>
<script src='<##path_js##>ajaxzip2/ajaxzip2.js' charset='UTF-8'></script>
<script>AjaxZip2.JSONDATA = '<##path_js##>ajaxzip2/data';</script>
</head>
- 実際の出力では独自タグ (この場合はテンプレートタグ) が置換されますので、例えば以下のようになります。
HTML plugin スキン
- あるいは単に plugin スキン。
- これは、プラグインタグによって呼び出されるスキン部品となります。
- plugin 型プラグインが呼び出すスキンが 1 つのみの場合、たいてい、スキンのファイル名は以下のようになります。
pin_ + plugin 名 + .html
- しかし、plugin 型プラグインは複数のスキンを読み込むことがあります。
- 例えば、plugin 型プラグイン user_item_main が呼び出すスキンは以下のようになります。
pin_user_item_main_image.html
pin_user_item_main_flash.html
pin_user_item_main_text.html
pin_user_item_main_table.html
pin_user_item_main_submit_singletype.html
pin_user_item_main_submit_multitype_1.html
pin_user_item_main_submit_multitype_2.html
pin_user_item_main_submit_multiprice_1.html
pin_user_item_main_submit_multiprice_2.html
- 通常、スキンは、PC 表示用と MOBILE (携帯) 表示用の 2 種類あって、それぞれ別のディレクトリにあります。
- plugin スキンは以下のディレクトリ (execute スキンと同じディレクトリ) に存在します。
[Apache_server]
└ [cgi-bin]
└ [skin]
└ [user]
└ [cgi]
└ [default]
├ [web]
├ └ [japanese]
├ └ [yen]
├ └ [default]
└ [mobile]
└ [japanese]
└ [yen]
└ [default]
- plugin 型プラグイン user_status のスキンは他の plugin スキンと異なり、ログイン状態によってスキンを切り替えるようになっています。そのため、同じファイル名 pin_user_status.html のスキンが 6 つあります。
- これらのスキンは以下のディレクトリに存在します。
[Apache_server]
└ [public_html]
└ [skin]
└ [user]
└ [cgi]
├ [default]
├ ├ [web]
├ ├ └ [japanese]
├ ├ └ [yen]
├ ├ └ [default]
├ └ [mobile]
├ └ [japanese]
├ └ [yen]
├ └ [default]
├ [guest]
├ ├ [web]
├ ├ └ [japanese]
├ ├ └ [yen]
├ ├ └ [default]
├ └ [mobile]
├ └ [japanese]
├ └ [yen]
├ └ [default]
└ [member]
├ [web]
├ └ [japanese]
├ └ [yen]
├ └ [default]
└ [mobile]
└ [japanese]
└ [yen]
└ [default]
MAIL スキン
- メールの本文を作成するスキン、という以外は HTML スキンとほぼ同じ振る舞いをします。
- スキンのファイル名は以下のようになります。
mail_ + メール名 + .txt
- MAIL スキンは以下のディレクトリ (HTML スキンと同じディレクトリ) に存在します。
[Apache_server]
└ [cgi-bin]
└ [skin]
└ [user]
└ [cgi]
└ [default]
├ [web]
├ └ [japanese]
├ └ [yen]
├ └ [default]
└ [mobile]
└ [japanese]
└ [yen]
└ [default]
- スキンの 1 行目は件名であることがあります。
- 以下はスキンの例です。
1 行目は件名
[SHOP] 問い合わせ<##user_time##>
メール本文
※ このメールはショップ向けの自動発行メールです
● 基本情報
○ 手続名
問い合わせ
○ 手続コード
<##user_time##>
○ 日時
<##user_time_year##>年<##user_time_month##>月<##user_time_day##>日<##user_time_week##> <##user_time_hour##>時<##user_time_min##>分
● 問い合わせ情報
○ メールアドレス
<##temporal:input_1_email_1##>
○ 問い合わせ内容
<##temporal:input_inquiry##>
WORDLIST 型スキン
- 出力用の文字列を格納するスキンです。
- 各項目は予約されており、並び替えることはしません。
- スキンのファイル名は以下のようになります。
list_ + WORDLIST 名 + .txt
- WORDLIST 型スキンは以下のディレクトリ (HTML スキンと同じディレクトリ) に存在します。
[Apache_server]
└ [cgi-bin]
└ [skin]
└ [user]
└ [cgi]
└ [default]
├ [web]
├ └ [japanese]
├ └ [yen]
├ └ [default]
└ [mobile]
└ [japanese]
└ [yen]
└ [default]
- 例えば、list_input_status.txt の内容は以下のようになります。
入力内容が不正です
入力がありません
文字数が不正です
入力文字数が多すぎます
入力文字数が少なすぎます
入力内容が一致しません
同じ文字列がすでに使用されています
アカウント名とパスワードが同じです
他との重複により使用が認められないパスワードです
文字以上
文字以内
全角
半角
英数
数字
かな
カナ
数値が大きすぎます
数値が小さすぎます
桁数が不正です
- WORDLIST 型スキンの文字列は様々なところから呼び出されるので、変更する際には各所において表記に乱れが生じないか注意する必要があります。
スタイルシート
- スタイルシートに特殊なところは何もありません。
- PC 表示のスタイルシートは外部にあります。
- PC 表示のスタイルシートは以下のディレクトリにあります。
[Apache_server]
└ [public_html]
└ [skin]
└ [user]
└ [cgi]
└ [default]
└ [web]
└ [japanese]
└ [yen]
└ [default]
material_html スキン部品
- 内部において独自タグを用いないスキン部品は plugin 型プラグインを介すことなく、テンプレートタグ material_html を用いて単純な呼び出しを行うことができます。
- トップページにバナー型の広告を並べる場合など、頻繁に部品の差し替えがある場合に重宝します。
- material_html の使用例は以下の通りです。
<##material_html:sample##>
- 上記の場合に呼び出されるスキン部品のファイル名は以下の通りです。
sample.html
- material_html が呼び出すスキンは以下のディレクトリに置きます。
[Apache_server]
└ [cgi-bin]
└ [skin]
└ [user]
└ [material]
最終更新：2009年10月02日 17:43
