カラメル内商品検索の新システム導入？

12/19に導入されたそうですが、内容の詳細不明。
検索ワードを" "で括るのは相変わらず無理らしい。OR検索も付いていないようですし…なんの変更だろう。
試しに検索したところ、若干の変化はありました。たとえば商品名で「You'll」が「Youll」でヒットするようになっている。前からではなかったような。
告知しないということは、たいそうな話ではないのかもしれませんね。判明したら追記します。
2011/11/22 - 【リリース済】カラメル内商品検索の新システム導入につきまして 
【追記】どうやらAND検索だったようです。

ついでに、もうひとつ。
2011/12/22 - 【お願い実装】レビューの投稿データが商品詳細ページに表示できるようになりました！
「カラーミーショップのギガプラン」でのみ使えるそうです。

jQueryの基礎を学ぼう

今回はｊQueryについて。
私も使いこなしているわけでもありませんので、概要しか説明できません。
とはいえ、ｊQueryで「何ができて、何ができないのか」、概要でも頭に入れておくことは、ショップページをカスタマイズするアイデアが浮かんだときに、実現可能か（もしくは不可能か）判断することが可能になります。

当サイトでは取っ掛かり程度の内容ですが、 カラーミーショップをカスタマイズするさいの有用な知識になることは間違いありません。
初学者向けの内容になっておりますので、ｊQueryってなんぞ、という方はどうぞ。

jQuery(ジェイクエリー)は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。

機能・特徴
1.ブラウザに依存しないオープンソースのセレクタエンジン Sizzle を使ったDOMエレメントの選択
2.DOM操作と変更
3.イベント
4.CSS操作
5.エフェクトとアニメーション
6.Ajax
7.ユーティリティ - ブラウザのバージョン取得、each関数など
8.拡張性 - jQuery プラグイン

引用元：jQuery (Nov. 15, 2011, 21:36 UTC). In Wikipedia: The Free Encyclopedia. Retrieved from Here

すこし具体的に。
カラーミーショップでショップページを作るに場合に使えそうなのは
・文字サイズを変更する、文字サイズ 小・中・大ボタン
・マウスカーソルをのせるとロールオーバーする画像、ドロップダウンするメニュー
一定の操作をきっかけに機能を実行させることを、「イベント」と呼びます。マウスの他には、キーボード操作、ブラウザのスクロール、タイマーなどのイベントがあります。こういうイベント関連も、jQueryを利用すれば簡単にできます。

「CSS操作」というのは、簡単に文字サイズや色など、CSSで設定できる項目を変更できます。イベントと組み合わせて使ったりします。

当サイトでも使った「Ajax」が簡単に利用できます。Ajaxは別次元のパワフルさがあります。カラーミーショップのカスタマイズで使うかは微妙なところですが、機会があれば、記事にしようと思っています。

「拡張性」はプラグインという形で実現されます。
・商品画像のスライドショーや見栄えのよいエフェクト
・色々な情報をCookieに保存（便利なので、よく使います）
導入方法ですが、たとえばCookieプラグインなら「jquery.cookie.js」という形で配布されており、jQuery.js同様に、ロリポップ！やヘテムルなどのレンタルサーバー上に置いて、共通ページの先頭で読み込ませます。

ざっくりとした、まとめ。
・JavaScriptで記述するよりも、より簡単・便利にしたライブラリがjQueryです。手間の有無を別にすれば、やれることはJavaScriptとおなじです。
・ブラウザで表示する、ということに関して、大体のことが実現できます。そしてありがたいことに、プラグインとして配布されていることが多いです。jQueryで到底実現できないこと（表示するデータをどこから持ってくるのか等）、すなわちもっと根っこの部分はSmartyで行いますが、カラーミーショップというレンタルカートの性質上、すべてが思い通りにいじれるわけではありません。

次回は、ImageMagickを使った画像加工を取り上げようと考えています。
商品画像のサムネイル作成、リサイズ、トリミングなど、ショップ運営には画像加工が必要不可欠。手間のかかる作業も、ImageMagickを使うと「あーら便利、あれやこれや自動でやってくれるよ」というお話。


【参考】

中身が理解しやすくなる（これが初歩として一番）
・ノンプログラマーのためのjQuery入門

何ができるか（これを見れば、ｊQueryで実現可能か分かります）
・jQuery日本語リファレンス

自分で作るために（随時追加します）
・Web制作の現場で使えるjQuery　UIデザイン入門

これも読みやすい
・CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました

「SOLDOUT表示」と、掲示板での最近の話題

