2016年こそは

毎年1月になると、今年はあれやってこれやってと夢想するんですが、実現できたためしがない。


長期に渡ってMagento（オープンソースのEC用CMS）の仕事にかかりっきりだったので、そこそこ使えるようになったのと引き換えに、当ブログのほうは放置気味となってしまいました。
週一更新を目標にしていましたが、継続するということは難しいものです。

さて。
私は現在 Jugem Cartのカスタマイズ中で、もうじき一段落しますので、忘れないうちにJugem Cartの仕様やカラーミーショップとの比較についてを記事にしておこうと思います。
それともうひとつ。
昨今、ECサイトはスマホ対応必須ですよね。カラーミーショップでも、レスポンシブ・ウエブ・デザイン（RWD）のテンプレを使っているショップをよく見かけます（いじりにくいのか、テンプレそのままのことが多いです）。
ちょうど現在作業中のJugem Cartで、RWDのテンプレをベースにカスタマイズしていますので、いじりかたの基本的なところを記事にしていこうと思います。

引き続き2016年もよろしくお願いいたします。

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

カラーミーショップには、最近チェックした商品（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();』は機能的に不要かもしれませんが、一応。
履歴を全削除します。

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がつぶやきの内容。
上述の参考サイトに詳しく解説がされています。まずはそちらからどうぞ。

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

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

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

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

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

1.カラフル

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

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

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

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

2.ピンク

mihopan popcake（ミホパンポップケーキ☆）

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

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

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

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

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

参考にしたいカラーミーショップ 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

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