ジャケ画

2009年09月30日

Fireworksで自動処理-amazonのCDジャケ画分割を並べる

これは先日のamazonの分割されたCDジャケット画像をFireworksで結合するプロジェクト。我ながらなんて諦めが悪いんだろうと思ったりする(w というか何か出来そうな気がするからやってみたくなるんだよね。

基本となるのはやはりFireworksのヒストリに残ったスクリプトである。こいつを手がかりにしてスクリプト化していくしかプログラミングが苦手な私には手が無い。
fw.getDocumentDOM().importFile("file:///C|/amazon/0-0.jpg", {left:l, top:t, right:0, bottom:0}, false);
ぶっちゃけ肝はこれだけだ。対象となるファイル名を指定し、それをどの位置に読み込むか?をleftとtopで指定している。rightとbottomは0にしとけば、きっちりしたサイズじゃなくてもリサイズされないのがポイントだ。

とりあえず先日の平原綾香の分割画像を読み込むスクリプトをつらつらと記してみた。汎用性を持たせるために前提条件としてファイル名をリネームすることとした。とりあえずはめっちゃベタなスクリプト。でもこれをベースにすればリネームの手間はあるがFireworksで結合が出来てしまう。

C:\amazon\0-0.jpg という感じに行-列番号の連番にリネーム。

「Amazonジャケット自動配置5x5.jsf」
// 初期変数設定(l=left,t=TOP)
var l = 0;
var t = 0;

//第一列
fw.getDocumentDOM().importFile("file:///C|/amazon/0-0.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/0-1.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/0-2.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/0-3.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/0-4.jpg", {left:l, top:t, right:0, bottom:0}, false);

//第二列
l = 400;
t = 0;
fw.getDocumentDOM().importFile("file:///C|/amazon/1-0.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/1-1.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/1-2.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/1-3.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/1-4.jpg", {left:l, top:t, right:0, bottom:0}, false);

//第三列
l = 800;
t = 0;
fw.getDocumentDOM().importFile("file:///C|/amazon/2-0.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/2-1.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/2-2.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/2-3.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/2-4.jpg", {left:l, top:t, right:0, bottom:0}, false);

//第四列
l = 1200;
t = 0;
fw.getDocumentDOM().importFile("file:///C|/amazon/3-0.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/3-1.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/3-2.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/3-3.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/3-4.jpg", {left:l, top:t, right:0, bottom:0}, false);

//第五列
l = 1600;
t = 0;
fw.getDocumentDOM().importFile("file:///C|/amazon/4-0.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/4-1.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/4-2.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/4-3.jpg", {left:l, top:t, right:0, bottom:0}, false);
t = t + 400;
fw.getDocumentDOM().importFile("file:///C|/amazon/4-4.jpg", {left:l, top:t, right:0, bottom:0}, false);

めっさ長くてゴメンナサイ。livedoorブログはテキストファイルすら添付できないですからね。

とりあえず出来たのでキャプチャアップしておきます。
400px間隔のガイドラインももちろんスクリプトで引いてます。
一瞬で配置できるのはある種快感ですな(w

全画面キャプチャ 20090930 183636

後は汎用性を持たせられたら良いんだけどな。それともっとブラッシュアップさせたい。人に見せるスクリプトじゃないもんな(w ってこんなところに書いてるし。恥を言ってたら成長できませんと開き直る。


関連ページ

続きを読む

sasapurin at 23:58|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック

AmazonのCDジャケ画の仕組み-3

第三弾です。

amazonから分割されたCDジャケットをダウンロードしてファイルを調べてみたら規則性がわかりました。第一引数がやはり倍率で、第二引数が行、第三引数が列でした。ファイル名順に並べると左側の上から下に並ぶことになりますね。

URL生成の規則性からダウンローダーを使えば一気に分割ファイルをダウンロード出来ると分かりましたが、これを結合するのは面倒といえば面倒です。分割画像を結合するという概念は、パズルゲームなんかに近いのできっとそういうツールがあるだろうなと思って調べてみました。
というのが有名というか、ぱっと調べた限りではWindows系ではこれが唯一っぽいですね。両方とも縦と横の画像ピース数を指定できて、左上を基準に縦に並べていくか、横に並べていくかの選択肢があります。

「あ」の方はフリーウェアですが、残念ながら全ての画像サイズが一致していないと対応してくれません。amazonのジャケット画像は細切れになった画像の中に、切れっ端みたいな小さな画像もあるので、フリーウェアの方では対応できない様です。それと画像をまとめて放り込むとエラーが出ます。並べたい順番に一個ずつドラッグ&ドロップしていく手間があります。そもそも並べる順番を後から変更するという概念を持たせてないようです。

高機能版の「あEx」は評価期間が設けられているので試してみました。画像を一気に放り込めるのがまず楽ですが、番号付きファイルなのにファイル名の順番どおりに並ばないことがあります。並び替え機能もあるのですが、バグがあるらしく順番の入れ替えが出来ないパターンもあります。なんか思い通りに出来ないのでイライラしました。25枚もあるとさすがに一番下から一番上まではチクチクやってられませんからね。ドラッグで並び替えできるとUI的によくなるんでしょうけどね(作者が改善する気があればかなり具合の良いツールになるでしょう)。

あのリスト画面
上図、この3つのファイルはファイル名から上にあるべきなのに・・・
三角ボタンをクリックしても上に持っていけないし・・バグだね。

とりあえず「あEx」での検証はOKです。
期待通り全ての画像をキッチリと結合してくれました。

jpg  横400  縦400 20090930 123641
結合ボタンをクリックしたら大きなサイズで画像結合してくれました。

さて、このツール操作性に難ありなのでシェアウエアフィーを支払ってまで使う価値があるかどうかは使う人次第でしょうね。私はFireworksを使う方が手っ取り早いので要らないかな(Fireworksはマジにイイです)。

ファイルの並び替え機能が洗練されたらシェアウェア登録考えてもいいかなって思うけど、製作者の方向性を読むと、そういう意見は取り入れられないような気がするね。


関連ページ



sasapurin at 22:49|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック

2009年09月29日

AmazonのCDジャケ画の仕組み-2

AmazonのCDジャケ画の仕組みについて第二弾です。あきらめてません。

Javascriptsで細工していることは分かったので、読み込みのパターンがあるんだろうなと考えました。んで単純にソースコードを読んでみたところ、気になる部分が二箇所ありました。

まずはこの部分です。「var scaleLevels」を検索してみましょう。
        <mce:script language="javascript">
<!--
var scaleLevels;
scaleLevels = new Array(4);
scaleLevels[0] = new MediaServicesZoomScale(600, 592, 600);
scaleLevels[1] = new MediaServicesZoomScale(832, 822, 400);
scaleLevels[2] = new MediaServicesZoomScale(1249, 1233, 400);
scaleLevels[3] = new MediaServicesZoomScale(1665, 1644, 400);
DynAPI.addZoomViewer("http://z2-ec2.images-amazon.com/images/R/B002GWP6PY.01",420,420,1665,1644,218827953,"amztile",scaleLevels);
// --></mce:script>

ここはどうやら解像度ではないかと思えます。(MediaServicesZoomScale)って書いてますからね(w。拡大させた時に落とせるピースとなった画像は400*400ピクセルだと言うことを確認しましたし。scaleLevels[1]から[3]までが拡大のレベルだとめぼしをつけました。Levels[3]では1665*1644ピクセルだということがなんとなく分かります。400*400ピクセルだから、400*400:1600*1600ピクセルをオーバーするので、縦横ともに4倍では足りず5倍になりそうです。つまり5*5=25枚のピースになっているものだと推測です。

次に気になったのはダウンロードURLの部分です。これはソースにはかかれておらずFirebugで突き止めました。Javascriptで生成している部分なのでソースに含まれないのでしょうね。
http://z2-ec2.images-amazon.com/R/1/a=B002GWP6PY+d=_SCR(3,0,0)_+o=01+s=RMTILE+va=MAIN+ve=218827953+e=.jpg
B002GWP6PY、218827953という部分は、商品ページについているので商品管理コードみたいなものでしょう。他の商品ページと比較してみると一目瞭然ですね。

SCR(3,0,0)が厄介な部分です。数字が3つ区切られています。第一引数の3は倍率の3、第二引数は行?、第三引数は列?ではないかと思います。(行と列が逆かも知れないけど)

いずれにしてもこの規則性を使えばダウンロードリストが25ピース分作れるはずです。
続きを読む

sasapurin at 23:27|PermalinkComments(4)TrackBack(2)このエントリーをはてなブックマークに追加 mixiチェック

AmazonのCDジャケ画の仕組み

平原綾香のCDをPCに取り込んだので、ジャケ画の写真が欲しいなとAmazonを訪れました。いくつかのアルバムはOKだったのですが、my Classics!というアルバムのジャケ画だけがゲットできなくてマジに悩んだ。



このアルバムだけは、JavaScriptで制御されているっぽくクリックすると画像が拡大されて枠からはみ出してしまう。一体どうなってんだ?右クリックでも左クリックでも拡大するしジャギーもなくなってかなりの高解像度で表示される。無理やりダウンロードしても真っ黒な画像しかダウンロードできない。

夕べは悔しくて枕を涙で濡らして寝た(嘘

今日、仕事の合間にWeb系のプログラマに質問してみたらアッサリと答えを教えてくれた。使ったのはFirebugの「接続」ツール。これで見たら明らかに画像が細切れに分割されていることが分かる。400px*400pxの画像パーツを読み込んで並べ、ズームしても綺麗に見える様にJavascriptで制御しているのだとか。拡大版のジャケ画はかなり高解像度らしい。

なんでこういう回りくどい手間をかけるのか?

大きな理由としては、画像を分割することによって読み込みの速度(レスポンス)をなるだけ落とさないようにするためだとか。Web系では画像を分割して読み込ませるのは常套手段なのだそうだ。Amazonは今後こういうことをやっていくつもりなのだろうか?

全画面キャプチャ 20090929 160715

もっと身近な疑問(興味)としては、400px*400pxの画像を何枚のピースに分割しているのだろうか?暇な時に全部DLして画像ソフトで綺麗に並べてみようかなと思ったり。

しかしJavascriptって凄いねぇ~
頭いいやつがいっぱいいるってことだ。


関連ページ



sasapurin at 16:17|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック