ショッピングカートCGI設置方法（Ｑ＆Ａ）


ショッピングカートCGIの設置方法（Ｑ＆Ａ）

ショッピングカートCGIの設置方法（Ｑ＆Ａ）をまとめてみました。また、サイト内にも豊富な情報がありますのでそちらもご活用ください。また、ショッピングカート設置塾/メールフォーム設置塾も参考にして下さい。

ＷＥＢインベンター内の検索（最新情報はこちらで⇒新着情報）

設置方法Q&A１－ショッピングカートのバージョンＵＰの手順

ショッピングカートを新バージョンのショッピングカートに移行する場合、次の手順で行なうことをお勧めいたします。（最新のプログラムをダウンロードする場合は、ファイル名をこちらで確認してください。ZIP形式で保存されていますので、拡張子は.zipになります。⇒ソフト一覧表）

下記は、PCtoMobileの場合を例にしています。

１．新しいフォルダに最新のプログラムをＵＰロードする。

２．これまでのデータをダウンロードし、新しいフォルダにＵＰして上書きします。
データファイルは次のものですが、１つ１つ確認しながらＵＰロードしていきます。（データファイルに関しましてはこちらもご覧ください。⇒メンテナンス）

shop_info.cgi（設定ファイル・・・ＵＰしないで再設定した方が楽な場合が多い）
画像ファイル（p_image、m_image、htmlフォルダ内）
分類ファイル（set_class_plフォルダ内）
data.cgi　（data_p.cgi、data_k.cgi）（商品データ）
count.txt（商品番号）
member_no.txt（会員番号）
listフォルダ（会員データ）
order_no.txt（注文番号）
logフォルダ（注文データ）
mypageフォルダ(会員のマイページデータ）
affiliate/aff_listフォルダ（アフィリエイト会員データ）
affiliate/aff_no.txt（アフィリエイト会員番号）
forder_no.txt（問い合わせ番号）
form_logフォルダ（問い合わせデータ）
form_info.cgi（メールフォームの設定ファイル）
list2フォルダ（住所録データ-PCtoMoible2）

３．機能追加に伴う新たな設定を行なう（システム設定の目次の順に一通り見てゆくと良い）。

４．新しいショッピングカートのテストを行い、問題がなければ、これまでのショッピングカートのフォルダ名を変え、新しいフォルダをこれまでのフォルダ名にする。

これで、移行の完了です。

もちろん、プログラムファイル（上記のデータファイル以外）だけをUPし、上書きしてもＯＫです。その場合はあらかじめ先のシステムをダウンロードしておき、いつでも元に戻せるようにしておくことは大切ですね。

【注】商品データファイルから詳細説明を分離したバージョンへのＵＰグレードの場合は下記の手順が必要です。（⇒表示スピードの問題）

まず、これまでのdata.cgiとcount.txtのバックＵＰをきちんと取ってください。これは大切なデータです。
続いて、新しいシステムにこれまでのdata.cgiとcount.txtを入れます。
ここで、商品データファイルからＣＳＶデータを作成してください。
さらに、そのまま今度は、ＣＳＶデータから商品データを新規作成してください。

【注】ショッピングカートのVer.10.00以降では、それ以前の設定ファイルshop_info.cgiを使用することができません（SP-Finalを除く）。それで、すべてを再設定してください。

【注】セキュリティー強化版（会員パスワードの暗号化機能）にバージョンＵＰしても、古い会員データをそのまま用いることができます。会員登録や会員情報の変更の際にパスワードは暗号化されて保存されます。会員の皆さんに定期的にパスワードの変更を勧めるなら次第に暗号化されていくと思います。会員データが多く、一括してパスワードを暗号化したいときは次の方法をお勧めいたします。⇒一括暗号化手順

PERLのバージョンはどれを選んだらよいですか？

perlの下記のバージョンで動作の確認が取れていますので、サーバーのperlのバージョンを適切に設定してください。

　　　さくらインターネット：perl v5.14　（カートの最新バージョンでは、v5.32）
　　　X-server：perl v5.16　（カートの最新バージョンでは、v5.26）
　　　Kagoya：perl v5.10

※perl v5.10～5.20 （カートの最新バージョンでは、v5.10～v5.32）に設定してください

perlは最高レベルで後方互換性を維持している言語です。つまり、perlのバージョンが新しくなっても古いプログラムが使えるということです。これはプログラム開発者にとって本当に嬉しいことです。

しかし、v5.26で後方互換性を維持しない変更が行われました。その最も影響力が大きい変更は、下記の点です。

@INCに '.' が含まれない。
defined %連想配列　が使えない。

それで、ショッピングカートでこれらの変更に対応いたしました。とくに、requireのパスの見直しなどを実施致しました。

※これに対して、PHPは後方互換性が配慮されない言語です。

設置方法Q&A２－ショッピングカートCGI設置の手順

【１】サーバの準備（以下の点をチェック）

使いやすいサーバを選べば安く簡単に設置できる。

LinuxサーバかそれともWindowsサーバか？（Linuｘサーバが使いやすい）
CGIが使えるか？
cgi-bin下でのみCGIが動くか？（設置が難しい。）どのフォルダでもCGIが動くサーバがいい！
sendmailが使えるか？（SP-Final以降ではWindowsサーバでもSMTPモジュール使用可能）
ファイルロック用symlinkまたはmkdirが使えるか？
ＳＳＬは使えるか？値段はいくらか？（⇒ＳＳＬ再考）
ImageMagickまたはNetPBMは使えるか?（⇒商品画像の問題点）

※上記の点をチェックするプログラムのダウンロード⇒サーバチェックリスト（解凍し、checklist.cgiをショッピングカートと同じフォルダにＵＰしてパーミッションを705または755にして呼び出してください。Windowsサーバでは使えません。）

【２】ＦＴＰソフトの準備

ＦＦＦＴＰのダウンロードサイト（フリー）
FFFTPを使ってCGIを設置する方法

【３】テキストエディタの準備

行番号や全角ブランクが分かるものが望ましい。
テキストエディタのダウンロードサイト（フリー）

【４】perlのパスの設定

perlのパス（当社のCGIの場合は、/usr/bin/perl）
sendmailのパスも設定する。
いずれもサーバにより異なるので確認が必要。

【５】パーミッションの設定

ＦＦＦＴＰをあらかじめ設定しておくと便利。
サーバにより異なることがある。また、安全性も考慮しなければならない。

【６】設定ファイル（set.pl）の設定

まず、初期状態で動作を確認する。
一度に多くの設定をせず、少しずつ設定-確認を繰り返す。そうすれば、エラーの原因がわかりやすい。

【７】ローカルでテストする方法

自分で機能変更する（プログラムをいじる）場合は、テスト環境を揃えることが必要。

CGIのテスト環境の作成
- ＨＴＴＰＤのダウンロード
- ActivePerlのダウンロード
perlに関する知識
デバッグ（エラーを見つける）の方法
- 「500 internal server error」だけではエラーは見つけにくいので、スクリプトの２行目に次の１行を挿入するとエラーメッセージが表示されます。 use CGI::Carp qw(fatalsToBrowser);

【８】ﾎｰﾑﾍﾟｰｼﾞ作成ソフトの活用

ﾎｰﾑﾍﾟｰｼﾞ作成ソフトを活用すれば、デザインの製作を効率的に行なえ、CGIに組み込む助けになる。

ホームページビルダーを使用する時は、標準モードを使用する。

設置方法Q&A３－ファイル（個人情報）を保護する方法

ファイルを保護することはＳＳＬを使うかどうかよりもはるかに重要なことです。ファイルを外部から読み取られないように以下のことを必ず行ってください。

ファイルの保護はいくつかの方法で行うことができます。

パーミッションの設定
.htaccessによるファイルの保護
BASIC認証によるアクセス制限
その他

【１】パーミッションによるファイルの保護
パーミッションは大体下記の表のように設定します。ただし、サーバの仕様により大きく異なる場合があるので確認が必要です。
それで、パーミッションによっては必ずしもファイルを保護することができないことがあります。その場合は、.htaccessを用いてください。

●CGIスクリプトと、それを格納するフォルダのパーミッション

ファイル/フォルダ	パーミッション
スクリプトファイル	705 or 755
スクリプトファイルのフォルダ	705 or 755

●CGIスクリプトが読書きするデータファイルと、それを格納するフォルダのパーミッション

ファイル/フォルダ	パーミッション
読み出し専用ファイル	604 or 644
データファイル	606 or 666
データファイルのフォルダ	707 or 7７７

【注】suEXECサーバ　又はCGIWrapサーバ　の場合は、CGI(701 or 700)、データファイル(600)、フォルダ(701 or 700)　が一般的です。

【２】.htaccessによるファイルの保護
以下のように記述した.htaccessファイルをファイル保護が必要なフォルダに入れると、その拡張子のファイルが見えなくなります。この場合、拡張子pl、ini、csvのファイルが読めなくなります。

<Files ~ "\.pl$">
deny from all
</Files>
<Files ~ "\.ini$">
deny from all
</Files>
<Files ~ "\.csv$">
deny from all
</Files>

【３】BASIC認証によるアクセス制限
特定のフォルダにパスワードを使ってアクセスできるようにするものです。下記の２つのファイルをそのフィルダに入れるだけです。詳しくは、こちらのページを参照してください。⇒.htaccessによるパスワード認証

ファイル名：.htaccess

AuthType Basic
AuthName "ID・パスワードを入力してください"
AuthUserFile /home/*******/.htpasswd
require valid-user
<Files ~ "^.(htpasswd|htaccess)$">
deny from all
</Files>

（注）****の部分はサーバ内絶対パスです。次のプログラムで調べられます。⇒サーバチェックリスト

ファイル名：.htpasswd

ID:暗号化されたパスワード

【４】その他
ファイルを保護する他の方法には次のような方法があります。

１．データファイルの拡張子をdata.cgiのようにすると、外部から見ることができなくなります。
２．index.htm（index.html）をﾌｨﾙダ内におくとフォルダ内のファイルを一覧できなくなります。

《注意》販売管理でＣＳＶダウンロード機能を活用している場合
csvファイルがダウンロードできるように、.htaccessファイルから下記の部分を削除する必要があります。

<Files ~ "\.csv$">
deny from all
</Files>

その代わりに、他にCSVファイルを使っているなら、該当のフォルダ内に次のように記述した.htaccessファイルをＵＰして入れてください。

<Files ~ "\.csv$">
deny from all
</Files>

この場合、csvファイルを外部から読めないように対策が必要になります。対策の方法を幾つか挙げてみたいと思います。

〔１〕ファイル名を難しい名前に変える。
１．CSVデータが入っているフォルダにindex.htmlファイルを入れる（すでに入っていますので削除しないでください）。
２．システム設定の販売管理で注文ログのCSVファイル（顧客と販売）のファイル名を難しい名前に変える。（システム設定の【18】販売管理の設定　の　２番目と３番目）

３．csvファイルの拡張子をcgiにするのも良い方法です。こうすると、販売管理からはダウンロードできなくなりますが、それは安全性が増したという意味です。ＦＴＰソフトでダウンロードして、削除するようにします。

また、注文ログのCSVファイルはダウンロード後は使用しませんので削除することができます。（または、ダミーのデータを作成すれば前のデータは上書きされます。）

〔２〕CSVデータが入っているフォルダにBASIC認証によるアクセス制限をかける
上記の【３】BASIC認証によるアクセス制限で説明されている方法で行なってください。これによりパスワードを知っている者だけがアクセスできるようになります。

【注】Reserve以上のショッピングカートの最新版では、販売管理のCSVファイルのダウンドード機能が強化されており、ダウンロード後に自動的に削除されます。

設置方法Q&A４－CGI-BIN下でのみCGIが動くサーバの場合の設置の仕方

CGI-BIN下でのみCGIが動くサーバの場合、画像ファイルを別のフォルダに置かなければならないことがあります。その場合、読み込み用のパスの指定と書き込み用のパスの指定の仕方が異なります。

具体的には、以下の例を見て下さい。(サーバによって異なるので、確認することが大切です)

【サーバのフォルダ構成例】

web
|___　index.thm
|___　images
　|____photo.gif

cgi-bin
|___　shop.cgi

【書き込み用】サーバ内の絶対パス（サーバ側にたずねる必要がある）で画像を指定する
/images/photo.gif
したがって、フォルダは
$dir ='/images';

【読み込み用】フルパス（http://～）で画像を指定する
http://・・・・/images/photo.gif
したがって、フォルダは
$dir ='http://・・・・/images';

【注意】CGI-BIN下に設置する場合、どうしても避けられない問題が発生することがあります。という訳で、単に難しいというだけでなく、動かない機能も出てきます。それで、cgi-bin下でなくとも動くサーバを用いるようにお勧めいたします。結局、その方がお金と時間の節約になると思います。

設置方法Q&A５－携帯やスマートフォンサイトのテストの方法

携帯やスマートフォンのサイトをテストするためのおすすめの方法をご紹介します。完全なテストは実機で行う以外にありませんが、ある程度の動作検証は他の方法でも可能です。しかし、方法は機種により異なります。

【注】スマートフォンサイトをIE9で見る場合の注意点があります。標準モードで見る場合は問題ないのですが、IE９の互換モードでスマートフォンサイト（HTML5、CSS３）を見ると正しく表示されないことがあります。また、IE9は CSS3のグラデーションには対応していません。Chromeは対応しています。

【１】ドコモのテスト：
「iモードHTMLシミュレーター」が使いやすく、実機と大体同じ結果が得られます。

【２】AUやSoftBankのテスト：
FireFoxを使います。UserAgentをいろいろ変えて動作確認ができます。しかし、表示は多少異なりますので、それは実機で確かめる必要があります。⇒User Agent Switcher

※この方法でドコモのFOMAをテストすることはできないようです。ダウンロードの画面になってしまうからです。

【３】スマートフォンのテスト：
シミュレーターが幾つかありますが、一番のお勧めは、Chromeを使うことです。UserAgentを変えてテストできます。ほとんどAndroidと同じ動作が確認できます。⇒ Google ChromeでUser-Agentを変更

※たとえば、UserAgentを次のように設定します。「 --user-agent="Mozilla/5.0 (Linux; U; Android 1.6; ja-jp; SonyEricssonSO-01B Build/R1EA018)AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1"」

iBBDemoも手軽にiPhoneの表示を確認できますが、POSTの動作がうまく行かないようです？しかし、回転させたりズームさせたりできますので、実機の体験ができます。

Androidエミュレーターというものもありますので、挑戦してみるのもよいと思います。動作が少し遅いので最後の確認用に使えるかもしれません。

スライドショーを設置する方法

最近はFlashに代わって、Javascriptを使った高機能なスライドショーが使われるようになりました。簡単に設置できますのでお勧めですね。お店の見栄えもUPします。

jQueryを使ったいろいろなスライドショーのプログラムが配布されていますが、ここでは、Nivo Slider v3.2 （MITライセンス）を使ったスライドショーの組み込み方法を説明いたします。なお、サンプルでは、PCtoMobile～Contents-Mall用にカスタマイズしたものを用いています。（PCtoMobile以上のカートに標準搭載されています）

　　　　　　サンプル（カートに組み込んだ場合）⇒ PCtoMobile
　　　　　　サンプル（HTMLに組み込んだ場合）⇒ nivo-slider.html　(ソースを参考にできます。)

（１）スタイルシートの読み込み（PCtoMobileのシステム設定【３６】）
ヘッダーに外部スタイルシートを記述します。

<link rel="stylesheet" type="text/css" href="nivo-slider/themes/default/default.css" media="all">
<link rel="stylesheet" type="text/css" href="nivo-slider/nivo-slider.css" media="all">

（２）HTMLの記述（PCtoMobileのシステム設定【３０】）
表示する画像の枚数（下記は4枚）に応じて下記のようにタグを記述します。画像のサイズは幅730px、高さ250pxで最適化してあります（高さを変更したい時は、スタイルシートdefault.cssの12行目あたりを変更してください。又は、下記のように、style='height:250px;' を直接書き込むとこちらが優先されます）。

また、#のところに望みのリンク先を記述できます。例えば、画像が商品番号1の画像であれば、
　　　href='shop.cgi?id=1'
で、商品番号1の詳細説明のページにリンクできます。

<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider" style='height:250px;'>
<a href="#"><img src="nivo-slider/images/main1.jpg" alt="" title="#htmlcaption1" /></a>
<a href="#"><img src="nivo-slider/images/main2.jpg" alt="" title="#htmlcaption2" /></a>
<a href="#"><img src="nivo-slider/images/main3.jpg" alt="" title="#htmlcaption3" /></a>
<a href="#"><img src="nivo-slider/images/main4.jpg" alt="" title="#htmlcaption4" /></a>
</div>
</div>
<div id="htmlcaption1" class="nivo-html-caption">
これは画像１のキャプションです。リンクは・・・<a href="#" style='color:#fff;text-decoration:underline;'>こちら</a>
</div>
<div id="htmlcaption2" class="nivo-html-caption">
これは画像２のキャプションです。リンクは・・・<a href="#" style='color:#fff;text-decoration:underline;'>こちら</a>
</div>
<div id="htmlcaption3" class="nivo-html-caption">
これは画像３のキャプションです。リンクは・・・<a href="#" style='color:#fff;text-decoration:underline;'>こちら</a>
</div>
<div id="htmlcaption4" class="nivo-html-caption">
これは画像４のキャプションです。リンクは・・・<a href="#" style='color:#fff;text-decoration:underline;'>こちら</a>
</div>

（３））Javascriptの記述（PCtoMobileのシステム設定【３０】）
上の記述に続けて、jQuery と jquery.nivo.slider.pack.js　の記述をします。
さらに、それに続けて、nivoSliderを使用するためのJavascriptを記入します。表示時間は7秒（7000）にしてあります。effectは、初期値はrandomですが、16種類を指定できます。また、 pauseOnHoverをtrueにすると画像にマウスを乗せると動きが止まります。さらに、controlNavをtrueに設定すると、ナビゲーション1,2,3・・・が表示されます。

<script type="text/javascript" src="lightbox/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="nivo-slider/jquery.nivo.slider.pack.js"></script>

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 7000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: true, // 1,2,3... navigation
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false // Start on a random slide
});
});
</script>

