携帯連動ショッピングカート
携帯連動のショッピングカートCGI
携帯連動のショッピングカートCGIの選び方
ショッピングカートCGIの
ダウンロードの申込み
携帯連動のショッピングカートCGI開発 携帯連動のショッピングカートCGI開発

PCと携帯電話の連動のショッピングカートCGI

PCtoMobile Cart （ピクトモバイル・カート）は、PCと携帯電話の連動システムを導入したショッピングカートです。PCtoMobile-2では複数送付先（複数送付先対応、送付先リスト、県名から送料を計算）に対応させました。PCtoMobile-UはUnicode(utf-8)対応版です。（こちらも参考にして下さい。⇒ショッピングカート設置塾）

　 　　◇PCtoMobile サンプル 　　　　　◇　　　　　◇PCtoMobile の申し込み
　　 　◇PCtoMobile-2 サンプル 　　 　◇　　　　　◇PCtoMobile-2 の申し込み
　　 　◇PCtoMobile-U サンプル 　　 　◇　　　　　◇PCtoMobile-U の申し込み

デザインのサンプル⇒他のサンプルとCSSテンプレートのダウンロード

連動システムPCと携帯の連動システム
PCと携帯で会員のIDとパスワードを共通に使えるシステムです。
  • 会員のIDとパスワードをPCと携帯で共通に使える
会員データにPC用のメールアドレスと携帯用のメールアドレスを両方持っており、携帯の振り分け機能により、メールアドレスを使い分けることができます。

PCで会員登録をする際、携帯用のメールアドレスを記入すると、携帯にクイックログイン用のURLがメールで自動送信されます。そのログイン用のURLで携帯では簡単にログインできるようになります。
  • 携帯用クイックログインURLの自動送信
これは、会員登録だけでなく、会員情報の変更のときにも行われます。

また、獲得ポイントも共通に使えることになります。携帯で購入したときに獲得したポイントも、PCで購入したときに獲得したポイントも共通に加算され、次回の購入時に使用可能となります。
  • 獲得ポイントも共通に使える
【注】システム設定の【4】会員制＆ポイント制　の「PCで携帯用のメールアドレスが入力可能」のところで、この機能をOFFにすることもできます。携帯サイトの準備ができていないときになどにOFFにします。

メールチェック機能携帯メールチェック機能
携帯で会員登録をする際に、いったんメールアドレスを確認するシステムを採用しました。これにより、携帯の会員登録時の誤りを防止することができます。
  • 携帯メールアドレスの確認システム
同時に、会員登録完了時にクイックログインURLを知らせるようにしましたので、次回からのログインが格段に簡単になりました。
  • 携帯用クイックログインURLの自動送信
これは、会員登録だけでなく、会員情報の変更のときにも行われます。

商品画像のPC携帯完全対応商品画像のPC携帯完全対応
サムネイル、画像A、B、C〜（拡大画像を１０枚まで）を、携帯でもそのまま用いることが可能となっています。これは、組み込まれている画像変換プログラムconvert.cgi（ImageMagickまたはNetPBMなどを使用）でサイズと形式を自動変換して表示しているからです。PCショップ用の商品データでそのまま携帯ショップを開店できるのです（商品説明は携帯用の説明を入力できます）。⇒商品画像の問題点

また、商品の詳細説明画面で、１０枚の画像のサムネイルを表示し、オンマウスで拡大画像を切り替えることができます。さらに、サムネイルをクリックすると拡大画像を別ウインドウで表示させることもできます（システム設定【13】のポップアップ画面の幅と高さ、及び拡大画像BCの幅の設定）。

TOP1〜TOP5と絵文字対応携帯用TOP1〜TOP5と絵文字対応
携帯用のHOMEのページに加えて、TOP1〜TOP5を自動生成できるようにしました（システム設定の【37】〜【41】参照）。
また、HOME及びTOP1〜TOP5で絵文字を使用できるようにしました（３キャリア対応）。
絵文字の使用法は下記の通りです。
  • システム設定【42】で３キャリアの絵文字対応表を作成します。これは用いる絵文字だけでＯＫです。
  • システム設定【35】、【37】〜【41】で絵文字を記述します。emoji=***** のように記述します（*****は絵文字テーブル【42】に登録したi-modeの絵文字16進 x****、又は、10進 *****） 。
  • 自動的に機種判別して、対応表から３キャリアに対応した絵文字を表示します。
  • ＰＣでアクセスした場合、対応表で指定したＰＣ用記号が自動表示されます。
【注】iモードブラウザ2.0（2009年5月以降に発売）では絵文字のShift-JISのテキスト入力には対応していないようです。それで、絵文字は10進 ***** ではなくて、16進 x**** で記述するようにしてください。⇒iモードブラウザ2.0の注意点

