2015年8月30日

「最近チェックした商品」の履歴を削除する

カラーミーショップには、最近チェックした商品(or 最近見た商品)の独自タグがあります(2012年に実装された機能です)。
ただ、履歴を残されるとイヤだなぁと感じるお客様もいらっしゃるようです。
そしてなぜか標準で、「履歴の削除機能」が付いていないらしい。

履歴はCookieとして各自PCに保存されますので、Cookieを削除する機能を付けます。
ごく簡単ですが、作ってみました。

0. Cookie名 browsing_history

a:3:{i:0;s:6:"579230";i:1;s:7:"2923713";i:2;s:7:"6039294";}
中を覗くと、こんな感じになっています。
上記例では履歴が3点あり、""に囲まれた部分に商品IDが入っています。
そのほか、a:履歴の登録数、i:連番、s:商品IDの桁数。PHPのserialize()関数を参照するとよいです。
登録数はMAX10件らしい。

1. コード

<script src="http://example.com/jquery.cookie.min.js" type="text/javascript"></script>

<a href="#" onClick="JavaScript:$.cookie('browsing_history','',{expires:-1});location.reload();return false">削除</a>
jQueryプラグインのCookie操作を使っています(jquery.cookie.min.js)。
リロード『location.reload();』は機能的に不要かもしれませんが、一応。
履歴を全削除します。

2015年8月20日

Twitterの投稿を「ショップからのお知らせ」にする - Twitter API編

ネットニュースを眺めていると、こんな記事をみつけました。
「minne」に出品された吉幾三さん手作りの11万円の壺、ついに売れる - ITmedia ニュース

TV CMもバンバンやっているのでご存知の方も多いと思いますが、minneとは、クリエイターにWeb上のギャラリーを貸して、ハンドメイド作品の販売を仲介するサイトです。
ハンドメイドにターゲットを絞っているところが、面白いなぁと感心します。
上の記事も、プロモーションの一環だったりしてね。




0.「ショップからのお知らせ」はどこで書く?


カラーミーショップ上の多くのお店では、お客様への告知として「お知らせ/ニュース/新着情報」などのスペースを設けています。

無料テンプレートを見ると、管理画面の「ショップ作成>ショップ情報設定」の「お知らせ」を使っています。これが一般的だと思います(HTMLタグも入りますし、枠内の文字数制限も緩そうにみえます)。

その他には、ショップ・ブログのRSSからタイトルを取得して表示させているショップもあります。
Twitterのウィジェットをサイドバーに貼っているショップも多いですよね。

Twitterのウィジェットで機能十分ですが、サイトデザインを優先してページにしっくりくる感じで埋め込みたい場合などは、Twitter APIを試してみるのも良いかもしれません。

Twitterには、カラーミーショップ同様に、APIが用意されています。
利用するための手順も、だいたい似たようなものなので、カラミーショップAPIを使ったことがあれば、それほど理解に困らないと思います。
Twitter APIを利用するための手順は、親切丁寧に解説が書かれているサイトがありましたので、下記リンクをご参考にどうぞ。

【参考】PHPでOAuth認証して自分のつぶやきを表示する [Twitter API 1.1 対応版] | webOpixel


カラーミーいじりたおし的には、すぐに試せるPHPソースコードとカラーミーショップ側のコードを置いておきます。

1. コード

1.1 twitter.php

<?php
require_once("twitteroauth.php");

$consumerKey = "xxxxxxxxxxx";
$consumerSecret = "xxxxxxxxxxx";
$accessToken = "xxxxxxxxxxx";
$accessTokenSecret = "xxxxxxxxxxx";

