商品詳細の説明欄と、JavaScript

カラーミーショップの商品説明欄にJavaScriptを埋め込む方法について。

商品登録時の説明欄は、説明文以外にもHTMLやJavaScriptを埋め込むこともできます。
ただし、カラーミーの環境設定で「自動改行する」にしている場合は、改行時に自動的に<br />タグが埋め込まれます。
説明文を書く場合には便利ですが、HTMLやJavaScriptを埋め込む場合は注意が必要です。

通常、JavaScriptを使用する場合は、<script>タグ内に記述しますが、改行時に<br />タグが自動で挿入されて、下のような感じになります。

<script type="text/javascript"><br />
<!--<br />
sample_func();<br />
// --><br />
</script><br />

Firefox3.6では問題ありませんでしたが、IE7（ほかのバージョンも該当するかも）では、構文エラーになり、関数がうまく動作しないことがあります。
おまけに改行も入るために意図しない空白も生じます。

ということで。
オレンジ部分のように、文の最後をコメントにすると良いです。<br />を自動的に挿入されても、コメントにして無効化することができます。

<script type="text/javascript"><!--
sample_func();//
// --></script>

【関連記事】
・カラーミーのフリーエリア考察

カラーミーは本当に875円なの？ 2

「カラーミーは本当に875円なの？ 1」から引き続き。
前回はカラーミーショップの費用面でのメリットを中心にまとめました。
今回はカラーミーショップの費用面に非常に関係が深い集客サービスについてです。

「カラーミーでショップ運営をはじめよう 2（2011年3月版）」でも書きましたが、カラーミーショップには「カラメル」というショッピングモールがあります。
ショッピングモールと呼んでいますが、ショッピングモール機能以外の部分（付随するサービス）も多いです。
網羅的かつ詳細な説明はカラーミー公式でご確認いただくとして、ここでは集客部分と費用面にポイントを絞って列挙していきます。

1.カラメル出店は出店自体は無料だが、販売手数料3.5%がかかる（発生要件は過去記事を参照）
2.カラメル出店「GMOとくとくポイント」共通ヘッダーが表示される（必須）
3.「GMOとくとくポイント」にログインして購入された場合は、販売手数料1.5%（正確にはカラーミー公式で）
4.カラメル出店者は、カラメル以外の商品掲載サービスを利用可能で、 販売手数料は別途
5.とくとくペイメントが利用でき、クレジットカード決済の手数料が安くなる

1は直接的な成果でなくても発生しますし、2・3にいたってはGMO（ペパボの親会社）の都合のような印象を受けました。カラメル出店しているショップ運営者様からは評判良くない印象。
4は任意。色々とプロモーションしてくれる有料サービスがあります。
5はメリットです。

重要なのはカラメル出店は任意で、自分で判断すれば良いという点。
「カラメルの集客力は？」というと、、、これまた議論のあるところです。
口コミを参考にするなら「カラーミーショップ - 助け合い掲示板」で検索して、各ショップ運営者様の意見を探していただければと思います。
出店しないことのデメリットもそれほどないと、個人的には考えています。


さて、二回にわたってカラーミーショップは本当に月額875円なのか検討してきました。
有料サービスやカラメル出店はそれほど必要とは思いませんし、実際に月額875円で運営されている方もいらっしゃいます。運営スタート時点は費用的にもお手軽にということが十分可能です。

次回は「ショップ独自のポイント制度について」です。
ひさしぶりにカラーミーの機能説明と実践的・具体的な話になる予定です。おたのしみに。


【関連記事】
・カラメルと販売手数料について 1
・カラメルと販売手数料について 2
・カラメルとGMOとくとくポイント共通ヘッダー

カラーミーは本当に875円なの？ 1

カラーミーショップは「月額875円～」 を謳い文句に、低価格を売りのひとつにしています。そうはいっても、美味いこといってるだけじゃないかと、半分疑っていました。
875円で使い物になるレベルなのか？　追加オプションを契約をしないと実質ショップ運営できないのではないのか？　などなど。

実際にお仕事させていただいているクライアント様は年間10,500円で運営されています（リアルタイム銀行振込という方法で決済しているため、＋手数料が210円かかっていますが）。
ようするに、有料オプションは一切追加していないのです。

カラーミーショップには有料オプションがたくさんあります。月額875円で本当にできるのか、今回はその点を整理してみました。

