AZlink/widget

AZlink/widget は JavaScript によるカスタマイズ可能な Amazon アソシエイト用ブログパーツです。
Amazon のベストセラーや新着ニューリリースと連動したブログパーツ、ASIN 指定アイテムを並べたブログパーツを作成できます。

主な特徴

  1. Amazon のベストセラーや新着ニューリリースと連動して商品を表示します。ブログパーツに表示される商品は Amazon の販売動向に従って自動で更新されていきますので完全放置でも売れ筋商品を常に表示できます。
  2. ブログや HTML に JavaScript のブログパーツコードを貼るだけ簡単に設置できます。Amazon アソシエイトIDをお持ちなら手続き不要で今すぐ利用可能です。
  3. 商品価格など他のブログパーツではあまり対応していない項目も表示できます。
  4. JavaScript ブログパーツではブログパーツの処理が完了するまで次のコンテンツの表示が待たされることがありますが、AZlink/widget では JavaScript による処理待ちは発生しません。

お知らせ

2011年10月19日

GAE の料金改訂に伴いサーバ維持費が捻出できなくなりましたので、10/31 をもって AZlink/widget はサービス終了となります。（詳しくは10/31にAZlink/widgetはサービス終了しますをご覧ください。）
10/31 移行はアクセスできなくなりますので早めにブログパーツを削除頂きますようお願いいたします。

2010年10月12日

AZlink/Widget バージョン2をリリースしました。バージョン1は継続してサポートします。詳しくはバージョン1のページをご覧ください。

2010年6月28日

JavaScript 無しで簡単にインストールできる AZlink/widget (embed) をリリースしました。

ブログパーツサンプル

サイドバーによくある感じの縦置き型ブログパーツのサンプルです。
表示する商品は、1. Amazon の新着やベストセラーと連動させる、2. キーワードで検索する、3. ASIN を指定する、の3種類から指定できます。
すべての種類のブログパーツで金額等の詳細情報を表示することもできます。

【TVゲームベストセラー】 【AKB48で検索, 詳細表示】 【ASIN指定, 220px】

ヘッダーやフッターにたまにある感じのバナー（横置き）型ブログパーツのサンプルです。
商品指定方法は、サイドバー型と同じです。

【「けいおん」で検索】

普通のブログパーツではありえないサイズの画像も指定できます。

【ASIN指定, 500px】

画像オプションを指定して商品画像をカスタマイズできます。

【ASIN指定, 600px からオフセット 200,50 サイズ 200x300px でクリッピング】

ブログパーツの使い方

  1. widget2.min.js を読み込む

    まず HTML ファイルから http://azlink.sakuratan.biz/js/widget2.min.js を読み込みます。以下のように script タグを使って head タグの末尾に入れてください。（末尾じゃなくても別にいいですが link による CSS の読み込み等より後の方がいいです。）

    <head>
<script type="text/javascript" src="http://azlink.sakuratan.biz/js/widget2.min.js"></script>
</head>

    widget.min.js はバージョン1用のスクリプトになっていますので、間違えないようにしてください。

  2. ブログパーツを埋め込む

    HTML 上のブログパーツを表示したい箇所で AZlink.Widget2.sidebar または AZlink.Widget2.banner 関数を呼び出します。AZlink.Widget2.sidebar を呼び出すとサイドバー型ブログパーツが、AZlink.Widget2.banner を呼び出すとバナー型ブログパーツが表示されます。

    以下はビデオゲームのベストセラーから5つの商品をサイドバーで表示します。ブログパーツは script タグを埋め込んだ位置に表示されます。

    <body>
<script type="text/javascript">
//<!--
AZlink.Widget2.sidebar({
associateId: "あなたのAmazonアソシエイトID",
node: "bestsellers/videogames",
numItems: 5
});
//-->
</script>
</body>

    以下は「けいおん」の検索結果から4つの商品をバナーで表示します。サイドバーと同じくブログパーツは script タグを埋め込んだ位置に表示されます。

    <body>
<script type="text/javascript">
//<!--
AZlink.Widget2.banner({
associateId: "あなたのAmazonアソシエイトID",
q: "けいおん",
numItems: 4
});
//-->
</script>
</body>

    AZlink.Widget2.sidebar 及び AZlink.Widget2.banner の詳しい使い方については後述します。

