やっぱまだ工事中……(つД`)

【2011/03/12追記】 newバージョン公開中
【2010/05/31追記】 このエントリ最下に既知の不具合を記載しました。

どうもこんにちはー。
2~3日前に書いていたヤツが、できたようなそうでないよーな……
でも、いちおう動くようになったので、晒しageしてみます。

azcstm v0.001
サンプルのjsファイルとCSSファイルが入ってます。

あ、そうそう、名前がないと呼びにくかったので、AZlinkをCustomするってことで、AZcstmにしてみました。

ぶっちゃけ、コードも整理してないし、グローバル変数多いし、よくわからんところもあるので、
あんま人にお見せできるようなもんじゃないんですが、もう疲れたよ(´д`)[1]

さて、気を取り直して、こんな感じです。

今回呼び出したのは、下記のソースコードです。

<head>
<script type="text/javascript" src="http://sakuratan.biz/azlink/widget/widget.min.js"></script>
<script type="text/javascript" src="jsをupしたフォルダ/azcstm.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
<!--
	AZcstm(2,1,5);
-->
</script>

javascriptが書いてある.jsファイル(azcstmjs)に、amazonへのいろんなリンクを登録しておけば、
任意に上記のようなものを呼び出せます。
カラーリング関係は、もちろんCSSなので、CSSを改変すればOK。[2]

いろんなリンクってのは、AZlinkさんのwidgetを利用してるんで、
 ・asin指定でのリンク
 ・node指定のリンク(トップセールランキングとか)
 ・search指定(検索結果)へのリンク(上記のツクール関連)
となります。

んで、スクリプト内の基本的な編集箇所は、こんな感じ。

//この確率で、生成されるAZlinkが私・AZlink作成者様のアソシエイトIDになります。(0でもOK)
var donation_rate = 10;
//あなたのamazonアソシエイトID
var def_amazon_ID = 'your_id;
//表示する商品数(呼び出し時に引数指定可能)
var def_item_num = 6;
//リストを vertical=縦方向に並べる horizontal=横方向に並べる (呼び出し時に引数指定可能)
var def_direction_type = 'horizontal';
//リンク押下時のターゲット(htmlと一緒の書き方でOK)
var win_target = '_blank';

//表示したいAZlinkWidgetのノードとかを登録する
//node=node+RSS_URL asin=[]内にasinを記述 その他=sreach
var node_param = new Array();
 //node指定のサンプル
node_param.push("node_bestsellers/toys");
 //asin指定のサンプル
node_param.push(['B001UE7GNO','B001QCYFUW','B002KKBVW4','B002AMVCTE','B002EVOKGS','B003H9LKYG']);
 //sreach結果のサンプル
node_param.push("ツクール");
//上記ノード等にタイトルを付ける場合に記述 表示したくない場合は""で空にする
//配列数はnode_paramと一緒にする
var title_name = new Array();
title_name.push("Top Sale on Toys");
title_name.push("asin用テスト");
title_name.push("ツクール関連");
//上記タイトルにリンクを付ける場合に記述 リンクしない場合は""で空にする
//配列数はnode_paramと一緒にする amazonへのリンクの場合後方に&tag=amazon_IDを付与する
var title_URL = new Array();
title_URL.push("http://www.amazon.co.jp/gp/bestsellers/toys/ref=pd_zg_rss_ts_t_toys_c");
title_URL.push("http://www.amazon.co.jp/gp/bestsellers/toys/ref=pd_zg_rss_ts_t_toys_c");
title_URL.push("http://www.amazon.co.jp/s/ref=nb_sb_noss?__mk_ja_JP=%83J%83%5E%83J%83i&url=search-alias%3Daps&field-keywords=%83c%83N%81%5B%83%8B&x=0&y=0");
//asin指定以外の時、最後に「もっと見る」を追加するかどうか
var more_veiw = true; //(デフォルトはtrue)
//「もっと見る」に表示する文字列(デフォルトで「もっと見る」)
var more_veiw_title = "もっと見る";
//もっと見るのURL
//配列数はnode_paramと一緒にする amazonへのリンクの場合後方に&tag=amazon_IDを付与する
var more_veiw_URL = new Array();
more_veiw_URL.push("http://www.amazon.co.jp/gp/bestsellers/toys/ref=pd_zg_rss_ts_t_toys_c");
more_veiw_URL.push("http://www.amazon.co.jp/gp/bestsellers/toys/ref=pd_zg_rss_ts_t_toys_c");
more_veiw_URL.push("http://www.amazon.co.jp/s/ref=nb_sb_noss?__mk_ja_JP=%83J%83%5E%83J%83i&url=search-alias%3Daps&field-keywords=%83c%83N%81%5B%83%8B&x=0&y=0");

こんな感じです。

node_paramに上記の例のように配列を追加してくと、登録できます。
注意点は、nodeを登録する場合、先頭に必ず「node_」が必要です。
(node_paramが配列だとasin、node_があるとnode、それ以外をsreachと判定しています)

