2012年4月28日

ImageMagickによる画像加工 1

カラーミーショップも、「お願い!カラーミー」導入後からいくつか進展があり、当サイトの古い記事の手直しも必要になっています。それについては、近いうちに着手できればなぁと。

さて、今回のお題は、ネットショップ運営に付き物の「画像加工」です。
ImageMagickには「コマンドラインから利用する方法」と、「他のプログラムから呼び出して使う方法」の二つの方法があります。今回は、Windowsユーザーを対象にした「コマンドラインを利用したバッチ処理」についてのご紹介。

1.こんな場合にImageMagickを!
通常、画像加工を行う場合、Photoshopなどの画像編集ソフトを用いて行うことが多いと思います。
・一度に大量の画像を加工する場合はどうでしょう?
・その加工作業が機械的にできることなら?
このような場合には、ImageMagickを使用し、バッチ処理すること可能かもしれません。バッチ処理では、大量の画像を、あるきまった加工方法の繰り返しで、自動で、高速に処理できます。

2.ImageMagick概説
取っ掛かりとしては一番わかりやすいであろう「ImageMagick」解説ページから、機能について引用します。
display : 各種イメージの表示,編集
import : 表示されているウインドウを各種イメージファイルにダンプ
animate : 指定されたイメージのシーケンスをアニメーション化
montage : イメージをモンタージュ写真のように合成
convert : 入力されたイメージを指定された各種フォーマットに出力
mogrify : イメージの拡大・回転
identify : 指定されたイメージに関する情報を出力
引用元には、画像付きでわかりやすい、ざっくりとした機能説明があります(公式の英語ページにはもっと詳細な機能説明があります)。
convert、montageで、ファイル形式を変更したり、フィルタをかけたり、クロップ(トリミング)したり、複数画像を合成したり、などなど。
identifyでイメージ(=画像)に関する情報も取得できます。条件分岐が必要になる手の凝った画像処理の場合は、必要になります。

3.ソフトのダウンロードとインストール
バッチ化できそうな作業をお持ちの方は、早速、ImageMagickをインストールしてください。
ダウンロードは公式「ImageMagick」の左に、Binary Releasesとありますので、そちらから。
リンク先には、ダウンロード・リンクと英語で動作環境とバージョンの説明が記載されています。


うちのはこれだなと、一番上の「Win32 dynamic at 16 bits-per-pixel」をダウンロード。
セットアップが進むと、「Select Additional Tasks」というダイアログが出ます。
一番下の「Install ImageMagickObject OLE Control for VBscript, Visual Basic, and WSH」にチェックして(ここ重要!)、さらに進みます。これにチェックを入れないとWSH(後述)が使えません。


インストールが完了すれば、下準備も完了。

次回「ImageMagickによる画像加工 2」では、バッチ処理のサンプルを作ってみます。
バッチ処理には、Windows Script Host(WSH、スクリプト実行環境)と、VBScript(スクリプト言語)を使用する予定です。


【参考-Wikipedia】
ImageMagick
バッチ処理
コマンドライン
Windows Script Host
VBScript

2011年12月22日

カラメル内商品検索の新システム導入?

12/19に導入されたそうですが、内容の詳細不明。
検索ワードを" "で括るのは相変わらず無理らしい。OR検索も付いていないようですし…なんの変更だろう。
試しに検索したところ、若干の変化はありました。たとえば商品名で「You'll」が「Youll」でヒットするようになっている。前からではなかったような。
告知しないということは、たいそうな話ではないのかもしれませんね。判明したら追記します。
2011/11/22 - 【リリース済】カラメル内商品検索の新システム導入につきまして 
【追記】どうやらAND検索だったようです。

ついでに、もうひとつ。
2011/12/22 - 【お願い実装】レビューの投稿データが商品詳細ページに表示できるようになりました!
カラーミーショップのギガプラン」でのみ使えるそうです。

2011年12月10日

jQueryの基礎を学ぼう

今回はjQueryについて。
私も使いこなしているわけでもありませんので、概要しか説明できません。
とはいえ、jQueryで「何ができて、何ができないのか」、概要でも頭に入れておくことは、ショップページをカスタマイズするアイデアが浮かんだときに、実現可能か(もしくは不可能か)判断することが可能になります。

当サイトでは取っ掛かり程度の内容ですが、 カラーミーショップをカスタマイズするさいの有用な知識になることは間違いありません。
初学者向けの内容になっておりますので、jQueryってなんぞ、という方はどうぞ。
jQuery(ジェイクエリー)は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。

