カラーミーいじりたおし (新サイト:naeco.jp)

このブログでは、最後の記事になります

2017-05-29T02:31:00.009+09:00

つい先日「カラーミーショップ大賞2017」の発表がありました。受賞ショップのみなさま、おめでとうございます。

私のほうは、ここのところかかりっきりだったお仕事用サイトがやっとこ完成しました（ガワだけですが）。カスタマイズ記事は新サイトの方で引き続きの予定です。

ということで、以前から計画していました、カラーミーショップのカスタマイズ屋さんを業としてはじめます。

多くの方に喜んでもらえる仕事ができればいいなぁと思います。今後ともよろしくお願いいたします。お仕事サイト兼カスタマイズブログ https://naeco.jp

ブログ記事は新サイトで更新します。

Facebookページにて更新情報ほか有用な情報をお届けしますので、よろしければこちらのフォローもお願いいたします。https://www.facebook.com/naeco.jp/

Twitterでは、ウェブサイト制作の小ネタなどをお届けしますので、よろしければこちらのフォローもお願いいたします。https://twitter.com/naeco_jp

カラーミー公式の最近のお知らせ（抜粋）

2017-02-11T20:52:00.001+09:00

前回から期間があいてしまいましたが、しばらくのんびりしたり、自分の仕事用のサイトを作っていました。この調子では、あっという間に2017年も終わってしまいます（気が早い）。
寒いですし、確定申告のシーズンで忙しくなったりで、皆様、体調を崩しませんように。

ココナラで、困りごと相談の無料サービスをやっています。
時間的な余裕のあるときのみですので、ココナラの「サービス再開時にメールを受け取る」機能でチェックしていただければ（ココナラへはFacebookアカウントでログインできます）。

0. 最近のお知らせから話題をピックアップ

ネタを仕込む時間がありませんでしたので、最近のカラーミーショップのお知らせ欄から話題をピックアップしました。実はRSS配信もしているんですよ。

【予告】2月20日(月)「カラーミーショップ大賞 2017」エントリー受付を開始します

デザインの流行りなどをインプットするために、毎年チェックして勉強させていただいています。
見ていると、カラーミーショップって個性的な商品を取り扱っていたりすることが多いなぁと感じます。

また、2016年はどこでもカラーミーを使ったお店がずいぶんと増えたように思いました。
商品点数は少ないが、他コンテンツを増やして集客するお店という感じでしょうか。
ＳＥＯ的な理由、セルフブランディング・ブームもあって、2017年もその傾向は強まるんでしょうね。

ブログというと、以前はアメブロのショップさまが多かったですが、最近はレンタルサーバーにWordPressってところが増加中ですね（サーバーを借りて、作ってもらって、運用してもらう必要もありますので、予算があればですけれど）。
ショップとブログの境目のないウェブサイトが、きれいにできるのでしょうね。

コンテンツ重視の傾向は、公式のコラムで取り上げられていましたので、自分のお店に取り入れられるか興味がある方はチェックですね。

WordPress・Tumblrで制作したサイトにカートを設置！「メディアEC」デザイン事例10選

春から新規でネットショップをはじめようかと、検討されていらっしゃる方もいらっしゃるかもしれません。
私も以前、記事用に情報を整理したことがありますが、公式のコラムに良記事がありましたのでご紹介します。

比較！有料・無料ネットショップ作成サービスのメリット＆デメリットと選び方

ネットショップ開業準備まとめ制作から集客方法まで【2017年最新情報】

カラーミーショップを含め、どのサービスを利用するのがいいのか。
たくさんのサービスがありますが、何を販売して機能面のどこを重視するかで選ぶことになると思いますが、カラーミーショップで個性的な商品が多いのも理由があるのではないでしょうか。

カラーミーショップ for ロリポップ！も、個人的にはありだなぁと思っています。
いろいろと機能制限はありますが、どこでもカラーミーが使えるので、ブログをショップページとしてカスタマイズする感じで（制約さえクリアできれば）。
商品点数が少なく、商品の更新が少ないショップなら、これは使えるかも。安いし！！いつか特集したいと思いつつ……。

カラーミーショップ公式ガイドを読んでみた

2016-12-10T13:44:00.001+09:00

いろんな偶然が重なって、友人の誕生日プレゼントに「RPGツクールMV」というPCソフトを使って、RPGを作ることになりました。
二カ月かけて先日ようやく完成しましたが……友人の誕生日はとうに過ぎています（ひどい）。

新しいことをやり始めると、壁にぶつかったり、自分の中で疑問や迷いが生じたりします。皆様も経験がおありでしょう。
思ってたように上手くいかないことへの不満、完成しないことの言い訳、なんでやっているのかという根本など、心の中で延々と繰り返されるモヤモヤとしたものです。

RPGを自作できるというワクワク感をもってしても、完成までやり切れる人は多くないと感じました。
でも。なんとか終えることができれば、次の新しいモチベーションが湧くという不思議。

カラーミーショップも似てるなぁと、私は思います。

1. 公式ガイドの話

技術評論社から出版されたカラーミーショップ公式ガイド（はじめてのカラーミーショップ　オープンBOOK　ネットショップ開業＆運営）を読みました。

カラーミーショップでネットショップをはじめたい方向けの入口の本で、タイトルどおりです。
目次を抜粋してきました。

目次：
1　ネットショップビジネスをするために必要な知識
2　ネットショップを簡単につくれるカラーミーショップ
3　10ステップでネットショップをつくる
4　カラーミーショップ店舗運営の実務
5　自分のショップをプロモーションしよう
6　ショッピングモール「カラメル」に出店する

近年のレンタルカート事情では、もっとかんたんなサービスがあります。
カラーミーショップは、それらと比較すれば、ぜんぜんかんたんではありません。

「ネットに不慣れなので、ちょっと無理」そういう方向けに、丁寧に書かれています。
なので、開業前の方が手に取る本だと思います。手順どおりに進めば、完成するはず。

完成すれば、次の新しいモチベーションが湧いてくるかもしれません。
この本から先は、ご自身のモチベーション次第といったところ。

カラーミーショップの設定以外にも、ネットショップ全般に必要な開業前に必要な知識と、開業後の運営についても触れられています。
プロモーションの章では、GoogleショッピングやSNS活用の話題も取り上げています。あくまでも、開業前の方が最初に手に取る本ですので、中堅ユーザーが多大な期待を抱いて買うとはずします。

2. まとめ

・はじめたいかもと、ぼんやり思っている方→網羅的に知識が入れられます
・カラーミーの設定箇所の多さに面喰った方→手順に従っていけば完成します

そんな方に向いていると思います。
ぼんやりとしたものが具体的な形になっていくと、モチベーションは上がると思います。

もう一点。
いきなり壮大なRPGは作ってはいけない、というのが、私が「RPGツクールMV」から学んだ教え。一番最初は、小さい物を完成させることが重要です。
自分でカスタマイズする予定でしたら、ネットショップも同じことです。

【いじりたおしからのお知らせ】
手が空きましたので、久々にカスタマイズの無料サービスをココナラに出品しました（受付件数、期間は未定です）。

条件がありますので、内容の詳細につきましては、向こうのサイトでご確認ください。

カラーミーいじりたおしでよく読まれた記事

2016-12-04T16:53:00.003+09:00

12月というのは、買い物したくなる季節ですね。私もなんやかんやと物色しています。
プレゼントもそうですが、家のこまごまとした備品を新しくしたくなります。

「カラーミーいじりたおし」も再出発すべく、新サイトの準備を進めています。
全体的に古くなった記事・コーディングも多く、文字サイズは小さいしWebデザインも古いので、全部作りなおす予定です（徐々にですが）。

さて、ここでの99記事目で、総集編的な内容となっています。
今回は、これまで書いた記事で特に読まれた物を、順にご紹介させていただきます。

1. 最近の流行、集客を考えた新しいカートのかたち

＞＞「カートに入れるボタンを商品詳細ページ以外に設置する」　2010/08/21

同様のことがより簡単にできる、「どこでもカラーミー」（カートJS機能）が実装されて、いまでは古い記事になりました。
流行は最近ですが、昔から興味を持って読まれていたのでしょうね。

先日のカラーミー公式のECコラム「WordPress・Tumblrで制作したサイトにカートを設置！「メディアEC」デザイン事例10選」でも取り上げられていましたが、昨今どこでもカラーミーでカートを付けるお店をちらほら見かけるようになりました。

具体的には、商品ページ以外の部分（興味を持ってもらえるコンテンツ）を頑張って充実させて、集客に役立てているお店でしょうか。

・関連記事
カートJS機能について　2011/08/17
カートJS機能を実践的にいじる　2014/04/26

2. カラーミーショップAPI

＞＞「カラーミーAPIを試してみた 2」　2014/03/27

カラーミーショップの特徴でもあります。無料で使えて、商品、顧客、受注データベースなどを読んだり書いたりできます。
参照「カラーミーショップAPIドキュメント」

何に使うのかというと、お店の業務に合わせたアプリケーションの開発が可能で、これまで手動でやっていたことを自動にしたり（業務の効率化）。
Webショップ上に必要な情報を取ってきて表示したりできます（ショップの機能面）。例えば、楽天でみかける注文速報のような機能とか。

・関連記事
カラーミーAPIを試してみた 1　2014/03/26
カラーミーAPIを試してみた 2　2014/03/27
カラーミーAPI実践編1 データ抽出　2014/04/10
カラーミーAPI実践編2 ポイント表示　2014/04/16
カラーミーでウィッシュリストを作る - カラーミーショップAPI編　2015/06/26

3. カラーミーのできないことの判断は難しい

＞＞「カラーミーにできること、できないこと」　2010/05/13

カラーミーに最初から実装されていないとユーザーではどうしようもないことも多いです。
参照「機能一覧 - カラーミーショップネットショップ運営サービス」

上述ページではざっくりとした紹介ですので、その上でユーザー側でなにができるのか。
JavaScript（jQuery）、PHPやカラーミーショップAPIなどで自前で機能面を強化できます。
「これはカラーミーではできません」と言うには、上述の広範な知識が必要です（自由度が高いんですね）。
この記事は重要だと思いながらも、更新が止まっていました。

デザイン面では、HTML/CSSにより多くの部分がカスタマイズ可能です。

4. ほしい物リストを付ける

＞＞「ほしい物リストを作る 1」　2010/08/22

いまらなら、カラーミーショップAPIを使ってやるところです。
カラーミーショップAPIがない、Jugem Cartでは、こういうやり方で実装できます。

・関連記事
ほしい物リストを作る 1　2010/08/22
ほしい物リストを作る 2　2010/08/29
ほしい物リストを作る 3　2010/08/29
ほしい物リストを作る 4　2010/08/29
カラーミーでウィッシュリストを作る - カラーミーショップAPI編　2015/06/26