AZlink.Widget2.sidebar と AZlink.Widget2.banner の使い方

AZlink.Widget2.sidebar はサイドバー型ブログパーツを埋め込みます。AZlink.Widget2.banner はバナー型ブログパーツを埋め込みます。ブログパーツの埋め込み位置は関数が呼ばれた場所ですので、body タグ中の埋め込み箇所に各関数を呼び出すための script タグを入れてください。

AZlink.Widget2.sidebar、AZlink.Widget2.banner ともにパラメータが指定されたオブジェクトを引数として取ります。パラメータのオブジェクトには以下の値が指定できます。

必須パラメータ

パラメータ名 型 説明
associateId 文字列

アソシエイトリンクに埋め込むアソシエイトIDまたはトラッキングIDを指定してください。
asin ※ 文字列または
文字列の配列		 表示する商品を ASIN または ASIN の配列で指定します。
node ※ 文字列

Amazon のベストセラー等と連動した商品を表示する際に、データ取得元のノードIDを指定します。

Amazon のベストセラー等のページの URL から gp までを取り除いたものがノードIDとなります。
TV ゲームのベストセラーなら、TV ゲームのベストセラーページ http://www.amazon.co.jp/gp/bestsellers/videogames から gp までを取り除いた bestsellers/videogames がノードIDとなります。

ブログパーツと連動可能なノードは、ベストセラー、新着ニューリリース、ヒット商品、一番ギフトとして贈られている商品、リストの中で一番ほしい物です。それぞれの下位ノードのノードIDを指定してください。データの連動には Amazon の RSS を使用しています。RSS が存在しないノードについては連動できません。特にトップノードは連動できませんのでご注意ください。

ノードIDには下位ノードを指定することもできます。例えばゲームのベストセラーには下位ノードとしてプレイステーション3（http://www.amazon.co.jp/gp/bestsellers/videogames/15782591）等があり、node パラメータに "bestsellers/videogames/15782591" を指定するとプレイステーション3のベストセラーと連動したブログパーツとなります。

Amazon でベストセラーページを巡回していると、URL の末尾に /ref= 形式のアクセス元識別子が付くことがありますが、ノードIDにアクセス元識別子は不要ですので余分な部分は削除してください。
q ※ 文字列 検索した商品を表示する際の、検索クエリを指定してください。
後述する index パラメータを指定して、検索範囲を絞り込むこともできます。

※ asin／node／q パラメータはどれか一つのみが必須です。すべて指定した場合の優先順位は asin > node > q です。

省略可能なパラメータ

パラメータ名 型 説明
type 文字列 simple detail または image を指定してください。simple を指定すると画像と商品名のリンクが表示されます。detail を指定すると価格等の詳細情報も表示されます。image を指定すると画像リンクのみになります。省略した場合は simple となります。
numItems 整数 表示する商品の最大個数を 1 〜 10 の間で指定します。省略した場合は 10 となります。
index 文字列 q パラメータとともに指定すると表示する商品を絞り込むインデクスとなります。
このパラメータには All Books Electronics Electronics OfficeProducts Kitchen HomeImprovement Music DVD VHS Software VideoGames Toys SportingGoods HealthPersonalCare Beauty Grocery Watches Jewelry Baby Apparel Shoes Automotive のいずれか一つを指定してください。省略した場合は All となります。
imageFlags 文字列または
文字列の配列

Amazon の画像に指定するオプションを配列で指定してください。例えば[ 'AA600', 'CR200,50,200,300' ]と指定すると 600px 正方形の画像をオフセット 200,50 サイズ 200x300px でクリッピングとなります。

省略すると type が simple の場合は[ 'AA160' ]、type が detail の場合は[ 'AA160', 'PE160' ]となります。