まずはじめに、「カラーミーショップ - ご利用料金」ページで料金プランを確認します。
月額875円は一番安いライトプランで、プランの違いは以下の通り。

1.アクセス解析の使用（アクセスプラスと呼ばれる）
2.ディスク容量（200MB、3GB）
3.FTPの使用（商品画像を楽にアップロードするための機能）
4.画像ファイル上限（100KB、300KB）
5.レビュー機能（ギガプランのみ使用可能）

アクセスプラスはしっかりと分析する方には強力なツールになりますが、アクセス数・検索キーワード程度なら無料の「Google Analytics」で十分間に合います。
ショップ運営が安定するまでは不安で、アクセス解析を使用したくなりますが、お店がいそがしくなると解析ばっかりやってる時間的余裕がない。そうなると「Google Analytics」の機能で十分になってきます。

データ容量は、新規ご契約の翌年以降、毎年100MBずつ、最大500MBまで自動で増量されます。『今すぐ容量を増やしたい！』という場合には、100MB単位でオプション増量が可能となっています。
ディスク容量は商品数と商品画像のファイルサイズからおおよそ予測ができます。

ライトプランの場合、画像ファイル上限100KBという制約があり、カラーミーショップの仕組み上、3枚まで表示できます（サムネイル除く）。一商品あたり300KBちょいといったところですので、データ100MBとは、おおよそ商品300点となります。 
もし不足するようなら、ロリポップ！（2GB 月額105円）やヘテムル（42GB 月額1500円）をレンタルするほうが、結果的に安くあがります。

FTPの使用については、あれば商品追加が楽になります。商品追加を頻繁に行わないような種類のお店だと、恩恵もすくなく感じます（量がすくないなら、FTPがなくてもたいした手間ではない）。
商品数が多いなど、ディスク容量が不足しそうな場合はレンタルサーバー上に画像ファイルを置く必要がでてきます。そうなると、カラーミーでのFTP機能は不要になります。

画像ファイル上限については、キレイな写真を載せるかによります。
これもレンタルサーバー上に画像ファイルを置く必要があるなら、関係のなくなる問題です。

2011年に追加されたレビュー機能は、ギガプランのみ使用可能。必須の機能とは思いませんが、今後、料金プランによる差別化がはかられる可能性はあります。


まとめ。
アクセスプラスは分析力がないと、その効果を十分に発揮しません。カラミーショップ公式にはアクセスプラスの機能説明が載っていますので、参考にしてください。
私自身はぼんやりと「すごい機能だなぁ」と思いながらも、あまり使いこなせていないです。直感的に、なんとなくでしか分析しない方には不要な機能です。

残りの2.～4.は、外部にレンタルサーバーを導入すれば解決します（追加費用がかかります）。ショップの種類・取り扱い商品により、必要かどうか決まってきます。

個人的には最初はライトプランでスタートすればいいと考えています。
さて、ここまでの費用ですが、
ライトプランの契約期間は「3・6・12ヶ月」から選択できますので、875円×契約期間。
それに加えて初期費用として3,150円が必要です（たまに無料キャンペーンあり）。

おまけとしては、同じく安価なショッピングカート・システムとして比較にあがる「おちゃのこネット」は独自ドメインでショップ運営すると月額料金がアップしますし、携帯・スマートフォンのサイトを作ると、これまた月額料金がアップ。カラーミーショップはその点も無料で、良い点です。

写真1
アクセスプラスの画面。
商品ごとのアクセス数、あしあと追跡などは、さすがに専用のアクセス解析という感じで、分析に使いやすい。

（注）記事の内容は2011年3月現在です


【関連記事】
・商品画像の表示数をふやしたい 1


次回は重要なポイント「カラメル」について。「カラーミーは本当に875円なの？ 2」へ

カラーミーでショップ運営をはじめよう 2（2011年3月版）

前回記事でもすこしふれましたが、カラーミーショップの集客についての話題です。
「カラーミーショップ - 助け合い掲示板」でもしばしば話題になりますので、ショップ運営者の多くの方が興味のある話題だと思います。