5. 実は、カートを二か所につけることができる

＞＞「カートに入れるを二ヶ所につける 1」　2010/05/24

商品詳細ページの上下に配置することを想定しています。たくさんスクロールするページのときに有効です。
記事とはすこし話が違いますが、商品説明の下に「組合せ購入パターン」で作成した商品を表示している場合などは、そこにも「カートに入れる」ボタンを設置することができます（ページに移動せずにカートに入れられる）。

・関連記事
カートに入れるを二ヶ所につける 1　2010/05/24
カートに入れるを二ヶ所につける 2　2010/05/25
カートに入れるを二ヶ所につける 3　2010/05/26
カートに入れるを二ヶ所につける - オプション編　2014/04/26

6. Smarty？なにそれ

＞＞「Smartyサンプル 1」　2010/06/02
ネット上に資料が少ないことも理由でしょうか。ヒットしやすいみたいです。
カラーミーショップで使う分には例文さえあれば十分かなと思います。

・関連記事
Smartyサンプル 1　2010/06/02
Smartyサンプル 2　2010/06/04
カラーミーショップにおけるSmarty入門　2016/03/06

7. その他

＞＞「テンプレート共通部分を表示させない方法」　2011/07/26
これもSmartyを使った機能です。

＞＞「カラーミーの商品並び順」　2010/05/14
価格の高い順にソートができません。これは今でもそうです。
商品名のソートもありません。

最近、カラーミーショップで発生したスパムメールの話

2016-10-06T23:17:00.004+09:00

カラーミーショップのお知らせに、「mail02.shop-pro.jpのメールサーバーでメールが届かない事象が発生しております」というタイトルで障害情報があがっています。

私のお手伝いしているショップ様も似たような状況に陥っていて、私もその件について調べました。
ちなみに、私が調べたショップ様は別のメールサーバーですので、似たような状況が他ショップ様でも発生しているのだと、この障害情報で知りました。
状況は障害情報に載っている内容とほとんど同じでしょうか。

遭遇した状況は下記の通り。

発生時期　先週末から
状況　メール未着のエラーメールが山盛り
不具合　メールが届いていないとお客様から連絡がくる

1分で10件くらいエラーメールがきました。しばらくすると、カラーミーショップから連絡がきて、メールアカウントがロックされます（ロック解除はすぐできます）。

障害情報には「当該メールサーバーから、大量メール配信を行っているアカウントがあり」とあります（エラーメールもメール配信になるのでしょう）。

メールアカウントのパスワードを変更してもエラーメールが止まりませんので、パスワードが抜かれたのではないと考えられます（PCのウィルスチェック済み）。

そうだとしたら、スパム業者にお店のメールアドレスをFromに使用されているのだろうと考えられます（送信元の偽装は簡単です）。たったそれだけで、こんなひどい目に。

ネットで資料を見ていると、エラーメールの正当性を検証する方法もあるようで、そういう機能がないと抜本的な解決には至らないように思います。

カラーミーショップによると「順次調査および対応を実施しております」ということですので、今後の対応については気になるところです。

【追記】
メールアドレスを作り直しましたが、Gmail宛は迷惑メールフォルダに振り分けられてしまう事態に。
仕方ないので、別ドメインのメールアドレスを使うことに。

再入荷お知らせメールの話3

2016-09-03T01:23:00.000+09:00

前回からの引き続きで、再入荷お知らせメールの話3。
今回は入力フォームのサンプルを作ってみました。

「初めてのPHP5（オライリー本）」のコードを参照しました（解説はオライリー本参照）。
PHP入門書には、この手の入力フォームのコードが載っていますので、読み解きやすいものを選ばれると良いでしょう。

入力画面→入力項目のチェック→登録
↑　　　　　↓エラー
↑←←←←←↓

私が行ったテストはソースコードレビューのみで、他はほとんど行っていません。
本番環境に実装する場合には、ご自身の責任でしっかりとテストを行ってください（ソフトウェアテストについて理解しておく必要があります）。

1. コーディング（人柱版）

<?php

if (isset($_POST['_submit_check']) && $_POST['_submit_check']) {
if ($form_errors = validate_form()) {
    show_form($form_errors);
} else {
    process_form();
}
} else {
if(! isset($_GET['pid'])) {
    $_POST['pid'] = '';
} else {
    $_POST['pid'] = $_GET['pid'];
}
if(! isset($_POST['mail'])) {
    $_POST['mail'] = '';
}
show_form();//最初の画面表示
}

function show_form($errors = '') {
if ($errors) {
    $error_text = implode('<br/>',$errors);
} else {
    $error_text ='';
}

?>


<form method="POST" action="<?php print $_SERVER['SCRIPT_NAME']; ?>">
<input type="text" name="mail" value="<?php print htmlentities($_POST['mail']) ?>" />
<input type="hidden" name="pid" value="<?php print htmlentities($_POST['pid']) ?>" />
<input type="hidden" name="_submit_check" value="1" />
<input type="submit" value="登録する" />
</form>

<?php

print $error_text;
}

function validate_form() {
$errors = array();
if (! strlen(trim($_POST['mail']))) {
    $errors[] = 'メールアドレス未入力エラー';
} elseif (! preg_match('/^[^@\s]+@([-a-z0-9]+\.)+[a-z]{2,}$/i', $_POST['mail'])) {
    $errors[] = 'メールアドレス構文エラー';
}
if (! strlen(trim($_POST['pid']))) {
    //正規のリンクから呼び出されていないのでトップに飛ばすなりする
    $errors[] = '商品ID未入力エラー';
} elseif(! is_numeric($_POST['pid'])) {
    //正規のリンクから呼び出されていないのでトップに飛ばすなりする
    $errors[] = '商品ID数字エラー';
}
//商品IDがカラーミーショップに存在しているか
//pidとmailの組み合わせが、既に登録されていないか
//在庫はゼロかなどをチェック

return $errors;
}

