SSLページがリニューアルされました

カラーミーショップからのお知らせで皆様すでにご存知のとおり、SSLページのリニューアル（スマホ最適化）されました。

リニューアル以前のSSLページで幅をガチガチに設定していると、スマホ最適化の恩恵が受けられません。
カラーミー公式に説明があるとおり、一度CSSを削除する必要があります。また、SSLページに表示するショップ・ロゴについての話も書いてありますので、該当しそうな方は確認を。

さて。きれいさっぱりスマホ最適化されると、画面サイズによって、文字サイズやテキストボックスなどのサイズが自動調整されます。
見やすく・使いやすくなりましたし、角を丸く切ったボックス類や淡い青ベースの配色になって、デフォルトでもちょっとオシャレになりました。

カラーミーショップさま、良い仕事でした！

【追記】
SSLページについて、小ネタがあるかと思いましたが、なにもなしでした。
以前までCSSの背景画像でショップ・ロゴを表示させていた場合は、今回のスマホ最適化の恩恵（画像サイズの自動調整）を受けるために、カラーミー公式をご一読されるが吉。

ショップ独自のポイント制度について 1

カラーミーショップでは「GMOとくとくポイント」（GMOとくとくショップ、カラメル出店ショップ間で共通のポイント）とは別に、ショップ独自のポイント制度を導入することができます。
ショップ独自のポイントは、付与率を自前で決められますので、ショップに応じた値引率を設定できます。
リピーター獲得のための方策として、ネット通販にかぎらず、多くのショップで利用されています。

まず、ショップ独自のポイント制度導入にあたっての概説。
カラーミーでのポイント導入はそれほど難しくありません（ポイント制度使用設定「使用する」にするだけ）。

写真1.ポイント設定箇所
お店をつくる＞決済の設定をする＞ポイント設定

・ポイント制度使用設定（使用する/しない）
・ポイント支給タイプ（一般的な3通りの方法）
・使用可能ポイント数（最大を設定しないと使用できない。32767がMAX）。

■いくつかの問題点
写真1のように、かんたんに設定できますが、問題点もあります。

1.ポイント数を表示するための独自タグがないので、かんたんに表示できない
2.商品ごとに付与率を設定したいが、無理
3.お客様がポイントを確認しづらい

1については、JavaScriptを使用して、販売価格から計算し、表示するようにします。この問題については、解決可能です。次回にサンプル掲載いたします。
2については、シンプルな解決策は現状ありません。「商品を売る＞顧客を管理する」から、お客様のポイントを手動で増減させることも可能ですが、分かりにくさや手間を考えれば、現実的ではありません。
3については、商品購入直後に送信される自動送信メールには、付与ポイント数や保有ポイント数が表示されません。マイアカウントにログインしてもらって確認するしかありません。モバイル用では、マイアカウントにすら表示されません。

■ポイント承認について
商品購入直後は仮ポイントとして付与されます。
入金確認後や商品発送後など、各ショップのタイミングで仮ポイントの承認を行います（写真2一番右のリンクから）。承認すると、お客様は使用可能になります。より詳細は、カラーミーのマニュアル参照。
写真2
注文直後は（使用できない）仮ポイントとして加算され、マイアカウントで確認できます。

■ポイントの使用方法と確認方法

・ほしい商品をカートに入れたのち、「レジへ進む」をクリックすると、「お客様情報の入力」画面になります。その画面で現在の保有ポイント数が表示され、今回使用するポイント数が入力できます。
・モバイルのお客様の場合、保有ポイント数の確認は「お客様情報の入力」画面でしか行えません。
・PCのお客様の場合、「お客様情報の入力」画面とマイアカウントから確認できます。
・ショップ運営者は、顧客管理から確認できます。ポイントの増減もできます。

写真3
モバイルの「お客様情報の入力」画面（抜粋）です。
PCの場合もおおよそこのような感じです。

今回はポイント設定全般の必要知識と、カラーミー上の問題点についてを書きました。
次回は「ショップ独自のポイント制度について 2」 で、Smartｙで作ったのサンプルについて。

最近チェックした商品リストを作る

【追記】2012年1月31日に公式に実装されました。以下は古い記事になります。

【マニュアル】「商品グループ機能 階層化」「最近チェックした商品リスト」
カラーミーショップには、「最近チェックした商品（または最近見た商品）」がありません。
アカウント情報のひとつとして、サーバー側で持たせることが一般的ですが、現状そのような機能は搭載されていません。

ということで、クライアント様からご依頼がありましたので作成してみました。
必要な機能がシンプルなため、わりとかんたんに作られています（サンプルとしては好都合）。