入り口の広いYahoo!オークションを利用されている方も多いと思いますが、入り口の広さは「出品の手軽さ」に加えて、「集客」という点でも安心感があります。一方、カラーミーショップはどうでしょうか。
Yahoo!オークションは軒を貸してもらっている店子ですが、カラーミーショップは一国一城の主というような個人事業主です（あくまでイメージ）。当然、自分でお店の集客をしなければなりません。

カラーミーショップにも「カラメル」というショッピングモールがありますので、商店街の一員という側面もありますが、個人事業主であるという点は変わりありません。集客について責任があるのは、やはり自分自身になります。

カラーミーショップでショップ運営を開始したら、どのようにして集客をしましょうか？
極力主観を排し、あっさりとまとめてみました。

1.ショッピングモール「カラメル」出店
手軽に効果が期待できる。 知名度のない開店直後はよいかもしれません。

・被リンクというSEO的な効果
お店の商品に対してリンクを張ってくれる。取り扱っている商品にもよります

・カラメル経由で集客できる
カラメルの商品が検索結果上位に引っかかることがあります
カラメル自体に集客力があるとは思いませんが、検索エンジンにはそこそこヒットします

カラメルへの商品掲載自体は無料かつ自動ですが、販売手数料がかかります（詳細はページ末の関連記事をご参照ください）。
出店取りやめも簡単にできます。

2. Googleショッピング、Yahoo!ショッピングに商品掲載
カラーミーショップから掲載は簡単にできますが、販売手数料が……ね。


3.商品登録時にタイトル要素設定
商品詳細ページに、SEO用設定ができます。キーワードを設定し、検索エンジンに拾ってもらうという機能。
とはいえ最近では、metaタグのキーワード設定を重視する検索エンジンはありません。
タイトルは重要ですが、デフォルト（商品名とサイト名）でいいように思います。

4.GMO（ペパボの親会社）のサービス
カラーミーショップを運営するお店にGMO関連会社の営業から電話がよくかかってくるそうです。
以下は、1年半前～半年前という期間で、私がクライアント様から（設置やらアドバイスなどが必要な際に）直接うかがった話です。提供されたサービスのこまかいところも実際にみせていただいています。

・Find-A（アフィリエイト）
費用が高い（特に固定費）。年間50万ほど（契約したのは約2年前）だった、とのこと。そのお店は効果ゼロだった。
そのお店のパートナー（アフィリエイター）サイトを見ましたが、騙しがほとんど。全部そうだ、と断言しているわけではありません。

・ コンバージョンV
検索エンジン経由のお客様に検索キーワードに合わせたバナーを表示して、商品ページに誘導する機能。お客様の（ドメインから推定するらしく）地域別にもバナーが変えられる。
取り扱い商品によっては、使い道がピンとくるかもしれないが、費用との兼ね合いか。

・なんとかというサービス
セールスの電話がありましたが、Yahoo! 検索のある特定の検索キーワードにたいして、結果表示時に広告表示。
月2～3万くらいの費用だと言っていました。お店の取り扱い商品次第か。


5.口コミ
SNSやTwitterが広く利用される現在、強力な宣伝・販売効果があります。多くの方がそのような場面に遭遇したことがあるのではないでしょうか。実際さじ加減がむずかしいところ。
カラーミーショップも、最近は機能強化中です。カラーミー以外のWebサイト上にカートボタンをつけられる「カートJS機能」、商品詳細ページにつけられる「レビュー機能（ギガプランのみ使用可能）」などがそうです。



【関連記事】
・カラメルと販売手数料について 1
・カラメルと販売手数料について 2
・カラメルとGMOとくとくポイント共通ヘッダー 

【追記】
カラーミーショップの機能面を追加しました。

カラーミーでショップ運営をはじめよう 1（2011年3月版）

ネットショップ運営にかかせないショッピングカート・システムにはいくつかあります。
代表的なひとつに、株式会社paperboy&co.（略称：ペパボ）の「カラーミーショップ」があります。柔軟なカスタマイズ性と導入時のコストが安い点が大きな特徴です。
875円～という費用面は、実際、ネットショップ運営をはじめる際の重要な条件になります。
入り口の広さという点で、Yahoo!オークションをされている方もいらっしゃるかと思います。
費用面での気軽さでいうと 、カラーミーショップもなかなか驚異的です（Yahoo!オークションと違い、集客の面で努力が必要ですが）。