オプションに指定可能な値は、Amazon商品画像のカスタマイズ（理論編） - Shiz Labs などを参照してください。こちらのページに書かれているとおり Amazon の画像に複数のオプションを指定する際は _ で区切っていますが、同じ形式の文字列をこのパラメータに指定しても有効です。（[ 'AA600', 'CR200,50,200,300' ] は '_AA600_CR200,50,200,300_' と同じ意味になります。）
acceptNoImage Boolean 商品画像が存在しない商品を表示するか否かのフラグ、true なら表示する、false なら表示しない。省略した場合は false となります。
preItemHook 関数 各商品の前に HTML を埋め込みたい場合、以下のプロトタイプを持つ関数を指定してください。 
string preItemHook(item, index, length)
引数の item は商品データ（後述）、index は商品の出現順序（0基底）、商品の個数です。この関数からは HTML を文字列返してください。
postItemHook 関数 各商品の後に HTML を埋め込みたい場合、以下のプロトタイプを持つ関数を指定してください。 
string postItemHook(item, index, length)
引数の item は商品データ（後述）、index は商品の出現順序（0基底）、商品の個数です。この関数からは HTML を文字列返してください。
onClickHook 関数 アソシエイトリンクのクリック時に呼び出される関数を指定してください。関数は以下のプロトタイプで定義してください。 
void onClickHook(item)
引数の item は商品データ（後述）です。
onLoadHook 関数 ブログパーツが HTML にロードされた時に呼び出される関数を指定してください。関数は以下のプロトタイプで定義してください。 
void onLoadHook(items, parentNode)
引数の items は商品データ（後述）の配列、parentNode はブログパーツの親要素の DOM オブジェクトです。（formatter パラメータを使って自由に HTML ツリーを再定義できる関係で親要素を返すようになっています。）
wrapperId 文字列 ブログパーツの埋め込み位置を HTML 要素の id で指定したい場合、埋め込む親要素となる要素の id を指定してください。
wrapperId を指定した場合、ブログパーツの表示位置は呼び出し位置と関係無くなります。
通常このパラメータを使用する必要はありません。
stubId 文字列 ブログパーツの埋め込み位置を HTML 要素の id で指定したい場合、ブログパーツを置き換える要素の id を指定してください。
通常このパラメータを使用する必要はありません。

AZlink.Widget2.load の使い方

AZlink.Widget2.load は AZlink.Widget2.sidebar と AZlink.Widget2.banner から最終的に呼び出される関数で、この関数を直接呼び出すことにより出力する HTML の高度なカスタマイズが可能となります。
AZlink.Widget2.load は引数として AZlink.Widget2.sidebar や AZlink.Widget2.banner と同じ形式のパラメータオブジェクトを受け取ります。AZlink.Widget2.load が他の2つと異なる唯一のは、formatter パラメータに最終的に HTML を生成するための関数を指定できる点です。

パラメータ名 型 説明
formatter 関数 パラメータや商品データとともにブログパーツ HTML を生成する関数を置き換えます。formatter に指定する関数は以下のプロトタイプで定義してください。 
string formatter(params)
引数の params は、AZlink.Widget2.load 関数の引数のパラメータに、パラメータから取得した商品データの配列の items を加えたオブジェクトです（items 配列の中身については以下の「商品データ」を参照）。この関数からは HTML を文字列返してください。
なおこのパラメータを指定した場合、type imageFlags preItemHook postItemHook onClickHook パラメータは無効となります。

※AZlink.Widget2.sidebar と AZlink.Widget2.banner の実体は、以下のように AZlink.Widget2.load を wrap する関数です。

AZlink.Widget2.sidebar = function(params) {
params = params || {};
params.formatter = AZlink.Widget2.sidebarTemplate;
AZlink.Widget2.load(params);
}
AZlink.Widget2.banner = function(params) {
params = params || {};
params.formatter = AZlink.Widget2.bannerTemplate;
AZlink.Widget2.load(params);
}

商品データ

onClickHook などに渡させる商品データは以下の要素を持つオブジェクトです。formatter に渡される params.items はこのオブジェクトの配列になります。

asin 商品の ASIN
item 商品のタイトル。itemHook と titleHook が指定されている場合は、titleHook により変換された値が入ります。widgetHook が指定された場合は、titleHook は呼び出されません。
maker 商品のメーカ。
image 商品画像の URL。
author 商品の作者等を収めた配列。
date 商品のリリース日。
list_price 商品の定価。
new_price 新品の最安値。
used_price 中古品の最安値。
sales_rank セールス順位（ランキング）。
specials [アダルト] 等の特記事項。