携帯からの商品画像登録システムに対応携帯からの商品画像登録システムに対応
携帯からの商品データ登録システムKeitai Googs System Ver9.80に対応しており、使用可能です（オプション）。⇒詳細説明

複数送付先対応複数送付先対応、離島送料自動計算、ギフト用入力機能（PCtoMobile-2）
PCtoMobile-2で複数送付先に対応させました（PCのみ）。ただし、複数送付先は、１種類の商品を複数注文した場合だけ可能となります（大体、楽天などと同じ仕様です）。

　　　　　　　サンプル：PCtoMobile-2

機能また購入手続きの流れは次のようになります。
  1. 会員の送付先リスト（住所録）の作成機能（１５件まで）。
  2. 購入手続きに進む際に、ログインしていなければ、まず、会員ＩＤの入力又は会員登録。
  3. 次に、送付先の住所の記入 。　ここで、複数送付先を選択でき、また、送付先リスト（住所録）が利用できる
  4. この入力後、送付先の住所（県名）に基づいて、送料を自動計算する。このとき、送料の地域指定に都道府県名を入力して、都道府県名でグループ分けしておくことが必要です。
  5. 離島の送料自動計算機能。離島は離島郵便番号ファイル（set_class_pl/rito_zip.pl）に基づき判別。
また、携帯版では、複数送付先の機能はありませんが、購入者とは別の送付先を指定することができます。この場合もPCtoMobile-2では都道府県名に基づく送料の自動計算が行なわれます。PCtoMobile-2では、また、会員の住所に加えて送付先の住所を１つだけ保持できます。

【注】複数送付先を選択した場合、代引き、e-コレクト、NP後払いは使えなくなります。

また、PCtoMobile2では、ギフト用のラッピングやのし紙などんの入力機能を充実させました。注文フォームで次の入力が可能です。
  1. ラッピング
  2. メッセーカード
  3. 写真入カード
  4. のし紙（表書き、送り主）
  5. 命名札
  6. 挨拶状
システム設定【９】送料＆ラッピングの設定、注意事項＆アンケート　のところで、設定できます。
クーポン機能（PCtoMobile-2）
PCtoMobile-2（Ver.15）で、クーポンコードによる割引機能を搭載しました。システム設定【5】で下記の設定が出来ます。
  • クーポン機能を有効にする
  • クーポン有効金額の下限
  • クーポンコードの無効メッセージ
  • クーポン利用メッセージ
  • クーポンコードテーブル（期間、クーポンコード、割引額又は率、ステータス）
PC携帯で共通のクーポンを設定、利用できます。なお、このクーポンの期間中の利用には回数の制限がありません。

下位のシステムとの互換性
会員データに携帯用のメールアドレスを加えたことにより、下位のショッピングカートとの互換性に問題が出てきます。その点を考慮して、携帯の場合、携帯用のメールアドレスがない場合には、これまでどおりのメールアドレス（PC用メールアドレスと同じ位置にある）を自動的に使うようにプログラムしました。これにより、これまでの会員データをそのまま使うことができます。

空メール自動登録携帯空メール自動会員登録システム（オプション）
「空メール」とは、本文に何も入力しない状態でメールを送信することです｡この空メールにより、差出人のメールアドレスを確実に取得することができ、モバイルマーケティングが可能となります。

この空メールを利用した、当社の空メール自動会員登録システムの会員登録の過程は次のようになります。
  1. お客様は携帯で指定されたアドレスに空メールを送信する。
  2. お客様の携帯にすぐに会員登録用のURLがメールで返信されてくる。
  3. メールのＵＲＬから会員登録をすることができる。
この機能の設定はオプションで、PCtoMobile購入時にこのオプションを選択できます。⇒空メール自動会員登録システム

【設置可能なサーバの条件】
この携帯空メール自動会員登録システムを可能にするためには、サーバのメール転送＆スクリプトの自動起動の機能を必要とします。大抵のレンタルサーバで使用可能です（X-server、VVV7、カゴヤなどで可能です）。しかし、サーバにより設定の仕方は異なります。それで、このオプションは当社で設置代行したいと思います。もちろん、サーバによってはできない場合があります。
NPコネクトライト対応イプシロン決済自動処理
イプシロン決済を利用する場合、PCtoMobileでは決済自動処理を取り入れました。クレジットカード決済後、およびコンビニ決済後に下記の処理が自動で行われます。
  • 決済日時が販売ログに書き込まれる。
  • 同時に、取得ポイントを会員情報に加算する。
上記の処理により、販売管理でクレジット決済とコンビニ決済が完了しているか否かを確認できます。また、会員は決済後すぐに取得ポイントを使うことができるようになります。