以上で、かなり高度なスライドショーの設置は完了です。

【注】jquery-1.7.2.min.js は、PCtoMobile～Contents-Mallの最新版に同梱されているLightbox内に含まれているものを使用しています。古いバージョンの場合は、jQueryを別に用意してください。

設置方法Q&A６－SSLサーバへの設置方法

ＳＳＬの設定はサーバにより異なります。ＵＲＬを変えるだけでよい場合とＳＳＬのための領域にＵＰする必要があるものなどがあります。詳しくは、こちらをご覧ください。⇒ SSL設定手順

●ＵＲＬを変えるだけでよい場合
この場合は、ＳＳＬをかけたいスクリプトまたは処理に対して、https://～で呼び出せばよいのです。その際、データや画像の呼び出しもＳＳＬになるように注意してください（相対パスで設定しておけば自動的にそうなります）。
shop.cgiの場合は以下のように設定することにより、注文処理以降でＳＳＬになるようになっています。

shop.cgiのパス：http://～
shop.cgiのパス（SSL用）：https://～

●ＳＳＬ専用の領域がある場合
この場合、そっくりＳＳＬ領域に置くのが一番楽ですね。
そうしたくない場合は少し難しくなります（事実上不可能）。データや画像が共有できないので、data.cgi、shop_onfo.cgiやタイトル画像などをそれぞれに２重に持つ必要があります。shop.cgiもそれぞれの領域にＵＰし、パスを上記のように設定することによりＳＳＬとそうでない領域を行き来することができます。そのようにすれば不可能ではありませんが、お勧めではありません。サーバを変えることをお勧めいたします。

