リアルタイム受注状況を表示させる方法(無料CGI)

楽天で良く見かけるリアルタイム受注状況の小窓(こんなやつ)ですが、ショップサーブにはその機能はありません(泣)。

現在、機能追加の準備中なのか追加対象外なのか、はっきりしないのがもどかしい。

でも、ショップサーブは、その辺のカスタマイズ(HTMLやCGI、PHPまで使えるのだ)が無料でガンガンできるので、「必要なら自分でやってくれ!」ということなんでしょう。

ええ、わかりました。やりますよ!

まず、ショップサーブのカスタマ言うにはFTPアカウントがつきもの。

管理画面からアカウントを作って、FTPを使えるようになる必要があります。

FTPアカウントの作り方やサーバーへのアクセス方法については、マニュアルがあるので、それをよく読んでやってください。

リアルタイム注文状況の小窓を導入する手順を書いておきます。最初は難しく感じるのですが、いったん実装してしまえば、後は、注文状況ファイルの更新だけで済むので、がんばって導入してみてください。

導入手順(FTP設定後)

1. CGIをFTPで適当なディレクトリにアップロード
 (パーミッションを705に変更)
2.管理画面から注文情報をCSVファイル形式でダウンロード
3.ダウンロードしたCSVファイルのファイル名を変えてアップロード
4.表示させる場所にiframeのタグを挿入します。

CSVファイルHTML書き出し用CGI

#!/usr/local/bin/perl
use CGI;

my $datapath = ‘realtime.csv’;
my $q = new CGI;

print $q->header(-type =>’text/html’,-charset=>’shiftjis’);
print ‘<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>’;
print ‘<html lang=”ja”><head><meta http-equiv=”content-style-type” content=”text/css”></head><body>’;
print ‘<table border=”0″ style=”border-collapse:collapse;font-size:9pt;”>’;

open my $FH,$datapath;

while(my $line=<$FH>){

(my $date,my $area,my $price) = split /,/,$line;

print ‘<tr style=”border-bottom:1px dashed #ccc;”><td>’.$date.'</td>’;
print ‘<td>’.$area.'</td>’;
print ‘<td>’.$price.'</td></tr>’;

}

close $FH;

print ‘</table>’;
print “</body></html>”;

コードをコピペしてテキストファイルにペーストします

そしてファイル名を「realtime.cgi」に変更します。「拡張子を変えると、ファイルが使えなくなる可能性があります。変更しますか?」というアラートが出ますが、「はい」で閉じます。

2. 管理画面から、例えば「注文日|都道府県|金額」というデータだけを抽出します。「受注データのダウンロード」という箇所で、ダウンロードする形式パターンを作れます。

3. DL(ダウンロード)できたCSVファイルのファイル名を「realtime.csv」に変更します。ここでも「拡張子を・・・」のアラートがでますが、「はい」で閉じます。このファイルを「realtime.cgi」と同じディレクトにアップロードします。

4.iframeで適当なところにCGIを呼び出して表示します。今回のサンプルは再度バー用のサイズにしていますので、センターエリアに設置する場合はCSSを変更してください。

最新100件の注文状況

スクロールなしの基本形です。これをスクロールさせる場合は、jqueryという仕組みを使います。

ショップサーブは、当然javascriptもjqueryもバンバン使えます。スクロールの応用系はまたの機会に。

ABOUTこの記事をかいた人

ゆるい起業家。ECや飲食、コンサル、投資*などをいろいろやってます。座右の銘は「のらりくらり」。*マルチやネットワークではない。まっとうな投資。