それでは、カラーミーを導入するに当たって、
・ショップを作成のにどのくらい手間がかかるの？
・どのくらい難しいの？
など、踏み込んだ部分が気になるところ。

そのような具体的な悩みにも、カラーミーショップには無料お試し30日間があります（入金しなければ終了しますし、入金すれば引き続きサービスが継続します）。

お試し期間のあいだに、「ショップ開店への道（基本編）」を読み、実際に練習できます。
当然のことながら、メニュー「お店をつくる」＞「開店・閉店を設定する」で「開店・閉店・工事中・休止中」と選択できますので、お客様に気兼ねすることなく作業が行えます。
そのほか、オンラインマニュアルも充実していますので根気よく読みこなせば、初心者の方もステップアップしていくことが可能だと思います。
また、自身のレベルに応じた初級・上級モードというふたつの作成方法があり、初心者の方にも導入しやすくなっています。

次に気になるところは、
ショッピングカート・システムの顔、「テンプレート」だと思います。
テンプレートとは定型的な枠（雛形）のイメージで、たとえるなら、テンプレートは入れ物（ショーケース）、商品の情報が中身になります。
なぜ入れ物と中身を分ける必要がある？　なんて話は興味深いですが、本筋ではありませんので省略します。

2011年3月現在、無料テンプレートは32種類用意されています（たまに追加されます）。
「カラーミーショップ-テンプレート一覧」 でご覧いただけます。
2010年10月からは有料テンプレート （現在15種類）の提供もはじまりました。「カラーミーショップ-有料だと、どこが違うの？ 」に機能的な違いが紹介されていますので興味のある方はどうぞ。
私も上記ページに目を通しましたが、有料・無料の違いは手間の面だけで、機能的には無料テンプレートでも「まったく問題ない」と思いました。この点は良心的です。

写真1　無料テンプレートの一部
既存のテンプレートはあらゆるお店を対象とした、オーソドックスなタイプなので、使っているうちに、自分のショップ用にカスタマイズしたくなります。Webサイト制作の知識があるかどうかで、デザイン＆カスタマイズの第一歩目は変わってきます。

既存のテンプレートを使っているうちに、自分のショップ用に改良したくなってきます。
ここから先の、果て無きデザイン＆カスタマイズ道を段階別にざっくりと説明しますと、

・初心者（HTMLの知識なし）
用意されているテンプレートから、好きなデザインを選択してデザインを行います。
デザイン変更には、初級モード・上級モードのふたつがあります。
初級モードはＨＴＭＬを知らなくても、文字色・背景色などの配色を変えることができます（右は初級モードの編集画面で、カラーパレットから色を選んでいるところ）。

ショップページをさらにカスタマイズするためには、HTML（Webページを記述するためのマークアップ言語）の学習が不可欠です。
上級モードを使用すれば、まったく別の、自分オリジナルのショップページに作り変えることができます。

・中級者（HTMLの知識あり）
上級モードはHTMLと CSS（スタイルシート）がフルに使えます。
わずかでもWebサイト制作経験があれば、とっかかりとしては問題ありません。
勉強しだいで、ショップページのデザインをがらりと変えることが可能。

デザインはここまであれば必要十分で、HTML初心者の方でも到達は難しくありません。

・上級者（JavaScriptの知識あり）
JavaScriptのサンプルを利用したことがあれば、とっかかりとしては問題ありません。
JavaScriptをすこし知っているなら、勉強しながら実践するかたちでなんとかなります。
この段階は、ショップページにカラーミーが提供していない機能を付け加えたいという方の段階です。

さら、もっとという方には。
見たことのない機能を実現するために、Ajax（Asynchronous JavaScript + XML）や、jQuery（JavaScript汎用ライブラリ、JavaScriptの延長線上にあります）を勉強していきます。
また、カラーミーはSmartyとよばれるテンプレートエンジンを使用しています。ここをすこしでもかじっておかないと、デザインの幅は広がりません。

写真2
メニュー「お店をつくる」に、お店の基本情報を設定する箇所がある。
ここに登録すれば、ショップデザインの方に自動的に反映されるため、HTMLの知識なしで、ショップの体裁が整えられる。

（注）「月額875円～」は2011年3月現在。

2010年5月の記事を補足・改訂しました。


「カラーミーでショップ運営をはじめよう 2（2011年3月版）」につづく。

ツイートする 2