★cgi-bin下でのみCGIが動くサーバでＳＳＬを使用すると、画像が表示されないなどの避けられないトラブルが発生することがあります。

設置方法Q&A７－スクリプト中の「＠」など記述の仕方

スクリプト中で、「＠」は\＠と記述しなければなりません。そのほかに、全角ブランクや「表示」といった文字も「表\示」と記述しないとエラーになる場合があります。詳しい説明は以下のページを参考にされてください。

http://www.kent-web.com/pubc/jcode/

http://tohoho-web.com/wwwperl4.htm#perl5att

設置方法Q&A８－半角カタカナの使用

基本的には、インターネット上で半角カナを扱うことはできません。これは、本来文字コードにおいて半角カナの規定が定められていないため、各文字コード（EUC, JIS, シフトJIS）間での調整が行われていないためです。

しかし、携帯の普及に伴い半角カタカナの使用は避けられなくなってきています。それで、resrve930+以降では、半角カタカナに対応したjcode.plを使用することにより半角カタカナに対応させました。

jcode.plの半角カナ対応改造版⇒ jcode.pl(v2.13) 文字化け軽減差分ファイル

半角カタカナについての分かりやすい解説⇒ 半角カナを使いたい

設置方法Q&A９－Unicode::Japaneseモジュールをインストールする方法

