2017年2月11日

カラーミー公式の最近のお知らせ(抜粋)

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

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



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


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

【予告】2月20日(月)「カラーミーショップ大賞 2017」エントリー受付を開始します
デザインの流行りなどをインプットするために、毎年チェックして勉強させていただいています。
見ていると、カラーミーショップって個性的な商品を取り扱っていたりすることが多いなぁと感じます。

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

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


コンテンツ重視の傾向は、公式のコラムで取り上げられていましたので、自分のお店に取り入れられるか興味がある方はチェックですね。
WordPress・Tumblrで制作したサイトにカートを設置!「メディアEC」デザイン事例10選


春から新規でネットショップをはじめようかと、検討されていらっしゃる方もいらっしゃるかもしれません。
私も以前、記事用に情報を整理したことがありますが、公式のコラムに良記事がありましたのでご紹介します。
比較!有料・無料ネットショップ作成サービスのメリット&デメリットと選び方

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

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

2016年12月10日

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

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

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

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

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


1. 公式ガイドの話


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

カラーミーショップでネットショップをはじめたい方向けの入口の本で、タイトルどおりです。
目次を抜粋してきました。
目次:
1 ネットショップビジネスをするために必要な知識
2 ネットショップを簡単につくれるカラーミーショップ
3 10ステップでネットショップをつくる
4 カラーミーショップ店舗運営の実務
5 自分のショップをプロモーションしよう
6 ショッピングモール「カラメル」に出店する


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

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

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

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


2. まとめ


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

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

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



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

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

2016年12月4日

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

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月6日

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

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

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

遭遇した状況は下記の通り。
発生時期 先週末から
状況 メール未着のエラーメールが山盛り
不具合 メールが届いていないとお客様から連絡がくる
1分で10件くらいエラーメールがきました。しばらくすると、カラーミーショップから連絡がきて、メールアカウントがロックされます(ロック解除はすぐできます)。

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

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

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

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

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

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

2016年9月3日

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


前回からの引き続きで、再入荷お知らせメールの話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アプリケーションの作り方」を読みましたが、大変分かりやすかったです。これは手元に置いておきたい。