2015年6月26日

カラーミーでウィッシュリストを作る - カラーミーショップAPI編

ウィッシュリスト(wishlist, wish list, ほしい物リスト etc.)。
呼び方はいろいろありますが、「購入したい商品につけるしおりのようなもの」。
カラーミーショップには昔からこのウィッシュリスト機能が付いていません。カラーミーショップ七不思議のひとつ。

2010年の記事「ほしい物リストを作る 1」で、基本設計を箇条書きしました。 
・「ほしい物リストに追加する」ボタンをクリックすると、Cookieに商品IDを書き込む
・ほしい物リスト一覧ページをフリーページで作成し、ページデザインをする
・商品ID以外にも表示に必要な情報を取得してくる
・「ほしい物リストから削除する」ボタンをつくる
これはカラーミーショップAPIがなかった頃なので、必要な情報を取得する部分にXMLHttpRequestを使いました。

今回は「カラーミーショップAPI」を使います。ずいぶんとシンプル&スマートに仕上がります。そのほかの多くの部分を2010年ver.から流用しています。
もうひとつ、以前に比べると、jQueryを使った箇所が増えました。
仕様がよくわからない、内容がよくわからない場合は復習をどうぞ。
ほしい物リストを作る 4 ・カラーミーAPI実践編2 ポイント表示

ということで、「カラーミーでウィッシュリストを作る - カラーミーショップAPI編」スタート。

1. コード

1.1 商品ページなどに設置

<script type="text/javascript" src="http://hogehoge.heteml.jp/jquery.cookie.js"></script>
<script type="text/javascript" src="http://hogehoge.heteml.jp/wishSet.js"></script>

<!--ウィッシュリンク-->
<a href="#" onClick="JavaScript:wishCookie(<{$product.id}>);return false">ウィッシュリストに追加</a>

 

1.2 JavaScript - wishSet.js

//文字コードEUCで
//ウィッシュリストのセット&全削除
function wishCookie(id) {
  if(id > 0) {
    strCookie=$.cookie('wish');
    if(strCookie == null) {
      strCookie = "";
    }
    else{
      loop = strCookie.match(/!/g);
      if(loop != null && loop.length/2 >= 50) {
        window.alert("これ以上追加することはできません(最大50点まで)");
        return;
      }
    }

    strURL = "!" + id + "!";
    re = new RegExp(strURL);
    if(strCookie == null || strCookie == "")  {
      strCookie = strURL;
      $.cookie('wish', strCookie,{expires:365});
      window.alert("ウィッシュリストに追加しました");
    }
    else if(strCookie.search(re) == -1)  {
      strCookie = strURL+strCookie;
      $.cookie('wish', strCookie,{expires:365});
      window.alert("ウィッシュリストに追加しました");
    }
    else {
      window.alert("この商品はすでに追加されています");
    }
  }
  else if (id ==  0) {//全削除
    $.cookie('wish','',{expires:-1});
    //strCookie=$.cookie('wish');
  }
}

//Cookie部分削除
function delWishCookie(strNum,n) {
  strCookie=$.cookie('wish');
  strNum="!"+strNum+"!";

  re = new RegExp(strNum);
  if(strCookie.search(re)!=-1) {
    if(strCookie.indexOf(strNum)==0){
      strCookie=strCookie.slice(strNum.length);
    }
    else{
      strCookie=strCookie.slice(0,strCookie.indexOf(strNum)) + strCookie.slice(strCookie.indexOf(strNum)+strNum.length);
    }
    $.cookie('wish', strCookie ,{expires:365});
    prid="#prw"+n;
    $(prid).html("再読込み時に削除されます");
  }
}

1.3 フリーページなどの表示場所に設置

<script type="text/javascript" src="http://hogehoge.heteml.jp/jquery.cookie.js"></script>
<script type="text/javascript" src="http://hogehoge.heteml.jp/wishSet.js"></script>