Unicode::Japaneseモジュールはutf-8で半角カタカナを全角に変換したりするときに大変便利です。大抵のサーバでインストールされており使えますが、インストールされていなくても下記の方法で使えるようになります。

（１）こちらからダウンロードしてください。
Unicode_Japanese.zip

（２）次に、Unicodeフォルダごと、Japanese.pmをサーバにＵＰして下さい。フォルダ構成は下記のようになります。

shop/shop.cgi
shop/Unicode/Japanese.pm

設置方法Q&A１０－文字化け対策

文字化けしてしまうときにはスクリプト中から次の行を削除してみて見てください。
（e_shop.cgiの約3000行目、mu_shop.cgiの約3700行目）

print "<META content=\"text/html; charset=Shift_JIS\" http-equiv=Content-Type>\n";

詳しくは以下のページを参考にされてください。
http://www.tohoho-web.com/wwwxx005.htm

設置方法Q&A１１－ファイルが削除できないとき

サーバ内のファイルやディレクトリが削除出来ないときがあります。特に、CGIスクリプトが生成したファイルは削除されない場合があります。そのような時はサーバの管理者に頼んで削除してもらうことができます。
簡単なCGIを使って削除する方法もあるようですが。

設置方法Q&A１２－sendmail

sendmailのパスはサーバによって異なります。サーバ側に尋ねることができます。
代表的のものは次のようなものです。