パラメータの指定例

フィギュアを幅160、縦200ピクセルでクリッピング

new-releases/toys をノードにすると、表示される商品はほぼフィギュアになります。フィギュアの画像は左右に空白があることが多いので、AA オプションで正方形画像を指定してから CR オプションでクリッピングすると、サイドバー向きのブログパーツになります。

<div style="width:160px">
<script type="text/javascript">
//<!--
AZlink.Widget2.sidebar({
associateId: 'ASSOCIATE_ID',
node: 'new-releases/toys',
numItems: 3,
imageFlags: [ 'AA220', 'CR30,10,160,200' ]
});
//-->
</script>
</div>
※幅はブログパーツの上位要素で指定する必要があります。

2x2 で表示

2x2 とか 3x3 とかで多めにリンクを貼りたい場合、バナーを縦に並べると少ないスペースで多くの商品を表示できます。サイドバーを横に並べると各商品画像の縦位置がずれていくので、バナーの方がお勧めです。

<div style="width:320px">
<script type="text/javascript">
//<!--
AZlink.Widget2.banner({
associateId: 'ASSOCIATE_ID',
asin: [ 'B003RITV5W', 'B003CT44OO', ],
imageFlags: [ 'AA220', 'CR30,10,160,200' ]
});
AZlink.Widget2.banner({
associateId: 'ASSOCIATE_ID',
asin: [ 'B003M0OFAG', 'B0038OMCEW', ],
imageFlags: [ 'AA220', 'CR30,10,160,200' ]
});
//-->
</script>
</div>
※幅はブログパーツの上位要素で指定する必要があります。

CSS によるデザインのカスタマイズ

ブログパーツの生成する HTML には以下の例のようにクラス属性が指定されます。各クラスに CSS を指定してデザインをカスタマイズできます。

サイドバー

サイドバー型ブログパーツの場合、最上位要素に azlink-widget と azlink-sidebar-widget、各アイテムに azlink-widget-item と azlink-sidebar-widget-item クラスが指定されます。その他のクラスについては以下の例を参考にしてください。

赤字のクラスは最初または最後の要素のみに付与されます。

<div class="azlink-widget azlink-sidebar-widget">
<div class="azlink-widget-item azlink-sidebar-widget-item azlink-widget-first-item azlink-sidebar-widget-first-item">
<a target="_blank" class="azlink-widget-associate-link" href="http://www.amazon.co.jp/exec/obidos/ASIN/B00361FKX2/[ASSOCIATE_ID]/ref=nosim/">
<img alt="" class="azlink-widget-image" src="http://ecx.images-amazon.com/images/I/619c7ZMH6XL.09._AA160_.jpg" />
<br />
<span class="azlink-widget-title">
モンスターハンター フロンティア オンライン ビギナーズパッケージ(オンライン専用)
(初回特典: 武器のガンランス「ワイヴェンボルト」が入手できるイベントコード同梱)
</span>
</a>
</div>
<div class="azlink-widget-item azlink-sidebar-widget-item">
<a target="_blank" class="azlink-widget-associate-link" href="http://www.amazon.co.jp/exec/obidos/ASIN/B002XUM5PS/[ASSOCIATE_ID]/ref=nosim/">
<img alt="" class="azlink-widget-image" src="http://ecx.images-amazon.com/images/I/61KmwM1ogML.09._AA160_.jpg" />
<br />
<span class="azlink-widget-title">
ときめきメモリアル Girls Side 3rd Story
</span>
</a>
</div>
<div class="azlink-widget-item azlink-sidebar-widget-item azlink-widget-last-item azlink-sidebar-widget-last-item">
<a target="_blank" class="azlink-widget-associate-link" href="http://www.amazon.co.jp/exec/obidos/ASIN/B003DZ03B0/[ASSOCIATE_ID]/ref=nosim/">
<img alt="" class="azlink-widget-image" src="http://ecx.images-amazon.com/images/I/51TfR1Gz%2B0L.09._AA160_.jpg" />
<br />
<span class="azlink-widget-title">
ラブプラス+
</span>
</a>
</div>
</div>

バナー

