仕事の関係で、Yahoo!ショッピングに出店している店のお手伝いをすることになりました。でも、まあいつクビになるかは分かりませんが。
すでにあるページの修正などを行ったりしているのですが、10年前に戻ったような感覚です。というのも、Yahoo!ショッピングでは使えるタグなどが非常に限定されるため、結構ベタベタにタグ内にスタイルシートを書かないと駄目なことが多いためです。
でも、まあせっかくなのでデジクリのネタに使えるものがないかと探したらありました。
Yahoo!ショッピングの場合、商品のデータをCSV形式でダウンロードできる(一般的にはできて当たり前なのかな)ので、これを利用してPDFカタログを生成しようというのが今回のネタです。
CSV形式のデータなので、ダウンロードしてしまえばスクリプトで一括変換ができるはずです。が、データ項目が多い上に分からないものもあるので、一度ファイルメーカーに読み込ませて、不要データの削除などを行った後に変換するようになっています。
PDFカタログの生成といっても、CSVデータをHTMLファイルに変換するだけです。HTMLファイルではPDFカタログにならないのでは? という人もいるかもしれません。そこはブラウザの「印刷機能」を使って処理すればできあがりです。カテゴリごとにページを分けたい場合にはスタイルシートで可能です。このスクリプトではHTMLタグ(構造)だけなので、見た目に関しては全てスタイルシートで変更することができます。
変換するスクリプトは、以下のようになります。このスクリプトはPhotoshop CS1,CS2,CS3,CS4(CS4でも多分大丈夫)で動きます。Photoshopでなくても、AfterEffectsや他のAdobeソフト(Acorbatと旧マクロメディア製品を除く)であれば動くはずです。
すでにあるページの修正などを行ったりしているのですが、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
>
- 改訂第4版 JavaScript ポケットリファレンス
- 古籏 一浩
- 技術評論社 2006-10-18
- おすすめ平均
- JavaScriptを使ったプロジェクトのお供に是非
- JavaScript仮免者以上の方へ
- バランスの良いバイブル
- 中級者向けです。
by G-Tools , 2008/09/29