また、上記はあくまでも「基本的な設定」なので、ややこしい設定として、

//表示する商品情報を表示する順番に記述(popup以外)
//image(商品画像),item(商品名),maker(メーカー),date(リリース日),
//list_price(定価),new_price(新品価格),used_price(中古価格),sales_rank(セールス順位)
//off_price(値引き価格)
//注意:サイズ関係を変更する際には、CSSもそれに応じて編集してください。
var visible_data_v = new Array("image","item","new_price","used_price"); //縦表示版
var visible_data_h = new Array("image","item","new_price"); //横表示版
var link_begin = "image"; //商品へのリンクを開始する情報
var link_end = "item"; //商品へのリンクを終了する情報
var hr_separater = new Array(); //表示項目のセパレータをHRタグにする項目
var separater = '<br>'; //表示項目のセパレータ imageには使用しない(デフォルト=<br>)
var img_discount = true; //商品画像にディスカウントマーク(1%とか)を表示 true=する false=しない(デフォルト=true)
var name_length_v = 0;// 縦表示版 商品名の最大文字数を指定 0=制限しない(デフォルト=0)
var name_length_h = 28;//横表示版 商品名の最大文字数を指定 0=制限しない(デフォルト=28)
//商品画像のサイズ 常に正方形になる(デフォルト=160px、画像サイズは172p*172p)
var img_size = 160; //+2が商品ごとのboxサイズ,*text_left_width_rateがtext_left時のwidth
//画像の左に商品情報を true=表示する false=しない(情報は下に表示する)
//trueの場合、呼び出す順番(visible_data[0])はimageからがおすすめ
var text_left_v = true; //縦表示の場合(デフォルト=true)
var text_left_h = false; //横表示の場合(デフォルト=false)
var text_left_width_rate = 2; //商品情報true時のwidth倍率(少数指定OK,デフォルトは2)

//価格関係
var figure = true; //価格を桁区切り true=する false=しない(デフォルト=true)
var list_p_head = "定価:"; //ListPrice表示時、前方につける単語
var list_p_foot = "円"; //ListPrice表示時、後方につける単語
var new_p_head = "新品:"; //NewPrice表示時、前方につける単語
var new_p_foot = "円から"; //NewPrice表示時、後方につける単語
var used_p_head = "中古:"; //UsedPrice表示時、前方につける単語
var used_p_foot = "円から"; //UsedPrice表示時、後方につける単語
var off_p_head = " "; //OffPrice表示時、前方につける単語
var off_p_foot = "円OFF"; //OffPrice表示時、後方につける単語

//popupの情報表示
var popup = true; //popupを true=する flase=しない(デフォルト=true)
//表示する商品情報(popup内 詳細はvisible_dataと一緒)
 //縦表示版
var popup_data_v = new Array("item","maker","date","new_price","off_price","used_price");
 //横表示版
var popup_data_h = new Array("item","maker","date","new_price","off_price","used_price");
var popup_img_size = 120; //popupの画像サイズ
var popup_separater = '<br>'; //popupのセパレータ(デフォルト=<br>)
var popup_hr_separater = new Array("item","date"); //表示項目のセパレータをHRタグにする項目
var popup_width_v = 160; //vertical版のpopupの幅(デフォルトは160)
var popup_width_h = 140; //horizontal版のpopupの幅(デフォルトは140)
//popupの表示位置関係
var popup_top_v = 6; //vertical版のpopup縦表示位置(デフォルトは144)
var popup_left_v = 60; //vertical版のpopupの横表示位置(デフォルトは60)
var popup_top_h = 144; //horizontal版のpopup縦表示位置(デフォルトは144=imageを最初に表示したらいい感じ)
var popup_left_h = 6; //horizontal版のpopupの横表示位置(デフォルトは6)
//text_left=trueかつverticalの場合、left_vに加算する値(デフォルトは160)
var popup_left_plus = 160;

ってな感じで色々設定できます。[3]

CSSはこんな感じ。