※イプシロン決済に関しましてはこちらをご覧ください。⇒イプシロン決済の紹介
NPコネクトライト対応J-Payment決済対応
J-Paymentのクレジットカード決済に対応しています（HTMLリンク方式）。J-Paymentの管理画面で商品登録することにより、細かな定額決済も可能です。

※J-Payment決済に関しましてはこちらをご覧ください。⇒J-Paymentの導入のメリット

NPコネクトライト対応NPコネクトライト対応
株式会社ネットプロテクションズのNPコネクトライトに対応させました。NPコネクトライトはNP後払い決済とNPカード決済の取引登録を自動化するサービスです。

NPコネクトライトNPコネクトライトを使用するときには下記のperlモジュールが必要です。
  • Crypt::SSLeay
  • Net::SSLeay

使用方法：
  1. システム設定【２５】でNPコネクト用ＳＰコードを記入する。（使用しないときはブランク）
  2. システム設定【10】お支払方法で、クレジット決済の方法=1に設定する。
  3. システム設定【10】お支払方法で、NP後払い=1と設定する。

NP後払いの資料請求はこちら。⇒NP後払いの資料請求

【注】NP後払いはＰＣのみに対応したサービスで、携帯では使用できません。NPカードは携帯にも対応しています。また、NPカードはカード情報の取得が必要ですのでＳＳＬが必要になります。NPカードのメリット参照。
スタイルシートによるデザインの一新スタイルシートによるデザインの一新
スタイルシートを適切に用いることにより、デザインを一新しＳＥＯ対策を充分なものにグレードＵＰしました。組み込まれているスタイルシートを用いることにより、一層容易に望みのデザインを実現でき、同時にＳＥＯ対策を施すことができます。
スタイルシートの用い方は、組み込みスタイルシートの活用法をご覧ください。
XHTML対応XHTML対応
XHTMLに対応させました。set.plの２０行目で下記のいずれかを選択できます。（初期値は、HTML 4.01 Transitional です。）
  • XHTML 1.0 Transitional
  • HTML 4.01 Transitional
これにより、貴社のデザインしたサイトにぴったり合ったショッピングカートを作成できます。

⇒HTMLからXHTMLへの移行の方法
Unicode（utf-8）対応版Unicode（utf-8）対応版（PCtoMobile-U）
PCtoMobileのUnicode(utf-8)版、PCtoMobile-Uicodeを用意しました。

Unicodeについての詳しい説明はこちらをご覧ください。⇒Unicodeへの移行方法

また、Unicode版ではシステム設定【1】で使用通貨を設定できるようにしました。設定を変えるだけで表示される通貨単位を全て変更することができます。

　サンプル：
　　　　　PCtoMobile_U_NZD（PC用）　　　　　　PCtoMobile_U_NZD（携帯用）
ＲＯＲサイトマップの自動生成応ROR/siremaps.orgサイトマップの自動生成応
sitemaps.org形式のサイトマップの自動生成の機能を取り入れました。これにより、ＣＧＩの弱点を克服することができます。
活用方法については、ＳＥＯ対策のページをご覧ください。
マルチメールフォームの標準装備マルチメールフォームの標準装備
高機能メールフォーム「マルチメールフォームVer1.10」を標準装備いたしました。これにより柔軟な問合せや特殊な注文などが可能となります。しかも、カートの会員機能と連動して機能するように組み込まれています。
マルチメールフォームの機能に関しましては、「マルチメールフォーム」をご覧ください。
カレンダープログラムの標準装備カレンダープログラムの標準装備
カレンダープログラムcalendar.cgiを内蔵しました。
  • カレンダープログラムのサンプル⇒calendar.cgi
システム設定【５１】カレンダーの設定　で特売日や休業日を設定できます。（さらに細かな設定が必要な場合はcalendar_set.plで行います。）
カレンダープログラムの標準装備配達希望日の自動計算機能
注文日から配達所要日数を考慮して配達日（納品日）を計算します。これはカレンダーと連動して機能します。システム設定【５１】で休業日と配達所要日数を設定してください。（この機能を使用するときはシステム設定【10】配達希望日 のところで、「*:14」のように設定してください。）

計算の手順は下記のようになります。
  1. 指定された時間以後の注文は次の日を注文日とする。
  2. 注文日が休業日のときは次の営業日を注文日とする。
  3. 特定の休業日に加えて、土曜日、日曜日、祭日を休業日とするかどうかを指定できる。
  4. 注文日（営業日）に配達所要日数を加えて最短配達日とする。
  5. 最短配達日から指定された日数分を希望日のリストとして表示する。