ではかんたんに仕様から。
・商品詳細ページ(URLが?pid=)の場合、Cookieに書き込み
・書き込みの内容は、商品名、商品ID、商品画像URL（すべて独自タグあり）
・Cookieの読み書きはjquery.cookie.js（プラグイン）を使用

今回の機能ですが、以前作成した「ほしい物リスト」と、おおまかにいうと同じ考え方です。
Cookieを使用して情報を読み書きし、表示させる。jQuery、JavaScriptの使い方も同じです。
もっとも異なる点はAjaxを使用しない点です。
そのおかげで、実にシンプルかつスマート。

それでは、今回のサンプルを。

0.jQueryと自作関数を読み込み

<script type="text/javascript" src="http://～/jquery.js"></script>
<script type="text/javascript" src="http://～/jquery.cookie.js"></script>
<script type="text/javascript" src="http://～/recent.js"></script>

1.商品詳細ページの任意の場所に設置
商品名には、先頭に画像タグがつく場合があるので、strip_tagsで除去。
商品名に含む「”」などはトラブルのもと。エスケープしておく。

<{assign var="proname" value=$product.name|strip_tags|escape}>

<script type="text/javascript">
<!--
  set_recent_cookie("<{$product.id}>","<{$proname}>","<{$product.img_url}>",1);
// -->
</script>

2.表示したい任意の場所に設置

<div id="recent_item"></div>

<script type="text/javascript">
<!--
  load_recentlist();
// -->
</script>

3.JavaScript-recent.js