機能・特徴
1.ブラウザに依存しないオープンソースのセレクタエンジン Sizzle を使ったDOMエレメントの選択
2.DOM操作と変更
3.イベント
4.CSS操作
5.エフェクトとアニメーション
6.Ajax
7.ユーティリティ - ブラウザのバージョン取得、each関数など
8.拡張性 - jQuery プラグイン

引用元:jQuery (Nov. 15, 2011, 21:36 UTC). In Wikipedia: The Free Encyclopedia. Retrieved from Here
すこし具体的に。
カラーミーショップでショップページを作るに場合に使えそうなのは
・文字サイズを変更する、文字サイズ 小・中・大ボタン
・マウスカーソルをのせるとロールオーバーする画像、ドロップダウンするメニュー
一定の操作をきっかけに機能を実行させることを、「イベント」と呼びます。マウスの他には、キーボード操作、ブラウザのスクロール、タイマーなどのイベントがあります。こういうイベント関連も、jQueryを利用すれば簡単にできます。

「CSS操作」というのは、簡単に文字サイズや色など、CSSで設定できる項目を変更できます。イベントと組み合わせて使ったりします。

当サイトでも使った「Ajax」が簡単に利用できます。Ajaxは別次元のパワフルさがあります。カラーミーショップのカスタマイズで使うかは微妙なところですが、機会があれば、記事にしようと思っています。

「拡張性」はプラグインという形で実現されます。
・商品画像のスライドショーや見栄えのよいエフェクト
・色々な情報をCookieに保存(便利なので、よく使います)
導入方法ですが、たとえばCookieプラグインなら「jquery.cookie.js」という形で配布されており、jQuery.js同様に、ロリポップ!ヘテムルなどのレンタルサーバー上に置いて、共通ページの先頭で読み込ませます。

ざっくりとした、まとめ。
・JavaScriptで記述するよりも、より簡単・便利にしたライブラリがjQueryです。手間の有無を別にすれば、やれることはJavaScriptとおなじです。
・ブラウザで表示する、ということに関して、大体のことが実現できます。そしてありがたいことに、プラグインとして配布されていることが多いです。jQueryで到底実現できないこと(表示するデータをどこから持ってくるのか等)、すなわちもっと根っこの部分はSmartyで行いますが、カラーミーショップというレンタルカートの性質上、すべてが思い通りにいじれるわけではありません。

次回は、ImageMagickを使った画像加工を取り上げようと考えています。
商品画像のサムネイル作成、リサイズ、トリミングなど、ショップ運営には画像加工が必要不可欠。手間のかかる作業も、ImageMagickを使うと「あーら便利、あれやこれや自動でやってくれるよ」というお話。


【参考】

中身が理解しやすくなる(これが初歩として一番)
・ノンプログラマーのためのjQuery入門

何ができるか(これを見れば、jQueryで実現可能か分かります)
・jQuery日本語リファレンス

自分で作るために(随時追加します)
・Web制作の現場で使えるjQuery UIデザイン入門

これも読みやすい
・CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました

2011年11月9日

「SOLDOUT表示」と、掲示板での最近の話題

「お願い!カラーミー」で要望のあった、「SOLDOUT表示」が付きました。
カラーミーショップは、売り切れ時には「カートに入れる」ボタンが非表示になるだけで、SOLDOUTの表示がされていませんでした。どういう状態なのか分からず、お客様も戸惑ってたことでしょう。
ということで、ようやく。
実装方法は下記記事を参照してください(シンプルなコードなので、色々とカスタマイズ可能です)。
【お願い実装】「SOLDOUT表示」を実装しました! 

最近の助け合い掲示板での話題では、 これらが勉強になりました。どれも興味深い記事でした。
私はSmartyがよく分かっていないので、サンプルをみながら何ができるのか学習しています。
・オプション選択プルダウン内でのSOLD OUT表示について
・NEW等のアイコンを自作の物に変更する方法はないのでしょうか?
・金額別の表示について(1000円~3000円・3001円~5000円とか)

次回は、jQueryのお話。勉強もかねて、初心者の私がまとめてみようかと思います。
カラーミーショップのカスタマイズにも使うことができますので、ご存じない方はぜひ。

2011年8月17日

カートJS機能について

【仕事サイトにカートJS関連記事を書きました】
 カラーミーショップのどこでもカラーミーについて実践的に学ぶ


 カラーミーショップで7月末にリリースされた新機能「カートJS機能」について。