$twObj = new TwitterOAuth($consumerKey,$consumerSecret,$accessToken,$accessTokenSecret);
$req = $twObj->OAuthRequest("https://api.twitter.com/1.1/statuses/user_timeline.json", "GET", array("count"=>"5"));
$tw_arr = json_decode($req);
$str ="";
if (isset($tw_arr)) {
    foreach ($tw_arr as $key => $val) {
        $str = $str . '<b>' . date('Y/m/d H:i', strtotime($tw_arr[$key]->created_at)) . '</b>';
        $str = $str . '<br />';
        $str = $str . preg_replace("/(https?|ftp|news)(:\/\/[[:alnum:]\+\$\;\?\.%,!#~*\/:@&=_-]+)/","<a href=\"\\1\\2\">\\1\\2</a>",$tw_arr[$key]->text);
        $str = $str . '<br />';
        $str = $str . '<hr />';
    }
} else {
    $str = 'ニュースはありません。';
}
$str = str_replace(array("\r\n","\r","\n"), '', nl2br($str));

//出力用配列にセット
$output = array(
    'str' => $str
);

header("Content-Type: text/javascript; charset=utf-8");
echo $_GET['callback'] . '(' . json_encode($output). ')';

1.2 カラーミーショップ側の HTML+jQuery

<div id="header_list">読み込み中...</div>
<script type="text/javascript">
    $.getJSONP = function(url,callback,param) {
        return $.ajax({
            url:    url,
            dataType:"jsonp",
            success:callback
        });
    }
    $.getJSONP("http://www.hogehoge.com/twitter.php", onDataHandler)
    function onDataHandler(response) {
        $("#header_list").html(response.str);
    }
</script>

2. 簡単な説明

PHPのソースコードは、変なところに改行が入っていますので、ご注意を。
created_atが投稿日時、textがつぶやきの内容。
上述の参考サイトに詳しく解説がされています。まずはそちらからどうぞ。

2015年8月4日

参考にしたいカラーミーショップ 6

カラーミーショップ&無料テンプレートという検索キーワードでここにたどり着くお客様がいらっしゃいます(このブログがヒットするのも不思議ですけれども)。
需要があるのなら、ひとつくらい作ってみようか、という気がしています。

この「参考にしたいカラーミーショップ」も、ついに最終回となりました。6回にわたりお付き合いいただき、ありがとうございました。
これまでに「おっ」というのがみつかりましたでしょうか。

もっとみたい方は「カラーミーショップ大賞2015」でエントリーショップ(約1100店舗)が閲覧可能です(ショップのカテゴリーで絞り込めるので、探しやすいです)。

さて今回は、カラフル&ピンク!!です。サイトデザインのご参考にどうぞ。

1.カラフル


PEPIES - 雑貨屋ペピーズ | 出産祝いに人気の海外ベビーブランド キャラクターグッズの通信販売

雑貨屋さん。緑+ピンク。アニメーションがにぎやかで楽しいです。HTML5/CSS3が使われているので、いろいろと新しいです。
商品一覧ページのナビゲーション(「次のページ」とかのアレ)も、ページの雰囲気に合わせてデザインされています。




制服通販リサ アンド ザ スターライト 高校生制服通販

カラフルかは別にして、背景の柄が変えられます。そして、レスポンシブ・デザインです。
トップページを含め大部分はカラーミーショップ以外で制作されています。カート部分だけ「どこでもカラーミー」のようです。
トップのタイル配置は、Masonry(jQueryプラグイン)で実現しています。





2.ピンク


mihopan popcake(ミホパンポップケーキ☆)

ピンク+紺色の文字色が目を惹きます。
四角をたくさん並べていますが、サイズを変えてあって、メリハリが利いています。
写真も綺麗ですよね。




スマホカバー・スマホケース公式通販 CIARA(シアラ)

レスポンシブ・デザインになっています。コンセプトの伝わる配色・デザインになっています。




スイーツデコアクセサリーのウェディングとギフト通販│Casadedulce

ユニークなアクセサリーショップ。サイトも全体的にテンション高め。
サイドの空きスペースに縦書きバナーっていうものありですよね(楽天でよくみかけます)。

2015年7月30日

参考にしたいカラーミーショップ 5

Blogger(ここで使っているGoogleのブログサービス)にいまさっき教えてもらいましたが、EUの法律では、Cookieを使用する場合にユーザーの承認が必要なのだそうな。
日本からEUに物を売る場合はどうなんでしょうね?

