本気のインターネットショップ開業派
トップページ - 初めての方へ - カートを見る/清算 - お問い合わせ  



おすすめサーバー
自作低コストこだわり派

初心者用サーバー

twitterでつぶやき中

Powered by ついめ〜じ


spc トップページ > 自作支援ツール > CGI営業日カレンダーの作り方

CGI営業日カレンダー2ヶ月表示の作り方


自作レベル ★★★☆☆ [中級]

最近は営業日カレンダーを2ヶ月分並べて表示するネットショップも増えてきました。ヤフーショッピングやEストアーなどのCMSではあらかじめ用意されていて、管理画面から簡単にカレンダー表示設定ができます。しかしながら、ネットショップを自作構築している場合は、カレンダーも自前となります。

そのそも「営業日カレンダー」というCGIスクリプトやJavaScriptは、ほとんど存在せず、普通のカレンダーやスケジュールを目的として作られたスクリプトを転用することで営業日カレンダーとします。

今回は、その中でも、使いやすさ(管理)や見栄え(デザイン)の点で最も自由度の高いフリーCGIを使った営業日カレンダーの作り方を解説します。

基本編 - デフォルト表示


基本編では、CGIをインストールし、デフォルトのまま表示させます。これだけでも十分営業日カレンダーとすることができます。使うフリーCGIは、cgi designさんの特定日を色づけできるCGIを拝借します。必要最低限のファイル数かつ、設置が簡単なので初心者にもおすすめです。

■作業手順

ステップ1. 通常のCGIの扱いと同様、サーバーにアップ。
(この作業は基本なので解説しません)

ステップ2. SSIを使ってカレンダーを表示させます。

まず、カレンダー表示用のHTMLを作ります。ファイル名は「calendar.shtml」などとします。SSIを使うため「.shtml」となりますが、サーバーによっては「.html」のままでも利用できることもあるので、各自サーバー情報等で確認してください。

SSIの中身は以下のように書きます。
(【注】パスは各自のサーバに合わせること)

spc

<!--# include virtual="sche38.cgi" -->

「calendar.shtml」をサーバーにアップロードしたなら、calendar.shtmlにアクセスして、カレンダーが表示されいるか確認します。ちゃんと表示できない場合はCGIの設定やパスなどを再度チェックしてください。必ずどこかに間違いがあります。

ステップ3. インラインフレーム(iframe)を使って、各ページに表示させます。

<IFRAME src="../calendar/calendar.shtml" width="167" height="162"
frameborder="0" scrolling="no"></IFRAME>

ポイント
ショッピングカート内など、SSLページ(共用SSL含む)内に表示させたい場合は、インラインフレーム内のURLをSSL用のURLに変更します。変更しないと、SSLページに移動する度にアラーとが出てしまいやっかいです。


<IFRAME src="https://sv07.wadax.ne.jp/~netshop7-com/cgi/calendar/sche38.cgi"
width="167" height="162" frameborder="0" scrolling="no"></IFRAME>



応用編A 2ヶ月分表示させる


本来の目的である2ヶ月を同時に表示させます。応用編といっても基本編をほんの少し変更するだけです。

ウェブショップ・カレンダー画像■作業手順

ステップ1 カレンダー表示用SSI(calendar.shtml)に2ヶ月目を表示させるよう、以下のように1行追加します。

<!--# include virtual="../sche38.cgi" --><Br />
<!--# include virtual="../sche38.cgi?year=2008&mon=2" -->


注意するべき点は、1行目は当月を自動表示しますが、2行目は毎月、翌月分を手動で変更させる必要があります。自作かつ無料スクリプトを使うのだから、この点だけは妥協しないといけないでしょう。

ちなみに、上記のSSIコメントをさらに追加すれば、翌々月、3ヶ月目、4ヶ月目など必要な数だけ表示させることや、前月過去の月も表示させることもできます。

ステップ2 インラインフレームを2ヶ月に対応できるよう大きさを変更

<IFRAME src="../calendar/sche38.cgi" width="167" height="350"
frameborder="0" scrolling="no"></IFRAME>


7月、8月などは31日が2ヶ月続くので、縦の長さに余裕を持たせておくと良いでしょう。


応用編B 大きさやデザインの変更、不要なもの削除


ヤフーショッピング風営業日カレンダー右の画像はヤフーショッピングの営業日カレンダーです。

営業日カレンダーですから、営業日、定休日、臨時休業日など、お客さんが見てすぐにわかるようなデザインが望ましいでしょう。今回は、ヤフーショッピングのカレンダーが非常に見やすいのでそのまま真似てしまいましょう。

デザインの変更では、CGIファイル内のHTMLを編集します。HTMLがわかっていない人はCGIをいじると動作しなくなることがあるので、腕に自信がある人だけにしてください。