PCtoMobile2では、配達所要日数を地域ごと（送料の地域テーブルに対応）に設定できます。
  1. 指定された時間以後の注文は次の日を注文日とする。
  2. 注文日が休業日のときは次の営業日を注文日とする。
  3. 特定の休業日に加えて、土曜日、日曜日、祭日を休業日とするかどうかを指定できる。
  4. 注文日（営業日）に地域ごとの配達所要日数を加えて最短配達日とする。
  5. 複数送付先のときは最大の配達所要日数を加えて最短配達日とする。
  6. 最短配達日から指定された日数分を希望日のリストとして表示する。
カレンダープログラムの標準装備TOP1〜TOP10の自動生成機能
PCtoMobileでは、TOP1〜TOP5に加えて、TOP6〜TOP10を自動生成できるようにしました。システム設定【４６】〜【５０】でHTMLを入力します。
カレンダープログラムの標準装備注文フォーム専用ヘッダーのカスタマイズ機能
注文フォームのヘッダーを商品画面とは別にカスタマイズすることができます。システム設定【５１】注文フォームのヘッダーのカスタマイズの設定　のところでHTMLを入力します。

カスタマイズは次の４種類から選べます。
  • 0=カスタマイズしない（商品画面と共通のヘッダー）。
  • 1=注文フォームのカスタマイズ。
  • 2=注文フォーム＆会員購入履歴のカスタマイズ。
  • 3=注文フォーム＆会員購入履歴＆会員登録フォームのカスタマイズ。
スタイルシートorder_form.cssでデザインを指定できます。
電子マネー決済対応電子マネー決済、ペイジー決済対応
WebMoney、BitCash、ちょコムに対応いたしました。これは、イプシロン決済を利用します。それで、イプシロンのクレジットカード、コンビニ決済と同じように、自動入金処理が可能となります。設定はシステム設定【43】電子マネーの設定のところで行います。初期設定ではすべての決済を利用するようになっていますから、ご利用の決済区分だけを設定してください。

ペイジー決済がイプシロン決済を通して可能となっています（法人のみ利用可）。それで、自動入金処理が可能となります。設定はシステム設定【10】お支払方法のところで行います。初期設定では利用する設定になっていますから、ご利用の決済区分だけを設定してください。

※イプシロン決済に関しましてはこちらをご覧ください。⇒イプシロン決済の紹介


電子マネー《G-MONEY》、《セキュリティーマネー》に対応しました。システム設定【43】電子マネーの設定 のところで設定します。G-MONEYコード及びセキュリティーマネーコードを設定して始めて使用できるようになります。

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

※詳しくはこちらをご覧ください。
⇒アイ・ティー・コンサルティング株式会社
⇒G-MONEY
⇒セキュリティーマネー

【G-MONEYへの登録スクリプト】
script3 ： http://*******/gmoney3.cgi
script4 ： 省略

【セキュリティーマネーへの登録スクリプト】
script3 ： http://*******/securitym3.cgi
script4 ： http://*******/securitym4.cgi
PayPal対応PayPal決済/Yahooウォレット対応
PayPal決済、及び、Yahooウォレットに対応いたしました。PayPal決済かYahooウォレットかのどちらかを選択できます。システム設定【25】PayPalの設定のところで設定できます。

【注】Yahooウォレットをご利用の場合、マーチャントセンターの設定で、「HTMLタグを利用する」にチェックしてください。
発送完了、入金確認メールのカスタマイズ機能発送完了、入金確認メールのカスタマイズ機能
発送完了、入金確認メールをＷＥＢ上からカスタマイズすることができます。初期値では、注文メール、入金確認メール、発送完了メールが連携されるように設定されていますので、それを販売店に合わせて自由にカスタマイズして使うことができます。（システム設定【18】販売管理の設定 を参照）

※下記の変数を使うことができます。
$order_no（注文番号）、$order_day（注文日付）、$order_data（注文商品）、$total（内税商品の合計）、$total_out（外税商品の合計）、$tax_out（外税額）、$send_cost（送料）、$sougoukei（総合計）、$method（送金方法）、$hope_day （配達希望日）、$hope_time（配達時間）、$send_day（発送日）、$yotei_day（到着予定日）、$message（連絡事項）、$identity（会員ID）、$point （現ポイント）、$used_point （使用ポイント）、$get_point（取得ポイント）、$new_point（新ポイント）、$name（会員名）、$kana（フリガナ）、$mail （メール）、$post（郵便番号）、$address（住所）、$tel（電話番号）、$carrier （機種）、$bikou（備考）、$charge（決済手数料）、$lapping（ラッピング料）、$send_address（送付先住所）、$m_card（ﾒｯｾｰｼﾞｶｰﾄﾞ）、$koumoku1〜5（入力項目1〜5）、$enquete1〜3（アンケート1〜3）
発送完了、入金確認メールのカスタマイズ機能アクセス解析プログラム
Ver12以降では、ショッピングカートページアナライザー（Cart Page Analyzer）が標準で内蔵されています。システム設定【44】で各種の設定することができます。
カートページアナライザーの機能についてはこちらをご覧ください。⇒Cart Page Analyzer
発送完了、入金確認メールのカスタマイズ機能ランキング設定機能
便利なランキング設定機能を搭載いたしました。システム設定【４５】のところで、商品番号を表示したい順に１０個まで手動で登録することにより、自動でランキングが表示されます。これにより、人気ランキングだけでなく、店長お勧めや新商品など任意のランキングを７種類まで簡単に登録・変更できます。