//ウィッシュリストの表示場所を準備
<script type="text/javascript">
//Cookie読み込み
  strPid = new Array();

  strCookie=$.cookie('wish');
  if(strCookie==null){
    strCookie="";
  }
  loop=strCookie.match(/!/g);

  if(loop!=null){
    if(loop.length/2>50){//50itemsまで
      N=50;
    }else{
      N=loop.length/2;
    }
  }
  else {
    N=0;
  }
  for(i=1;i<=N;i++){
    strPid[i]=strCookie.substring(strCookie.indexOf("!")+1,
              strCookie.indexOf("!",strCookie.indexOf("!")+1));

    document.write('<div id="picw'+i+'"></div><div id="titw'+i+'"></div><div id="prw'+i+'"></div><div><a href="#" onClick="JavaScript:delWishCookie('+strPid[i]+','+i+');return false">ウィッシュリストから削除</a></div>');

    strCookie=strCookie.slice(strCookie.indexOf("!",
              strCookie.indexOf("!")+1)+1);
  }

  //表示失敗を回避するため、DOM読み込み後に実行する
  $(function(){
    for(i=1;i<=N;i++){
      wishwish(i,strPid[i]);
    }
  });

</script>

1.4 JavaScript - wishwish()

<script type="text/javascript">
function wishwish(num,id){
$.getJSONP = function(url,callback,param) {
        return $.ajax({
            url:    url,
            dataType:"jsonp",
            success:callback
        });
}
$.getJSONP("http://hogehoge.heteml.jp/getWishlist.php54?id=" + id + "&num=" + num, onDataHandler)
function onDataHandler(response) {
    nw   = response.numw;
    picid = "#picw" + nw;
    titid = "#titw" + nw;
    prid = "#prw" + nw;
    name=response.name;
    idw=response.idw;

    $(picid).html('<a href="http://www.hogehoge.com/?pid='+idw+'"><img src="'+response.img_u+'" /></a>');
    $(titid).html('<a href="http://www.hogehoge.com/?pid='+idw+'">'+nw+'\. '+name+'</a>');

    if(response.stock_managed==1 && response.stocks==0){  
      $(prid).html('<b>SOLD OUT</b>');
      delWishCookie(idw);
    }
    else {
      $(prid).html(response.sales_price+'円(税込)');
    }
}
}
</script>

 

1.5 getWishlist.php54

<?php
$request_options = array(
    'http' => array(
        'method'  => 'GET',
        'header'  => "Authorization: Bearer XXXXXXXXXXXXXXXXXX\r\n"
    )
);
$context = stream_context_create($request_options);

$url = 'https://api.shop-pro.jp/v1/products/' . $_GET['id'] . '.json';
$response_body = file_get_contents($url, false, $context);
$response_json = json_decode($response_body, true);

//出力用配列にセット
$output = array(
    'numw' => $_GET['num'],
    'idw' => $_GET['id'],
    'name' => htmlspecialchars($response_json['product']['name'], ENT_QUOTES, 'UTF-8'),
    'sales_price' => number_format($response_json['product']['sales_price']),
    'img_u' => $response_json['product']['image_url'],
    'stock_managed' => $response_json['product']['stock_managed'],
    'stocks' => $response_json['product']['stocks']
);
header( 'Content-Type: text/javascript; charset=utf-8' );
echo $_GET['callback'] . '(' . json_encode($output). ')';

2. 簡単な説明


1.1 「ウィッシュリストに追加」を押すと、wishCookie関数を呼ぶ。
1.2 商品IDがCookieに追加される。Cookieの読み書き削除にはjquery.cookie.jsを使う。
1.3 ウィッシュリストの表示場所を作る。終了後にwishwish関数を呼ぶ。
1.4 PHPに商品IDを渡して結果を受け取る。そして結果を表示する。
1.5 カラーミーショップAPIとの処理部分。商品IDから必要情報を取ってきて結果を渡す。

3. おわりに


今回の「カラーミーでウィッシュリストを作る - カラーミーショップAPI編」はいかがだったでしょうか。
ほしい物リストを作る 4」「カラーミーAPI実践編2 ポイント表示」を混ぜると、今回の
が出来上がります。


説明が省略されている箇所は、上述のページ周辺にヒントが載ってるはず。
URL、トークン、商品IDは各自のを。CSS、ボタンなど、綺麗にデザインして。
商品IDを持っているので、どこでもカラーミーで「カートに入れる」ボタンも付けられる。
実際に使っているコードから機能を一部省略しただけなので動くと思いますが、動かなかったら直して!
センスのない関数名や冗長なコードについては、(私が)恥ずかしいので突っ込まない。

【追記】元々の仕様が古いので、Cookieにセットする文字列がスマートじゃありませんが、配列に入れてシリアライズしてセットするような風にすると、今風なのだろうと思います。



毎回画像が少ないので、今回は話にまったく関係の画像を付けてみました(先週の夜出てた)。


【追記】POSTのほうがよいかも。

2015年6月20日

カートに入れるを二ヶ所につける - オプション編

もう5年前になりますが、「カートに入れるを二ヶ所につける」という記事を書きました。
この記事、(今風のコーディングではないですが)地味に好評だったようです。
ということで、今回はときおり話題に挙がっていた、複数カートで「オプション項目も連動する」を作ってみました。
そういえば、カラーミーショップのオプションって、もともとはプルダウン形式のみでしたっけね。


1. コード

1.1 JavaScript

<script type="text/javascript">
<!--
function option_change(oid, p){
  if(p==1){
    var n = $("#s" + oid + "1")[0].selectedIndex;
    $("#s" + oid + "2")[0].selectedIndex=n;
  }
  else if(p==2) {
    var n = $("#s" + oid + "2")[0].selectedIndex;
    $("#s" + oid + "1")[0].selectedIndex=n;
  }
}
// -->
</script >

1.2 商品詳細ページ(ひとつめ)

<{section name=num loop=$option}>
  <div class="cell_mar">
    <select name="<{$option[num].select_name}>" onchange="option_change(<{$option[num].id}>, 1)" id="s<{$option[num].id}>1">
      <option value="">選択してください</option>
      <{html_options values=$option_value[num].id  output=$option_value[num].name selected=$key }>
    </select>
  </div>
<{/section}>

1.3 商品詳細ページ(ふたつめ)

<{section name=num loop=$option}>
  <div class="cell_mar">
    <select name="<{$option[num].select_name}>2" onchange="option_change(<{$option[num].id}>, 2)" id="s<{$option[num].id}>2">
      <option value="">選択してください</option>
      <{html_options values=$option_value[num].id  output=$option_value[num].name selected=$key }>
    </select>
  </div>
<{/section}>

2. 簡単な解説


商品詳細ページは古めのテンプレ・ウッドがベースのため、プルダウンメニューです。
オレンジマーカー部は追加箇所。select nameのあとにonchangeとidを追加。
onchageイベントは、オプションを変更したときに関数を呼び出します。
カートとオプションごとに固有のidを振っています。
記事幅の都合で勝手に改行が入っていますが不要です。

$("#id")[0].selectedIndex でプルダウンメニューの何番目を選んだかがわかりますので、変更したほうから変更していないほうへ代入しています。

【関連記事】
カートに入れるを二ヶ所につける

2015年6月12日

海外向けネットショップに Jugem Cartを使ってみる

ここのところの大幅な円安の影響(+なんやかんや)で、「越境ECだ」なんだと、流行しはじめている海外向けネットショップ。
カラーミーショップ大賞2015」に挙がっているショップを眺めていても、すでに海外向けに販売を始めているお店がちらほら見受けられました。

流行とは別に、外国語ができる・商品が適応しているなどの条件が整っているのなら、ネットショップの次の一歩として検討するのもありかもしれませんね。

今回の「カラーミーいじりたおし」では、カラーミーショップとJugem Cartの繋がりを念頭に特徴を抜き出し、実際のWeb制作過程において気づいたことなどもまとめてみました。


0. カラーミーショップでやれる・やれない