//Cookieセット
function set_recent_cookie(pid,name,img_url,i) {
  // 1書き込み　0消去
  if(i==1) {
    strCookie=$.cookie('recent');
    if(strCookie==null) {
      strCookie="";
    }
    else{
      loop=strCookie.match(/`/g)
      if(loop!=null && loop.length/4 >= 6){//6個保存
        //古い方から消す
        loc=strCookie.indexOf("`", strCookie.indexOf("`", strCookie.indexOf("`", strCookie.indexOf("`")+1)+1)+1);
        strCookie=strCookie.slice(loc+1);
        $.cookie('recent', strCookie ,{expires:365});
      }
    }
    strURL="`"+pid+"`"+name+"`"+img_url+"`";
    if(strCookie==null || strCookie=="") {
      strCookie=strURL;
      $.cookie('recent', strCookie,{expires:365});
    }
    else {
      strCookie=strCookie+strURL;
      $.cookie('recent', strCookie,{expires:365});
    }
  }
  else {
    $.cookie('recent','',{expires:-1});
    document.getElementById("recent_item").style.display='none';
  }
}

//最近チェックした商品リスト表示
function load_recentlist() {
  loc = new Array();

  //Cookie読み込み
  strCookie=$.cookie('recent');
  if(strCookie==null) {
    strCookie="";
  }
  loop=strCookie.match(/`/g);

  if(loop!=null){
    if(loop.length/4>6){
      n=6;
    }else{
      n=loop.length/4;
    }
  }
  else {
    n=0;
  }

  if(n !=0 ){
    loc[0]=strCookie.indexOf("`");
    loc[1]=strCookie.indexOf("`",loc[0]+1);
    loc[2]=strCookie.indexOf("`",loc[1]+1);
    loc[3]=strCookie.indexOf("`",loc[2]+1);
    str1=strCookie.substring(loc[0]+1,loc[1]);//商品ID
    str2=strCookie.substring(loc[1]+1,loc[2]);//商品名
    str3=strCookie.substring(loc[2]+1,loc[3]);//商品画像URL
    //この下の行は表示部分なので各自
    strOut="<div style='height:43px;overflow:hidden;margin-bottom:8px;width:100%;'><div style='height:43px;width:47px;float:left;'><a href='./?pid="+str1+"'><img style='width:43px;' src='"+str3+"'></a></div><div style='height:43px;'><a href='./?pid="+str1+"'>"+str2+"</a></div></div><div style='clear:both;height:1px;'><img src='http://img.shop-pro.jp/tmpl_img/11/sp.gif'></div>";
  }
  for(i=1;i<n;i++){
    loc[i*4]=strCookie.indexOf("`",loc[i*4-1]+1);
    loc[i*4+1]=strCookie.indexOf("`",loc[i*4]+1);
    loc[i*4+2]=strCookie.indexOf("`",loc[i*4+1]+1);
    loc[i*4+3]=strCookie.indexOf("`",loc[i*4+2]+1);
    str1=strCookie.substring(loc[i*4]+1,loc[i*4+1]);//商品ID
    str2=strCookie.substring(loc[i*4+1]+1,loc[i*4+2]);//商品名
    str3=strCookie.substring(loc[i*4+2]+1,loc[i*4+3]);//商品画像URL
    //この下の行は表示部分なので各自
    strOut="<div style='height:43px;overflow:hidden;margin-bottom:8px;width:100%;'><div style='height:43px;width:47px;float:left;'><a href='./?pid="+str1+"'><img style='width:43px;' src='"+str3+"'></a></div><div style='height:43px;'><a href='./?pid="+str1+"'>"+str2+"</a></div></div><div style='clear:both;height:1px;'><img src='http://img.shop-pro.jp/tmpl_img/11/sp.gif'></div>"+strOut;
  }
  if(n !=0 ){
    document.getElementById("recent_item").innerHTML=strOut;
  }
}

補足
・Cookieに書き込む情報は、`で囲む形式にしています。`は区切り文字として使用（ex. `商品ID`商品名`商品画像URL``商品ID２`商品名２`商品画像URL２`……）。使わない文字ならなんでもOKです。
・表示数（サンプルでは6）、表示用のHTMLタグは各自でいじってください。
・区切り方は（個人的には）もうすこし分かりやすく作れるなぁと思います。問題なく動きますので、細かいことは目をつぶることにします。
・このサンプルをすこしいじれば、かんたんな「ほしい物リスト」が作れます。
・販売済みや在庫0の場合、表示をどうするか。Cookieに追加しない、画像を販売済みに差し替えるなど。ショップごとに検討して、改良してください。


【関連記事】
・ほしい物リストを作る 1

SSLページにおける背景画像の表示

カラーミーショップ!プロはデザイン＆カスタマイズが比較的容易に行えます。
しかし、SSL（Secure Socket Layer）を使用したページのデザインは、配色や背景画像を変えられるくらいです。
「決済」「お問合せ」 「マイアカウント・会員ログイン」「友達に教える」「メルマガ登録・解除」の各ページがSSL対応です（ブラウザで鍵マークが表示される）。
 
CSSでbackground-imageを追加し、SSLページの背景画像を読み込むと、「セキュリティ情報」ダイアログが表示されて「はい」または「いいえ」を選択しないと先に進めないということが起こります。



SSLページの背景画像はSSL対応サーバー上に置かなければいけません。

「カラーミーで行こう」 に記事が出ていました。なるほど、勉強になります。

普段使うことの多い、レンタルサーバー「ヘテムル」をサンプルにします（SSL対応サーバー）。
レンタルサーバー「heteml」 - 独自 SSL 設定マニュアルを読むだけでOK。設定は不要でした。
SSL用のURLにするだけなんですね（よくわかっていなかった）。

あとは表示させたいページのclassやidを調べ CSSを追加すれば、「セキュリティ情報」ダイアログが表示されることなく、背景がつけられます（以下はヘテムル使用時のサンプルURLです）。

×SSL非対応　background-image:url(http://hoge.heteml.jp/bg.jpg);
○SSL対応     background-image:url(https://ssl*.heteml.jp/hoge/bg.jpg);

カラーミー標準のファイル置き場（ お店をつくる＞画像ファイルを管理する）の場合は、URLをhttpsにするだけ。

https://img01.shop-pro.jp/PA01234/001/etc/hogehoge.jpg

背景画像と配色が変更できれば、デザイン的には必要十分と思います。
皆様、ぜひお試しください。


【参考】
・カラーミーで行こう（興味深い記事多数、要チェック）

カラーミーのマイアカウントページ

ネットショップには不可欠なマイアカウント機能について、お客様からみた場合の話。
カラーミーショップ!プロを使用してすぐに感じたことは、「マイアカウント」ページのしっくりこなさ、です。

カラーミーショップ!プロのマイアカウント機能は、必要最小限です。
マイアカウントにログインして行えることは、お客様情報の更新と、過去の注文履歴を見ることの二点です。

ちなみにマイアカウントは、SSL（Secure Socket Layer） を使用したページになっておりますので、ページデザインはほとんどできません（配色、背景画像を変えられるくらい）。

大手ネット通販サイトではおなじみの「ほしい物リスト」や、同じものを再度購入する際の「お気に入りリスト」などはついていません。

登録情報は、メニュー「商品を売る」＞「顧客を管理する」＞「顧客表示項目設定」で選択可能。
フリー項目が3つありますので、ショップによって必要な項目が追加できます。
オンラインマニュアル／顧客表示項目設定


【関連記事】
・SSLページにおける背景画像の表示