ヤフーショッピングデータからHTML, PDFカタログを生成する

 ここではヤフーショッピングで提供されるCSVファイルを元にしてHTMLカタログ、PDFカタログを生成します。ファイルメーカー社のデータベースソフトであるファイルメーカーが必要です(バージョンは7以降。ただし、データ順さえ間違わなければバージョン4でも可)。
かなり手順を踏みますので注意しながら進めてください。また、サンプルプログラムのmakeHTMLcatalog.jsファイルの以下の部分のコードのSAMPLEの文字は店名にする必要があります。

var aURL = 'http://store.shopping.yahoo.co.jp/SAMPLE/'+itemCode+'.html';

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

[必要なスクリプトとデータベースファイルをダウンロード]
[実際に生成されたPDFカタログをダウンロード(ダウンロードページに移動します)
まず、Internet ExplorerかFirefoxを起動します。Safariでは正しく動作しなかったので、Macユーザーの場合はFirefoxを使うのがよいでしょう。
ストアマネージャーにログインしたら「商品管理」のタブをクリックし商品管理画面に移動します。
カテゴリリスト内に表示されているカテゴリをクリックします。

次に商品管理メニューの中にある「ダウンロード」ボタンをクリックします。
すると、ダウンロードするデータを準備しているので、しばらくたってから再読み込みしてください、と出ますのでしばらく(2〜3分くらい。商品点数による)してから、リロードします。再度ダウンロードボタンをクリックします。

以下のようなダイアログが表示されます。表示されない場合は、データ生成中なのでしばらく待ちます。

Firefoxの場合は以下のような画面になるので「ファイルを保存する」を選択しOKボタンをクリックします。

data.csvという名前で商品データがダウンロードされます。

data.csvファイルがある場所を確認しておきます。デスクトップにおいておけばわかりやすいでしょう。一時的に使用するだけですので、使い終わったらゴミ箱に入れて消してください。

ダウンロードしたデータベースファイル(productList.fp7)を開きます。ファイルメーカーのver 7以降であればファイルを開くことができます。

ファイルメニューから「レコードのインポート」→「ファイル...」を選択します。

さきほどダウンロードした商品データ(data.csv)ファイルを選択し開きます。

以下のようにデータ項目が対応するようにしてください。
文字セットはShitf-JISにします。設定が終わったら「インポート」ボタンをクリックします。

データが読み込まれます。全て読み込まれると以下のようにダイアログが表示されます。

データが読み込まれたことを確認します。
ここでdisplayの値が1になっているものだけがカタログリストに表示されます。0は、そもそもショッピングページ上に表示されないデータで、カタログ生成時にもスキップされ処理されません。
これ以外でカタログに掲載したくないデータは、データベースファイル上で削除しておいてください。

図のようにソートを行います。

ファイルメニューから「レコードのエクスポート...」を選択します。

保存先と保存ファイル名を指定します。ファイルタイプが「タブ区切りテキスト」になっていることを確認してから「保存」ボタンをクリックします。

必ず以下の設定にしてから「エクスポート」ボタンをクリックします。
これでファイルメーカーでの処理は完了です。

Photoshopを起動します。CS1,CS2,CS3,CS4のいずれかであれば動作します。
ファイルメニューから「スクリプト」→「参照...」を選択します。

ダウンロードしたmakeHMTLcatalog.jsファイルを選択し「読み込み」ボタンをクリックします。

次にファイルメーカーから書き出したタブ区切りテキストのファイルを選択し「開く」ボタンをクリックします。

保存先とファイル名を入力し「保存」ボタンをクリックします。

HTMLファイルが生成されます。このHTMLファイルと一緒にダウンロードしたmain.cssファイルを同じ階層に配置します。main.cssファイルの内容を変更することで表示するスタイルを指定することができます。

HTMLファイルをブラウザで表示します。画像があるので読み込み完了までにはかなりの時間がかかります。
HTMLカタログでよければ、この段階で完成です。

PDFカタログにしたい場合にはファイルメニューから「プリント...」を選択します。

ダイアログの左下にある「PDF▼」のボタン上でマウスボタンを押したままにするとメニューが表示されます。このメニューから「PDF として保存...」の項目を選択します。

保存するPDFファイル名を入力し「保存」ボタンをクリックします。

PDFカタログが生成されます。

Acrobat 9で開くと、こんな感じになります。ただ、この状態ではかなり大きさサイズのPDFになっているので、Webで配布する場合には最適化を行いなるべくサイズを小さくしておくのがよいでしょう。

【スクリプト (Photoshop CS以降で動作】

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/SAMPLE/'+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/SAMPLE_'+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("ファイルが読み込めませんでした");
}