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

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