「ショッピングカートを使わない&メールでやり取りできる」のであれば、カラーミーショップでも海外との取引は可能で、「カラーミーいじりたおし」でもずいぶんと昔にそのような話題をとりあげたことがあります。【参照】「英語ページをつくる 1」 「英語ページをつくる 1

上述の「ショッピングカートを使わない」前提は、カラーミーショップはSSLページ(ショッピングカート~決済画面など)の表示をいじれないため、日本語の理解なしにはお客様が利用できないためです。

海外向けショッピングカートシステムは、Jugem Cart以外にすでにいくつかありますが、海外向け(ex. Jugem Cart)と国内向け(ex. カラーミーショップ)の違いは、極論すれば、カート画面~決済画面が英語対応しているかどうかです。

もう一歩踏み込んで海外展開を進める場合に、海外向けショッピングカートシステムは必要になってきますが、その選択として、Jugem Cartはどうなんでしょうか?


1. Jugem Cartを費用面から検討する

初期費用ゼロ、月額固定費ゼロ。

比較対象の別サービスだと月額数千円~。オプション別料金など。

Jugem Cartは月額基本料金がない分、販売手数料として販売した商品代金の10%(税抜)を支払うことになる。
月100万円販売するお店だと、販売手数料10.8万円(消費税8%として)。これはさすがに高い。
ゆえに、海外市場を開拓する並々ならぬ意気込みと戦略があって、本気で海外向けネットショップをはじめるなら、Jugem Cartを選ぶかどうか悩みどころ(何を悩む必要があるのかは後ほど)。

そうではなく、気軽に、ふんわりとスタートして、やりながら発展させていく考えなら、Jugem Cartは始めやすいです。

カード決済必須。

海外送金という手段もありますが、海外のお客様の手間を考えれば、通常、カード決済を導入します。
PayPalは月額利用料ゼロ=固定費ゼロという面で、Jugem Cartとの相性バツグンです。
決済手数料も他(イプシロンなど)と比較して安く、また海外での利用者も多いため、おすすめです。
PayPalの決済手数料は、決済金額(商品代金+送料)×3.9%+40円/件。安い。

【参照-公式】「クレジットカード・PayPalを利用した場合の利用料

海外向けは消費税が不要。

国内と海外の販売価格を(税込で)同じ価格設定をしたなら、海外販売では消費税8%分はショップの利益になります。
そういう計算の上で検討すると、Jugem Cartの手数料も「仕方ないか」と納得(説得)しやすくはなります。


2. Jugem Cartを選ぶ最大の利点は?

カラーミーショップと在庫数の連携が可能。

在庫管理が必要な場合(取扱商品が一点ものであるなど)、海外でも国内でも積極的に販売して、手動で在庫管理することが現実的かどうか(お店の事情によりますよね)。
売れば売るほど販売手数料が悩ましくなり、同時に手動の在庫管理も厳しくなってくるというジレンマ。

カラーミーショップとJugem Cartの相互で在庫を増減するような仕組みになっているらしいです(テストしたら追記します)。

(当たり前かもしれませんが)カラーミーショップと在庫数の連携はするけれども、Jugem Cartには別途、商品登録が必要です。

【参照-公式】「カラーミーショップと在庫を連携できますか?

商品データのアップも比較的簡単。

作業としては、カラーミーショップからCSV形式で商品データをダウンロードして、商品名、説明文などを日本語から英語に書き換えて、Jugem Cartへアップロードする必要があります(このさい連携用に、カラーミーショップの商品IDをJugem Cart側に登録している)。

そのほかには、Jugem Cartではカラーミーショップのカテゴリーがなくなりました。Jugem Cartのカテゴリーはカラーミーショップでいうところのグループと同じです。そのため、カテゴリー周りは別途作業が必要になります。

【参照-公式】「カラーミーショップに登録中の商品を、JugemCartに一括でインポートできますか?

操作性・機能性も違和感なし。

カラーミーショップの機能から一部省いた印象で、ショッピングカートシステムの機能として、できることも、管理画面の操作も、かなり近いです(画面や操作が変わった箇所は使い勝手を向上させている)。