今回の「参考にしたいカラーミーショップ」は、カラム別にピックアップしました。サイトデザインのご参考にどうぞ。

1カラム

サイドメニューを使わずに、上メニューというパターンもよく見かけます。
商品点数が少ない場合などは、メニュー(カテゴリー)が不要の場合もあります。


FREECOM フリーコム公式オンラインストア【FreecomStyle】 三菱化学メディアグループ

トップページ・製品詳細ページにはサイドメニューがありませんが、商品一覧ページ・商品検索結果ページにはサイドメニューがというめずらしいデザイン。各ページで細かさが異なるので、別の役割が与えられているように感じます。
めずらしいですが、違和感は感じません。





毛髪花学研究所 オンラインショップ

トップページをシンプルに。商品を数多く並べるよりも、商品のイメージを優先して伝えようとしているのだと思います。




デザインTシャツのホリゾンブルー | Horizon Blue

大きいスライドショーを使うサイトデザイン&商品も並べるトップページ。レスポンシブ・デザインでいい感じです!





2カラム

サイドメニューの配置は左右どちらもあります。
2カラムは、使っているお店が一番多いと思います。


オンラインストア コトモノミチ at TOKYO

レスポンシブ・デザインです。『ご利用ガイド』が丁寧に作られていて、参考になります。
『ご利用ガイド』のリンク先にある『メルマガについて』のページが、ちょっと他には見かけません。
メールマガジンを登録するSSLページに移動する前に、1ページ余分に挟んであります。こんなメルマガですよ、っていう画像を貼っているのだと思います。そしてその下に登録ボタン。
メルマガ登録のために普通はそこまでやらないので、感心しました。




ポーランド陶器・食器専門店ツェラミカ

カラーミーショップでは、食器を取り扱うお店が数多く出店されていますが、デザインの綺麗なサイトが多いです。そして、商品の写真も良い! 大小の画像がメリハリとして効いています。
まとまったサイトデザインで、とても参考にしやすいと思います。




インテリア・キッチン雑貨・輸入雑貨・文具・動物雑貨・通販 セレクトショップ ディベルティーレ(Divertire)

メニューが面白いです。トップページはぱっと見、3カラムに見えますが。画像配置がユニークで、楽しげな商品を取り扱っているのだろうと伝わってきます。





3カラム

カテゴリーや商品点数が多い、バナーなどをたくさん貼るときはこれ。


ビザインショップ / BESIGN SHOP - ドイツ生まれのステンレス製モダンハウスウェア「ZACK」の正規輸入代理店ビザイン株式会社の直営ショップ

取り扱いがステンレス製品ということで、カリッとしたサイトデザインになっています。3カラムの場合、サイトの印象として、ぎっしり・細かくなりがちですが、こちらのお店は特にその傾向があります(個人的には、それが合っているように感じます)。




nagomi | キッチン雑貨専門店 キッチン用品 生活雑貨(通販・販売)

カラフルな商品に合わせて、明るめのサイトデザイン(そしてほどよい)。
個人的にはメニューが好きだなと感じました(わずかなグラデーションも含めて)。
似たようなデザインのひとつ上のサイトと比較しても面白いですね。




おしゃれなインテリア家具ショップCCmart7

左にカテゴリー、上にショッピングガイド的なメニュー、右に縦書きバナー。最近は、上メニューを採用しないサイトデザインも多いですね。

2015年7月23日

参考にしたいカラーミーショップ 4

Blogger(ここで使っているGoogleのブログサービス)は、ギャラリー向きじゃあないですね。
カラーミーショップ大賞2015」のノミネートショップから、参考になりそうなサイト画像を山盛り撮ってきたんですが、どう整理してご覧いただこうかと思案中。複数の項目で絞り込める機能があれば良いのですが。
アイデアがないか探していて、偶然みつけたのがこちら(ここの画像の枠はまんま借用)。

