2012年5月4日

2011年夏以降のカラーミー新機能まとめ

カラーミーショップに 「お願い!カラーミー」が登場して以来、長らく放置されていた機能面が改善しつつあります。利用者にとってはよい傾向ですが、当ブログとしては、過去記事の修正となると、なかなか骨の折れる作業です。
過去記事の古い情報には目を瞑り、放置気味だった新機能について、遅ればせながらまとめてみました。「カートJS機能」「SOLDOUT表示」は、すでに当ブログで紹介済みですので、それ以外の2011年9月以降の新機能です。

・2011/09/16 - 【お願い実装】「あといくらで送料無料の表示」を実装しました!
【マニュアル】PCショップ あと●円で送料無料
送料無料ってのは、重要な販売戦術だ!

・2011/11/30 - 【お願い実装】「レビュー機能」を実装しました!
【マニュアル】レビュー機能
口コミ効果に期待!

・2012/01/31 -  【お願い実装】「グループの階層表示」「最近チェックした商品リスト」を実装しました!
【マニュアル】「商品グループ機能 階層化」「最近チェックした商品リスト」
ようやく公式に実装されました。
当サイトの記事「最近チェックした商品リストを作る」は古い記事になりました。
共通ページで使える独自タグ「history」が追加されたようです。
グループは最大8階層まで作れますが、カテゴリーは大・小のみの二つで変更ありません。

それとは別にいつのまにか、 大カテゴリー選択時の商品一覧に小カテゴリーの商品を表示するように改良されていました。「お店をつくる」>「開店・閉店設定をする」の一番下。
当サイトの記事「カラーミーのカテゴリー表示 1」も古い記事になりました。



2012/01/16 【修正済】 もっと「売れるカート」へ~新デザインの決済ページをリリースしました
以前のかなりわかりにくい決済画面は改良されました。

その他、2011年5月からスマートフォンの画面表示にも対応していますが、徐々に改良が加えられています。

2012年4月28日

ImageMagickによる画像加工 2

前回の「ImageMagickによる画像加工 1」からのつづき。
今回は、ImageMagickのコマンドラインを利用したバッチ処理のサンプルのご紹介。

入力フォルダ内にある、縦長、横長が混在する元画像から、正方形にクロップ(トリミング)する処理を作りました。
「画像左上(0,0)の位置から縦・横の短い辺にあわせて、正方形に切り抜く」という仕様。
左:使用前、右:使用後です。


WSH初体験ですので、ネットで下調べ。「@IT - チェック式 WSH入門」がわかりやすかったので、記事内「第10回 WScriptオブジェクトを利用する(1)」を参考に、VBScriptで記述しています。

1.thumb.vbs
Set objFSO = WScript.CreateObject("Scripting.FileSystemObject")
Set objFolder = objFSO.GetFolder(WScript.Arguments(0))
Set objShell = WScript.CreateObject("WScript.Shell")

loc = "C:\Program Files\ImageMagick-6.7.6-Q16\"

For Each objFile In objFolder.Files
  Set objExec = objShell.Exec(loc & "identify -format ""%w:%h"" " & objFile.path)
  strLine = objExec.StdOut.ReadLine
  iColon = Instr(strLine, ":")
  strWidth = Mid(strLine, 1, iColon-1)
  strHeight = Mid(strLine, iColon+1, Len(strLine))

  If CInt(strWidth) > CInt(strHeight) Then
    ex = loc & "convert -crop " & strHeight & "x" & strHeight & "+0+0 " & _
          objFile.path & " " & WScript.Arguments(1) & "\" & objFile.name
  Else
    ex = loc & "convert -crop " & strWidth & "x" & strWidth & "+0+0 " & _
          objFile.path & " " & WScript.Arguments(1) & "\" & objFile.name
  End If

  Set objExec = objShell.Exec(ex)
  Do While objExec.Status = 0
    WScript.Sleep 100
  Loop

Next

2.実行はコマンドプロンプトから
cscript c:\thumb.vbs c:\in c:\out
橙色部分はImageMagickのインストール先ですので、環境によって異なります。
緑色部分の行末「_」は、長い行を複数行に分割表記するためのもの(VBをやったことがあるひとにはおなじみ)。ブログの横幅の関係で二行に分けていますが、実際には一行で書けば不要です。
青色部分はフルパスで指定すればOK。

For文でフォルダ内のファイルがなくなるまで繰り返します。
WScript.Arguments(0)、WScript.Arguments(1)は、thumb.vbsを実行時につける引数。この例の場合は、c:¥in、c:¥outになります。
CIntは文字型から数値型への変換。これがないとバグります。

ImageMagickのコマンドライン機能を使い、
・「identyfy -format」で、画像の縦・横サイズを取得。
・「convert -crop」で画像切抜き。「+0+0」はクロップする始点(画像左上)。計算すれば、画像中心を基準に切り抜くことも可能ですよね。

このサンプルでは、出力先ディレクトリはあらかじめ用意しておく必要があります。
@IT - チェック式 WSH入門」には、ディレクトリがない場合に作成するスクリプト記述例が載っていますが、このサンプルではそこまではしません。
入力と出力のフォルダを同じにすれば、上書きします。

カラーミーショップで利用するなら、商品画像は100KB(一番安いライトプランの場合)以下でないとアップロードできませんので、適宜、「convert -resize -quality」でリサイズ、圧縮する必要があります。
convertのオプションについては「(HobNote)ImageMagick opiton」に、みやすく纏めてありました。

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