わたしが運営しているキクオンでは製品の製作を手作業で行っている為、納期が流動的で2週間に1度納期のお知らせを更新している。
納期が固定ではないため各商品ページに納期を表示させようとすると、商品毎のHTMLを編集する必要がある。これは間違いの元であり何とか方法は無いかと考えてみた。
また今日の日付から2週間後は何月の何日なのかを表示したかった。
またお客様がページを表示した時点の日から設定した日数を加算して、それぞれの商品ページへ設定した納期を表示したかった。
外部ファイルとしてjavascriptを置いて、その計算結果を各HTMLで表示する。
イメージとしてはこんな感じ。
実験の例としてキクオンのDACの納期を表示する場合のソースコード
(day.js)
■day.jsの説明
色が付いている箇所が任意に設定する部分。
3種類のDACの納期計算に分かれている。
赤色が関数・変数の名前。
関数とか変数を意識しなくても赤色部分の名前を全て同じ名前で任意に付ける事ができる。(もちろん半角英数)
緑色が表示される文字。
◆日数の設定
各3行目の"n="の部分に納期の日数を入れる。
var dac01n=7;
この場合7日後。
それぞれの商品用に日付を設定する(例ではDAC-01が7日、DAC-02が10日、DAC-03が14日。)
HTMLのソース(a.html)
■a.htmlの説明
day.jsは同一の階層に配置されている事。階層の指示(src="day.js")
赤色が関数の場所。
day.jsではPタグを設定しているので、このhtmlで読み込まれるcssが適用される。(この例ではcssの設定はしていない)
実際に動作させると以下のように表示される。(a.htmlの表示例)
今日が5/20で+7日後の27日が計算通り表示される。
先にも話した通り1種類のファイルを操作するだけで3種類の納期表示を別々のHTMLに表示する事が実現出来た。
webでショップを経営していてHTMLやCSSは少し位分かるが、javascriptは抵抗感があるという人でも簡単に設置できるのではないだろうか。
TEXTでのソースコードの表示は面倒だったので画像にしました。手打ちが必要ですがこのjavascriptソースは自由に使ってやってください。
はたして私の解説で、この便利さが伝わるだろうか?
2009/05/22
タイトルが適切ではなかったので変えました。
各所に追記しています。