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

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

検索結果の商品タイトルの横にカテゴリアイコンを表示したいという方がいるかもしれません。

AWS3.0では商品情報に、Catalogという項目があります。そこにBook、Music、DVDなどとカテゴリ情報が含まれています。Catalogの値を判断して画像を表示します。

<xsl:template name="Set_Icon">
  <xsl:choose>
    <xsl:when test="Catalog = 'Book'"><img src="icon-books.gifを設置したURI" /></xsl:when>
    <xsl:when test="Catalog = 'Electronics'"><img src="icon-ce.gifを設置したURI" /></xsl:when>
    <xsl:when test="Catalog = 'Kitchen'"><img src="icon-kitchen.gifを設置したURI" /></xsl:when>
    <xsl:when test="Catalog = 'Music'"><img src="icon-music.gifを設置したURI" /></xsl:when>
    <xsl:when test="Catalog = 'DVD'"><img src="icon-dvd.gifを設置したURI" /></xsl:when>
    <xsl:when test="Catalog = 'Video'"><img src="icon-video.gifを設置したURI" /></xsl:when>
    <xsl:when test="Catalog = 'Software'"><img src="icon-software.gifを設置したURI" /></xsl:when>
    <xsl:when test="Catalog = 'Video Games'"><img src="icon-videogames.gifを設置したURI" /></xsl:when>
    <xsl:when test="Catalog = 'Toy'"><img src="icon-toys.gifを設置したURI" /></xsl:when>
  </xsl:choose>
</xsl:template>

↑の部分が画像表示のルーチン部分になります。このコードをテンプレの最後の「</xsl:stylesheet>」の上の行にでも貼り付けてください。このコードを呼び出すには以下のようにして呼び出します。

<xsl:call-template name="Set_Icon" />

このコードを画像を呼び出したいところの貼り付けます。今回は商品タイトルの横に貼り付けるので。

<!-- テーブルの右のセル(商品データ) -->
<td class="RightCell">
  <!-- ここに貼り付ける -->
  <xsl:call-template name="Set_Icon" />
  <span class="title"><xsl:element name="a"><xsl:attribute name="href">http://xml-jp.amznxslt.com/onca/xml3?dev-t=<xsl:value-of select="$dev-t" />&AsinSearch=<xsl:value-of select="Asin"  />&type=heavy&mode=<xsl:value-of select="$mode" />&t=<xsl:value-of select="$t" />&locale=jp&f=<xsl:value-of select="$setting" /><xsl:value-of select="$url" /></xsl:attribute><xsl:value-of select="ProductName" /></xsl:element></span><br />

これで画像が表示できるようになるはずです。画像はAmazonからとってきちゃってください。

配布しているXSLテンプレートでは商品の詳細を見たときに同じテーマの商品として、ジャンル別〜などのようにリストが表示されます。

同じテーマの商品を探す

• ユーズドエレクトロニクス - ポータブルオーディオ
• ユーズドエレクトロニクス - ポータブルオーディオ - MP3・メモリプレーヤー
• ユーズドエレクトロニクス - オーディオ・ビジュアル
• ユーズドエレクトロニクス - オーディオ・ビジュアル - 音響商品
• ユーズドエレクトロニクス - オーディオ・ビジュアル - 音響商品 - ポータブルオーディオ
• カテゴリー別 - ポータブルオーディオ - MP3・メモリプレーヤー - アップルコンピュータ
• ストア - iPodストア - 本体 - iPod shuffle
• ストア - アップルストア - iPod
• ストア - バーゲンコーナー - ポータブルオーディオ
• ストア - バーゲンコーナー - オーディオ・ビジュアル

↑のリストはiPod Shuffleのデータから抜粋しました。商品の詳細を表示するとこんな感じに同じテーマの商品リストがずらっと表示されます。商品によっては3-5くらい表示されていてちょうど良いかもしれません。しかし商品によっては10個近く表示されてしまったり、ユーズド商品もリストに上がるかもしれません。ということでリスト表示を絞りなおかつユーズド表記はリストに表示しないようにしたいと思います。個別商品表示のテンプレ(asina_detail.xsl)を修正します。

<strong>同じテーマの商品を探す</strong><br />
  <ul>
    <xsl:for-each select="BrowseList/BrowseNode">
      <li>
	<xsl:element name="a">
	  <xsl:attribute name="href">http://xml-jp.amznxslt.com/onca/xml3?t=<xsl:value-of select="$t" />&dev-t=<xsl:value-of select="$dev-t" />&BrowseNodeSearch=<xsl:value-of select="BrowseId/text()" />&mode=<xsl:value-of select="$mode" />&type=heavy&locale=jp&page=1&f=<xsl:value-of select="$setting" /><xsl:value-of select="$f" /></xsl:attribute>
	  <xsl:value-of select="BrowseName/text()" />
	</xsl:element>
      </li>
    </xsl:for-each>
  </ul>

このような箇所があると思います。ここに2行ほど付け足します。

<strong>同じテーマの商品を探す</strong><br />
  <ul>
    <xsl:for-each select="BrowseList/BrowseNode">
      <xsl:if test="position() &lt;= '5' and not(contains(BrowseName/text(), 'ユーズド'))">
      <li>
	<xsl:element name="a">
	  <xsl:attribute name="href">http://xml-jp.amznxslt.com/onca/xml3?t=<xsl:value-of select="$t" />&dev-t=<xsl:value-of select="$dev-t" />&BrowseNodeSearch=<xsl:value-of select="BrowseId/text()" />&mode=<xsl:value-of select="$mode" />&type=heavy&locale=jp&page=1&f=<xsl:value-of select="$setting" /><xsl:value-of select="$f" /></xsl:attribute>
	  <xsl:value-of select="BrowseName/text()" />
	</xsl:element>
      </li>
    </xsl:if>
    </xsl:for-each>
  </ul>

これでリストは5件以上表示されませんし、ユーズドという文字が含まれているリストも除かれます。

同じテーマの商品を探す

• カテゴリー別 - ポータブルオーディオ - MP3・メモリプレーヤー - アップルコンピュータ
• ストア - iPodストア - 本体 - iPod shuffle
• ストア - アップルストア - iPod
• ストア - バーゲンコーナー - ポータブルオーディオ
• ストア - バーゲンコーナー - オーディオ・ビジュアル

これで行数が減ってスッキリしました。ただこの方法だと、もしリストが1-10の10件あるとしたら表示されるのは1-5です。自分の好きなものだけ表示するということはできません。

分かりにくい説明だったと思いますが、カスタムについて少し書いて見ました。AWS on XSLTはCGIが使えるサーバーがなくても手軽にいろいろ試せますので、XML・XSLの学習に非常に有益であると思います。テンプレキットを触って少しでも興味を持っていただけると幸いです。XML・XSLを学習して見たいという方には以下のサイトを訪れるといいと思います。

• たのしいXML
• ＠IT:XSL & SOA