おすすめ、売れ筋、最近見た履歴、組み合わせ購入、スライドショーは、カラーミーショップと同様に機能あり。「どこでもカラーミー」も使えます


3. そのほか、まとめ


始めるにあたり、知りたい情報は大体載っている「Jugem Cart サポートセンター」をご一読されるが吉。

カラーミーショップのテンプレートをJugem Cartにコピーした場合、修正せずにかなりの部分が動きます。ただし、商品画像の独自タグのいくつかが変更になっているので、たいした手間ではありませんが、手直しが必要です。

それほど支障はありませんが、カラーミーショップで使っていた独自タグのいくつか(比較的マニアックなの)がありません。今後に期待でしょうか。

カラーミーショップAPIのような機能は、今のところ見当たりません
カラーミーショップの商品IDを参照する独自タグがあれば便利になるのですが、現時点ではありません。
フリーページが10ページ(今後増えるかもしれませんが、少ないので注意)。
メルマガ機能がない…不要か。

20日以内に注文をキャンセルすれば、販売手数料は発生しない(それを悪用しちゃダメと書いてありました)。

結局のところーJugem Cartまとめ

実際使ってみると、大体の機能が揃っていることがわかりました。「カラーミーショップを使っていて海外向けも」と検討している方には、連携・データ移行・操作の面からもおすすめでしょう。

また、費用面でも「とりあえずやってみたら?」的にはじめられるのが、Jugem Cartのすごいところ。

以上、「カラーミーいじりたおし」的にも、Jugem Cartに対して、前向きな印象を受けました。
皆様、いかがだったでしょうか? ご参考になれば幸いです。


2015年6月9日

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

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

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

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



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

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

2015年6月5日

Facebookページを始めました

先日Web関連の書籍を読んでいると、偶然ペパボ時代のカラーミーショップの立ち上げ時期の話が載っていました。開発二人とデザイナー一人だった、なんてことが書いてあって、ビックリでした。
そんなカラーミーショップも2005年にサービスが始まってから今年で10周年、現在約6万店舗だそうな。

さて。
このブログも先月から6年目に突入しました。当初予想しなかった長い期間させていただいております。
長い期間というと、NHKの対談番組で、お坊さんが「お釈迦様がこう言っている」とおっしゃっていたことを、ことあるごとに思い出します(ご覧になられた方もいらっしゃるかもしれませんが、おおむねこんな内容)。
どんな凡人でも12年間同じことを情熱を持ってやり続ければ、悟りを得る可能性がある
本当にそうなるかわからないじゃないか、と思われる方もいるかもしれませんけれども。それでも私は、勇気の湧いてくる言葉だなぁと感じました。
ブログを5年やったら、始めた頃には想像もつかないような出来事に遭遇したりして、(お釈迦様がおっしゃった「悟り」とは大分違うのでしょうけれども)その思いがけなさにワクワクすることしきりでした。

そういうことで(?)、遅ればせながらFacebookページをつくりました。
カラーミーいじりたおし(Facebookページ)のほうもブログ同様に、ご愛顧のほどよろしくお願いいたします。
キビキビとカラーミーショップをいじりたおしてまいりますので、マメにチェックして応援してくださる読者様、偶然立ち寄っていただいたご縁あるお客様、Web制作にたずさわる同士の皆様、今後ともよろしくお願いいたします。


【今後のいじりたおし的スケジュール】
公式のほうに、SSLページの更新予定(6/8)が出ていました。よい機会ですので、近々SSLページの小ネタをまとめさせていただきます。
・海外向けカート「Jugem Cart」について。私的トピックのため、ただいまネタ仕込み中です。
・「カラーミーショップ大賞2015」のエントリーショップから参考になるパーツと、グッドなサイトデザインの収集。量が膨大なので、ちょっとずつ複数回で更新(6月~年末)。最終的には、閲覧しやすいどこかにまとめて、参照してもらえるようにする予定。 ・そのほか、溜め込んだ小ネタ山盛り。
・人気記事の更新。古い文章の見直し。