設定方法は下記の変数をシステム設定【13】【30】〜【34】【35】【37】〜【41】で入力することにより行います。
$rankA01_no,$rankA01_name,$rankA01_setumei,$rankA01_image,$rankA01_price
$rankA02_no,$rankA02_name,$rankA02_setumei,$rankA02_image,$rankA02_price
・・・・・・・
$rankA10_no,$rankA10_name,$rankA10_setumei,$rankA101_image,$rankA10_price

ランキングは、A〜Gまで７種類登録できます。具体的にはサンプルを参考にしてください。

ランキングの使用モードは下記の通りです。
  • ０・・・ランキング機能を使用しないときで、無駄な処理を省くことができます。
  • １・・・標準モードではcsv_lock/ranking_data.cgiが自動作成されます。最初に使うときやランキングを更新したときは標準モードにしてください。
  • ２・・・高速モードで、標準モードで生成された、csv_lock/ranking_data.cgiをもとにしてランキングを表示します。
※人気ランキングのデータは人気順表示や販売管理を利用して知ることができます。
発送完了、入金確認メールのカスタマイズ機能携帯CSSの採用(Ver.13)
携帯電話の進歩に伴い各社ともほとんどの機種でスタイルシートが使えるようになってきました。それで、PCtoMobile Ver.13で、携帯ショッピングカートにスタイルシートを取り入れました。詳しくは、こちらをご覧ください。⇒携帯CSSの採用
発送完了、入金確認メールのカスタマイズ機能充実した在庫管理機能)
オプション１のみ在庫管理が可能になっており、オプション２の在庫管理はできません。それで、オプション１の記号と意味をセパレータ（「-」など）を用いて規則的に表現することにより、２次元の在庫管理ができるように機能ＵＰしました。
また、商品一覧表で、在庫切れ商品の表示・非表示を切り替えることができます。
それに加えて、PCtoMoible2では、日ごとの在庫管理の機能を実現しました。

【オプション１の２次元在庫管理】
たとえば、オプション１の記号と意味を次のように記入します。
記号 意味 在庫数 単価
記号 意味 在庫数 単価
記号 意味 在庫数 単価
記号 意味 在庫数 単価
記号 意味 在庫数 単価
記号 意味 在庫数 単価
記号 意味 在庫数 単価
記号 意味 在庫数 単価
記号 意味 在庫数 単価

ついで、システム設定【１４】詳細説明のカスタマイズで、変数$zaiko_tableを記述すると下記のように在庫一覧表が表示されます。
  ブルー レッド グリーン
Sサイズ ○ ○ ○
Mサイズ ○ ○ ○
Lサイズ ○ ○ ○

サンプル⇒PCtoMobile

上記の例の場合はセパレータに「/」を使いましたが、システム設定【７】でいくつかの他のセパレータを指定することもできます(初期のものは、「-」のみでした)。また、テーブルのデザインはスタイルシートdetail_customize.cssの下部のところで変更できます。

【在庫切れ商品の表示・非表示切り替え機能】
商品一覧表で、在庫切れ商品の表示・非表示を切り替える機能を搭載しています。システム設定【7】在庫管理の設定のところで、表示モードを設定できます。
  • 表示モード＝0　：　この機能を使わない（在庫切れも表示固定）。
  • 表示モード＝1　：　初期値は「在庫切れも表示」モード。
  • 表示モード＝2　：　初期値は「在庫切れ非表示」モード。

なお、この切り替え機能はＰＣのみで有効で、携帯・スマートフォンでは次のようになります。
  • 表示モードが0又は1の場合、在庫切れも表示固定。
  • 表示モードが2の場合、在庫切れ非表示固定。

【日ごとの在庫管理の機能】（PCtoMobile2）
さらに、PCtoMobile2では日ごと在庫管理システムを搭載しました。商品（たとえば、メロン）を１日当たり100Kgだけ出荷できるとします。この１日の出荷量を考慮に入れて注文を受け付けることができるように、配達希望日を自動的に調整するシステムです。すでに、カレンダーに連動した配達希望日の自動生成システムがありますが、それに日々の在庫管理を組み合わせたシステムになります。

