クリエイター手抜きプロジェクト[181]FileMaker + Photoshop編 Yahoo!ショッピングのデータベースからPDFカタログを生成する/古籏一浩

投稿:  著者:  読了時間:9分(本文:約4,400文字)


仕事の関係で、Yahoo!ショッピングに出店している店のお手伝いをすることになりました。でも、まあいつクビになるかは分かりませんが。

すでにあるページの修正などを行ったりしているのですが、10年前に戻ったような感覚です。というのも、Yahoo!ショッピングでは使えるタグなどが非常に限定されるため、結構ベタベタにタグ内にスタイルシートを書かないと駄目なことが多いためです。

でも、まあせっかくなのでデジクリのネタに使えるものがないかと探したらありました。

Yahoo!ショッピングの場合、商品のデータをCSV形式でダウンロードできる(一般的にはできて当たり前なのかな)ので、これを利用してPDFカタログを生成しようというのが今回のネタです。

CSV形式のデータなので、ダウンロードしてしまえばスクリプトで一括変換ができるはずです。が、データ項目が多い上に分からないものもあるので、一度ファイルメーカーに読み込ませて、不要データの削除などを行った後に変換するようになっています。

PDFカタログの生成といっても、CSVデータをHTMLファイルに変換するだけです。HTMLファイルではPDFカタログにならないのでは? という人もいるかもしれません。そこはブラウザの「印刷機能」を使って処理すればできあがりです。カテゴリごとにページを分けたい場合にはスタイルシートで可能です。このスクリプトではHTMLタグ(構造)だけなので、見た目に関しては全てスタイルシートで変更することができます。

変換するスクリプトは、以下のようになります。このスクリプトはPhotoshop CS1,CS2,CS3,CS4(CS4でも多分大丈夫)で動きます。Photoshopでなくても、AfterEffectsや他のAdobeソフト(Acorbatと旧マクロメディア製品を除く)であれば動くはずです。



TAB = String.fromCharCode(9);
LF = String.fromCharCode(10);
filename = File.openDialog("Tab区切りテキストファイルを指定してください");
if (filename) {
fileObj = new File(filename);
flag = fileObj.open("r");
if (flag == true){
savefilename = File.saveDialog("保存HTMLファイル名を入れて下さい");
if (savefilename){
savefileObj = new File(savefilename);
flag = savefileObj.open("w");
if (flag == true){
// 書き出し
savefileObj.write('< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >');
savefileObj.write('< html >< head >');
savefileObj.write('< meta http-equiv="content-type" content="text/html;charset=shift_jis" >');
savefileObj.write('< title >商品一覧< /title >');
savefileObj.write('< link rel="stylesheet" href="main.css" type="text/css" media="all" >');
savefileObj.write('< body >');
savefileObj.write('< h1 >商品一覧< /h1 >');
savefileObj.write('< p >価格は通常価格でセール価格ではありません。< /p >');
while(!fileObj.eof) {
text = fileObj.readln();
if (!text) break; // 改行のみの場合はファイル末尾として終了させる
var tData = text.split(TAB); // タブ区切りなので個別に配列に格納
// ■カテゴリ(path)、名前(name)、商品コード(code)、価格(price)
var categoly = tData[0];
var iitemName = tData[1];
var itemCode = tData[2];
var itemPrice = tData[3];
var dispFlag = tData[4];
if (dispFlag == "0") continue;
if (categoly.length > 2) {
categoly = categoly.replace(/:/g, " > ");
savefileObj.write('< /table >');
savefileObj.writeln('< h2 >'+categoly+'< /h2 >');
savefileObj.writeln('< table border="1" bordercolor="black" cellspacing="0" cellpadding="2" width="800" >');
savefileObj.write('< tr >< th width="48" >画像< /th >< th width="80" >商品コード< /th >< th >商品名< /th >< th width="100" >価格< /th >');
}
var aURL = 'http://store.shopping.yahoo.co.jp/●●●●/'+itemCode+'.html';
savefileObj.writeln('< tr >< td_height="48" >< img_src="
http://a248.e.akamai.net/f/248/37952/1h/image.shopping.yahoo.co.jp/i/j/●●●●_'
+itemCode+'"_width="48"_height="48" >< /td >< td_align="right" >'+itemCode
+'< /td >< td >< a_href="'+aURL+'"_target="tonyaItem" >'+iitemName
+'< /a >< /td >< td_align="right" >'+itemPrice+'円< /td >< /tr >');
}
savefileObj.write('< /body >< /html >');
savefileObj.close();
}else{
alert("保存ファイルに書き込めませんでした");
}
}else{
alert("保存ファイルが開けませんでした");
}
}
}else{
alert("ファイルが読み込めませんでした");
}


上記スクリプトで●●●●となっているのは店名が入ります。店名がdgcrなら

http://store.shopping.yahoo.co.jp/●●●●/
http://a248.e.akamai.net/f/248/37952/1h/image.shopping.yahoo.co.jp/i/j/●●●●_

 ↓

http://store.shopping.yahoo.co.jp/dgcr/
http://a248.e.akamai.net/f/248/37952/1h/image.shopping.yahoo.co.jp/i/j/dgcr_

のようになります。
あと、今回は文章では説明しにくいため以下のURLに手順を用意しておきました。

< http://www.openspc2.org/projectX/FileMaker/0001/ >

実際にどのようなカタログが生成されるかは、以下のページでPDFを閲覧およびダウンロードして確認することができます。

< http://footage.openspc2.org/tonya/catalog/ >


【古籏一浩】openspc@po.shiojiri.ne.jp
< http://www.openspc2.org/ >

ハイビジョン映像素材で、CG素材に関しては容量の都合で別サーバーに移動させました。不景気になったせいか、かなりアクセスが多くなってます。
・ハイビジョン映像素材(フリー)
< http://www.openspc2.org/HDTV/ >

最近は、いろいろ書いてます。

●jQueryで作る“Amazon風”インターフェイス
< http://ascii.jp/elem/000/000/173/173575/ >

●asahi.comの開閉パネルをJavaScriptで再現
< http://ascii.jp/elem/000/000/171/171566/ >

●iPhoneゲーム自作工房9 - レースゲームを作る
< http://journal.mycom.co.jp/articles/2008/09/22/iphonegame9/ >

あと、10月10日に行われるグーグルのHackathonに行く予定です。
< http://googlejapan.blogspot.com/2008/09/google-geo-7geo-api-hackathon.html >

photo
実践!Ajaxフレームワーク jQuery
古籏 一浩
毎日コミュニケーションズ 2008-06-28
おすすめ平均 star
starもうすこしサンプルの解説がほしいところ

jQueryで作る Ajaxアプリケーション prototype.jsとscript.aculo.usによるリッチWebアプリケーション開発 JavaScript & DHTMLクックブック 第2版 Webエキスパート必携テクニック集 prototype.jsパーフェクトリファレンス―Ajax実践プログラミング マイクロフォーマット ~Webページをより便利にする最新マークアップテクニック~ (Web Designing BOOKS)



photo
改訂第4版 JavaScript ポケットリファレンス
古籏 一浩
技術評論社 2006-10-18
おすすめ平均 star
starJavaScriptを使ったプロジェクトのお供に是非
starJavaScript仮免者以上の方へ
starバランスの良いバイブル
star中級者向けです。

[改訂版] PHP ポケットリファレンス (Pocket reference) 改訂新版 SQLポケットリファレンス (Pocket reference) 改訂第5版 オールカラー  HTML ポケットリファレンス (POCKET REFERENCE) 基礎 Ajax + JavaScript JavaScriptプログラミング入門 第2版

by G-Tools , 2008/09/29