function process_form() {
//データベース登録
$dsn = 'mysql:dbname=mydb;host=localhost';
$user = 'root';
$password = '';

try{
    $pdo = new PDO($dsn, $user, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

    $sql = 'INSERT INTO restock SET pid=?, mail=?';
    $stmt = $pdo->prepare($sql);
    $stmt->execute(array($_POST['pid'], $_POST['mail']));
} catch (PDOException $e){
    //print('Error:'.$e->getMessage());
    die();
}

//登録完了画面
print <<<_HTML_
登録ありがとうございました。<br/>
_HTML_;

exit();
}
?>

2. 簡単な説明

ウィンドウ（or モーダルウィンドウ）で入力フォームを開くと良さげ、閉じるボタンも付けて。その他、デザイン的な体裁を整える必要があります。

表示させたい項目があれば、カラーミーショップAPIで取ってくる。

isset()がないと、最初の画面表示でNoticeが出るので。

メールアドレス構文チェックの正規表現も「初めてのPHP5（オライリー本）」から。検索すると、たくさん例文が見つかりますが、どれがよいのやら。

pidのエラーは明らかにオカシイので、入力画面に戻さず、トップページに飛ばすなりする。

htmlentities箇所は定番の、htmlspecialchars($str, ENT_QUOTES, 'UTF-8')でよいかと。

CSRF対策をしていません（IPAの「安全なウェブサイトの作り方」参照）。
ログイン不要の入力フォームの場合はもともといたずらし放題なので、トークンのやりとりをしないアプリケーションも見かけます（焼け石に水という考え方だと思います）。
今回サンプルとして作ったコードも、他人のメールアドレスを入力して登録できる仕組みなので、考え方も弱点も似たようなものです。
ただ、本番環境で動かすなら、わずかな問題でも対応するのがよい開発者。検索すると、トークンのやりとりで対策するサンプルが見つかります。

いたずら対策として、カラーミーショップのアカウントにログインするよう促して、そこからメールアドレスを取ってくるか（アカウント登録が必須になる）。
あと、CAPTCHAつけたり。

登録メール宛に内容を送信し、リンクをクリックしたのちに登録するような仕組みにするか（登録に手間がかかって嫌かもしれないが）。認証コードを送信して、入力してもらうか。

3. おわりに

省略箇所もありますので、のこりを自分で仕上げられる人用です。

この手のウェブアプリケーションでもっとも気を遣う点は、セキュリティだと思います（知識をインプットしておかないと、なにをどこまでがわからない）。
IPAの「安全なウェブサイトの作り方」が読みやすくて、入門編として勉強になりました（同ページ内の「安全なSQLの呼び出し方」もチェック）。
引き続き、ウェブや書籍でインプットしていきたいと思います。

【追記】
時折見かけますが、クエリパラメータをディレクトリ風にして渡すこともできます。興味あれば、検索してみてください。

【追記2】
徳丸浩さん著の「体系的に学ぶ安全なWebアプリケーションの作り方」を読みましたが、大変分かりやすかったです。これは手元に置いておきたい。

再入荷お知らせメールの話2

2016-08-27T09:51:00.001+09:00

再入荷お知らせメールの話の続き。

前回は、お客様が手軽にメール送信するだけの機能について、簡単に設置してみました。
メールを受けて→メモって→入荷メールを送信、と大部分を手動で運用する仕組みで、導入も簡単＆知識もそれほど不要で、個人的にはおすすめです。

レンタルサーバーにデータベースを持つことで、手動で行っていた部分をPHPのプログラムに代行させることも可能です（前回と比べるとハードルが上がります）。
今回はそのあたりの説明と、コーディングについて書きます。

PHPとデータベース周りについては、この記事では解説していません。
ウェブアプリケーション構築においては、セキュリティ面も気を配る必要があります。
検索して調べるか書籍をあたって、慎重に検討してください。

動作テストは簡単にしか行っていません。
本番環境に実装する場合には、ご自身の責任でしっかりとテストを行ってください（ソフトウェアテストについて理解しておく必要があります）。

0. 仕様と留意点について

データベースにすでに登録されているという前提です（カラムは、id（連番）、pid（商品ID）、mail（お客様メール））。
登録フォームは、ご自分で用意ください。入力時の在庫ゼロチェック、登録のダブりチェック、登録メールアドレスのバリデーションなどをやっておく必要があります。

今回のコーディングは、カラーミーショップの更新をチェックし、データベース(MySQL)からデータを取得し、メール送信する部分です。

カラーミーショップAPIのみで「再入荷した商品」という判断をすることは、現状無理です。ドキュメントによると、都合よさそうなリクエストパラメータがありません。
仕方ないので、カラーミーショップAPIで、今日の更新データを取ってきて、在庫＞0の商品IDを抽出しています。

この条件で「再入荷した商品」を抽出したというには、ちょっとまずいです。
たとえば、販売して在庫が5→4に減った場合、商品登録でコメントやその他項目などを更新した場合など、「再入荷したので在庫を増やした」以外の更新をたくさん含んでいます。
ただ、データベース登録時の在庫ゼロチェックがきちんされていれば、データベース検索時に「再入荷した商品」と無関係な商品は（たぶん）除外されます。

じゃぁそれでOKかというと、そうでもなくて。
サーバーに負荷をかけないためにも、明らかに不要な分は先に除外する方向で運用を決めたほうがよいと思います。
また、カラーミーショップAPIはリクエスト一回当たり最大50件なので、それより件数が多いと、複数回に分けてリクエストする必要があります（処理を追加する必要がありますし、リクエストも連投しすぎると制限がかかります）。
この点も考慮する必要が出てくるかもしれません。

お店の運用で再入荷商品であるとわかるような工夫して、条件に追加してやるのがベターだと思います（良い案もないので、ある程度の妥協は必要です）。
商品名につける、空き項目につける、再入荷カテゴリーに移動する、ここは手動にするなど。

今回のコーディングについての留意点。
「データベースに登録が0件だった場合は即終了」を追加すべきです（省略しています）。
エラー処理もろもろ、お客様にメール送信しましたよという報告メール、オプション在庫の対応、ヒットする件数が多い場合の追加処理、送信済みフラグを立てるのか、データベースから削除するタイミング、メール内容をきっちり作成、複数商品入荷した場合はメールをまとめる、メール送信規制の回避、などお店の事情で検討して、機能追加してください。

1. コーディング（人柱版）

<?php
//カラーミー
header("Content-Type:text/html; charset=UTF-8");//文字化け対策
$request_options = array(
    'http' => array(
        'method' => 'GET',
        'header'=> "Authorization: Bearer xxxxxxxxxxxxxxx\r\n"
    )
);
$context = stream_context_create($request_options);
$url = 'https://api.shop-pro.jp/v1/products.json?limit=50&update_date_min=' . date('Y-m-d');
$response_body = file_get_contents($url, false, $context);
$response_json = json_decode($response_body, true);

//抽出、降順でソートしておくと処理が減らせる
for($i=0; $i<count($response_json['products']); $i++){
    if($response_json['products'][$i]['stocks'] > 0) $data[] = $response_json['products'][$i]['id'];
}

//データベース
$dsn = 'mysql:dbname=mydb;host=hostname';
$user = 'username';
$password = 'password';

try{
    $pdo = new PDO($dsn, $user, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

    for($i=0; $i<count($data); $i++){
        $sql = 'SELECT DISTINCT mail FROM restock WHERE pid=?';
        $stmt = $pdo->prepare($sql);
        $stmt->execute(array($data[$i]));
        foreach ($stmt as $row) {
            //メール送信
            mb_language("Japanese");
            mb_internal_encoding("UTF-8");
            $to = $row['mail'];
            $subject = 'SUBJECT';
            $message = $data[$i];
            $headers = 'From: shop@example.co.jp' . "\r\n". 'Return-Path: shop@example.co.jp';
            $send_mail=mb_send_mail($to, $subject, $message, $headers);

            if ($send_mail) {
                $sql = 'DELETE FROM restock WHERE pid=? AND mail=?';
                $stmt = $pdo->prepare($sql);
                $stmt->execute(array($data[$i], $row['mail']));
            } else {
                //エラー処理
            }
        }
    }
} catch (PDOException $e){
    //print('Error:'.$e->getMessage());
    die();
}

2. おわりに

このあたりで、作業の半分くらいだと思います。
私は試しに作っただけで、実装する予定はありません。 のこり半分を自分で仕上げられる人用です。

バグ報告していただけると、私が喜びます。

ソフトウェアテストも、コーディングと同様に大事な技術になります。

十分なインプットが必要です。

cronで自動実行する予定です（レンタルサーバー次第）。

XAMPPを使ってメール送信のテストをする場合は、事前に設定が必要です。
検索して調べてください。

「再入荷お知らせメールの話3」につづきます。

[追記]
PHPやPHPセキュリティの入門書によると、（フォーム入力時に当然バリデーションしてから登録するのですが）データベースの登録内容も無条件に信用せずに、データをあらためてバリデーションするくらいの丁寧な仕事が必要だそうだ（カラーミーショップAPIも含む）。
pid、mail、その他データベースからの項目もチェックする姿勢で臨むほうがよいと考えます。

再入荷お知らせメールの話

2016-08-21T00:32:00.001+09:00

カラーミーいじりたおしの記事数が95（100目前！）になりました。
純粋に”それ”が好きってだけでここまで来ましたが、好きを超えるモチベーションというものも、なかなか見つからないものです。私は、わりと幸せだなぁと感じます。
カラーミーショップでお店をされている方でも、似たような想いで、仕事をされてる方も多いのではないでしょうか。

さて、本日の話題はこれ。
「再入荷お知らせ」「入荷連絡メール」「再入荷連絡メール」「再販売お知らせメール」、カートによって色々な呼び方があります、あれです。

カラーミーショップにはなぜかついていない「再入荷お知らせメール」機能、カラーミー七不思議のひとつ。
「この商品について問い合わせる」リンクがありますので、それを代用していらっしゃるお店もあるかと思います。
そのほかには、オプションボタン、チェックボックスを設置するために、新しく問い合わせフォームを作って、レンタルサーバーに置いているお店もあります。

カラーミーショップ的にどんなことができるでしょうか。機能設置について、検討してみました。
先に書きますが、今回のはあまり役に立たないコードになっています。

0. 一般的な「再入荷お知らせ」機能の流れ

登録部分

商品詳細ページのリンクをクリックする
入力フォームが開く
メールアドレスを入力する
OKボタンで、登録完了メールを送信
データベースに追加

入荷連絡部分

在庫0から増加したら、メール送信

いくつかのカートを見てみましたが、傾向としては、

登録はできるが、削除する方法は実装されていない
アカウントと紐づいていない（誰でも登録できる）
在庫チェック・メール送信は一定時間毎

処理で一番考える必要があるのは入荷連絡部分。
仕様を細かく決めて、例外を丁寧に作りこむ必要もあります。
自前でデータベースを持つと、バックアップなどのサーバー運用と、サーバー障害時の対応も考えておく必要があります。

以上を踏まえて、楽に作れる範囲まででコードを書いてみました。
登録数が少なければ、これくらいでもいいかなと思います。
今回の仕様説明は、コードの次に書いてあります。

1. コード

商品詳細ページ

<form action="http://php.example.jp/sendMail.php" method="POST" name="form1">
<input type="hidden" name="pid" value=<{$product.id}>>
<input type="hidden" name="id" value=<{$members_id}>>
<a href="#" onClick="document.form1.submit();">入荷したら連絡</a>
</form>

sendMail.php

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

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

$url2 = 'https://api.shop-pro.jp/v1/products/' . $_POST['pid'] . '.json';
$response_body2 = file_get_contents($url2, false, $context);
$response_json2 = json_decode($response_body2, true);

mb_language("Japanese");
mb_internal_encoding("UTF-8");

$to = 'info@example.jp';
$subject = $response_json['customer']['name'] . ' 様から再入荷登録';
$message = $_POST['pid'] . ', '. $response_json2['product']['name'] . ', ' . $response_json['customer']['mail'];
$headers = 'From: info@example.jp' . "\r\n";

mb_send_mail($to, $subject, $message, $headers);
header(sprintf("Location: http://example.jp/?pid=%s", urlencode($_POST['pid'])));
exit();

2. 妙な仕様

「カラーミーAPI実践編2 ポイント表示」をベースに、妙な仕様にしています（楽＆長くならない範囲にするため）。省いたところは、ご自身で調べてください。

クリックしたら即メールで、パラメータのバリデーション、ログインのチェック、「登録しました」の表示や、お客様に登録完了メールを送らないのも、作りとしてはかなり省略しています。
コピペしたらすぐに使えるような仕様にはなっていません。改造・自習用にどうぞ。
ブログの都合上、改行不要なところに改行が入っていますので、注意してください。

仕様は、クリックすると、商品IDと会員IDをPHPに送って、カラーミーショップAPIで必要項目をとってきます。
上例では、商品ID、商品名、会員登録しているメールアドレスを、お店にメール送信するようになっています（ログインしていないとメールアドレスは空です）。
$toがお店宛。
お店メールで受けて、お店でメモするなり管理します。

商品詳細ページから必要な情報をすべて送れるなら、カラーミーショップAPIは不要（本当に必要な情報は、商品名とメールアドレスくらい）。

ログイン限定にするなら、会員の名前も送って、会員IDと名前をカラーミーショップAPIでチェックすれば、いたずら避けになるかと思います。

ログイン不要にするなら、メール登録の入力フォームを開くときにサーバーからトークンを送ってもらうかたちにします。検索するとトークン生成の方法が見つかります。
クリックするとPHPを呼び出し、PHPで入力フォームを作って、そこでメールアドレスを入力してもらうようにします。
他人のメールアドレスを勝手に登録されるようないたずらは除外できません。

上例には例外処理を書いていません。
例えば、送られてきた会員ID・商品IDが該当しない場合（これはありえます）。カラーミーショップAPIでエラーになるので、その場合の処理が必要です。

3. おわりに

データベースに登録～在庫チェック～メール送信までの流れも検討しましたので、まとまった時間のあるときにでも、試してみようかと思います。

とはいえ、自分自身で調べられる方でないと、実際に運用していくことは難しいかもと思います。

再入荷お知らせメールの話2へ続く。

[参考]
「IPA - 安全なウェブサイトの作り方」
セキュリティ上の問題となる箇所と対応について記載されています。ウェブアプリケーション構築において重要な話題ですので、ご一読を。

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

2016-08-08T23:55:00.003+09:00

「カラーミーショップ大賞2016」のノミネート一覧が発表（約840店舗）されてから随分経ってしまいましたが、今年もわりと丁寧にチェックしてきました（遅ればせながら）。

今年のノミネートショップから気づいた点は、

レスポンシブが増えてきている
お知らせ欄があまり使われなくなった
CSS3のアニメーション効果が増加
www.をつけないURLが増えた
画像にPinterestのボタンがやや増えてきた
グローバルナビゲーションが減ってきてるかも
3カラムが減ったかも

比較的新しい機能も実装されてたりで、いずれも時代の移り変わりのような流れを感じます。游ゴシック、游明朝をみかけるようになって、プッシュ通知がついていたところもありました。

トップページをカラーミー以外で作っているサイトも多く、カラーミーショップのカート部分だけをどこでもカラーミーでつけていることも多かったです。
サイト構成を凝った感じにできますし、一見するとネットショップらしくないデザインにできるので、おっという感じになります。

見て楽しそうなのを選びましたので、お楽しみください。

1カラム

カメラケース・カメラバッグ通販の静岡日和ストア

商品数が少ない場合には1カラム。広く使えるので、お店のイメージを全面に押し立てる感じに。
トップページを綺麗に作ってありますし、他ページも細部まで丁寧。

鳥さんのオリジナルグッズ・鳥柄雑貨 BIRDSTORY SHOP

愛らしさが存分に伝わる、広々としたトップページ。
トップページ以外は2カラムで、サイドバーに機能を配置。うぉって感じです。

2カラム

パンと日用品の店　わざわざ

ヘッダーに大きいスライダー。かなり印象的。
大部分がカラーミー以外なので、デザインの自由度もかなり高め。

光浦醸造｜公式ホームページ・オンラインショップ｜

3カラムっぽい2カラム。カラーミー以外の部分もあって、複雑な構造。
フォント（游ゴシック体）の雰囲気が合っています。

3カラム

新潟Ｔシャツ委員会

ショップサイトなのに、別もののコンセプトを感じます。
商品詳細ページにFacebook Comments Pluginでコメント欄を設置（他ショップでもまれにあり）。

のぼり旗の反応率がダントツ！【デザインのぼりショップ】

3カラムらしい、詰まった感じが好きです。
共通部分にバナーをいっぱい貼りたい場合はやっぱり3カラム必要。

おわりに

レスポンシブの有料テンプレートをベースにしているサイトも、結構多かったように思います。

CSS3のセレクタとCSSの画像置き換えを使って、カート画面（SSLページ）の画像を差し替えているお店がありました（いま現在、カラーミーショップの店舗は閉店されていました）。これはちょっと使えるなと。いつかご紹介させていただきます。

去年の記事「参考にしたいカラーミーショップ 1～6」も、結構面白いので、ぜひどうぞ。

ココナラにサービスを出品してみた（感想編）

2016-07-21T00:32:00.002+09:00

今年の2月から、ココナラにてカラーミーのカスタマイズ相談を無料でお受けしておりましたが、当初の限定数に達しましたので、一旦終了となりました。ご相談いただいた皆様、ありがとうございました。

おひねりをいただいたり、仕事のご依頼をいただいたりと、最初に想像していた以上に、たくさんのものをいただいた気がします（大変勉強にもなりました）。

無料でしたし、お試ししやすかったのかもしれません。
ココナラの仕組みも、思っていた以上に使いやすかったです（実際使ってみるまでは、どんなものかなぁと不安半分でしたが）。
ココナラは、Facebookアカウントでログインできますので、その点も手間が少なくてよいです。

1. よくある質問と、困ったときどうしようかという話

ご相談内容は、大体こんな感じでした。
・あれを設置して
・表示崩れのデバッグ
・カラーミーの機能的な質問

質問を受けて（多くの人へ向けて）、いくつか記事を書きました。
カラーミーショップはご自身でカスタマイズされるオーナー様が多いですし、デベロッパーツールとデバッグの話は、自分でカスタマイズするのに必須だなぁと痛感しました。

オーナー様ご自身でカスタマイズするのはカラーミーショップの特徴でもありますが、実際に中をいじるにはちょっとした知識と慣れも必要で、そのギャップがストレスになることもあるのではないかと思います（特に忙しい開店時は、やることも多く、時間がたりなかったりして）。
問題解決のとっかかりとして、デベロッパーツールとデバッグの考え方を早めに頭に入れておくと、時間節約に役立つと思います。

自分で解決できない問題に遭遇したときに相談する先として、カラーミー公式には「カラーミーショップ - 助け合い掲示板」と「サポートコミュニティ」があります（マニュアル・よくある質問もあり）。
一般的な質問でしたら、過去ログを検索すれば、回答が見つかることも多いです。
またカラーミー公式には、メールでの問い合わせがありますので、機能や一般的な質問はカラーミー公式に尋ねてもよいと思います。

個別的な質問については、公式掲示板では回答もつきにくく、最近はあまり機能していないように見受けられます。新規の人にとっては心配なところ。
公開される掲示板という性質上仕方ないのでしょうが、ソースのコピペを貼って、どこがおかしいか教えてほしいという質問の仕方も、回答する側からは調査しづらいんじゃないかなという気はします。

そのほかでは、カラーミー公式で、制作パートナー紹介サービスもやってます。
一部分だけなら費用も抑えられますし、困ったときは一考の余地ありかなと思います。

2. ココナラの良かった所

ココナラはプライベートなやりとりのみなので、副管理者としてログインさせてもらえるので、デバッグ作業は大分楽でした。
似たようなことで困っている別の人には届けられないのが難ですが、ブログネタになりそうな話は、あらためて記事として話題にできればと思います。

3. おわりに

私のココナラでのサービスは一旦終了ですが、Facebookのほうにいますので、機能の話やデバッグのような軽めのご質問でしたら、メッセージをいただければ回答できると思います（8月末までの期間限定で）。
ついでに、いいね！していってもらえると喜びます。

不具合の見つけ方、デバッグのセオリー

2016-07-02T18:16:00.002+09:00

ソフトウェア開発におけるプログラムの不具合修正をデバッグといいます
（不具合とは、意図したとおりに動作しない・表示上の崩れなどで、バグと呼んだりもします)。

カラーミーショップをいじっていて、デザインがくずれたり、意図したとおりに表示しなかったり、jQueryがうまく動作しなかったり、トラブルに見舞われることがよくあります。

ご自身でショップ制作をされている方も多いと思いますが、デバッグも自分自身でとなると、それなりに経験がないと難しかったりします。

とはいえ、デバッグのセオリーというものがあって、知識としてインプットすることはできます（そして、本職でないかぎり、知らないままやり過ごしている場合が結構あります）。

デバッグに興味がございましたら、少々長くなりますが最後までお付き合いください。

0. 軽微な不具合について

単純な記述ミス（スペルミス・閉じタグがない）、ブラウザの種類・デバイスによる表示の崩れ、CSSが効いていないなど、軽微な不具合は多種多様です。

いくつかあたりをつけて、デベロッパーツールで問題箇所を特定することになります。
問題箇所からキーワードを検索するなりして、ヒントをもらい修正します。

ヒントが見つからない場合は、とにかく試行錯誤します（慣れが必要）。
デベロッパーツールで、HTMLのブロックを見たり、追加したり・消したり、CSSの順番をみたり、CSSの設定箇所を把握したり、具体的な使い方は検索すると見つかります。

デベロッパーツールはやれることが多くて、解説記事を読むのも大変ですが。

・パッと見で問題箇所がわからない場合

動いていた／動かなくなった、表示されていた／表示がおかしくなった、二つの状況がどのように生じたか把握できている場合があります。たとえば、

いついつまでは動いていた
ここまでは動いていて、ここからは動かない
どこそこをいじったら動かなくなった

「いついつまでは動いていた」は、時期の前後で何かしら作業を追加したことに起因していると推測できます。
「ここまでは動いていて、ここからは動かない」は、その境目に問題箇所があると推定できます。
「どこそこをいじったら動かなくなった」は、それが問題箇所だとすぐに分かります。

ただ、ショップ制作の規模が大きくなって作業量も増えていた場合、不具合が気づかないうちに生じていて、どの作業が影響を及ぼしたか判然としないことはしょっちゅうあります。

次は、もっとやっかいな場合について考えてみます。

1. 原因不明の不具合について

原因不明な場合は、まず不具合の問題箇所を見つける必要があります。
そして、下の考え方こそが、デバッグの最も重要なセオリーです。

不具合の再現条件を明確にする

これだけだと、ちょっと分かりにくいですね。
不具合の再現条件を明確にするために、こんな風にします。

1. できるかぎり小さくして試す（範囲を明確にする）
2. 正常・異常時の差を見て、差異から問題箇所を推定する（条件を明確にする）

このセオリーは知識と経験がほとんど不要で、問題箇所を見つける際に大変有効です。

頭を使うのではなく黙々と手を動かし、試行錯誤を繰り返すことで、不具合の問題箇所を発見します。

もう少し具体的に説明してみましょう。

2. そもそも、一度も正常に動作していない場合

あるページを参考にして自分のページに機能を設置して動かなかった場合、他人のコードをカラーミーショップにコピペして設置して動かなかった場合、自分でコードを書いて動作しなかった場合など。いずれも、一度も自分で動作させていない場合についてです。

たとえば、カラーミーショップにjQueryプラグインを設置したら思ったように動かなかった場合、jQueryの問題か、カラーミーショップの問題か、どこから生じている問題なのか切り分ける必要があります。
カラーミーショップにいきなり設置したりせず、最小構成で動作させる環境を用意して、一度動作させるところから試します（PC上で最小限のHTMLを書いて、そこに設置したりします）。

問題の切り分けは、再現条件を明確にするために非常に重要で、デバッグの基本です。

カラーミーショップ上でしか動作確認できない部分（Smartyの箇所など）も、可能な限りコードを減らして動作テストをします。これも不具合の再現条件を明確にするために重要です。

自分で書いたコードなら、コードを削れるだけ削って、一度動作させるところからです。

一度動作したのなら、そこから、やるべき作業を一つずつ積んでいきます。
動作しなくなるポイントから、問題箇所を推定します。
そのあと、適切な検索キーワードを選び、ネットで調べ、修正します。

3. 原因不明で動作しなくなった場合

取っ掛かりが見つからない場合に使う方法がこれ。
正常・異常時を比較して、不具合の再現条件を明確にする方法です。

たとえば、
動く／動かない、表示される／表示されないの二つの間には、なにかしら差があるはずです。

その差（両者の違い）の部分には、不具合の問題箇所があると推定されます。
その差異を一つずつ確認していくことが、すなわち、不具合の再現条件を明確にすることになります。

・追加した作業を一つずつ巻き戻す

たくさんの作業をして気づかないうちに崩れていた・正常に動作しなくなっていた、数日経ってから気づいたが原因が思いつかないなど、そういうことはよくあります。

追加した作業を一つずつ削っていき、正常に動作していたところまで巻き戻しながら、不具合の再現条件を明確にします。

・大きく戻して、作業を一つずつ積んでいく

どのタイミングまで動いていたか分からない場合は、大きく戻しましょう。

正常時のバックアップが必要になりますので、あらかじめこまめに取っておきます。

大きく戻した上で、追加した作業を一つずつ積んでいき、不具合の再現条件を明確にします。

いずれの場合も、ある時点で、不具合が再現する・しないの境目に行き当たるはずです。そこから問題箇所を推定し、推定される理由から、適切な検索キーワードを選び、ネットで調べ、修正します。

4. その他

デバッグの最も重要なセオリーはすでに紹介しましたが、その他で押さえるべき点を補足します。

・いったん冷静に。エラーは出ていないか？

エラーが出ているのに見逃していることがあります。デベロッパーツールのコンソールを見ましょう。

・その再現条件は本当に明確か？推定される理由は間違っていないか？　

自分の予想が間違っていることはしょっちゅうですので、自分のなかの理屈に固執しないこと（自分の先入観で延々ハマることがよくあるのです）。

ハマっているときは、問題箇所まわりをいじって、手がかりを探しましょう。愚直に試行錯誤することで取っ掛かりを掴むことも必要です。

・実はデータが間違っている

コードでは正しくて、実はデータが間違っていることもあります。

・コードに注釈をつける

困難なデバッグの末に対応方法を編み出したとしても、一年も経つと、なんでこんな風になっているか忘れます。コメントはきっちり付けておくこと。

・検索しても、解決のヒントが得られない

問題箇所が推定できても、理由を考えて直さなければいけません。
直し方がわからなければ、検索することになります。そこでヒントが見つからなければ、お手上げです。
それ自体をあきらめるか、別の手段を探すか、頼れる人がいるなら聞くか。

5. おわりに

行き詰っているなと感じたら、セオリーに立ち返ります。
たくさん試行錯誤すれば、おのずと勘所がわかるようになります。

デバッグには、達成感があります。
悩んで、調べて、たくさん時間をかけて、そして実際に経験して知識を得た、という成長の証でもあります。

デバッグは、自分で解決することで、大きく成長します。何度も経験していくうちに、成長の機会だと思えるようになります。そうなると、しめたものです。

記事の構成が難しくて、すこし置いてから読み直してみます。
こんど書き直すことがあったら、デバッグ・フローチャートを作ろうと思います。

デベロッパーツールはWeb制作に必須！！

2016-06-17T23:06:00.002+09:00

Web制作が生業の人なら皆使っている便利ツールに、デベロッパーツールがあります。
カラーミーショップをご自身でいじってらっしゃる方で、ご存じないようでしたら、ぜひおススメしたい！

ということで、今回はデベロッパーツールの話題をとりあげます。

0. デベロッパーツールとは？

Web制作中に意図しないデザインずれが生じて、原因究明に手間どることがよくありますが、そういう場合にデベロッパーツールはいろいろと役に立ちます（解決のヒントが得られる場合や、直感的なデバッグにも）。

デベロッパーツール（Chrome）、開発者ツール（IE）、インスペクタ・Firebug（Firefox）と呼び名は違いますが、各ブラウザに標準搭載されています。
Chromeのデベロッパーツールが一番多機能だと思います。

主に、不具合の調査に使うというイメージでよいと思います（その他機能も多いですが）。

検索すれば、解説記事はいくつでも見つかりますが、デベロッパーツールの機能が豊富すぎてか、少々敷居が高く感じられることがあります。

ということで、一分くらいで読める導入記事を書いてみました。
初めての方へのとっかかりとして、必要最低限のポイントに絞っています。

1. 一分で読めるデベロッパーツール入門

ツール起動：Windows「F12」、Mac「Command+Option+I」
起動後の全体は下のような感じ。右エリアにコード、スタイルなどが表示されます。

使用する右部分を拡大して、よく使うところに赤枠で目印をつけました（下画像）。

・上の赤枠（左から順に）

調査する要素を指定するカーソル（カーソルもっていくと要素まわりが確認できます）
まずこれを押してから調査です。

デバイスツール（デバイスごとの表示サイズを選べます＝RWDの表示テストに使ったり）

Elementsパネル（HTML要素などが表示されます＝一番よくみる場所）
HTMLタグをためしに追加したり、消したり。

Consoleパネル（エラーログが出ます＝JavaScriptを書いたときに便利）

・下の赤枠

Stylesは、カーソルで指定した要素の適用されているスタイルシートの内容が確認できます。
効いているスタイルを確認したり、ためしに追加したり、数値を変えたり、消したり（チェックボックスのオフ）。
スタイルに起因するデザインずれなどを見つける、超重要ポイント。

ためしてみるということが、デベロッパーツール上だとパパッと済んじゃいます。
適当にカーソルを当てて、クリック、ダブルクリック、Delキーなんかを押せば、思ったとおりに反応してくれます。なんとなくで使えます。
初めて使うのでしたら、必要な機能はこんなところです。

2. もう少し知りたい方は、他の方の記事を読んで

メリット、使い道、使い方について、丁寧に説明されています。
Webデザイナーのためのデベロッパーツール入門

3. おわりに

デベロッパーツールが使えるようになったんだけど、あいかわらず原因がわからず、はまるんだけどって話もよく聞きます。
デバッグの仕方・手順・考え方は重要な技術のわりに、話題としてあまり見かけません。経験が大きく物を言う部分だからかもしれません。

独自ドメインの話題をいくつか

2016-06-12T13:02:00.001+09:00

【仕事サイトにドメイン関連記事を書きました】
カラーミーショップの独自ドメインについて詳しく解説します

以前、「北欧、暮らしの道具店」様みたいなサブディレクトリを作成できるのかとサポートコミュティで質問されている方がいらっしゃって、そのときはペパボの方が回答されていました。
案外、需要がありそうなのか、そのときの話を正式なサービスとして告知されました。

コンテンツマーケティングでファンを増やそう！[WordPressドメイン統合開発ご紹介]

上の記事に書いてある通り、別ドメイン・サブドメインで運用するよりも、お店サイトのSEOに有効であるという話です。
費用などの兼ね合いにもなりますが、うっすら覚えておくと、あとで役に立つかもしれません。

ということで今回は、カラーミーショップにおける独自ドメインの話題。

0. 独自ドメインの取得について

独自ドメインは、お店のSEOとブランディングの面などで有効と考えられています。

.com（誰でもOK） .co.jp（日本法人） .jp（日本在住）のように、取得条件があったりもしますが、数十円～数百円／月と安価な費用で運用できます。

ドメイン設定については苦手な方も多いと思いますが、私もそうですが、いじる機会がほとんどないことが理由だと思います。

カラーミーショップのよくある質問として、丁寧にまとまっています。ご一読を。
よくある質問－ドメインについて

1. 独自ドメインをムームードメインで取得する

ムームードメインは、カラーミーショップと同じくGMOペパボ提供のドメイン取得サービスです。

カラーミーショップとの連携が簡単で、設定も比較的簡単です（はじめてでもなんとかなるくらい）。手順のマニュアルもしっかりしています。
とはいえ、（オーバーかもしれませんが）一生に一回くらいしかやらないことだったりするので、ハラハラするかもしれないです。

ショップを example.com 、ブログを blog.example.com に割り当てて、運用することが可能です。ショップにサブドメインを割り当てることも可能。

blog.example.com のようなものをサブドメインと呼びます。
カラーミーショップでサブドメインを使用するなら、ムームードメインを選ぶのが吉。

2. ムームードメイン以外で取得する

お名前.comなどでも取得可能ですが、ムームードメイン以外は、サブドメインを割り当てるための知識（DNSレコード、ネームサーバーなど）が必要になって、結構大変です。

ショップを example.com 、ブログを blog.example.com とすることはできますが（ただし、どこのサービスを使うかにもよるかも）、逆に、ショップを shop.example.com 、ブログや会社のページを example.com とすることはできないっぽいです。

多分、カラーミー側の都合だと思います（やってて気づきましたが、IPアドレスの逆引きをすると、他のお店も同じなんですね。サーバーのサブディレクトリを借りてるようなイメージでいいのかな）。

ムームードメイン以外では、カラーミーショップのサブドメイン設定が完了しないので、ムームー以外でDNSレコードを追加しても、上手くいかないのだろうと思います（404が出ます）。

カラーミーショップのよくある質問にも書いてありました。

『ムームードメイン』以外でご取得、管理されているドメインでは、サブドメインをご設定いただくことはできません。

そういうこともあって、ムームードメインにドメイン管理を移管するほうがおすすめ。

3. サブディレクトリを作成する

Webに公開されるルートディレクトリ（ドキュメントルート）の下にサブディレクトリ（例の場合は、blog）を作成することも可能です。
ドキュメントルートに example.com を割り当ててやると、URLが例のようになります。

例）http://example.com/blog/

カラーミー側でリライトするように設定してくれるのかな。
興味のある方は導入部でも紹介した記事をご参考ください。

コンテンツマーケティングでファンを増やそう！[WordPressドメイン統合開発ご紹介]

4. おわりに

どこそこさんが使っている機能は、実はプラチナプランで作ってもらったやつでしたという話を聞いたことがあり、ぱっとみ無理っぽい機能だったので、なるほどと納得したことがありました。
私自身も、カラーミーに機能の問い合わせをしたさいに、エンジニアさんの一人日いくらで見積もりできますよと、返信をいただいたことがあります。

機能のオーダーメイドをしてもらえる、という可能性を選択できることは、いいなと思います（費用がどうとか、するしないを別にして）。

ココナラでドメインの話題を振っていただいたので、この機会に知識を整理して、テストする環境を用意して、実際でいろいろいじってみようと思っています。
憶測が入っていますので、のちほど、追記・訂正するかもしれません。

【補足】
記事内でブログと書いていますが、レンタルサーバーを借りてWordPressを導入している場合や、Google Bloggerのようなドメインが付けられる無料ブログサービスについての話です。
無料サービスのなかには、ドメインを割り当てることが無理な場合も多いです。

ただいまmy作業中です

2016-04-20T00:25:00.000+09:00

ブログ更新を少々お休みしておりましたが、my仕事サイト制作をしていました。
ディレクションからデザインまで、時間を取って、しっかり作ってみようと思っています。

長らく、このブログの古い記事を見直したいと思っていましたが、my仕事サイトにブログの記事のいくつかをリライトしようと思っています（視覚的に理解するための図が少なすぎますよね）。
昨今流行の、オウンドメディアというやつです。

my作業中のため、今回はいじりたおしネタはありません。

0. 現在、ちょこっと無料でお手伝いしています

引き続き、募集しています（一時間くらいで終わる小作業なら代行します）。
作業時間は私が見積もりますので、何がなんだかよくわからんという方も、お気軽にお問い合わせください。
カラーミーのカスタマイズ以外にも、困りごと相談全般OKです（回答できる範囲でさせていただきます）。

現在このようなサービスを限定にて、ココナラに出品しています。facebookのアカウントをお持ちでしたら、ユーザー登録はすぐに完了します。
条件等ございますので、内容の詳細につきましては、向こうのサイトでご確認ください。

★お一人でカラーミーショップをカスタマイズされているショップ・オーナー様向けとして、無料（限定）で提供させていただいております。

★制作会社や知人にお願いしてカスタマイズされている方は、申し訳ございませんが、当該制作者様にお問い合わせください。

★具体的なサービス内容は
カラーミーショップを始めたはいいが、使い方がわからない。
今後、自分でカスタマイズしたいので、テンプレートのココを教えてほしいんだけど。
こんなかんじでいいの？　みたいな確認など。
カスタマイズ後の解説が必要でしたら、ご自身の習熟度と共にお伝えください。

★最大1時間くらいを目安に、お手伝いさせていただきます。

1. 今月末まで有料テンプレート半額

対象は新規の方のみですが、すぐにでも開店したい希望をお持ちの方には、これおススメ。
結構、使いやすそうなテンプレートですよ。制作会社にフルカスタマイズで頼むと、結構するんですよね。

自分でいじれる方は、シンプルな無料テンプレートをカスタマイズして使いやすくするのもよいでしょう。
私も、ここらへんの需要（こじんまりとしたカスタマイズ）から、仕事としてお受けしていこうかと考えています。

2. カラーミーショップ大賞の発表は、5/13

私、今年も面白いネタを発掘してきます。お楽しみに。

【追記】
このたび熊本地震によって被災された皆様へお見舞い申し上げます。
ふだんより多くのことを思い、考えます。なかなかうまく纏まらない。

カラーミーショップにおける配送会社の話題

2016-03-24T00:14:00.003+09:00

恒例のビックイベント「カラーミーショップ大賞2016」の投票が、3月24日23:59までとなっています。

ノミネートショップに知り合いのお店が出てないか眺めてきましたが、丁寧に作られたお店が多くて、私のデザイン＆カスタマイズ魂が高揚しています。
今年も全チェックして、勉強させてもらいます。その結果はまたのちほど、別の機会で。

0. 管理画面のおしらせ欄について

皆さん、管理画面のおしらせをチェックされていますか？
最近頻繁に更新されている大賞ショップのPR記事が面白いと気づいて、過去にさかのぼって読んでたりします（おしらせ内のECコラムというセクション）。
記事を眺めながら、読者にどのようにしてショップや商品のストーリーを伝えるのか、自分ならどうするだろうかと考えています。

そのほかにも、ためになる内容（機能改善の話題など）があったりして、なかなか有用です。「カラーミーショップのおしらせページ」
RSS配信も行われているので、気楽にチェックできます。

で、昨日更新された話題がコレです。
「ぶっちゃけどの配送会社を使ってますか？ショップ店長さん100人に聞きました。」
ネットショップされる方、みんなが気になる話題で、カラーミーショップの良い仕事です。

これからネットショップを始めようと考えている方は、ご参考にどうぞ。

1. 利用されている配送会社

皆さんは、配送会社をどんな基準で選びますか？

前述のECコラムのアンケート結果によると、配送料金、運送会社への信頼度、追跡サービスの順となっています。
私はシステムや配送業務の面から、全国一律の料金が簡便でベストだと思います（そんな都合の良いのはないのだけど）。

さて、アンケート結果によると、利用されている配送会社は下の通りです（ECコラムから、画像で切り抜いてきました）。

印象としては、上二つが「運送会社への信頼度」、下二つが「配送料金」で選ばれているように感じます（ざっくりと）。

以下の内容は大部分が、60-120サイズくらいの一般的な荷物を送る場合の話です。

見積もりを取ったときに比較しましたが、西濃運輸は配送料金がかなり安いです（大口契約で本州宛の場合）。

西濃運輸の配送料金とサービスは……残念ながらトレードオフです。西濃運輸を利用するには、サービス面で割り切りが必要です。
大きな荷物を安い料金で、というショップには向いているかもしれません。
時間指定不可、日祝配達不可というエリアがちょいちょいあります（通販でこれは厳しい気もしますが、取扱商品にもよるのかな）。

佐川急便も西濃運輸ほどではありませんが、配送料金は安いです。配達日時指定ができるので、こっちのほうがサービスは良いです。

アンケートで一番人気な日本郵便。サービスが広範で、個人的にも大好きです。
ゆうパックの場合、月20個以上から大口・後納契約をしてくれます。
後納契約とは、月締めでまとめて費用を支払う契約です。

（他の配送会社と違って）離島料金がないので、カラーミーショップで設定しやすい。

全国一律料金のレターパックも便利。
小サイズ用に、定形外郵便、ゆうメール、ゆうパケット、レターパックなど、選択肢多め。ポスト投函・手渡し、追跡や料金で選択できます。
ゆうパケット、レターパックプラス、ゆうパック、EMSは集荷に来てくれます。

海外宛なら小型包装物（スモールパケット）、eパケット、EMSと、日本郵便の独壇場。
それ以上になると、ヤマトグローバルロジスティクスなどにお願いすることになります。

郵便局ネットワークは局留めが便利で、不在がちのお客様も受け取りやすいです。

送料無料のヨドバシカメラでも、ゆうパックで送ってくることがありますが、契約どうなってるんでしょうね（注文日のその日に届いたりしますし）。

ヤマト運輸。ブランド力か、「ヤマトで送って欲しい」と言われることがあります。
配送料金は比較的やや高めで、信頼度重視で選ばれます。

2. カラーミーショップのシステム面について

カラーミーショップでは、管理画面＞ショップ作成＞配送でいくつかの項目が設定できます。

取扱商品が大・小ある場合は、商品重量を基準に設定→送付先別設定で、いい具合に配送料金が計算できるように設定することになります（商品の組み合わせが複雑になると、なかなか思い通りにいかないけれど）。

いくら以上で送料無料という設定もありますが、送付先によって配送料金が大きく異なる場合は、なかなか厳しい（最大○○円引きというようにはできない）。
多くのショップが、配送料金が高い北海道・沖縄・離島まで送料無料になると都合悪い、と思っているはず。
こういう部分は、最終的には手動になるので、配送業務の面で負担になってきます。

カラーミーショップは、いろんな部分をシンプルにして、簡単に使える、という点が最大の特徴なのでしょうから、配送についても、できるかぎりシンプルに、簡便な方法を選ぶのがカラーミー的といえるのではないでしょうか。

個人的には、シンプルで、わかりやすい配送料金設定がお客様に親切かな、思います。

荷物のお問い合わせフォームを設置する

2016-03-13T21:44:00.003+09:00

確定申告の期限前のこの時期は、個人事業主の皆さんはぐったりされている方も多いことでしょう。
理由は様々でしょうけど、簿記を分からないなりに、自分でやってる方が結構多いですよね。
時間は掛かりますが、慣れれば、仕訳も書類作成もできるようになりますし。

とはいえ、書類作成に多大な心理的負担がかかっている方は、税理士さんに投げちゃったほうがいいんじゃないかなぁと思います。コストも大したことありませんし。

ということで、私もこの時期はなにかと忙しくしておりますが、あと少しの辛抱です。

さて今回。
配送会社のWebサイトにある、荷物のお問い合わせフォームを、カラーミーショップに設置する方法についてです。
完成イメージはこんな感じ。うちにも付けたいなと思っていただけたら幸いです。

0. HTMLのformタグについて

まず、formタグについてです。<FORM>－HTMLタグリファレンス
デザイン関連のHTMLは理解しているけど、formタグは知らないという方、結構多いと思います。
サーバーとのやりとりがイメージしにくいのか、少々とっつきにくい印象です。

ということで、ざっくりとした説明。
1. type="submit"となっているところのボタンを押すと
2. <form>～</form>内の、inputタグにあるname属性とvalue属性の値をサーバーに送って
3. PHPやCGIなどで処理して、結果を表示

荷物のお問い合わせフォームを設置すること自体は難しくありません。
配送会社のWebサイトから<form>～</form>内の必要項目をコピペすれば、カラーミーショップにも設置できるという話です。

1. ヤマト運輸の「荷物のお問い合わせフォーム」

クロネコヤマトの荷物お問い合わせシステムから一部抜粋

<form method="post" action="/cgi-bin/tneko" style="margin: 0px;">
<center>
<table border="0" width="no">
<tr>
<td align="left">詳細情報　
<input type="radio" name="number00" value="1" checked>あり
<input type="radio" name="number00" value="2">なし
</td>
<td align="center">
<input type="submit" name="sch" value="お問い合わせ開始">
<input type="button" value="　　クリア　　" onclick="javascript:clearText(this.form,10);">
</td>
</tr>
</table>
</center>
<hr width="750">
<table class="ichiran">
<tr>
<th><br></th>
<th colspan="2" class="lf">
<font color="#990000" size="3"><b>お問い合わせ伝票番号</b></font>
</th>
<th><font color=#990000 size=3 class="ct">日付</font></th>
<th><font color=#990000 size=3 class="ct">配達状況</font></th>
</tr>
<tr>
<td><br></td>
<td colspan="4"><font size="2"><span style="FONT-WEIGHT:NORMAL;">枠の中にお問い合わせ伝票番号を入力してください。<br><br></span></font></td>
</tr>
<tr align="middle">
<td class="number">
<font size="3">　１件目</font>
</td>
<td class="input">
<input name="number01" size="20" maxlength="14">
</td>
<td class="denpyo"><br></td>
<td class="hiduke"><br></td>
<td class="ct"><br></td>
</tr>
（以下、省略）
</form>

必要な箇所はマーカー部分の5ヶ所です。
カラーミーショップで動かすために、少し手を入れます。

<form method="post" action="http://toi.kuronekoyamato.co.jp/cgi-bin/tneko" style="margin: 0px;">
<input type="hidden" value="1" name="number00">
<input maxlength="14" size="20" name="number01">
<input type="submit" name="sch" value="お問い合わせ開始">
</form>

送信先のプログラム名はフルパスで指定します。

本家にあったラジオボタンは不要なので、number00=1 固定で送ります。hiddenは、Webサイト上に表示はしないが送信する必要がある場合。

3行目は、type="text"が省略されています（type属性の値が"text"の場合は省略可能）。テキスト入力エリアが表示されます。
入力した数字がname属性の値とセットになって、number01=314159265358という具合にサーバーに送られます。

4行目のtype属性の値"submit"は、ボタンを表示します。実行、送信、検索などなど。この例では「お問い合わせ開始」というラベルがついています。
ボタンを押すと、action属性で指定したスクリプトが実行されます。

5行目。閉じタグ、重要ですね。

最後にCSSでデザインを指定すれば完成。

2. おわりに

先にも書きましたが、デザイン関連のHTMLは理解しているけど、formタグは知らないという方には、レベルアップのよい機会ではないでしょうか。
formタグは、カラーミーショップでも、「検索窓」や「カートに入れる」ボタンで使われています。このあたりをいじっていると、避けては通れない知識だと思います。

ヤマト運輸以外も、やりかたは同じです。

カラーミーショップにおけるSmarty入門

2016-03-06T22:34:00.001+09:00

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

カラーミーショップは、PHP用のテンプレートエンジン Smartyを使っています。
カラーミーショップのカスタマイズにおいてもたまーに使いますが、知らなくてもそんなに不便はありません。
今回は、実践的なサンプルを二つ紹介します。

Smartyとは？って方は、公式でご確認ください。まとまってます。「Chapter 1. Smarty とは? | Smarty」

Smarty使用の例としては、テンプレート内のこういうやつですね。条件分岐、ループなどに使用されています。

<{section name=num loop=$category}>

あと、カラーミーから提供されている独自タグ。これもそうです。カラーミーが用意してくれた変数に値（値、文字列など）が入っています。
ちなみに、JavaScript内でも使えます。

<{$product.id}>

<{ }>＝デリミタ、Smarty構文ですよ、というタグ。

マニュアルの細かい部分までは不要ですので、がっつり読まなくても大丈夫です。
「Chapter 5. 変数の修飾子」は、使う可能性大です。

1. 変数の修飾子を使った例

<{if $recommend[num].name|regex_replace:'/検索文字列/':'x' ne $recommend[num].name}>
<{assign var="style" value="red"}>
<{else}>
<{assign var="style" value="other"}>
<{/if}>

「Chapter 5. 変数の修飾子」にも記載されていますが、reg_replaceは、検索・置換機能です。

この例は、おすすめ商品の商品名のなかに検索文字列があればxに置換し、元の商品名と比較しています。
元の商品名と一致しない場合（すなわち、検索文字列がヒットした場合）は、条件分岐はtrueで、styleにredをセット。それ以外は条件分岐がfalseで、styleにotherをセット。

商品名のなかに何か（型番、色、形状、サイズ、グループなど）あらかじめ仕込んでおくと、絞込んだり、条件分岐に使えます（カスタマイズしていると、こういう判断条件が必要になったりすることがあるんです）。

xに置換して比較してというように少々回りくどいですが、Smartyの場合、検索文字列の有無は、こんな風にして判断します。

assignで、変数に値を代入できます。独自タグと使い方は同じで、<{$style}>を埋め込めば、値を使用できます。

例ではひとつですが、|（パイプ）をつなげていくと、左から順番に変数の修飾子を使うことができます。

2. Smartyの予約変数を使った例

「予約変数 {$smarty} | Smarty」を使用し、URLクエリを取って条件分岐に使ってみます。
予約変数はカラーミーショップのテンプレートにもしばしば登場しています（<{smarty.section.num.first}><{$smarty.section.num.iteration}>などがそう）。

<{if $smarty.get.keyword == ""}>
<input type="text" name="keyword" id="search_textarea" placeholder="検索" />
<{else}>
<input type="text" name="keyword" id="search_textarea" value="<{$smarty.get.keyword|escape:'html':'EUC-JP'}>" />
<{/if}>

検索窓にキーワードを入れて商品検索をするときに、ページ遷移すると入力したキーワードが消えてしまいます。消さずに表示したままにしてほしい、という要望があったときに使えます。

URLクエリからキーワード（keyword）を取ってきて、検索窓にセットします（escape以下は、キーワードが全角文字の場合にEUC-JPでエンコードする必要があるため）。

URLクエリとは、「http://www.example.com/?mode=srh&sort=p&keyword=test」の?以降の文字列のこと。PHPにパラメータ（今回は検索キーワード）を渡すときに使います。

妙なところに改行が入っていますが、ブログの表示の都合上で、本来は不要です。

3. まとめ

今回の例もそうですし、文字列を加工することもそうですが、どちらともJavaScriptでできるんですが、Smartyでやるほうが断然スマートです。

過去記事にもSmartyの話題がいくつかあります。ご参考にどうぞ。
ラベル：Smarty

カラーミーショップにおけるレスポンシブ入門編

2016-03-02T00:34:00.001+09:00

【仕事サイトにレスポンシブ関連記事を書きました】
カラーミーキットの中を見て、レスポンシブ対応について学ぶ

2012年頃からちらほら見かけるようになりました、レスポンシブ・ウェブ・デザイン（Responsive Web Design, RWD）。
昨年の「カラーミーショップ大賞2015」にノミネートされたショップを拝見していても、ずいぶんと使われています（とはいっても、全体からすると半分にも満たない、まだ少数派ですが）。

カラーミーショップは今年で11周年だそうで、その時代の環境に合わせて、機能拡張されています。
スマートフォンショップ用のデザイン・商品説明欄も、後に追加された機能ですし、レスポンシブ対応についても、後からなされました。

今回は、カラーミーショップにおけるレスポンシブ入門編として、導入部分についてご説明いたします。

1. カラーミーショップの設定箇所について

カラーミーショップにおける、レスポンシブ対応の設定は、唯一ここだけ。
管理画面の、ショップ作成＞スマートフォンショップ＞表示モード設定のドロップダウンメニュー「スマートフォン表示モード設定　PC版表示」です。

とはいっても、このページの設定、後から追加されているので、案外気づきにくいです。ということで、いまはデザインのページにもリンクが張ってあります（下図の下部参照）。
スマートフォンでレスポンシプテンプレートを利用する時の注釈が付いています。

スマートフォンでレスポンシプテンプレートを利用の場合は「PC版表示」に設定してください

ということで、レスポンシブ対応のテンプレートを使用する場合などは、グレーの網掛け部分の、「スマートフォンでの表示状態」を「【PCテンプレート】が設定されています」としておく必要があります。

2. カラーミーショップのテンプレート

カラーミーショップ公式にテンプレート一覧がありますので、レスポンシブ対応テンプレートを見てみましょう。レスポンシブ | ショップデザインテンプレート
4つが無料（WASHI、nano、Bit、カラーミーキット）。いずれもミニマルデザイン調で、利用ショップを選びそうな印象。

一方、有料テンプレートは6つあり、どのようなタイプの商品でも合いそうなテンプレートが見つかる感じで、デザインの選択肢が多い。そしてお値段するだけあって（といっても、人に頼むともっとする）、見た目の完成度も高いです。
綺麗に撮った商品写真があれば、即オープン可能じゃないですかね。

それ以外にも、Bootstrap風のCSSフレームワーク「カラーミーキット」というのも用意されています。完全自作派の方の作業効率アップ。
CSSフレームワーク - カラーミーショップネットショップ運営サービス

3. レスポンシブの一般的な説明

カラーミーショップ公式の読み物コーナーに、簡単な説明が載っていました。
Webデザイナーが詳しく解説！流行りの「レスポンシブ対応」のメリットって？ | ECお役立ち情報 – ネットショップ運営サービス【カラーミーショップ】

レスポンシブ対応のざっくりとした概要。
・ブラウザの横幅に対応して、段組が変化する
・ブラウザの横幅に対応して、画像の大きさが変化する
・ブラウザの横幅が狭いときは、メニューが変化し、内容の一部が非表示になる
・PC～スマートフォンまで、ひとつのWebサイトで表示できる

その多くがCSSで実装されていて、一部JavaScriptも使っています。
ブラウザの横幅の取得にはメディアクエリ（CSS3）を使用しますので、対応ブラウザはIE9以降となります（IE8の対応はもういいかなと個人的には思います）。

レスポンシブ・ウェブ・デザインは、デザインを厳密にコントロールできないので、趣味じゃない人もいらっしゃると思いますが、昨今そんなことも言ってられません（私もその一人なのですが）。

2016年になり、最早「流行り」と呼ぶ時期ではなくなっていますので、リニューアルを考えていらっしゃる方は、メリット・デメリットを含めて検討されてはいかがでしょうか。

4. おわりに

入門的な内容に終始しましたので、機会があれば、実践的な内容で続きをやりたいと思います。

前回記事の再掲。
日頃のご愛顧に感謝して、カスタマイズのサービスをココナラに出品しました。
料金は無料（限定）となっておりますので、手伝いやらご質問があればこの機会にどうぞ。
ココナラの登録は、Yahoo ID、facebookアカウント、メールアドレスが利用できます。

日頃のご愛顧に感謝して【募集終了】

2016-02-17T01:05:00.000+09:00

恒例のビックイベント「カラーミーショップ大賞2016」の告知がはじまりました。
結果発表とまとめページができたら、参考になるお店がないか、見て回ろうと思います。

1. 前回の話は長すぎたが、実はこれを書きたかった

前回は、本題に入るまでが長すぎて、中途半端に終わってしまいました。
これをお知らせしようと思っていました。

日頃のご愛顧に感謝して、カスタマイズのサービスをココナラに出品しました。
料金は無料（限定9枠）となっておりますので、この機会にどうぞ。
限定数に達しましたので、一旦終了。

内容の詳細につきましては、向こうのサイトでご確認ください。

★お一人でカラーミーショップをカスタマイズされているショップ・オーナー様向けとして、無料（限定）で提供させていただいております。

★制作会社や知人にお願いしてカスタマイズされている方は、申し訳ございませんが、当該制作者様にお問い合わせください。

★具体的なサービス内容は
カラーミーショップを始めたはいいが、使い方がわからない。
今後、自分でカスタマイズしたいので、テンプレートのココを教えてほしいんだけど。
こんなかんじでいいの？　みたいな確認など。
カスタマイズ後の解説が必要でしたら、ご自身の習熟度と共にお伝えください。

★最大1時間くらいを目安に、お手伝いさせていただきます。

カラーミーショップ、自分でカスタマイズできます？

2016-02-15T00:22:00.001+09:00

ブログ開設からもうじき7年目にとなります。
記事の内容が古かったり、拙いコーディングに加えて、必要な情報が引き出しにくい構造になっている点が気になっています。
季節はずれの陽気が、私のモチベーションを大幅に後押ししているのかも！？

さて。
新生活の始まる春は、ネットショップ開店に向いている季節です。カラーミーショップでネットショップを始めたいと考えている方（またはスタートを切ったばかりの方）もいらっしゃるのではないでしょうか。
今回は開店される初学者向けに、プラン選びと、カスタマイズのステップアップ手順をまとめてみました。

1. カラーミーショップの難易度は？

機能を知らなければ使えないのですが、最初から色々なことを知っていなくても、そこそこ作れるのがカラーミーショップです。
ブログの延長くらいのイメージで、始められるのではないでしょうか。それこそ、カラーミーショップ関連の書籍を一冊くらい目を通せば完璧。HTML初学者の方は、まずはここからですよね。

web制作からショップ運営まですべてを一人で始める方は、不安や心配になるかもしれませんが、少なくともカラーミーショップのカスタマイズについては、HTMLの参考書と時間があれば、なんとかなります。最初はショップ運営が比較的暇でしょうし、時間配分しながら勉強していきましょう。

HTMLをそこそこ使えるようになると、デザイン面でのカスタマイズの次、機能面をカスタマイズしたくなります。
ここから先は、ちょいちょい躓くかもしれません。
あなたは、機能面でのカスタマイズをしようと考えていますが、どこをどうすればいいのか分からず、途方にくれてしまいます。さてさて。

2. カラーミーショップの機能について

機能面でのカスタマイズは、カラーミーショップで何ができるかを知っておく必要があります。
あなたが、自分自身の力でカスタマイズに挑む場合において、最も重要なポイントです。

カラーミーショップを始めようと考えている方、すでに始めてる方を問わず必見の、機能一覧ページがあります（読んでない方は、ホント必見！）。

「機能一覧 - カラーミーショップネットショップ運営サービス」

知らない提供サービスが載ってたりしますよ。

上記ページはのプラン選びの参考にもなります。
エコノミーからプラチナまで5つのプランがありますが、個人でスタートするショップでしたら、エコノミープランかレギュラープランあたりを選ぶことになるでしょうか（エコノミーとレギュラーの違いは主に機能面）。

お試し期間中（レギュラープラン）に、必要な機能がどれか検討しましょう。始めたばっかりで、何がなんだかわからなくて心配という方は、私に相談してくださっても結構です。
そうそう、プランの変更は、契約更新のタイミングでおこなうことができます（わりと重要！）。

3. それは本当にできないこと？

あなたは、「こんな機能ないの？」と考えました。このあたりから、カスタマイズはグンと難しくなります。
「できない」かどうか判断することは、「できる」ことを把握するより、ウン十倍困難なのです。それは、なぜでしょうか？　

カラーミーショップは、数あるレンタルカートのなかでも、自由度が高いためです。
自分にできなくても、自分よりスキルの高い人からしてみると、実現可能ということがあります。

カスタマイズで分からないことがでてきたら、「カラーミーショップ - 助け合い掲示板」「カラーミーショップ - サポートコミュニティ」の過去ログを漁るとよいでしょう。
量も多く、自分の求める答えになかなかたどり着かないかもしれませんが、根気強く。
これらに質問を投稿してみてもいいですが、最近は、本当に残念なことですが、回答がつくことが少ないです。

カラーミーショップは、メールサポートもあります。仕様・機能については教えてくれます（個別のカスタマイズについては、さすがに無理です）。

こうやって、知らないことを調べているうちに、成長してきます。残念ながら、ノロノロと、です。このあたりからは、興味を持って調べられるくらい好きでないと、苦行になってきます。

しかしながら、スキルを身につけると、本当の意味でいじりたおせます。
自由自在にデザインできるし、いろいろと試しているうちに、簡単なプログラミングなら理解できるようになっているかもしれません。

そして、プログラミング経験者なら、カラーミーショップAPIを使って、足りなかった機能を自分で作ることもできます。かつてできないと思っていたことが、できるようになります。

それでも「やっぱり無理」という箇所は存在します。
このあたりまでくると、ようやく、できないことが分かってきます。

ここまでのスキルを必要とするかは各々次第ですが、普通はいらないです。
そろそろ、本業のショップ運営が忙しくなっているかもしれませんから、そちらに力をいれるべき。

4. 最後に

カスタマイズという険しき山、いかがだったでしょうか。話長くなりすぎました。
どのあたりまで、自分自身でやるかイメージできましたか？　ウン、二合目くらいでいいよね。

お金払うと、バスで登れます（安心）。
有料テンプレートを買うと、デザイン面で大幅に向上しますので、それこそ、HTMLの知識がなくて、開店できるくらいにはなるんじゃないでしょうか。

写真がよければ、結構いけるもんです。ということで、私はサイトデザインよりも先に、商品の写真やスライドショーの写真などのイメージに、力を入れるべきと思いますね！

続きます。

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

2016-02-07T17:42:00.001+09:00

7ヶ月前のことになりますが、「海外向けネットショップに Jugem Cartを使ってみる」という記事をを書きました（導入を検討するにあたっての要点と評価を私なりにまとめています）。
最近Jugem Cartでひとつ作りましたので、今回はJugem Cart導入について、より実践的な内容を記事にしました（といっても、それほど書くことは多くない）。

まず。
前回記事から改良された点と書き漏らしていた点。
・SSLページの言語が英語、中国語、日本語になった
・各国の送料が簡単にセット出来るようになった
・決済画面の配送方法の選択画面で送料が表示される（カラーミーショップにはなかった）

ちなみにJugem Cartマニュアルによると、「決済ページは、ブラウザの言語設定に合わせて自動的に最適な言語で表示されるようになります」だそうです。設定箇所があるのかと、管理画面内を探してしまいました。
注文時の自動送信メールも、言語設定にあわせて最適な言語で送られてきます（en-USで試してみました）。

1. Jugem Cartのテンプレートはどう？

選択できるテンプレートの数は多くありません。
カラーミーショップのテンプレートも少々の手間で移植できます。
スライドショー＆レスポンシブ・ウェブ・デザインを取り入れたテンプレート「Slideshow」が比較的使いやすそうに思います。これをベースに改造するくらいなら、大きな手間も掛かりません。

サンプルショップ Nocturna

2. カラーミーショップからの商品データ移行は？

CSV形式でダウンロード→アップロードと、手を入れずにそのままアップできます。とても簡単で、Jugem Cartを使う大きなメリットです。とはいえ、商品説明や商品名等は英語表記にするなどの手直しの必要あり（点数が多いと大変）。
カテゴリーの考え方がカラーミーショップとJugem Cartで違っています。そのためか、商品データをアップした後に、カテゴリー登録が必要です。商品説明に検索キーワードをあらかじめ仕込んでおくと、カテゴリー登録時にラクできます。
CSV形式なのでExcelで開いて、VBAでガリガリと項目セットする方法も使える場合があります。
必要な項目がうっかり入ってなかったりしますので、アップロードのテストはしたほうがいいです。
商品一括登録 - 項目説明

3. 在庫数連動してる！

カラーミーショップでショップ運営されている人であれば、Jugem Cartのこのメリットを最大限の生かせます。ショップ間の在庫管理という面倒な作業が減るので、カラーミーショップ同様に、手間の掛からないショップ運営ができます。

【追記1】商品データ新規作成時に、数十分経ってから連携することがありました（私の作成順序がおかしかった可能性大ですが、そんなことが稀にあるんだなくらいで）。
【追記2】カラーミーショップ連携中は「売り切れ時の商品表示」の「表示しない」が効かないようです（仕様っぽい）。

4. おわりに

Jugem Cartは万人には向きませんが、ショップ規模や費用が気になる層のハートはガッチリ心を掴みます。
忘れがちですが、連動しているのは在庫数だけです。Jugem Cart用に商品データをアップしないといけません。

下に追記した点は、留意が必要です。
【追記3】2016/2/8現在、公式によるとオプションの在庫数は連携未対応です。

【関連記事】・海外向けネットショップに Jugem Cartを使ってみる

2016年こそは

2016-01-13T00:04:00.001+09:00

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

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

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

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

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

2015-08-30T23:02:00.001+09:00

カラーミーショップには、最近チェックした商品（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編

2015-08-20T10:32:00.002+09:00

ネットニュースを眺めていると、こんな記事をみつけました。
「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

2015-08-04T22:21:00.002+09:00

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

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

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

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

1.カラフル

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

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

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

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

2.ピンク

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

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

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

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

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

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

カラーミーいじりたおし (新サイト:naeco.jp)

このブログでは、最後の記事になります

カラーミー公式の最近のお知らせ（抜粋）

0. 最近のお知らせから話題をピックアップ

カラーミーショップ公式ガイドを読んでみた

1. 公式ガイドの話

2. まとめ

カラーミーいじりたおしでよく読まれた記事

1. 最近の流行、集客を考えた新しいカートのかたち

2. カラーミーショップAPI

3. カラーミーのできないことの判断は難しい

4. ほしい物リストを付ける

5. 実は、カートを二か所につけることができる

6. Smarty？なにそれ

7. その他

最近、カラーミーショップで発生したスパムメールの話

再入荷お知らせメールの話3

1. コーディング（人柱版）

2. 簡単な説明

3. おわりに

再入荷お知らせメールの話2

0. 仕様と留意点について

1. コーディング（人柱版）

2. おわりに

再入荷お知らせメールの話

0. 一般的な「再入荷お知らせ」機能の流れ

1. コード

2. 妙な仕様

3. おわりに

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

1カラム

2カラム

3カラム

おわりに

ココナラにサービスを出品してみた（感想編）

1. よくある質問と、困ったときどうしようかという話

2. ココナラの良かった所

3. おわりに

不具合の見つけ方、デバッグのセオリー

0. 軽微な不具合について

・パッと見で問題箇所がわからない場合

1. 原因不明の不具合について

2. そもそも、一度も正常に動作していない場合

3. 原因不明で動作しなくなった場合

・追加した作業を一つずつ巻き戻す

・大きく戻して、作業を一つずつ積んでいく

4. その他

・いったん冷静に。エラーは出ていないか？

・その再現条件は本当に明確か？ 推定される理由は間違っていないか？

・実はデータが間違っている

・コードに注釈をつける

・検索しても、解決のヒントが得られない

5. おわりに

デベロッパーツールはWeb制作に必須！！

0. デベロッパーツールとは？

1. 一分で読めるデベロッパーツール入門

2. もう少し知りたい方は、他の方の記事を読んで

3. おわりに

独自ドメインの話題をいくつか

0. 独自ドメインの取得について

1. 独自ドメインをムームードメインで取得する

2. ムームードメイン以外で取得する

3. サブディレクトリを作成する

4. おわりに

ただいまmy作業中です

0. 現在、ちょこっと無料でお手伝いしています

1. 今月末まで有料テンプレート半額

2. カラーミーショップ大賞の発表は、5/13

カラーミーショップにおける配送会社の話題

0. 管理画面のおしらせ欄について

1. 利用されている配送会社

2. カラーミーショップのシステム面について

荷物のお問い合わせフォームを設置する

0. HTMLのformタグについて

1. ヤマト運輸の「荷物のお問い合わせフォーム」

2. おわりに

カラーミーショップにおけるSmarty入門

1. 変数の修飾子を使った例

2. Smartyの予約変数を使った例

3. まとめ

・その再現条件は本当に明確か？推定される理由は間違っていないか？　