前フリが長いので、お急ぎの方はこちら。

いまやECサイトでも広く利用されているツール「Twitter」をカラーミーショップの「商品詳細ページ」につけようという話題。
Twitterをとりあげた前回記事では「Twitterでつぶやく」とタイトルにしていましたが、Tweet（つぶやく）という言葉も前回から半年経過して、ずいぶん一般化されてきました。
今回のタイトルは「ツイートする 2」として、前回記事を見直そうと思います。

前回記事では以下ページを参照してツイートボタンを実装していましたが、

「Color Me Shop! pro - 助け合い掲示板」をみると、全角文字が文字化けするそうです。
 Escape Codec Library:ecl.jp のライブラリで、EUC-JP→UTF-8変換が必要とのこと。

現在、ライブラリページがデッドリンクになっています
（「EUC-JP→UTF-8変換」が必要な理由は、2バイト文字（かんたんに言い換えると日本語）が文字化けするんですね）。

現在は、こんな風にすると、OKです。
下記コードの内容は「商品名 URL」をTweetするリンクです。

<script type="text/javascript">
<!--
  document.write('<a href="http://twitter.com/home?status=' + encodeURIComponent("<{$product.name|strip_tags}>"+' '+location.href) + '">Tweet <img src="http://twitter-badges.s3.amazonaws.com/t_mini-b.png" alt="Tweet" style="vertical-align:middle;"></a>');
// -->
</script>

以前使用していたライブラリの代わりに、encodeURIComponent()というJavaScriptの関数を利用しています（こんな関数、はじめて知った）。
興味のあるかたは「URIとは」や「encodeURIComponent()」を検索して調べていただくとして、実装するには上記コードを該当箇所に入れれば、リンクが作成されます。

document.writeでなくても良いですし、JavaScriptのonclick イベントを使用しているページもありました。よく分からない場合は、上記コードのコピペで問題なく動作すると思います。
オレンジ部分は公式からボタンを借りています。  

今回のポイントは、
・<{$product.name|strip_tags}>　を””で括る（私を含めたSmarty初心者がひっかかるところ）
・strip_tags（Smartyの機能）でタグを除去する

独自タグを””で括るについては、 以前の記事「独自タグをJavaScriptの関数に渡す」を参照してください。
strip_tagsでタグ除去については、正規表現を取り扱った以前の記事「Smartyサンプル 1」を参照してください。
<{$product.name}> には、Newやオススメ画像など先頭につくことがあります（下記画像は、商品登録ページ内の一部抜粋）。


というのが復習も兼ねた、前フリ。


現在は、Twitter公式サイトでツイートボタンをかんたんに作成してくれます。

「ハブろぐ - 公式Tweet Buttonがリリースされてた」では画像付きで説明されていますのでご参考に。
コードを直接いじる方には「Paroday - Twitter 公式ツイートボタンの設置方法」 （こまかい設定が分かりやすかったです）。

Twitter公式サイトでボタンを作成する場合は、デザイン（画像など）を用意する必要もなく、文字化けもなく、短縮URLまで作ってくれます。シンプル＆スムースにして完璧な機能。
ツイートボタンをよりかんたんに設置できる仕組みになっています。
カラーミーショップにも、そのままコピペすれば設置できます。

「Twitter公式サイト - プロフィールウィジェットをカスタマイズする」では、ツイートの表示をかんたんに行える機能がついている。これを利用すればショップページに表示させることもできる。


と、そんな記事を書いていたら、もっとかんたんにつくようになっていました。機能も公式仕様。
オンラインマニュアル - 【カスタム】追加タグ
Twitter以外にも、「いいね！」など流行りのボタンが多数追加されました。

<{twitter_tweet}>とするだけで、ツイートボタンを押すとページタイトルとページURLを自動で貼ってくれます。特にいじらなくても使えますが、勉強用にほとんど意味のないサンプルを作ってみました。
 商品名にはHTMLタグがつくことがあるので、strip_tagsでタグ除去。商品詳細ページURLは独自タグがないので商品IDからつくる。「cat:」で文字列結合。

<{twitter_tweet text=$product.name|strip_tags url=$home_url|cat:"?pid="|cat:$product.id}>

【関連記事】
・独自タグをJavaScriptの関数に渡す
・Smartyサンプル 1

【追記】
独自タグの記事を追加