カラーミーショップデザインギャラリー | カラーミーショップで制作されたネットショップの事例集

ホント見やすいし、サイトデザインの参考になりますね!

さて、「参考にしたいカラーミーショップ」も4回目を迎えました。
あまり見かけない機能・使い方をしているショップの紹介は、今回がラスト。
カラーミーショップも、アイデア次第で、いろんな使い方ができますね。


1. 名入れ機能に名前以外を入力する


100サイズ既製カーテン通販専門店|びっくりカーテン

ギガプランの名入れ機能を使っているお店は結構多いです。フリーの入力欄なので使いやすいんですよね。名前以外にも、メッセージなどの入力欄として使われています。

ここでは、丈つめ・幅つめのサイズを入力するようになっています。
そばに、幅つめチケットを購入するようにリンクもあります。

似たような使い方では、メッセージカードの入力欄と、ギフトラッピングのリンクがあって、ラッピングを選んでカートに入れてもらうようになっているお店もありました。





3. トップページにテンプレ共通の枠を表示しない


北欧雑貨のハシュケ【hushykke】北欧雑貨や北欧食器,インテリアの専門店

以前の記事「テンプレート共通部分を表示させない方法」にもありますが、テンプレートの共通部分(ヘッダー・フッターやサイドバー)を表示させないことができます。
こちらのお店のように、トップページは1カラム、商品ページは2カラムと、デザインを大きく変えられます。

トップページをレンタルサーバー上で作って、商品ページをカラーミーショップで作る、というサイトは頻繁にみかけますので、トップページのデザインを自由にいじりたいという需要は結構あるのでしょうね。
このお店のように、カラーミーショップのみで完結しているサイトは、あまりみかけません。

スライドショーの角を丸くして、全体の雰囲気にあわせてあります。
価格帯・デザイナーのドロップダウンリストも絞り込みやすいです。
サイトデザインも秀逸で、細かなところまで作りこみがなされています。





4. これは良いカート画像だ!!!


カリフォルニアワインとピノノワールのワイン通販はしあわせワイン倶楽部

ワインをカートに入れると、右上のカート画像のワインの本数が増える!
これは目からうろこの良いアイデアでした。さっそく使ってみたい。



【追記】
「2. 名入れ機能の、何これ!?みたいな使い方」は、ご依頼がありましたので削除しました。

2015年7月20日

参考にしたいカラーミーショップ 3

ここのところ、Magento(オープンソースのEC用CMS)をいじっています。
細かい作りこみが可能で多機能ですので、 カラーミーショップとは好対照です。
そっちの仕事が終わりました頃に、カラーミーショップとの比較なんかもやってみたいと思います。

さて、「参考にしたいカラーミーショップ」も3回目を迎えました。
今回は、あまり見かけない機能・使い方をしているショップを紹介いたします。


1. 注文速報×2サイト


SNIDEL,FRAY ID,LILYBROWN,UNGRID 通販・正規取扱店 セレクトショップDIVA

たまーに見かける、注文速報/注文状況という枠。楽天ショップの機能です。ほかにも、これと似たようなレビュー機能の枠もあったりします。
楽天ショップは、出店料もろもろの費用が結構掛かるんですよね。

カラーミーショップでも、APIで作ることができそう(需要があるのかは微妙)。




カフェ食器通販のお店・プチスーベニア





2. 検索にチェックボックスを使う


レンタルドレスのMiel Miel(ミエルミエル)|東京青山

あらかじめ商品詳細ページに検索キーワード(例【XS】【ひざ上】etc.)を仕込んでおいて、商品一覧ページでチェックボックスを使って検索キーワードをセットしています。
複数の条件で絞込みができますので、こういう使い方をしたいお店は多いのではないでしょうか。

同じようパターンで、ドロップダウンリストを使っているサイトもありました(コンパクトに配置できますが、チェックボックスに比べると、使いやすくはないです)。