配達希望日は下記のように自動生成されます。
  1. 指定された時間以後の注文は次の日を注文日とする。
  2. 注文日が休業日のときは次の営業日を注文日とする。
  3. 特定の休業日に加えて、土曜日、日曜日、祭日を休業日とするかどうかを指定できる。
  4. 注文日（営業日）に出荷伝票発行日数を加えて最短出荷日を算出。
  5. 出荷日の在庫（注文商品のすべての在庫）が十分であれば、それを出荷日とする。
  6. 出荷日の在庫が十分でなければ、十分な出荷日を調べる。
  7. 出荷日に地域ごとの配達所要日数を加えて最短配達日とする。
  8. 複数送付先のときは最大の配達所要日数を加えて最短配達日とする。
  9. 最短配達日から指定された日数分を希望日のリストとして表示する。
日ごとの在庫は、data_z.cgiという日ごと在庫管理ファイルに６０日分記録・保持され、購入時及びその日の最初の読み込みの時に更新されます。「在庫(1商品の量/出荷量)」のところに１商品の量と一日の出荷量を記入すると日ごと在庫管理の対象の商品となり、その量に基づいて在庫管理されるようになります。

【注】在庫数を保持する期間は、set.plの約２０行目で変更できます。初期値は60日です。また、休業日の在庫は自動的に0になります（set.plの初期設定）。しかし、受付業務は休業でも、出荷業務は休業でない場合は休業日の在庫を自動的に0にしないようにもできます。

《日ごと在庫管理ファイルdata_z.cgiの初期化》
  1. システム設定【７】で日ごと在庫管理機能を使用=1に設定し、１日の出荷量（デフォルト）を設定。
  2. data_z.cgiのブランクファイルをＵＰロード。
  3. 在庫管理する商品を登録し、在庫(1商品の量/出荷量)を記入します（これを記入して初めて日ごと在庫管理の対象となります）。
  4. これで準備は完了です。管理メニューの商品管理から「日ごと在庫管理」に進み、該当の商品番号を指定して日ごとの在庫データを確認してください。
サンプル⇒1日限定出荷商品（牡蠣、ケーキ、メロン）/携帯版/日ごと在庫管理画面
発送完了、入金確認メールのカスタマイズ機能商品の詳細検索機能
チェックボックスを使った詳細検索の機能を取り入れました。
システム設定【6】のところで、詳細検索名１〜５とその項目を設定します。システム設定【30】〜【34】で、変数$detail_searchを記述することにより、詳細検索画面を表示できます。
例として、【32】に詳細検索画面のサンプルが記述されています。システム設定【3】のＴＯＰ３のところで、リンクの名称を「商品の詳細検索」としてあります。
発送完了、入金確認メールのカスタマイズ機能マイページ機能
マイページ機能として会員が参照、登録、又は購入した商品番号と商品検索したキーワードをデータとして会員ごとに保存し（ＰＣ＆携帯）、かつ表示・管理する機能（ＰＣ＆携帯）を組み込みました。保存されるデータは下記の５種類です。
  • お気に入り登録商品番号
  • 参照した商品番号
  • 検索したキーワード
  • 検索したカテゴリー（分類）
  • 購入した商品番号
会員が自らデータを削除したり非表示にしたりできるように、自分で管理できる方式を採用しました。これは会員機能でパスワードの管理など会員が自ら責任管理する方式と同じです。こうすることにより販売店側では管理の手間を省くことが可能となります。

会員は会員メニューからマイページを開き、不要な履歴を削除することができます。また、チェックした商品の履歴が、ＰＣでは商品一覧表の下に、携帯では商品メニューの下に自動で表示されます。

また、マイページのデータ（購入商品、チェックした商品、チェックした分類）からおすすめ商品を割り出して表示します。割り出し手順は次の通りです。
  1. 関連商品データ（related_no.txt）から購入商品の第一関連商品を選択。（関連商品に関しましてはこちらを参照⇒関連商品の表示機能）
  2. 関連商品データ（related_no.txt）からチェックした商品の第一関連商品を選択。
  3. 購入商品の分類と同一分類の商品を複数選択（できるだけ新しい商品から）。
  4. チェックした商品の分類と同一分類の商品を複数選択（できるだけ新しい商品から）。
  5. 上記の商品が表示数に満たないとき、チェックした分類の商品を複数選択（できるだけ新しい商品から）。
  6. 選択され商品の中から、表示数分だけ商品をランダムに抽出。
表示箇所は次の通りです。
  • ＰＣの場合
    • マイページ管理画面（お気に入り登録商品があるときは登録商品が表示される）
    • 商品一覧表
    • ＴＯＰ１〜１０（変数$mypage_recommend_listを記述）
  • 携帯の場合
    • マイページ管理画面（お気に入り登録商品があるときは登録商品が表示される）
    • 商品メニュー