$sendmail = '/usr/sbin/sendmail';
$sendmail = '/usr/lib/sendmail';
$sendmail = '/usr/local/bin/sendmail';

設置方法Q&A１３－WindowsサーバＩＩＳの場合の設置の仕方

■IIS3,4,5にはバグ（Location と組み合わせると CGI で Set-Cookie が無視される）が報告されております。
http://support.microsoft.com/default.aspx?scid=kb%3Bja%3BJP176113

reserve920の場合、以下のようにすることでバグを回避できるという報告があります。

entry.cgiをnph-entry.cgiに名前変更する。
print "HTTP/1.0 302 Redirect\n"; を以下の場所に入れる。
- 390行目あたり　#クッキーの設定　の前
- 405行目あたり　#クッキーの設定　の前
- 413行目あたり　sub ask0 {の後
print "HTTP/1.0 200 OK\r\n";　を次の場所に入れる。
- print "Content-type: text/html\n\n";　の前

■SGX-SP FinalはWindowsサーバでもSMTPモジュールを使ってメールを送信することができます。この場合、次のように設定してください。

set.plの３行目でSMTPモジュールの使用を有効にします。
設定管理の最初でSMTPサーバ名を設定します。
さらに、サーバ側にSMTPモジュールをインストールしてもらう必要があります。

■Windowsサーバではsendmailが使えませんが、XMAIL（フリーソフト）を用いることでこの問題を解決できるという報告があります。詳しくは、下記のページを参照してください。なお、この件に関するお問合せには当方では答えることができません。

【ＸＭＡＩＬについて】
ダウンロード　http://xmailserver.jp/download/
サンプルページ　http://xmailserver.jp/sample/xmailcfg/
Xmailの環境設定は済ませないとうまく動作しないと思われます。その際、XmailCFGを使用すると簡易にできるということです。

設置方法Q&A１４－i-modeはフルパスで指定

i-modeの場合、スクリプト(k_shop.cgi、k_entry.cgi)をフルパスで指定しないと、「無効なデータを受信しました（３０２）」などと、エラーメッセージが出ます。これは、ログイン時のプログラムでLocationヘッダーを使っているためで、フルパスで指定しないとこのエラーがでるようです。

設置方法Q&A１５－エラーメッセージ「cgi-lib.pl: Request to receive too much data:」

cgi-lib.plの２１行目で容量が制限されています。初期値は以下のように設定されています。

$cgi_lib'maxdata = 131072;

設置方法Q&A１６－管理画面の呼び出し方法

管理画面の呼び出しで、パラメータがアドレスバーに表示される場合があります。これはパラメータをCGIで受け渡ししているためです。それを表示したくないときはフレームを使うことをお勧めいたします。つまり、以下のようなadmin.htmlを準備します。

<html>
<head>
<meta name="robots" content="noindex,nofollow">
<title></title></head>
<FRAMESET frameborder="0" border="0" framespacing="0">
<frame src="./setup.cgi?mode=adm_menu" marginwidth="0" marginheight="0" scrolling="AUTO" frameborder=0>
</FRAMESET>
</html>

このadmin.htmlを呼び出して管理画面に入ると、CGIのＵＲＬは表示されなくなります。

設置方法Q&A１７－ログインメッセージの出力の方法

ＨＴＭＬにログインメッセージを組み込むにはちょっと工夫が必要です。というのは、クッキーは同じフォルダで有効になっているからです。それで、ショッピングカートと同じフォルダ内にないＨＴＭＬの場合は下記のようにしてログインメッセージを出力できます。（同じフォルダ内にあるＨＴＭＬの場合ももちろんＯＫです）

reserve930以降では、標準添付のログインメッセージ出力プログラムlogin_messgae.cgiを使い、ログインメッセージを出力できます。

使用法は下記の通りです。

１．まず、login_message.cgiをテキストエディターで開き、ログインメッセージを設定します。

#============ログインメッセージの設定===============
$log_in_mess1 ='こんにちは　';
$log_in_mess2 =' 様　ようこそ ○○○○○○○○○○へ！';

２．HTML内に下記のように記述します。

【１】onload=0、又は、無指定の場合
<b id="login_message">Welcome to ○○○○○○○○○○！</b>

・・・・（上記の記述の下方に）・・・・

<script type="text/javascript" src="shop/login_message.cgi">
</script>

【２】onload=1の場合（HTMLのロード終了後にログインメッセージが変化します。）
（１）
<head>
<script type="text/javascript" src="shop/login_message.cgi?onload=1">
</script>
</head>

（２）
<body onload="login_message()">

（３）
<b id="login_message">Welcome to ○○○○○○○○○○！</b>

設置方法Q&A１８－動的ページを静的ページに見せる方法（mod_rewriteの活用）

mod_rewriteというのは、perlモジュールで、正規表現を使ってURLを書き換えるものです。これを活用すると、CGIで動的に生成されたページを、あたかも静的なページであるかのように見せることができ、検索エンジンに対して有利になります。

例えば、
http://wb-i.biz/shop/shop.cgi?class=0&keyword=&superkey=1&FF=0
のような、動的に生成してるページを
http://wb-i.biz/shop/class/0/
のような、静的なページのURLでアクセスすることができます。

この場合、.htaccessファイルにこのように記述してルートフォルダにＵＰします。

RewriteEngine on
RewriteRule shop/class/(.*)/$ /shop/shop.cgi?class=$1&keyword=&superkey=1&FF=0

詳しくは、mod_rewriteの活用を参考にしてください。

また、下記も参考にしてください。
mod_rewriteモジュール
 mod_rewrite rewriterule generator Webmaster Toolkit

設置方法Q&A１９－WWWなし、又はWWWありに統一する方法（mod_rewriteの活用）

以下のように記述した.htaccessをＵＰすることにより、サイトのＵＲＬを統一することができます。

【wwwありに統一する場合】

RewriteEngine on
RewriteCond %{HTTP_HOST} ^example\.com
RewriteRule (.*) http://www.example.com/$1 [R=301,L]

【wwwなしに統一する場合】

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.example\.com
RewriteRule (.*) http://example.com/$1 [R=301,L]

設置方法Q&A２０－sendmailでリターンメールを受け取る設定方法

sendmailでメールを送信してアドレス不明のメールがある場合に、下記のように-fオプションを用いることによりリターンアドレスを指定することができます。

$frommail　='****@**.***.***';#リターンアドレス
open(OUT, "| $sendmail -t -f $frommail")

ImageMagickが使えないサーバでの画像変換の方法

画像の変換は通常ImageMagickモジュールを利用するのが一般的ですが、使えないサーバもあります。そのような場合、下記の方法でも画像の変換が可能です。

NetPBMが使えるサーバの場合、それを利用できます。
菅さん作のプログラムrepng2jpegを利用することもできます。

当社のショッピングカートでは、標準ではImagemagickを使用するようになっていますが、上記の方法でも可能です。⇒商品画像の問題点

.htaccessを使ってスパムボットの進入を防ぐ方法

USER-AGENTに含まれるキーワードを使ってスパムボッットを特定し、サイトへの侵入を防ぐことができます。たとえば、スパムボットのUSER-AGENTが次のものである場合、

*********OrangeSpider*************

.htaccessを下記のように設定することにより、サイトへのアクセスを制限することができます。

SetEnvIf User-Agent "OrangeSpider" spambot
order allow,deny
allow from all
deny from env=spambot

参考サイト：
Cart Page Analyzer の活用法
掲示板のスパム対策
ロボ避けとアクセス制限

XPとVistaのフォントの違いに対処する方法

XPのフォント環境（JIS90）とVistaのフォント環境（JIS2004）は異なっており、、同じフォント（たとえば、MS UI Gothic）でも多様異なって表示されます（⇒フォント環境の違い）。それで、XPで最適化されていてもVistaで見辛くなってしまうことがあります。それに加えて、Vistaでは「メイリオ」というフォントが標準で装備されています（「メイリオ（明瞭）」はその名の通り明瞭という評価が高い）。
そのような訳で、OSにより文字が異なって表示されるということを意識してホームページを作成する必要があります。特に、Vistaでは「メイリオ」を活用するのはよい方法です（現在、Vistaの普及率は20％前後）。

たとえば、下記のようなスタイルシートを用いると、Vistaでは「メイリオ」で、XPではMS UI Gothicで表示されます。この場合、selectやinputにメイリオを指定するとテキスト入力枠が乱れてしまいますので注意しましょう。

body,tr,td {
font-size : 13px;
font-family: 'メイリオ', 'MS UI Gothic';
color: #555555;
line-height: 1.1;
}
select,input {
font-size : 13px;
font-family: 'MS UI Gothic';
color: #555555;
}

※ショッピングカートのスタイルシート⇒フォントの調整方法

ブラウザー（IE、FireFox、Safari、Google Chrome）の違いに対処する方法

ブラウザーのバグや解釈の違いにより表示が異なることがあります。それに対処するためにさまざまな手法が考えられています。次のような例が上げられます。

width、padding、borderの解釈の違い（IE）・・・・・Star Html Hack
floatしたときmarginが加算されない（IE）・・・・・Star Html Hack
子要素にfloatがあるとき背景画像が表示されない（FireFox）・・・・・親にfloat left を追加
親の枠をはみ出す（FireFox）・・・・・clearfix
セレクトBOXの高さが狭い（Chrome）・・・・・高さの指定

詳しくはこれを扱ったページがたくさんありますので、そちらを参考にしてください。なお、当社で採用している方法に関しましてはこちらをご覧ください。⇒FireFox対策（clearfix、Star Html Hack）

携帯サイトの作り方

携帯電話の進歩に伴い各社ともほとんどの機種でスタイルシートが使えるようになってきました。しかしながら、PCとは異なり携帯のスタイルシートでは３キャリアの仕様の違いにより使用が著しく制限されます。

下記の大きな制限があります。

１）ドコモではインラインCSSのみ使える。（リンクの色だけ例外）

２）ドコモではインラインCSSでも使用できるCSSは少ない。

それで、ドコモに合わせたデザインが必要になります。

また、３キャリアのXHTMLの仕様は異なり、DOCTYPEも異なっています。さらに、i-modeおよびSoftBankでは、XHTMLが使用できない機種がまだ約１５％ほどあります。

こうした中で、３キャリアに共通した１つのXHTMLが提案されています。（3キャリア対応XHTMLテンプレート）

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />

画像の大きさに関しましては、幅240pxで大体統一されていているようです。

こうした状況の中で、適切な取り組み方を決めなければなりません。当社のショッピングカートでの取り組み方に関しましてはこちらをご覧ください。⇒携帯CSSの採用

iモードブラウザ2.0での絵文字の表示方法

2009年5月以降発売のiモードブラウザ2.0の携帯では、iモードブラウザ1.0と異なる点がいくつかありますが、特に、絵文字がShift-JISテキストでは表示されないという制約があります。それで、ユニコード16進表示に変更する必要があります。
http://www.nttdocomo.co.jp/service/imode/make/content/browser/

PCtoMobile、Contents-Cartでの変更箇所は次の通りです。
１．k_set.plの27行目を下記に変更
@emoji_imode =('xE6EB','xE6E2','xE6E3','xE6E4','xE6E5','xE6E6');
２．fsetk.plの31行目を上記と同じに変更
３．システム設定【42】と【35】【37】～【41】の必要な部分
４．メールフォームのシステム設定【23】と【24】～【29】の必要な部分

なお、最新版のプログラムでは、ユニコード16進表示に変更済みになっています。

\記号がバックスラッシュ（\）で表示されないようにする方法

日本語の文字コードで半角の\記号はヨーロッパの文字コードではバックスラッシュに対応しています。それで、半角の\にヨーロッパ用のフォントを適用するとバックスラッシュで表示されてしまします。

下記は\にスタイルシートでフォントをTahomaで表示したものです。
<span style='font-family:Tahoma;'>\</span>
は
\
と表示されます。

それで、半角の\記号を用いるときには使用するフォントに注意しましょう。全角の￥を使うのも方法ですね。

ストリーミングダウンロードの方法

ストリーミング配信とはファイルをダウンロードしながら再生を行なう方法です。ファイルをダウンロードするのと同時に再生をすることにより、待ち時間が大幅に短縮されます。

方法はいろいろあるようですが、メタファイルを作成する方法が一番簡単なようですね。
たとえば、Windows Madia Playerで再生する場合のメタファイルは、下記のようになります。

<asx version="3.0">
<entry>
<ref href="http://*******/movie.wmv"/> ・・・・ダウンロードファイルまでのURL
</entry>
</asx>
拡張子を「.asx」として保存します。

なお、ストリーミングサーバから配信する場合は次のようになります。
<asx version="3.0">
<entry>
<ref href="mms://*******/movie.wmv"/> または rtsp://*******/movie.wmv
</entry>
</asx>
拡張子を「.asx」として保存します。

参照：
動画配信方法:メタファイル作成！

検索エンジンに管理プログラムがインデックスされないようにする方法

すでに最新のプログラムでは、クッキーを用いたログイン方式を用いており、なおかつ、検索エンジンに管理プログラムがインデックされないように下記の対策を施してあります。

１．metaタグの挿入（noindex,nofollow,noarchive）
２．USER_AGENTよるSpiderの排除

それで、最新のプログラムに差し替えることをお勧めいたします。少なくとも管理用のプログラムに下記のMETAタグを挿入すると良いと思います。

print "<meta name='robots' content='noindex,nofollow,noarchive'>\n";

また、インデックスされてしまったときには次のように対処してください。まず、すぐに検索エンジンに連絡して、インデックスとキャッシュを削除してもらってください。それから、管理プログラムの名称を変更して問題のＵＲＬが存在しないようにすることが大切です。

たとえば、
member.cgi を ******.cgi に変更して、
設定管理【２】で名前をあわせます。

後は、インデックスとキャッシュが削除されるのを待つ以外にはありませんが、かなり早く削除していただけるようです。

指定したＩＰアドレス（複数指定可能）からのみプログラムにアクセスできるようにする方法

IPアドレスのチェックプログラムip_check.plを用意しました。このプログラムip_check.plをIPドレス制限をかけたいプログラムと同じフォルダにＵＰして利用します。パーミッションは604で良いと思います。

ＩＰアドレス制限をかけたいプログラムの２行目に次のように記述します（１行だけ書いて呼び出せばよい）。

#!/usr/bin/perl
require './ip_check.pl';

テストの手順：

プログラムip_check.plをＵＰ。
ＩＰアドレス制限をかけたいプログラムの２行目に上記のように記述。
上記のプログラムを２つともＵＰして問題なく動くことを確認（ＩＰアドレスを記述しなければどこからでもアクセスできるようになっている）。
プログラムip_check.plにIPアドレスを設定してテスト。
プログラムip_check.plのIPアドレスを変更してテスト。
他のＰＣからアクセス制限がかかっていることを必ず確認。

ダウンロード⇒ IP_CHECK.zip

【注意】PCのIPアドレスは変化することがあります。そのような場合は、設定しなおす必要があります。