3枚目の商品詳細ページでは、レンタル希望日をセットすると、発送日、お届け予定日、ご利用日、ご返却日が表示されるようになっています。
レンタル希望日の入力枠は、ギガプランの名入れ機能を使っているようです。

カラーミーショップって、商品の販売だけじゃないんですよね。レンタルショップ、面白い。


3. カラーミーでサービスを売る


ビューティープロダクツセミナー

セミナーを参加者を募集するサイト。
見かけない使い方なので、とても新鮮です。


2015年7月12日

参考にしたいカラーミーショップ 2

カラーミーショップ大賞2015」でショップをたくさん拝見しましたが、比較的新しいテンプレートをそのまま使っているお店って、結構多いんですよね。
そういうショップを見ていると、シンプルなサイトデザインとよい写真とがあれば、手間少なく、目を惹くショップができるよう感じます(凝ってるのにイマイチってのは切ない)。

レスポンシブデザインのカラーミーキットあたりは使っているショップも多く、使いやすいんじゃないでしょうか(PCで閲覧すると妙に感じるデザインなので、PC閲覧用に手を加えたいところ)。

さて、「参考にしたいカラーミーショップ」も2回目を迎えました。
早くも書くべきことが減ってきましたが、昨今のウェブデザインにおける潮流(さすがに大げさすぎるか)、HTML5/CSS3+jQueryで選んでみました。


1. イメージを優先したデザイン


信級玄米珈琲 - NOBUSHINA GENMAI COFFEE -

トップページの動画と、商品一覧ページで構成されている。
商品詳細ページがないので、商品一覧ページに「カートに入れる」ボタンがついています。

どこでもカラーミー(カートJS機能)があれば、他のページはいらないということがよくあります(見ていても、実際そういうお店は多い)。
商品点数が少ないショップは、検索がいらない、カテゴリーがいらない、トップページ、商品詳細ページがいらない、などなど。

シンプルなサイトデザインには、よい写真があれば十分だなぁと思います。




2. 丸くてふにゃっとした遊びのあるお店


mon cifaka online store - 岡山市の雑貨・家具などのセレクトショップ

第一印象からして個性的なショップ。
商品の枠が丸い。これ自体が結構少ないです。多くのショップでは四角い枠を採用しています(それが当たり前と思いがちですが)。
そして、この丸い枠、動きますよ!(ツンツンできますゼ 笑) 遊んでるなぁ。

画面一番下のページナビゲーション部分がめずらしかったので、これもチェック。比較的手抜きしがちな場所ですが、全体にあわせて丸くしてあります。




3. カートに入れるが3つもあるよ!!!


琉Q – ルキュー

ここはトップページがカラーミーショップを使っていない形。
商品詳細ページ(カラーミーショップ)とその他ページ(トップ、About、FAQ)のドメイン的な配慮でこうしているようです。

商品点数が少ないので、商品一覧ページや検索窓がありません。
「カートに入れる」が3つ付いているところは必見(スクロール位置によって、残り2つは見えないようになっています。)。
上・下と、スクロール時に張り付くのが一つ。
ここ以上に付いているところは見たことがありません。

ページ遷移時のフェードインも印象的で、全体としてショップの雰囲気によく合っています。

2015年7月4日

参考にしたいカラーミーショップ 1

4月に「カラーミーショップ大賞2015」のノミネート一覧が発表(約1100店舗)され、5月に大賞が発表されました(2ヵ月ほどかけて、まめにチェックしました)。

あまりカスタマイズできないというイメージを持たれがちのカラーミーショップですが、手間とアイデアで次第でもっとやれるはず。多くのサイトを見て、そう感じました。
カラーミーいじりたおし的には、その中から「デザイン」と「カスタマイズのアイデア」の面白いものを選んで紹介させていただきます。

定番~めずらしいサイトデザイン、面白パーツなどを中心に、何回かに分けてご紹介いたします。ごゆっくりお楽しみください(次回以降、参考にしたいカラーミーショップ ラベルをつけます)。


1. ここまでやったカート画面は他にない