この機能を使うにあたって、必要な設定は下記のいくつかです。
  1. この機能を使用するか否か（規定値は使用）-set.pl
  2. 保存するデータの個数（規定値は20）-mypage.pl
  3. 表示する表品数（規定値はＰＣ商品ページ8、携帯マイページ管理7、携帯商品ページ3）-mypage.pl
  4. 履歴に基づくおすすめ商品の表示数（規定値はＰＣ商品ページ4、携帯マイページ管理2、携帯商品ページ2）-mypage.pl
  5. システム設定【14】の商品一覧及び商品詳細画面のカスタマイズで、変数$favorite_linkを記述することにより「マイページに登録」のリンクを設定
この変更が必要な場合は、set.pl及びmypage.plファイルで設定します。使用しない場合は使用しない設定にしておくなら無駄な処理を省くことができます。

ＴＯＰ１〜ＴＯＰ１０に下記の変数を記述することによりチェックした商品の履歴を表示することもできます。初期状態ではＴＯＰ１０にサンプルとして組み込んであります。

<div id='mypage' align='left'>

<div id='mypage_top'><span style='color:#ffffff;font-weight:bold;margin-right:15px;'>チェックした商品の履歴（ご利用方法は<a href='./shop.cgi?mode=mypage'><span style='color:#ffffff;text-decoration:underline;'>マイページ</span></a>で）</span></div>

$mypage_recommend_list
<h2>最近チェックした商品</h2>
$mypage_goods_list
<h2>最近検索したキーワード</h2>
$mypage_keys_list
<h2>最近検索したカテゴリー</h2>
$mypage_class_list
<h2>最近購入した商品</h2>
$mypage_orders_list

</div>

デザインはスタイルシートtop_mypage.cssでカスタマイズできます。また、商品一覧の表示のデザインは、システム設定【１４】の画像のみ表示と共通になります。
発送完了、入金確認メールのカスタマイズ機能3分類設定機能
1商品に3分類まで設定できるようにしました。商品登録、商品更新の画面で3つまで選択可能です。第1分類は必須で、第２、３の分類を設定するかどうかは任意です。

※この機能に付随して、商品詳細ページの分類から分類ページへリンクできるようにしました。
発送完了、入金確認メールのカスタマイズ機能会員パスワードの暗号化
パスワードは会員登録時、及び会員情報変更時に暗号化されてサーバに保存されます。しかし、会員データを読む際にはパスワードが暗号化されているかどうかを判断して比較しますので、これまでの会員データをそのまま使うことができます。
サーバには会員パスワードの暗号化されたものしかありませんから、再発行はできません。それで、再発行の際は、仮パスワード（１０桁のランダム英数）を送信することになります。

携帯電話の場合、会員パスワードに下記の情報を付け加えて暗号化（ハッシュ化）したものをＵＲＬに付けて引き渡します。これにより、リファラースパムの危険性をかなり低下させることができます。
１、UserAgent
２、可能な場合は固体識別番号
３、時間的な情報

ＵＲＬに付け加える暗号が有効な期間をset_class_pl/pass_code.plで下記のように設定できます。初期値はアクセス終了後、次の週まで有効となるように設定してあります。
　　１．暗号の有効期限を設定しない。
　　２．アクセス終了後、次週の土曜まで有効。
　　３．アクセス終了後、次の日の23:59まで有効。
　　４．アクセス終了後、次の時間まで有効。（アクセス終了が15:30なら16:59まで有効）

また、クッキーが使える携帯の場合は、暗号化された会員パスワードがクッキーで受け渡されます。
詳しくはこちらをご覧ください。⇒カートのセキュリティー対策
発送完了、入金確認メールのカスタマイズ機能iPhone/Android対応（HTML5/CSS3採用）
ショッピングカートにスマートフォン（iPhone、iPod touch、Android）からアクセスした場合に、スマートフォンらしいタップしやすい表示を実現しました。iPhoneやAndroidからアクセスした場合、下記のような動作となります。
  • ドキュメントタイプは『 HTML5 』
  • スタイルシートはCSS3を採用し、タップしやすい表示を実現。
  • metaタグ『 <meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' /> 』（初期値）を出力。
  • 携帯の絵文字は非表示になり、半角カタカナは全角カタカナに変換されて出力されます。（Unicode版の場合は、Unicode::Japaneseモジュールを使用。）
  • 文字コードは、UTF-8（初期値）又はShift_JISを選択可能（k_shop_pl/design.plの5行目）。