営業日の前提:土日祝日を定休、臨時休業もあり

■作業手順

ステップ1. 大きさ背景の設定を変更

大きさを変更します。これは各自好みの大きさに変更可。さらに、土日祝日の背景を自動的に表示させるために<font color>の設定を<TD bgcolor="">と変更。変更前、変更後で追加している部分、削除している部分などがあるので注意しながら変更してください。

編集ファイルは:sche.cgi
変更前

85行目
for (0 .. 6) {print "<td width=20><font color=¥"$wcolor[$_]¥">$week[$_]</font></td>¥n";}

102~107行目
: print "<td height=20 bgcolor=¥"$dsp_color¥">";
} else {
$chk = '';
print "<td height=20>";
print "<font color=¥"$wcolor¥">$k</font>";


※下線部は削除

変更後

85行目
for (0 .. 6) {print "<td width=23 height=21>$week[$_]</td>¥n";}

102〜107行目
print "<td height=23 height=21 bgcolor=¥"$dsp_color¥">";
} else {
$chk = '';
print "<td height=23 height=21 bgcolor=¥"$wcolor¥">";
}
print "$k";

【注意】 ¥は半角で入力すること。
ステップ2. 管理画面でカラー設定

背景色をつける準備はできたので、管理画面で背景色の設定を行います。



ここまで設定できたなら、以下のような表示になるはずです。

カレンダーほぼ完成

ステップ4 余計なものを削除

当年の両サイドにある「<<」「>>」を削除し、2008年1月という風に表示させます。

編集ファイルは:sche.cgi
変更前

70〜76行目
print "<table><tr><td>$logyear   ";
$mon = $logmon - 1;
if ($mon < 1) {$mon = 12; $year = $logyear - 1;} else {$year = $logyear;}
print "<a href=¥"$script?year=$year&mon=$mon¥">&lt;&lt;</a>&nbsp;<b>$logmon月</b>&nbsp;";
$mon = $logmon + 1;
if (12 < $mon) {$mon = 1; $year = $logyear + 1;} else {$year = $logyear;}
print "<a href=¥"$script?year=$year&mon=$mon¥">&gt;&gt;</a></td></tr></table>¥n"


※下線部を削除

変更後

70〜76行目
print "<table width=100%><tr><td align=center><b>$logyear年</b>";
$mon = $logmon - 1;
if ($mon < 1) {$mon = 12; $year = $logyear - 1;} else {$year = $logyear;}
print "<b>$logmon月</b>";
$mon = $logmon + 1;
if (12 < $mon) {$mon = 1; $year = $logyear + 1;} else {$year = $logyear;}
print "</td></tr></table>¥n";

【注意】 ¥は半角で入力すること。

以上で改造関係は完了です。
あとは好みの場所に表示させるだけです。
右のインラインフレームは実際にCGIで表示させています。2ヶ月目は「応用編A」の通り手動によるものです。
毎月手動で変更してください。

仕上げとして、calendar.shtml内に以下のように入れておけば、完璧な仕上がりとなります。

・・・休業日
・・・臨時発送日等

さらに、この下に管理画面へのリンクを作っておくと便利です。

edit

〜calendar2/sche38.cgi?mode=admin
spc
営業日カレンダー


応用おまけ編 横に2ヶ月表示


横に2ヶ月表示させるためには、calendar.shtml内のHTMLを編集するだけです。具体的には、tableを使います。

<table border="0"><tr>
<td>
<!--# include virtual="../sche38.cgi" -->
</td>
<td>
<!--# include virtual="../sche38.cgi?year=2008&mon=2" -->
</td>
</tr>
</table>

cellpaddingやcellspacing等はお好みで設定してください。




応用おまけB 3ヶ月表示やその他


説明するまでもありませんが、SSIのコメントを挿入することで、3ヶ月だろうが4ヶ月分だろうが、なんなら12か月分でも表示させることができます。

ポイントは、URLの書き方

今が1月だとしたら、3ヶ月目は「〜cgi?year=2008&mon=3」

場合によっては、「インラインフレームは使いたくない」というケースもあるでしょう。そのような場合は、大変お手数ですが、上記の営業日カレンダーを適当な場所に作っておいて、毎月それをgif画像や、jpeg画像にしてアップロードすれば良いでしょう。

各ページへの挿入も画像へのURLを書くだけで済むので簡単ですが、画像作成が大変です。でも、実際にやってるお店さんも多いようです。

TOP| 通販ショップの作り方| 運営ノウハウ| ショッピングカートCGI| レンタルサーバー比較| 教材販売
当サイトはWADAX(ワダックス)のサーバーで運用されています。

当サイト内の記事や写真、文章などすべてのコンテンツの無断複写・転載等を禁じます。
Copyright(c) 2009 本気のインターネットショップ開業派(Netshop7.com) All Rights Reserved.