犬服・ドッグウェア・犬用雑貨の販売 WANKOショップ

ページ全体を通して、ボタン・配色と細部まできれい作りこんであります。

特筆すべきはカート画面。
CSSのみでここまでやっているところは、私が見たなかではありませんでした。
注文の流れ(#shipping_step)では、「text-indent: -9999px;」で元画像を外に飛ばして、背景に差し替える画像を表示していました。

そのうえレスポンシブデザインなんですよね、これ。







2. これ以外のページはちょっと思い浮かばない


キュレーション通販サイト - HATCH(ハッチ)

それくらいぴったりときました。
キュレーション通販サイトの意味がわかっていませんでしたが、各ページをみていると、たしかにこう作らなければいけないような気になってきます(錯覚だとは思うんですが、作りに納得してしまう)。

商品一覧ページ(アイテム一覧>暮らす)では、グループを細かく分けて「さらに絞り込む」ことをしたり。グループを階層化して使うところもあまり見かけません。

トップページで商品を見せないショップはちらほらありますが、ここも含めてほぼカラーミーショップのトップページは必要がないので使っていません。

一般向けではありませんが、ユニークなサイトです。
白基調のショップが多いなか、黒背景も貴重(蜂モチーフ)。




2015年6月26日

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

【仕事サイトにカラーミーショップAPI関連記事を書きました】
カラーミーショップ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月~年末)。最終的には、閲覧しやすいどこかにまとめて、参照してもらえるようにする予定。 ・そのほか、溜め込んだ小ネタ山盛り。
・人気記事の更新。古い文章の見直し。

2015年5月23日

「カラーミーショップ大賞2015」の受賞ショップを見てきました

前回からの引き続きです。
ノミネートショップや制作会社については前記事のURLを参照してください (つらつらと眺めていたら、秋田書店のオンラインショップがカラーミーだったのにはびっくりしました)。

さて。
5/17に「カラーミーショップ大賞2015」の発表がありました。
私もショップデザインの研究をするべく、受賞されたショップ(約30店)のサイト作りを見学してきました。
そのなかでよく見かけた、鉄板パターンをピックアップしてみました。
もし貴方がサイト作り初学者であるなら、下記ポイントをチェックされてみてはいかがでしょうか(数を見るのは大変ですからね)。

1.「カートに入れる」ボタンは商品詳細ページの上のほうに
スクロールしなきゃ「カートに入れる」ボタンがない、というショップは昨今珍しいです。
ページの一番上に、左に商品画像、右に価格と「カートに入れる」ボタンという配置がパターンになっています。
長い説明文はその後で。

2.「上へ戻る」ボタンがある
「カートに入れる」ボタンを上に配置しているから、ということも理由のひとつでしょうか。
右下に固定で表示させる、スクロール下限にボタンを配置する、など。
多くのショップが採用していますし、実際のところ、ないと(私は)不便に感じます。

3.価格帯グループ分け
カラーミーショップでグループ管理ができるようになった頃から、ちらほら見かけるようになりましたが、これも採用しているショップが多いです。
商品点数などショップの実情にもよるのでしょうが、グループ分けを細かくして探しやすくする工夫をしているショップをよく見かけました。

4.電話番号、送料無料バナーは一番上 
もしそれが必要な情報なら、最初に目に付くところに配置しておきます。
あるべきところに配置することは、お客様に対して親切だと思います (デザイン性に重点を置いたショップの場合は、あまりやりませんけれども)。

5.「スマホ版へ」ボタン
スマホ用の表示に切り替えるボタンですね。
これは、たまーに見かけました。 スマホで買いやすいショップ作りも、いま必要なことですよね。


デザインとは別に、機能的な話題としては。
・スライドショー(コンテンツ・スライダー)がちらほら
・メルマガ登録・解除欄がトップページにあった(ページ遷移がないのはGOODだ)
・スマホから電話かけるタグ(a href="tel:~")があった(HTML5なのね)
・商品一覧ページに「カートに入れる」ボタンがついていた(商品詳細ページを使わないお店があった)
・ギガプランの名入れ機能の入力エリアを連絡欄代わりに使っていた
・注文速報なるものがあった(画像参照 カラーミーAPIかな)