「お願い!カラーミー」で要望のあった、「SOLDOUT表示」が付きました。
カラーミーショップは、売り切れ時には「カートに入れる」ボタンが非表示になるだけで、SOLDOUTの表示がされていませんでした。どういう状態なのか分からず、お客様も戸惑ってたことでしょう。
ということで、ようやく。
実装方法は下記記事を参照してください（シンプルなコードなので、色々とカスタマイズ可能です）。
【お願い実装】「SOLDOUT表示」を実装しました！ 

最近の助け合い掲示板での話題では、 これらが勉強になりました。どれも興味深い記事でした。
私はSmartyがよく分かっていないので、サンプルをみながら何ができるのか学習しています。
・オプション選択プルダウン内でのSOLD OUT表示について
・NEW等のアイコンを自作の物に変更する方法はないのでしょうか?
・金額別の表示について（1000円～3000円・3001円～5000円とか）

次回は、jQueryのお話。勉強もかねて、初心者の私がまとめてみようかと思います。
カラーミーショップのカスタマイズにも使うことができますので、ご存じない方はぜひ。

カートJS機能について

【仕事サイトにカートJS関連記事を書きました】
 カラーミーショップのどこでもカラーミーについて実践的に学ぶ


 カラーミーショップで７月末にリリースされた新機能「カートJS機能」について。
ごく簡単に紹介すると、「カートに入れる」ボタンを好きなところに貼れるjavascriptソースを作成してくれる機能です。マニュアルはこちら。
ブログに商品紹介とカートに入れるボタン貼ることを想定していると思われます。

写真1.カートJS機能の画面　
もっともシンプルな表示の場合

カートJS機能で作成したJSコードを貼り付けるだけ。

<script type='text/javascript' src='http://www.hogehoge.com/?mode=cartjs&pid=1234567&style=basic&name=n&img=n&expl=n&stock=n&price=n&inq=n'></script>

URLの中身を見ると下記のようになっています（注：オリジナルのソースには改行は入っていません）。JavaScriptでHTMLを書いているという仕組みです。

以前「カートに入れるボタンを商品詳細ページ以外に設置する」で紹介した方法（この記事の元ネタは「カラーミーショップ - 助け合い掲示板」） とやっていることは変わりませんが、在庫なしの場合は表示しない分だけ、今回のカートJS機能の方が高級です（その他、売り切れ時の商品表示や掲載設定の条件などで表示・非表示の作り込みはされている）。

