自動更新の営業日カレンダーを設置

楽天ショップの営業日カレンダー、毎月更新するのめんどうだ!!とのご意見から
自動更新カレンダーを設置しようということになりました。

自動更新ということは、JavaScriptを利用する方法が考えられますが、
楽天ショップの場合、通常のRMSで作成するトップページやレフトナビには
JavaScriptが使用できません。
そこで、JavaScriptカレンダーを設置するにはGOLDサーバーを利用しなくてはなりません。

「GOLDサーバーってHTMLがわからないと無理なんでしょ!うちはムリムリ!!」と
よくショップオーナー様に言われてしまいます。

でも、JavaScriptファイルだけGOLDサーバーに置いて
通常のRMSのレフトナビから呼び出せば結構簡単に設置できます。

では、やってみましょう!

まず、JavaScriptカレンダーを用意。
とってもステキなカレンダーをお借りしてしまいました。
営業日・定休日カレンダー

最初の設定がちょっと複雑ですが、デザインや使い勝手がとっても良いのです!!

自動更新カレンダー

「毎週水曜日がお休み」とか「毎月10日はお休み」などといった定休日の設定ができますし、
「1月1日から1月3日まではお休み」といった臨時休業の日の設定もできます。
あっ!自動更新といっても、これだけは前もって設定しておきます。
定休日は最初に設定してしまえば更新はいりませんし、
臨時休業日は数カ月先まで設定しておけばしばらくは更新不要ですね。

ではでは、設置方法です。

まず、ダウンロードしましょう。
営業日・定休日カレンダー

ダウンロードし、解凍すると
「single」と「multi」というフォルダがありますが
とりあえず今回は「single」だけ使います。

最終的には、この「single」フォルダを丸ごとGOLDサーバーにアップします。

アップの前に少し設定をしましょう。

「single」フォルダ内の「cal」フォルダを開きます。
cal.jsをメモ帳などテキストエディタで開きます。

このファイルに定休日の設定を行います。

1.毎週●曜日が定休日という設定
————————————
21行目から以下のような記述があります。

	//毎週○曜日の場合
	calObject[cal_Id].week = new Object();
	calObject[cal_Id].week["flag"] = 1;
	calObject[cal_Id].week["Sun"] = "Sun";
	calObject[cal_Id].week["Mon"];
	calObject[cal_Id].week["Tue"];
	calObject[cal_Id].week["Wed"];
	calObject[cal_Id].week["Thu"];
	calObject[cal_Id].week["Fri"];
	calObject[cal_Id].week["Sat"] = "Sat";

たとえば、毎週水曜日が定休日の場合にはこれを以下のように変更します。

	//毎週○曜日の場合
	calObject[cal_Id].week = new Object();
	calObject[cal_Id].week["flag"] = 1;
	calObject[cal_Id].week["Sun"];
	calObject[cal_Id].week["Mon"];
	calObject[cal_Id].week["Tue"];
	calObject[cal_Id].week["Wed"] = "holyday";
	calObject[cal_Id].week["Thu"];
	calObject[cal_Id].week["Fri"];
	calObject[cal_Id].week["Sat"];

いままで、土曜日が青、日曜日が赤だった表示が消え、水曜日が定休日の色になりました。

2.1月1日から1月3日までは臨時休業などという設定
——————————————-

こちらは11行目からの以下の部分を変更します。

	//定休日などはここで設定します。
	//calObject[cal_Id].day[ここに日にちを半角で] = クラス名;
	calObject[cal_Id].day = new Object();
	calObject[cal_Id].text = new Object();
	calObject[cal_Id].day["2009/6/9"] = "holyday";

これを以下のように変更しましょう。

	//定休日などはここで設定します。
	//calObject[cal_Id].day[ここに日にちを半角で] = クラス名;
	calObject[cal_Id].day = new Object();
	calObject[cal_Id].text = new Object();
	calObject[cal_Id].day["2012/1/1"] = "holyday";
	calObject[cal_Id].day["2012/1/2"] = "holyday";
	calObject[cal_Id].day["2012/1/3"] = "holyday";

お休みの日はどんどん増やせば大丈夫そうです。
もちろん、終了した日付は削除しておきましょう。

あとは、GOLDサーバーへ「single」フォルダごとアップしましょう。

では、いよいよレフトナビから呼び出してカレンダーを表示してみます。

呼出には
<ifram>タグを使用します。

RMSからレフトナビの編集を開き、カレンダーを表示したい部分に以下を挿入してみましょう。