と、こんな感じで。
ノミネートショップ(1000店以上)の中にはカラーミーAPIを使っていたりして、カラーミーいじりたおし的には面白そうなのが見つかりそうですが、なにせ量が多いので、空き時間に確認しながら話題をピックアップしていければと思います。

2015年4月12日

「カラーミーショップ大賞2015」ですってよ。春

17日まで「カラーミーショップ大賞2015」の投票が受け付けされています。
 どんなWebショップが選ばれるのか、楽しみに今年もチェックしています。
去年のレポートのリンクもあります(去年の大賞「北欧、暮らしの道具店」様のWebサイトもよく覗いた)。

一度にたくさんのページが閲覧しやすく、眺めながらでもWebサイト作りの参考になります。
どんなWebショップを作ろうか具体的なイメージが湧かないときは、他サイトの模倣(気に入った配色、必要な機能、商品配置の仕方、メニューのつけ方などの部品)からはじめるのが良いと思います。

4月はいろんなことに挑戦したくなる季節でもあります。 いじりたおし的にも、現在の仕事が一段落したら活動再開します。

https://netshopmatsuri.jp/entries

2015年4月5日

PayPal(ペイパル)決済の話

カラーミーショップ管理画面に時々広告が出ます。
日々忙しくしていると、広告=ストレス要因となり、見たくないことがしょっちゅうです(自分でもアフィブログやっておきながら、なんという言い草。ごめんなさい)。

いや、しかしですよ。
ああいう目につくところにあると、思いがけない発見もあります。最近そのことを知らされたのです。
「ただ今、PayPal決済導入で3,000円キャッシュバックキャンペーン開催中」
うっ。決済設定にPayPal決済が追加されてることに、気づいていなかった。
4年ぶりくらいに開いた気が……決済方法がずいぶんと増えている。

クレジット導入にあたり気になる点は、手数料と決済画面へのページ遷移についてだと思います。
5年ほど前にクレジット決済の記事を書いたときには、とくとくペイメントの手数料は結構大変だなぁという感じました(特にショップオープン直後は、固定費が心理的な重荷となります)。
今回のPayPalはどうでしょうか?

手数料は「PayPalを使用するには、手数料を支払う必要がありますか。」によると、一件あたり3.6%+40円(標準レート)とのこと。売上で下がる可能性があります。
決済金額1,000円で76円、 決済金額10,000円で400円という計算になる(はず)。  少額の場合に40円が効いてくる。

ちなみに、PayPal支払いはペイパル・アカウントが必須ではありません。アカウント登録なしで、クレジットカードさえあれば支払い可能です(ただし、手数料は少し変わる)。
カートの「お支払方法の設定」でPayPalを選択して進むと、PayPalアカウント ログイン画面に移動します。手順が増えるのはいたしかたないところ。
そして、月額費用的な固定費はありませんここ重要!)という点。

そのほかクレジット決済は、PayPal以外にも、イプシロン(いじりたおしの横にもたまに出てる)、ペイジェントがあります。これらは、PayPalに比べると、総じて手数料高めとなっています。

昨今のネット通販事情を考えれば、クレジット決済は避けては通れないところ。
また機会がありましたら、各社のメリット・デメリットを調査の上で、比較記事に書き直したいと思います。


【追記】
この仕事をするまで、大手通販サイト(アマゾンや家電量販店など)しか利用しなかったので知らなかったのですが、一定期間お取り置きして、複数注文を溜めてから発送するネットショップもあります。
PayPalは手動で請求メールを送る機能も付いていますので、取り置きシステムを導入しているショップでもクレジット決済が利用可能になります(ただし、請求金額の計算は手動になりますし、支払い手順が一般の通販と異なるので、お客様も初回は戸惑うことになります)。


【参考】
イプシロン(Epsilon)ご利用案内