document.write("<!--cartjs basic-->
<div style=\"width:94%;margin:0 auto;padding:0;\">
<div class=\"cartjs_box\" style=\"margin:0;padding:0;\">
<form name=\"product_form\" method=\"post\" action=\"http://secure.shop-pro.jp/?mode=cart_inn\" class=\"cartjs_product_form\" style=\"width:100%;margin:0px;padding:0;\">
<div class=\"cartjs_product_table\">
<table style=\"border-top:1px solid #ccc;border-right:1px solid #ccc;border-collapse: collapse;width:50%;margin:0 auto 15px;\">
<!-- 売切れ時・休止時・ログイン限定購入商品は表示しない  -->
<tr>
<th style=\"border-left:1px solid #ccc;border-bottom:1px solid #ccc;\">購入数</th>
<td style=\"padding: 0px 5px 0 10px;border-left:1px solid #ccc;border-bottom:1px solid #ccc;\">
<input type=\"text\" name=\"product_num\" value=\"1\" class=\"cartjs_product_input_txt\" style=\"width: 50px;\" />
</td>
</tr>
<!--オプション情報-->
</table>
</div>
<!-- 売切れ時・休止時・ログイン限定購入商品は表示しない  -->
<div class=\"cartjs_cart_in\" style=\"margin-bottom:10px;text-align:center;\">
<input type=\"submit\" value=\"カートに入れる\" />
</div>
<!-- 特定商取引法リンク -->
<div class=\"cartjs_sk_link_other\"><a href=\"http://www.hogehoge.com/?mode=sk\">&raquo;& nbsp;特定商取引法に基づく表記 (返品など)</a></div>
<!--// 特定商取引法リンク -->
<div class=\"cartjs_product_info\">
<input type=\"hidden\" name=\"user_hash\" value=\"11223344e1f22aｂｃ1122334455de1a22\">
<input type=\"hidden\" name=\"members_hash\" value=\"11223344e1f22aｂｃ1122334455de1a22\">
<input type=\"hidden\" name=\"shop_id\" value=\"PA01234567\">
<input type=\"hidden\" name=\"product_id\" value=\"1234567\">
<input type=\"hidden\" name=\"members_id\" value=\"\">
<input type=\"hidden\" name=\"back_url\" value=\"http://www.hogehoge.com/?pid=1234567\">
</div>
</form>
<div style=\"display:block;text-align:right;font-size:10px;margin-top:10px;\">
<a href=\"http://shop-pro.jp/\" target=\"_blank\">powered by カラーミーショップ</a>
</div>
</div>
</div>
<!--//cartjs-->");

ブログに貼る分には「特定商取引法に基づく表記」と「powered by カラーミーショップ」の表記が必要かもしれませんが、ショップページに貼る場合には、サイトデザインの点で邪魔に思います。
 Ajaxで「<script type='text/javascript' src="～」のURLを読み込んで、文字列操作して消すことも可能でしょうが、手間のわりにやっていることが地味で現実的ではないように思います。

【追記】
8/31の公式記事によると、評判の良くなかった上述の表示は選択制にしたとのこと。

「お願い!カラーミー」にて受け付けたご要望を元に、カートJS機能を利用した際に表示されていた「powered by カラーミーショップ」の削除および「特定商取引法に基づく表記」のリンクを選択可能にしました。

テンプレート共通部分を表示させない方法

【仕事サイトにSmartyの関連記事を書きました】
カラーミーショップのカスタマイズに便利なSmartyを学ぶ (1/2) 
カラーミーショップのカスタマイズに便利なSmartyを学ぶ (2/2)

カラーミーショップで、こんなことができたんですね。今まで気づきませんでした。
それもこれもSmartyを理解していなかったからで、「助け合い掲示板」にはいつも勉強させてもらっています。

<{if $file_name == "file:★/free☆.tpl"}>

<{include file = $file_name}>

<{else}>

ヘッダフッタ含む共通部分ソース

<{/if}>

ネタ元は助け合い掲示板のこちらの記事。
需要がありそうですので、私も備忘録としてリンクさせていただきました。
実際に試してみましたが、問題なかったです。
<{include file = $file_name}>がキモです（知っていれば、どうってこともないのでしょうが）。
記事のサンプル例は フリーページですが、もちろん、トップページをそうすることも可能。

それとは別に、「お願い！カラーミー」のほうも徐々に進展が見え始めています。
早速、ショップの検索がAND検索になってます（過去記事の修正をしました）。


【参考】
・Smarty includeの解説

お願い！カラーミー

カラーミーショップのお知らせ（公式）に新機能についての言及がありました。
以下、抜粋。

これまで、カラーミーショップへの機能追加等のご要望リクエストにご利用いただいていた「ご要望フォーム」を見直し、より多くのご意見を集約し視覚化すべく、新コンテンツとして「お願い！カラーミー」を公開いたしました。

「お願い！カラーミー」は、現在カラーミーショップをご利用中のショップオーナー様が、日頃から感じている「欲しい」を大募集するコンテンツです。
追加して欲しい機能、改善してもらいたい所をお願い（投稿）し、みんなで投票、投票数の多いお願いからカラーミースタッフが機能開発を検討します。
また、カラーミーショップをご利用中でない方や現在お試し期間中の方は、お願いに対して投稿、投票はできませんが、閲覧する事が可能です。

「お願い！カラーミー」参照。

投票数順でソートできるので、要望上位から見てみました。
・アイテム別に配送方法を設定したい
→現状、送料の設定が細かく出来ないことが弱点。これは非常に良い！
・あといくらで送料無料の表示
→機能的にもいいかも。個人では作れないので、カラーミーショップの対応次第。
・商品レビュー機能
→個人的にはそんなに。

その他、目に付いたのに「商品一覧に戻らずに商品詳細間の移動をスムーズにするボタンの導入」という要望がありました。つい先日、クライアント様から受けた依頼と同じでびっくりしました。
そういう要望、他の方からもあるんだなぁ、と。

「カラーミーいじりたおし」的 には、
1.アカウント機能の刷新。現状使いにくいし、分かりにくい。
2.サイト内検索の機能強化。AND検索もないって、信じられん。(2011.7.7 実装)
3.商品並び順にあいうえお順を。なぜかない…。
4.商品詳細ページにフリーのエリアを増設してほしい。いじりやすくなるので。

長らく要望を放置してきた感のあるカラーミーショップでしたが、これは投票しなきゃいけませんね。
今後の進展に期待。

当サイトでも、この要望リストを見ながら、やれることを探っていこうと思います。

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

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

前回からの引き続き。今回はカラーミーショップにポイントを表示させるSmartyのサンプルです。
下記は「カラーミーショップ - 助け合い掲示板」に掲載されていたものです。

<!--ポイント支給率　100円毎に5ポイントの場合-->
<{assign var="sData" value=$product.sales|regex_replace:"[[\(]+[\S]+[\)]]":""}>
<{assign var="sData" value=$sData|replace:",":""}>
<{assign var="sData" value=$sData|replace:"円":""}>
<{math equation="floor($sData/100)" assign="sData"}>
<{math equation="round(5*$sData)" assign="uData"}>
<{$uData}>ポイント

商品詳細ページの表示させたい場所に設置してください。

ショップ独自のポイント制度について 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

商品詳細の説明欄と、JavaScript

カラーミーショップの商品説明欄にJavaScriptを埋め込む方法について。

商品登録時の説明欄は、説明文以外にもHTMLやJavaScriptを埋め込むこともできます。
ただし、カラーミーの環境設定で「自動改行する」にしている場合は、改行時に自動的に<br />タグが埋め込まれます。
説明文を書く場合には便利ですが、HTMLやJavaScriptを埋め込む場合は注意が必要です。

通常、JavaScriptを使用する場合は、<script>タグ内に記述しますが、改行時に<br />タグが自動で挿入されて、下のような感じになります。

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

Firefox3.6では問題ありませんでしたが、IE7（ほかのバージョンも該当するかも）では、構文エラーになり、関数がうまく動作しないことがあります。
おまけに改行も入るために意図しない空白も生じます。

ということで。
オレンジ部分のように、文の最後をコメントにすると良いです。<br />を自動的に挿入されても、コメントにして無効化することができます。

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

【関連記事】
・カラーミーのフリーエリア考察

カラーミーは本当に875円なの？ 2

「カラーミーは本当に875円なの？ 1」から引き続き。
前回はカラーミーショップの費用面でのメリットを中心にまとめました。
今回はカラーミーショップの費用面に非常に関係が深い集客サービスについてです。

「カラーミーでショップ運営をはじめよう 2（2011年3月版）」でも書きましたが、カラーミーショップには「カラメル」というショッピングモールがあります。
ショッピングモールと呼んでいますが、ショッピングモール機能以外の部分（付随するサービス）も多いです。
網羅的かつ詳細な説明はカラーミー公式でご確認いただくとして、ここでは集客部分と費用面にポイントを絞って列挙していきます。

1.カラメル出店は出店自体は無料だが、販売手数料3.5%がかかる（発生要件は過去記事を参照）
2.カラメル出店「GMOとくとくポイント」共通ヘッダーが表示される（必須）
3.「GMOとくとくポイント」にログインして購入された場合は、販売手数料1.5%（正確にはカラーミー公式で）
4.カラメル出店者は、カラメル以外の商品掲載サービスを利用可能で、 販売手数料は別途
5.とくとくペイメントが利用でき、クレジットカード決済の手数料が安くなる

1は直接的な成果でなくても発生しますし、2・3にいたってはGMO（ペパボの親会社）の都合のような印象を受けました。カラメル出店しているショップ運営者様からは評判良くない印象。
4は任意。色々とプロモーションしてくれる有料サービスがあります。
5はメリットです。

重要なのはカラメル出店は任意で、自分で判断すれば良いという点。
「カラメルの集客力は？」というと、、、これまた議論のあるところです。
口コミを参考にするなら「カラーミーショップ - 助け合い掲示板」で検索して、各ショップ運営者様の意見を探していただければと思います。
出店しないことのデメリットもそれほどないと、個人的には考えています。


さて、二回にわたってカラーミーショップは本当に月額875円なのか検討してきました。
有料サービスやカラメル出店はそれほど必要とは思いませんし、実際に月額875円で運営されている方もいらっしゃいます。運営スタート時点は費用的にもお手軽にということが十分可能です。

次回は「ショップ独自のポイント制度について」です。
ひさしぶりにカラーミーの機能説明と実践的・具体的な話になる予定です。おたのしみに。


【関連記事】
・カラメルと販売手数料について 1
・カラメルと販売手数料について 2
・カラメルとGMOとくとくポイント共通ヘッダー

カラーミーは本当に875円なの？ 1

カラーミーショップは「月額875円～」 を謳い文句に、低価格を売りのひとつにしています。そうはいっても、美味いこといってるだけじゃないかと、半分疑っていました。
875円で使い物になるレベルなのか？　追加オプションを契約をしないと実質ショップ運営できないのではないのか？　などなど。

実際にお仕事させていただいているクライアント様は年間10,500円で運営されています（リアルタイム銀行振込という方法で決済しているため、＋手数料が210円かかっていますが）。
ようするに、有料オプションは一切追加していないのです。

カラーミーショップには有料オプションがたくさんあります。月額875円で本当にできるのか、今回はその点を整理してみました。

まずはじめに、「カラーミーショップ - ご利用料金」ページで料金プランを確認します。
月額875円は一番安いライトプランで、プランの違いは以下の通り。

1.アクセス解析の使用（アクセスプラスと呼ばれる）
2.ディスク容量（200MB、3GB）
3.FTPの使用（商品画像を楽にアップロードするための機能）
4.画像ファイル上限（100KB、300KB）
5.レビュー機能（ギガプランのみ使用可能）

アクセスプラスはしっかりと分析する方には強力なツールになりますが、アクセス数・検索キーワード程度なら無料の「Google Analytics」で十分間に合います。
ショップ運営が安定するまでは不安で、アクセス解析を使用したくなりますが、お店がいそがしくなると解析ばっかりやってる時間的余裕がない。そうなると「Google Analytics」の機能で十分になってきます。

データ容量は、新規ご契約の翌年以降、毎年100MBずつ、最大500MBまで自動で増量されます。『今すぐ容量を増やしたい！』という場合には、100MB単位でオプション増量が可能となっています。
ディスク容量は商品数と商品画像のファイルサイズからおおよそ予測ができます。

ライトプランの場合、画像ファイル上限100KBという制約があり、カラーミーショップの仕組み上、3枚まで表示できます（サムネイル除く）。一商品あたり300KBちょいといったところですので、データ100MBとは、おおよそ商品300点となります。 
もし不足するようなら、ロリポップ！（2GB 月額105円）やヘテムル（42GB 月額1500円）をレンタルするほうが、結果的に安くあがります。

FTPの使用については、あれば商品追加が楽になります。商品追加を頻繁に行わないような種類のお店だと、恩恵もすくなく感じます（量がすくないなら、FTPがなくてもたいした手間ではない）。
商品数が多いなど、ディスク容量が不足しそうな場合はレンタルサーバー上に画像ファイルを置く必要がでてきます。そうなると、カラーミーでのFTP機能は不要になります。

画像ファイル上限については、キレイな写真を載せるかによります。
これもレンタルサーバー上に画像ファイルを置く必要があるなら、関係のなくなる問題です。

2011年に追加されたレビュー機能は、ギガプランのみ使用可能。必須の機能とは思いませんが、今後、料金プランによる差別化がはかられる可能性はあります。


まとめ。
アクセスプラスは分析力がないと、その効果を十分に発揮しません。カラミーショップ公式にはアクセスプラスの機能説明が載っていますので、参考にしてください。
私自身はぼんやりと「すごい機能だなぁ」と思いながらも、あまり使いこなせていないです。直感的に、なんとなくでしか分析しない方には不要な機能です。

残りの2.～4.は、外部にレンタルサーバーを導入すれば解決します（追加費用がかかります）。ショップの種類・取り扱い商品により、必要かどうか決まってきます。

個人的には最初はライトプランでスタートすればいいと考えています。
さて、ここまでの費用ですが、
ライトプランの契約期間は「3・6・12ヶ月」から選択できますので、875円×契約期間。
それに加えて初期費用として3,150円が必要です（たまに無料キャンペーンあり）。

おまけとしては、同じく安価なショッピングカート・システムとして比較にあがる「おちゃのこネット」は独自ドメインでショップ運営すると月額料金がアップしますし、携帯・スマートフォンのサイトを作ると、これまた月額料金がアップ。カラーミーショップはその点も無料で、良い点です。

写真1
アクセスプラスの画面。
商品ごとのアクセス数、あしあと追跡などは、さすがに専用のアクセス解析という感じで、分析に使いやすい。

（注）記事の内容は2011年3月現在です


【関連記事】
・商品画像の表示数をふやしたい 1


次回は重要なポイント「カラメル」について。「カラーミーは本当に875円なの？ 2」へ

カラーミーでショップ運営をはじめよう 2（2011年3月版）

前回記事でもすこしふれましたが、カラーミーショップの集客についての話題です。
「カラーミーショップ - 助け合い掲示板」でもしばしば話題になりますので、ショップ運営者の多くの方が興味のある話題だと思います。

入り口の広いYahoo!オークションを利用されている方も多いと思いますが、入り口の広さは「出品の手軽さ」に加えて、「集客」という点でも安心感があります。一方、カラーミーショップはどうでしょうか。
Yahoo!オークションは軒を貸してもらっている店子ですが、カラーミーショップは一国一城の主というような個人事業主です（あくまでイメージ）。当然、自分でお店の集客をしなければなりません。

カラーミーショップにも「カラメル」というショッピングモールがありますので、商店街の一員という側面もありますが、個人事業主であるという点は変わりありません。集客について責任があるのは、やはり自分自身になります。

カラーミーショップでショップ運営を開始したら、どのようにして集客をしましょうか？
極力主観を排し、あっさりとまとめてみました。

1.ショッピングモール「カラメル」出店
手軽に効果が期待できる。 知名度のない開店直後はよいかもしれません。

・被リンクというSEO的な効果
お店の商品に対してリンクを張ってくれる。取り扱っている商品にもよります

・カラメル経由で集客できる
カラメルの商品が検索結果上位に引っかかることがあります
カラメル自体に集客力があるとは思いませんが、検索エンジンにはそこそこヒットします

カラメルへの商品掲載自体は無料かつ自動ですが、販売手数料がかかります（詳細はページ末の関連記事をご参照ください）。
出店取りやめも簡単にできます。

2. Googleショッピング、Yahoo!ショッピングに商品掲載
カラーミーショップから掲載は簡単にできますが、販売手数料が……ね。


3.商品登録時にタイトル要素設定
商品詳細ページに、SEO用設定ができます。キーワードを設定し、検索エンジンに拾ってもらうという機能。
とはいえ最近では、metaタグのキーワード設定を重視する検索エンジンはありません。
タイトルは重要ですが、デフォルト（商品名とサイト名）でいいように思います。

4.GMO（ペパボの親会社）のサービス
カラーミーショップを運営するお店にGMO関連会社の営業から電話がよくかかってくるそうです。
以下は、1年半前～半年前という期間で、私がクライアント様から（設置やらアドバイスなどが必要な際に）直接うかがった話です。提供されたサービスのこまかいところも実際にみせていただいています。

・Find-A（アフィリエイト）
費用が高い（特に固定費）。年間50万ほど（契約したのは約2年前）だった、とのこと。そのお店は効果ゼロだった。
そのお店のパートナー（アフィリエイター）サイトを見ましたが、騙しがほとんど。全部そうだ、と断言しているわけではありません。

・ コンバージョンV
検索エンジン経由のお客様に検索キーワードに合わせたバナーを表示して、商品ページに誘導する機能。お客様の（ドメインから推定するらしく）地域別にもバナーが変えられる。
取り扱い商品によっては、使い道がピンとくるかもしれないが、費用との兼ね合いか。

・なんとかというサービス
セールスの電話がありましたが、Yahoo! 検索のある特定の検索キーワードにたいして、結果表示時に広告表示。
月2～3万くらいの費用だと言っていました。お店の取り扱い商品次第か。


5.口コミ
SNSやTwitterが広く利用される現在、強力な宣伝・販売効果があります。多くの方がそのような場面に遭遇したことがあるのではないでしょうか。実際さじ加減がむずかしいところ。
カラーミーショップも、最近は機能強化中です。カラーミー以外のWebサイト上にカートボタンをつけられる「カートJS機能」、商品詳細ページにつけられる「レビュー機能（ギガプランのみ使用可能）」などがそうです。



【関連記事】
・カラメルと販売手数料について 1
・カラメルと販売手数料について 2
・カラメルとGMOとくとくポイント共通ヘッダー 

【追記】
カラーミーショップの機能面を追加しました。

カラーミーでショップ運営をはじめよう 1（2011年3月版）

ネットショップ運営にかかせないショッピングカート・システムにはいくつかあります。
代表的なひとつに、株式会社paperboy&co.（略称：ペパボ）の「カラーミーショップ」があります。柔軟なカスタマイズ性と導入時のコストが安い点が大きな特徴です。
875円～という費用面は、実際、ネットショップ運営をはじめる際の重要な条件になります。
入り口の広さという点で、Yahoo!オークションをされている方もいらっしゃるかと思います。
費用面での気軽さでいうと 、カラーミーショップもなかなか驚異的です（Yahoo!オークションと違い、集客の面で努力が必要ですが）。

それでは、カラーミーを導入するに当たって、
・ショップを作成のにどのくらい手間がかかるの？
・どのくらい難しいの？
など、踏み込んだ部分が気になるところ。

そのような具体的な悩みにも、カラーミーショップには無料お試し30日間があります（入金しなければ終了しますし、入金すれば引き続きサービスが継続します）。

お試し期間のあいだに、「ショップ開店への道（基本編）」を読み、実際に練習できます。
当然のことながら、メニュー「お店をつくる」＞「開店・閉店を設定する」で「開店・閉店・工事中・休止中」と選択できますので、お客様に気兼ねすることなく作業が行えます。
そのほか、オンラインマニュアルも充実していますので根気よく読みこなせば、初心者の方もステップアップしていくことが可能だと思います。
また、自身のレベルに応じた初級・上級モードというふたつの作成方法があり、初心者の方にも導入しやすくなっています。

次に気になるところは、
ショッピングカート・システムの顔、「テンプレート」だと思います。
テンプレートとは定型的な枠（雛形）のイメージで、たとえるなら、テンプレートは入れ物（ショーケース）、商品の情報が中身になります。
なぜ入れ物と中身を分ける必要がある？　なんて話は興味深いですが、本筋ではありませんので省略します。

2011年3月現在、無料テンプレートは32種類用意されています（たまに追加されます）。
「カラーミーショップ-テンプレート一覧」 でご覧いただけます。
2010年10月からは有料テンプレート （現在15種類）の提供もはじまりました。「カラーミーショップ-有料だと、どこが違うの？ 」に機能的な違いが紹介されていますので興味のある方はどうぞ。
私も上記ページに目を通しましたが、有料・無料の違いは手間の面だけで、機能的には無料テンプレートでも「まったく問題ない」と思いました。この点は良心的です。

写真1　無料テンプレートの一部
既存のテンプレートはあらゆるお店を対象とした、オーソドックスなタイプなので、使っているうちに、自分のショップ用にカスタマイズしたくなります。Webサイト制作の知識があるかどうかで、デザイン＆カスタマイズの第一歩目は変わってきます。

既存のテンプレートを使っているうちに、自分のショップ用に改良したくなってきます。
ここから先の、果て無きデザイン＆カスタマイズ道を段階別にざっくりと説明しますと、

・初心者（HTMLの知識なし）
用意されているテンプレートから、好きなデザインを選択してデザインを行います。
デザイン変更には、初級モード・上級モードのふたつがあります。
初級モードはＨＴＭＬを知らなくても、文字色・背景色などの配色を変えることができます（右は初級モードの編集画面で、カラーパレットから色を選んでいるところ）。

ショップページをさらにカスタマイズするためには、HTML（Webページを記述するためのマークアップ言語）の学習が不可欠です。
上級モードを使用すれば、まったく別の、自分オリジナルのショップページに作り変えることができます。

・中級者（HTMLの知識あり）
上級モードはHTMLと CSS（スタイルシート）がフルに使えます。
わずかでもWebサイト制作経験があれば、とっかかりとしては問題ありません。
勉強しだいで、ショップページのデザインをがらりと変えることが可能。

デザインはここまであれば必要十分で、HTML初心者の方でも到達は難しくありません。

・上級者（JavaScriptの知識あり）
JavaScriptのサンプルを利用したことがあれば、とっかかりとしては問題ありません。
JavaScriptをすこし知っているなら、勉強しながら実践するかたちでなんとかなります。
この段階は、ショップページにカラーミーが提供していない機能を付け加えたいという方の段階です。

さら、もっとという方には。
見たことのない機能を実現するために、Ajax（Asynchronous JavaScript + XML）や、jQuery（JavaScript汎用ライブラリ、JavaScriptの延長線上にあります）を勉強していきます。
また、カラーミーはSmartyとよばれるテンプレートエンジンを使用しています。ここをすこしでもかじっておかないと、デザインの幅は広がりません。

写真2
メニュー「お店をつくる」に、お店の基本情報を設定する箇所がある。
ここに登録すれば、ショップデザインの方に自動的に反映されるため、HTMLの知識なしで、ショップの体裁が整えられる。

（注）「月額875円～」は2011年3月現在。

2010年5月の記事を補足・改訂しました。


「カラーミーでショップ運営をはじめよう 2（2011年3月版）」につづく。

ツイートする 2

前フリが長いので、お急ぎの方はこちら。

いまやECサイトでも広く利用されているツール「Twitter」をカラーミーショップの「商品詳細ページ」につけようという話題。
Twitterをとりあげた前回記事では「Twitterでつぶやく」とタイトルにしていましたが、Tweet（つぶやく）という言葉も前回から半年経過して、ずいぶん一般化されてきました。
今回のタイトルは「ツイートする 2」として、前回記事を見直そうと思います。

前回記事では以下ページを参照してツイートボタンを実装していましたが、

「Color Me Shop! pro - 助け合い掲示板」をみると、全角文字が文字化けするそうです。
 Escape Codec Library:ecl.jp のライブラリで、EUC-JP→UTF-8変換が必要とのこと。

現在、ライブラリページがデッドリンクになっています
（「EUC-JP→UTF-8変換」が必要な理由は、2バイト文字（かんたんに言い換えると日本語）が文字化けするんですね）。

現在は、こんな風にすると、OKです。
下記コードの内容は「商品名 URL」をTweetするリンクです。

<script type="text/javascript">
<!--
  document.write('<a href="http://twitter.com/home?status=' + encodeURIComponent("<{$product.name|strip_tags}>"+' '+location.href) + '">Tweet <img src="http://twitter-badges.s3.amazonaws.com/t_mini-b.png" alt="Tweet" style="vertical-align:middle;"></a>');
// -->
</script>

以前使用していたライブラリの代わりに、encodeURIComponent()というJavaScriptの関数を利用しています（こんな関数、はじめて知った）。
興味のあるかたは「URIとは」や「encodeURIComponent()」を検索して調べていただくとして、実装するには上記コードを該当箇所に入れれば、リンクが作成されます。

document.writeでなくても良いですし、JavaScriptのonclick イベントを使用しているページもありました。よく分からない場合は、上記コードのコピペで問題なく動作すると思います。
オレンジ部分は公式からボタンを借りています。  

今回のポイントは、
・<{$product.name|strip_tags}>　を””で括る（私を含めたSmarty初心者がひっかかるところ）
・strip_tags（Smartyの機能）でタグを除去する

独自タグを””で括るについては、 以前の記事「独自タグをJavaScriptの関数に渡す」を参照してください。
strip_tagsでタグ除去については、正規表現を取り扱った以前の記事「Smartyサンプル 1」を参照してください。
<{$product.name}> には、Newやオススメ画像など先頭につくことがあります（下記画像は、商品登録ページ内の一部抜粋）。


というのが復習も兼ねた、前フリ。


現在は、Twitter公式サイトでツイートボタンをかんたんに作成してくれます。

「ハブろぐ - 公式Tweet Buttonがリリースされてた」では画像付きで説明されていますのでご参考に。
コードを直接いじる方には「Paroday - Twitter 公式ツイートボタンの設置方法」 （こまかい設定が分かりやすかったです）。

Twitter公式サイトでボタンを作成する場合は、デザイン（画像など）を用意する必要もなく、文字化けもなく、短縮URLまで作ってくれます。シンプル＆スムースにして完璧な機能。
ツイートボタンをよりかんたんに設置できる仕組みになっています。
カラーミーショップにも、そのままコピペすれば設置できます。

「Twitter公式サイト - プロフィールウィジェットをカスタマイズする」では、ツイートの表示をかんたんに行える機能がついている。これを利用すればショップページに表示させることもできる。


と、そんな記事を書いていたら、もっとかんたんにつくようになっていました。機能も公式仕様。
オンラインマニュアル - 【カスタム】追加タグ
Twitter以外にも、「いいね！」など流行りのボタンが多数追加されました。

<{twitter_tweet}>とするだけで、ツイートボタンを押すとページタイトルとページURLを自動で貼ってくれます。特にいじらなくても使えますが、勉強用にほとんど意味のないサンプルを作ってみました。
 商品名にはHTMLタグがつくことがあるので、strip_tagsでタグ除去。商品詳細ページURLは独自タグがないので商品IDからつくる。「cat:」で文字列結合。

<{twitter_tweet text=$product.name|strip_tags url=$home_url|cat:"?pid="|cat:$product.id}>

【関連記事】
・独自タグをJavaScriptの関数に渡す
・Smartyサンプル 1

【追記】
独自タグの記事を追加

2011年のあれこれ

2010年9月には名称変更があり、カラーミーショップ!プロからカラーミーショップになるなど、更新していない期間にも大小さまざまな変化がありました。引退しておりませんのでもちろん2011年も、カラーミーショップをいじりたおします。

直近のテーマとしては、
「ポイント制導入（ショップ独自のポイント）」を取り上げようと考えています（個人的なトピック）。
カラーミーショップの仕様（できること、できないこと）についてまとめた上で、ポイント関連には「独自タグ」がありませんので、ポイント数の計算・表示をどうするか？　実践的なお話を。

そのほか、現在温めているネタとしては、
・カラーミー管理画面＞配送方法設定の送料についての面白い記事を読みましたので、その記事のご紹介。
カラーミーショップは送料設定についてどれくらい細かいことができるのか。
全国一律のお店なら問題はありませんが、諸条件（地域・サイズ）で送料が変わる場合はどうするのか。何ができて、何ができないのか実際に検証します。

・セール開催時のカラーミーショップでの対応方法を検討
これも、カラーミーショップでお店をしている方が困ることのひとつだと思います。

・ googleAPI、googleマップなどのグーグル物の使い方

・GMOのアフィリエイトなど集客サービス（Find-A、コンバージョンV） 。
GMOはカラーミーショップのサービスを提供しているpaperboy&co.（ペパボ）さんの親会社。


カラーミーショップ初心者向けにも、コンテンツの改修をしていきたいと思っています。
できるだけわかりやすい説明にできるといいなぁと。
現状、わかるひとへのヒント程度にしかなっていないのが悩ましいところです。
重点課題として、これも取り組んでいきたいと思っています。