<!--▽カレンダーここから▽-->
<div style="text-align:center">
<iframe width="175" height="200" frameborder="0" src="http://www.rakuten.ne.jp/gold/店舗ごとに異なります/single/cal.html"></iframe>
</div>
<!--△カレンダーここまで△-->

CSSファイルでデザインも調整可能です。
これで、毎月のカレンダー更新がちょっと楽になります!!

楽天ショップの営業日カレンダー

楽天ショップのほとんどのお店に営業日や定休日を示すカレンダーが表示されていますが
このカレンダーは自動更新ではありません。
(GOLDページならJavaScriptなどを使って自動更新カレンダーを設置できますが)
毎月、HTMLを作成してショップに貼り付けなくてはいけないので、
結構手間がかかります。

「カレンダーだけ毎月更新して~」なんて依頼も結構あるんですよ。

楽天のRMSマニュアルの中にもカレンダーの作成を支援するページがありますが
ここまでたどり着きにくい(笑)

私がよくお世話になっているサイトをご紹介しておきます。
自動作成カレンダー屋さん

枠の色や背景色などを選ぶと、自動的にカレンダーのHTMLを生成してくれます。
90日間は設定を記憶しておけるので、毎月一回作成して更新しておけば大丈夫です。

でも、祝日がお休みのショップや平日が定休日のショップはちょっと手直しが必要。
たとえば
カレンダー作成
こんなカレンダーを、自動作成カレンダー屋さんで作ってみます。
そうするとできあがったHTMLは以下の通り

<table border="0" cellspacing="1" cellpadding="1" bgcolor="#CCCCCC" style="font: 12px; color: #666666;">
<tr>
<td align="center" colspan="7" bgcolor="#FFFFFF" height="18" style="color: #666666;">2011年10月</td></tr>
<tr>
<td align="center" width="20" height="18" bgcolor="#FF6699" style="color: #FFFFFF;">日</td>
<td align="center" width="20" bgcolor="#FFFFCC" style="color: #666666;">月</td>
<td align="center" width="20" bgcolor="#FFFFCC" style="color: #666666;">火</td>
<td align="center" width="20" bgcolor="#FFFFCC" style="color: #666666;">水</td>
<td align="center" width="20" bgcolor="#FFFFCC" style="color: #666666;">木</td>
<td align="center" width="20" bgcolor="#FFFFCC" style="color: #666666;">金</td>
<td align="center" width="20" bgcolor="#FF6699" style="color: #FFFFFF;">土</td>
</tr>
<tr>
<td align="center" height="18" bgcolor="#FFCCCC" style="color: #666666;"> </td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;"> </td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;"> </td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;"> </td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;"> </td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;"> </td>
<td align="center" bgcolor="#FFCCCC" style="color: #666666;">1</td>
</tr>
<tr>
<td align="center" height="18" bgcolor="#FFCCCC" style="color: #666666;">2</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">3</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">4</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">5</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">6</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">7</td>
<td align="center" bgcolor="#FFCCCC" style="color: #666666;">8</td>
</tr>
<tr>
<td align="center" height="18" bgcolor="#FFCCCC" style="color: #666666;">9</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">10</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">11</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">12</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">13</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">14</td>
<td align="center" bgcolor="#FFCCCC" style="color: #666666;">15</td>
</tr>
<tr>
<td align="center" height="18" bgcolor="#FFCCCC" style="color: #666666;">16</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">17</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">18</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">19</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">20</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">21</td>
<td align="center" bgcolor="#FFCCCC" style="color: #666666;">22</td>
</tr>
<tr>
<td align="center" height="18" bgcolor="#FFCCCC" style="color: #666666;">23</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">24</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">25</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">26</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">27</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">28</td>
<td align="center" bgcolor="#FFCCCC" style="color: #666666;">29</td>
</tr>
<tr>
<td align="center" height="18" bgcolor="#FFCCCC" style="color: #666666;">30</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">31</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;"> </td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;"> </td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;"> </td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;"> </td>
<td align="center" bgcolor="#FFCCCC" style="color: #666666;"> </td>
</tr>
</table>

33行目の10日は祝日です。
自動生成したカレンダーは祝日表示になっていないので、祝日表示にするには
<td align=”center” bgcolor=”#FFFFFF” style=”color: #666666;”>10</td>

<td align=”center” bgcolor=”#FFCCCC” style=”color: #666666;”>10</td>
と書き換えます。
土曜日や日曜日の設定と同じにすればOKです。
bgcolorが背景の色、style=”color: ” が文字の色です。

平日がお休みのショップも同じように書き換えればOKです。