スマートフォンの特色であるタッチパネルによる操作が楽なように、良く使うボタンやリンクはタップしやすく領域を広げてあります。数字の入力も自動で数字モードに切り替わります（Androidの場合）。
JQueryを活用してtextareaのリサイズ機能を搭載しました。しかし、JavaScriptは多用せず、動作の安定とスピードを重視しました。

さらに、商品画像は携帯用設定【20】で指定したサイズを約1.5倍に自動で拡大するようにしました。
  • サムネイル画像の場合は、1.5倍（75px→→→105px）
  • 拡大画像の場合は15/11倍（220px→→→300px）
文字コードはUTF-8（初期値）又はShift_JISを選択できるようにしました（PCtoMobile-Uniocde版はUTF-8のみ）。HTML5では、UTF-8が推奨されていますが、Shift_JISでも問題なく動きます。まだ日本ではShift_JISの方が便利な場合が多く、Shift_JISでないと困る場合もあります。しかし、特に、Shift_JISでなければならない理由がなければ、UTF-8を用いることができます。

【注意】クレジット決済代行会社の多くはUTF-8に対応していないため、注文完了画面だけ常にShift_JISで出力されるようにしてあります。こうすることにより、決済画面でPCと携帯とスマートフォンで文字コードを統一できます。このように通常はUTF-8でHTMLを出力し、注文完了画面や問合せ完了画面の時にHTMLをShift_JISに切り替えて出力するこの方式は【特許出願中】です。

スマートフォン用のHOME、TOP1〜TOP5、問合せフォームを携帯とは別にHTML5/CSS3で自由にカスタマイズできるようにしました。smartフォルダ内のファイルをテキストエディターで編集することにより可能となっています。詳しくは、スマートフォンのカスタマイズをご覧ください。

※HOME、TOP1〜TOP5の6ページに加え、特定商取引法、購入方法のページで合計8ページ作成できます。携帯やスマートフォンサイトの作成のポイントは1ページを長めに作成することです。その方が使い勝手がよくなるからです。それで、この8ページに全てを納めるようにする（詰め込む）ことは大変良い方法といえます。
発送完了、入金確認メールのカスタマイズ機能正規化（canonical）機能搭載
類似のページを一つにまとめる正規化（canonical）機能（SEOに有効）を搭載。⇒正規化（canonical）
発送完了、入金確認メールのカスタマイズ機能Facebookやツイッターの登録ボタンの自動表示機能
Facebook Google+ Twitter はてなブックマークのボタンなどのソーシャルメディアへの登録ボタンを自動表示する機能を取り入れました。

下記の５つの変数を使い、TOP1〜TOP10（システム設定【14】）と商品詳細画面（システム設定【30】）で表示できます。

　$facebook_btn・・・Facebookの「いいね」ボタン
　$googleplus_btn・・・Google+1ボタン
　$twitter_btn・・・ツイッターのツイートボタン
　$hatenabookmark_btn・・・はてなブックマークボタン
　$sbookmark4_btn_box・・・上記4つのボタンをまとめたもの

サンプルでは次のように設定しています。
【TOP1〜TOP10】
<div class="side2Block">
<h2>ブックマーク</h2>
<p>$sbookmark4_btn_box</p>
</div>

【商品詳細画面】
<div class='detailBoxgray'>
$sbookmark4_btn_box
</div>

共有するURLを最適なものにするようにプログラムしてあります。それで、この機能を使用するときはシステム設定【20】でk_shop.cgiがフルパスであることを確認してください。

スマートフォンでもソーシャルメディアへの登録ボタンを自動表示できます。スマートフォンの場合は、smartフォルダ内のhome.pl、top1.pl〜top5.plで下記の変数で表示します。

　$facebook_btn・・・Facebookの「いいね」ボタン
　$googleplus_btn・・・Google+1ボタン
　$twitter_btn・・・ツイッターのツイートボタン
　$hatenabookmark_btn・・・はてなブックマークボタン
　$sbookmark4_btn_box・・・上記4つのボタンをまとめたもの

サンプルでは次のように設定しています。
<div class='column-top'>
$sbookmark4_btn_box
</div>

また、商品詳細画面では自動的に表示されるように組み込まれています。表示したくない場合は、shop_pl/sbookmark.plの7行目で非表示の設定をして下さい。さらに、なんらかの理由によりスマートフォンでGoogle+1ボタンが表示されない時、10行目で非表示の設定ができるようにしました。

PCとスマートフォンではソーシャルメディアに登録するＵＲＬは共通になっています。それはＰＣのＵＲＬにスマートフォンからアクセスした場合に携帯にリダイレクトするようになっているからです。それで、例えば、ＰＣで+1されるとスマートフォン側でも+1されることになります。


go to home
Copyright (C) 2011　 WEBインベンター　All rights reserved.