バナー型ブログパーツの場合、最上位要素に azlink-widget と azlink-banner-widget、各アイテムに azlink-widget-item と azlink-banner-widget-item クラスが指定されます。その他のクラスについては以下の例を参考にしてください。

赤字のクラスは最初または最後の要素のみに付与されます。

<table class="azlink-widget azlink-banner-widget">
<tbody>
<tr>
<td class="azlink-widget-item azlink-banner-widget-item azlink-widget-first-item azlink-banner-widget-first-item">
<a target="_blank" class="azlink-widget-associate-link" href="http://www.amazon.co.jp/exec/obidos/ASIN/B00361FKX2/[ASSOCIATE_ID]/ref=nosim/">
<img alt="" class="azlink-widget-image" src="http://ecx.images-amazon.com/images/I/619c7ZMH6XL.09._AA160_.jpg" />
<br />
<span class="azlink-widget-title">
モンスターハンター フロンティア オンライン ビギナーズパッケージ(オンライン専用)
(初回特典: 武器のガンランス「ワイヴェンボルト」が入手できるイベントコード同梱)
</span>
</a>
</td>
<td class="azlink-widget-item azlink-banner-widget-item">
<a target="_blank" class="azlink-widget-associate-link" href="http://www.amazon.co.jp/exec/obidos/ASIN/B002XUM5PS/[ASSOCIATE_ID]/ref=nosim/">
<img alt="" class="azlink-widget-image" src="http://ecx.images-amazon.com/images/I/61KmwM1ogML.09._AA160_.jpg" />
<br />
<span class="azlink-widget-title">
ときめきメモリアル Girls Side 3rd Story
</span>
</a>
</td>
<td class="azlink-widget-item azlink-banner-widget-item azlink-widget-last-item azlink-banner-widget-last-item">
<a target="_blank" class="azlink-widget-associate-link" href="http://www.amazon.co.jp/exec/obidos/ASIN/B003DZ03B0/[ASSOCIATE_ID]/ref=nosim/">
<img alt="" class="azlink-widget-image" src="http://ecx.images-amazon.com/images/I/51TfR1Gz%2B0L.09._AA160_.jpg" />
<br />
<span class="azlink-widget-title">
ラブプラス+
</span>
</a>
</td>
</tr>
</tbody>
</table>

詳細表示

type: "detail" を指定して詳細表示を行う場合、各商品の詳細情報には以下の例のようにクラス属性が付与されます。

azlink-widget-new-item クラスは未発売の商品にのみ付与されます。

<a target="_blank" class="azlink-widget-associate-link" href="http://www.amazon.co.jp/exec/obidos/ASIN/B0040GJQQ4/[ASSOCIATE_ID]/ref=nosim/">
<img alt="" class="azlink-widget-image" src="http://ecx.images-amazon.com/images/I/617dAx1W2cL.09._AA160_PE01_.jpg"><br>
<span class="azlink-widget-title">【特典生写真付き】Beginner(Type-A)(イベ
ント参加券入り 初回完全限定生産盤)(DVD付)</span>
</a>
<span class="azlink-widget-author">AKB48</span>
<span class="azlink-widget-maker">キングレコード</span>
<span class="azlink-widget-date azlink-widget-new-item">2010/10/27</span>
<span class="azlink-widget-price">1,395円</span>
<span class="azlink-widget-sales-rank"> 売上ランク3位 </span>

デザイン例

以下の例では、商品に枠を付け、リンク色を変更し、フロート時の色も変更しています。

.azlink-sidebar-widget {
font-size: 10px;
text-align: center;
width: 162px;
}
.azlink-sidebar-widget a {
text-decoration: none;
color: #888;
}
.azlink-sidebar-widget a img {
width: 160px;
height: 200px;
border: solid 1px #ccc;
}
azlink-sidebar-widget a:hover img {
border: solid 1px #333;
}
.azlink-sidebar-widget a:hover span {
color: #333;
text-decoration: underline;
}
.azlink-sidebar-widget-item {
margin-top: 1em;
}
.azlink-sidebar-widget-first-item {
margin-top: 0;
}

どの要素にどのクラスが指定されているか分かりにくい時は、Firefox と Firebug を使って確認してください。