スピリッツオブゼロ > XSLTテンプレートキットをカスタマイズしよう

• AmazonアソシエイトとWebサービスについて
• 検索タイプを知ろう
• 商品データの構造
• XSLTテンプレートキットについて
• カスタマイズしよう
• カスタマイズしよう2
• カスタマイズしよう3
• マーケットプレイスを携帯で検索する

ここではちょっとしたXSLTテンプレキットのカスタムについて書いていきます。といってもSDKに書いてあることとかだったり、ホントに簡単だったりする事ですけどね。

テンプレートをカスタマイズする時にいちいちサーバ上にあげて表示やエラーなどを確認するのも面倒だと思います。そこでまずAmazonの商品データを一旦ローカルに保存しましょう。例えばbrowse_search.xslを修正したいのなら適当にBrowseNode検索でAmazonにアクセスします。

URL欄がhttp://〜&f=XSLのURLとなっています。そのf=XSLという箇所をf=xmlに変更してください。そうるすとxml形式でデータが表示されると思います。

そうしますと↑のような感じでXML形式でAmazonの商品データが取得できます。そうしましたら「名前を付けて保存」でテンプレートキットと同じフォルダに保存します。名前は適当にamazon.xmlとでもしてください。そして保存したファイルをテキストエディッタで開きます。1行目が、

<?xml version="1.0" encoding="UTF-8"?><ProductInfo xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://xml.amazon.com/schemas3/dev-heavy.xsd">

↑のような具合になっています。それを次のように変更。

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="browse_search.xsl"?>
<ProductInfo xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://xml.amazon.com/schemas3/dev-heavy.xsd">

今回はBrowse Searchを例にとってますので↑のような例になります。あとはamazon.xmlをブラウザにドラッグすればbrowse_search.xslが適応されて表示されますので、そちらで確認を取りつつXSLを変更してデザインを変更します。

テンプレキットでは商品の詳細ページではカートボタン(購入ボタン)がついています。Keyword検索やBrowseNode検索の検索結果のもカートボタンをつけたい場合は以下のコードを使います。

<form method="POST" action="{concat('http://www.amazon.co.jp/o/dt/assoc/handle-buy-box=', Asin)}">
  <input type="hidden" name="{concat('asin.', Asin)}" value="1"/>
  <input type="hidden" name="tag-value" value="{$t}"/>
  <input type="hidden" name="tag_value" value="{$t}"/>
  <input type="hidden" name="dev-tag-value" value="{$dev-t}"/>
  <input type="submit" name="submit.add-to-cart" value="Amazonで購入" />
</form>

購入ボタンを画像に変えたい場合は、

<input type="submit" name="submit.add-to-cart" value="Amazonで購入" />

の部分を次のように変更します。

<input type="image" src="画像のURI" name="submit.add-to-cart" value="Amazonで購入" alt="Amazonで購入" />

あとは購入ボタンを表示させたい個所に、コードを挿入すればいいだけです。カートボタンの動作確認なのですが、まだ発売していない予約段階の商品を自分で購入してください。正しく動作していれば翌日のアソシエイトセントラルで、その商品が注文に入っています。注文にあればキチンと動作していますので、その商品はキャンセルをしてください。なおAmazon.co.jpのアソシエイトセントラルの更新は夕方の16:00です。

商品へのリンクは商品タイトルに貼られています。

タイトルは個別商品頁にリンクされていますので、画像はお薦め商品をいっしょに表示する頁にリンクする事にしましょう。先の商品データの構造で書いた通り商品データにはAmazonへのリンクも含まれていますのでそれを活用します。

商品画像を表示している個所はbrowse_search.xslなら104行目辺りなのでそこを変更します。実際に変更する辺りは以下の辺りです。

<!-- テーブルの左のセル(商品画像) -->
<td class="LeftCell">
  <img src="{ImageUrlMedium}">
  <xsl:attribute name="onload">if (this.width=='1' && this.src.match(/\.01\./)) { this.src='<xsl:value-of select="$setting" />noimage_m.gif'; } else if (this.width=='1') { this.src=this.src.replace('.09.','.01.'); }</xsl:attribute>
  <xsl:attribute name="alt"><xsl:value-of select="ProductName" /></xsl:attribute>
  <xsl:attribute name="title"><xsl:value-of select="ProductName" /></xsl:attribute>
</img><br />

このXSLTに2行ほど追加します。

<!-- テーブルの左のセル(商品画像) -->
<td class="LeftCell">
  <a href="{@url}">
    <img src="{ImageUrlMedium}">
      <xsl:attribute name="onload">if (this.width=='1' && this.src.match(/\.01\./)) { this.src='<xsl:value-of select="$setting" />noimage_m.gif'; } else if (this.width=='1') { this.src=this.src.replace('.09.','.01.'); }</xsl:attribute>
      <xsl:attribute name="alt"><xsl:value-of select="ProductName" /></xsl:attribute>
      <xsl:attribute name="title"><xsl:value-of select="ProductName" /></xsl:attribute>
    </img>
  </a><br />

サイトのユーザー層によってはアダルト商品を表示したくない場合もあるかもしれません。アダルト関連商品を表示しないようにするには、データのFeatures/Feature要素をチェックします。

<Features>
  <Feature>アダルト</Feature>
</Features>

商品データのFeature要素にアダルトが含まれていないかをチェックする。

<xsl:if test="not(Features/Feature) or not(Features/Feature = 'アダルト')">
  <table class="item">
     -- 以下略 --
  </table>
</xsl:if>

簡易的にフィルタリングをかけただけなので全ての商品をチェックできないかもしれません。なおFeatures/Feature要素をチェックしている関係上type = heavyの時しかチェックできません。表示しない設定だけなので10件中2件アダルト商品が見つかったとしたら、頁に表示される商品は8件となります。本当はAmazon側でフィルタリングできるようにパラメータ付けてくれるのが一番いいんですけどね。

後このフィルタリングはDVD、ビデオ、ソフトウェア、ゲームのみに使用できます。本・写真集はFeatures/Feature要素でアダルトを返さない為チェックのしようがない為です。これも改善希望ですよね。