/*-- タイトル ---------------------------------------------*/
h4.AZcstm_title{
	font-family: "Trebuchet MS", sans-serif,"Mona","IPA MONAPGOTHIC","MS PGothic","MS Pゴシック","MS Pゴシック","MS Pゴシック";
	font-size: 16px;
	padding:4px 0 4px 8px;
	background:#FFF8DC;
	border-width:0px;
	border-bottom:#FF0000 2px solid;
	border-left:#FF0000 8px solid;
	color:#333;
}
a.AZcstm_title:link{
	color:#2A2ACC;
	text-decoration:none;
}
a.AZcstm_title:visited{
	color:#4A6AFF;
	text-decoration:none;
}
a.AZcstm_title:hover{
	color:#0000FF;
	text-decoration:underline;
}
/*-- 商品情報 ---------------------------------------------*/
div.AZcstm_range{
	margin:0px;
	padding:0px;
}
div.AZcstm_box{
	font-family: "Mona","IPA MONAPGOTHIC","MS PGothic","MS Pゴシック","MS Pゴシック","MS Pゴシック";
	line-height:1.2em;
	font-size:12px;
	margin:0px;
	padding:0px;
	padding-left:0px;
	position: relative;
}
div.AZcstm_box a{
	display: block;
	cursor:pointer;
}
div.AZcstm_box a:hover{
	border:#C0C0C0 1px solid;
	background:#F0F0F0;
	cursor:pointer;
}
a.AZcstm_link:link{
	color:#2A2ACC;
	text-decoration:none;
}
a.AZcstm_link:visited{
	color:#4A6AFF;
	text-decoration:none;
}
a.AZcstm_link:hover{
	color:#0000FF;
	text-decoration:none;
}
.AZcstm_detail{
	text-decoration:none;
	font-family:"Mona","IPA MONAPGOTHIC","MS PGothic","MS Pゴシック","MS Pゴシック","MS Pゴシック";
	position: absolute;
	display:none;
	padding:2px 4px 2px 6px;
	background-color:#FFF8DC;
	border:1px solid #FF0000;
	text-decoration:none;
	-webkit-border-radius: 10px; /* Safari、Google Chrome */
	-moz-border-radius: 10px; /* Firefox */
}
a:hover .AZcstm_detail{
	display: block;
	color:#000000;
	text-decoration:none;
}
img.AZcstm_img{
	border:0px;
}
div.more_veiw{
	font-size: 10px;
	text-align:right;
	padding:0px;
	clear:both;
}
hr.AZcstm{
	padding:0px;
	margin:2px;
	border-width:1px;
	border-style:solid;
	border-color:#C0C0C0;
}

そして、呼び出す時ですが、一番最初の例では、
   AZcstm(2,1,5);
で呼び出してました。

2の部分が、node_paramの配列のindexにあたります。
上記のサンプルだと、0でおもちゃのトップセールランキング、1でasin指定のサンプルが表示できます。
指定しない場合は、登録してあるものからランダムで表示します。

次の1の部分は、縦表示なのか、横表示なのかを選択できます。
最後の5の部分は表示する商品の個数を指定します。
指定しない場合は、デフォルトとして設定した方になります。[4]

これらの値は指定しないで呼び出すこともできます。
例えば、
   AZcstm();
とした場合、デフォルトに設定した形式で、ランダムに表示されます。

   AZcstm(1);
とした場合は、2番目に登録したものがデフォルトの形式で表示されます。
(スクリプトわからん人は注意です。配列は0から始まるため、最初のが0になります)

注意点は、省略は可能なんですけど、後ろの方を指定したい場合は、前の数字もきっちり入力する必要があります。
   AZcstm(,,4);
とかはエラーになってしまいます。


ランダムで表示したいけど、デフォ設定の横ではなく縦かつ3つだけを呼び出したい場合は、
   AZcstm(-1,0,3);
となります。

これが表示例です。

あんまり需要はなさそうですが、数個呼び出す場合は、
AZcstm(1);
AZcstm(0);
って並べると順番に表示されます。
ただし、ランダムを並べた場合、重複checkとかやってないんで、同じものが表示される可能性もあります。

とりあえずのところは、こんなところでしょうか。


課題は山ほどあるんでメモ的に書き記しておきます。
 1.popupするのはいいけど、次の商品のbox(divタグ内)にpopupが重なると、次の商品の下にpopupが入ってしまう。
   →今は座標が重ならないように指定しています。
 2.配列で呼び出せるようにしたい。(AZcstm([0,1])みたいな感じ。)
   →配列内を順番に表示。または配列内からランダムで表示
    ちなみに今も配列で入れることは可能で、順番に表示するけど、ちゃんと動いてないです。
 3.検索結果が少なかった場合の処理を考えてない。
   →たぶんエラーが出て表示されない。
 4.グローバル変数で指定しすぎ。
   →AZlinkに乗っかって動いてるから、どうやって直そうか考え中。
    たぶん根本的な設計の問題なので、諦める可能性が高いかも? AZlinkに依存しないで1から作るとか無理だし。
 5.wordpressのカテゴリ情報を読み取って、該当するモノを表示できるようにしたいかも。
 6.上記ができるんなら、ウィジェット化するのもありかもしれない。
   →PHPなんて触ったこともないけど!

jsファイルのアップロードとか全然触れてないけど、たぶん私が説明するより、
javascript 外部ファイル とかでググッた方がわかりやすいと思う。

しばらくはコレをいじりながら、
このサイトのamazon様をどんなふうに表示させるか考えてみます。

【2010/05/31既知の不具合】
1.引数に表示する商品数(sp_item)を指定し、AZlink/widgetから渡されたdataの配列数が
 sp_itemより少なかった場合、当然のごとく止まります。次verで修正予定。
2.ところどころ文末に「;」がないの発見。次verで修正予定。

  1. 初めてのjavascriptだから許して……orz []
  2. 後述します []
  3. …これが全部グローバル変数なんだぜorz []
  4. 基本編集箇所の6と8行目です []

記事と関連してそうなモノ

コメントを残す

【必須】required