ごく簡単に紹介すると、「カートに入れる」ボタンを好きなところに貼れるjavascriptソースを作成してくれる機能です。マニュアルはこちら
ブログに商品紹介とカートに入れるボタン貼ることを想定していると思われます。

写真1.カートJS機能の画面 
もっともシンプルな表示の場合
カートJS機能で作成したJSコードを貼り付けるだけ。
<script type='text/javascript' src='http://www.hogehoge.com/?mode=cartjs&pid=1234567&style=basic&name=n&img=n&expl=n&stock=n&price=n&inq=n'></script>
URLの中身を見ると下記のようになっています(注:オリジナルのソースには改行は入っていません)。JavaScriptでHTMLを書いているという仕組みです。
以前「カートに入れるボタンを商品詳細ページ以外に設置する」で紹介した方法(この記事の元ネタは「カラーミーショップ - 助け合い掲示板」) とやっていることは変わりませんが、在庫なしの場合は表示しない分だけ、今回のカートJS機能の方が高級です(その他、売り切れ時の商品表示や掲載設定の条件などで表示・非表示の作り込みはされている)。
document.write("<!--cartjs basic-->
<div style=\"width:94%;margin:0 auto;padding:0;\">
<div class=\"cartjs_box\" style=\"margin:0;padding:0;\">
<form name=\"product_form\" method=\"post\" action=\"http://secure.shop-pro.jp/?mode=cart_inn\" class=\"cartjs_product_form\" style=\"width:100%;margin:0px;padding:0;\">
<div class=\"cartjs_product_table\">
<table style=\"border-top:1px solid #ccc;border-right:1px solid #ccc;border-collapse: collapse;width:50%;margin:0 auto 15px;\">
<!-- 売切れ時・休止時・ログイン限定購入商品は表示しない  -->
<tr>
<th style=\"border-left:1px solid #ccc;border-bottom:1px solid #ccc;\">購入数</th>
<td style=\"padding: 0px 5px 0 10px;border-left:1px solid #ccc;border-bottom:1px solid #ccc;\">
<input type=\"text\" name=\"product_num\" value=\"1\" class=\"cartjs_product_input_txt\" style=\"width: 50px;\" />
</td>
</tr>
<!--オプション情報-->
</table>
</div>
<!-- 売切れ時・休止時・ログイン限定購入商品は表示しない  -->
<div class=\"cartjs_cart_in\" style=\"margin-bottom:10px;text-align:center;\">
<input type=\"submit\" value=\"カートに入れる\" />
</div>
<!-- 特定商取引法リンク -->
<div class=\"cartjs_sk_link_other\"><a href=\"http://www.hogehoge.com/?mode=sk\">&raquo;& nbsp;特定商取引法に基づく表記 (返品など)</a></div>
<!--// 特定商取引法リンク -->
<div class=\"cartjs_product_info\">
<input type=\"hidden\" name=\"user_hash\" value=\"11223344e1f22abc1122334455de1a22\">
<input type=\"hidden\" name=\"members_hash\" value=\"11223344e1f22abc1122334455de1a22\">
<input type=\"hidden\" name=\"shop_id\" value=\"PA01234567\">
<input type=\"hidden\" name=\"product_id\" value=\"1234567\">
<input type=\"hidden\" name=\"members_id\" value=\"\">
<input type=\"hidden\" name=\"back_url\" value=\"http://www.hogehoge.com/?pid=1234567\">
</div>
</form>
<div style=\"display:block;text-align:right;font-size:10px;margin-top:10px;\">
<a href=\"http://shop-pro.jp/\" target=\"_blank\">powered by カラーミーショップ</a>
</div>
</div>
</div>
<!--//cartjs-->");
ブログに貼る分には「特定商取引法に基づく表記」と「powered by カラーミーショップ」の表記が必要かもしれませんが、ショップページに貼る場合には、サイトデザインの点で邪魔に思います。
 Ajaxで「<script type='text/javascript' src="~」のURLを読み込んで、文字列操作して消すことも可能でしょうが、手間のわりにやっていることが地味で現実的ではないように思います。

【追記】
8/31の公式記事によると、評判の良くなかった上述の表示は選択制にしたとのこと。
「お願い!カラーミー」にて受け付けたご要望を元に、カートJS機能を利用した際に表示されていた「powered by カラーミーショップ」の削除および「特定商取引法に基づく表記」のリンクを選択可能にしました。