Amazon アソシエイトで、テンプレート (XSLT) を使って画像の大きさを変更する方法

「Amazon アソシエイトで、画像の表示を自由に変更する方法」では、アマゾンにアクセスして得られる画像のリンクの仕様を紹介した。これがわかれば、ブログの個々のページに貼付けた iframe（インライン）経由でアマゾンにアクセスし、XSLT を使って画像を表示するときにも応用できる。その方法は「Amazon アソシエイトで、テンプレート (XSLT) を使って商品情報や画像を表示する方法」で紹介した通りであるが、このテンプレートを変更して画像の大きさを変えてみよう。変更部分は青色で示した部分で、

select="<font color="blue">concat(substring-before($image, '.jpg'), 'PC_.jpg')</font>" /></xsl:attribute>
<xsl:attribute name="height"><xsl:value-of select="<font color="blue">$height div 2"</font> /></xsl:attribute>
<xsl:attribute name="width" ><xsl:value-of select="<font color="blue">$width div 2</font>"  /></xsl:attribute>

大きな画像 (Large) を右からのドロップシャドウ付きで取得して、そのサイズの 1/2 の大きさで表示するというものである。 XSLT では、割り算は div を使い、アマゾンから取得した URL 文字列の操作は concat(substring-before($image, '.jpg'), 'PC_.jpg') で行っている。

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="https://www.w3.org/1999/XSL/Transform" xmlns:aws="https://webservices.amazon.com/AWSECommerceService/2006-03-08" exclude-result-prefixes="aws" version="1.0">
<xsl:output method="html"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />

<xsl:template match="/">
   <xsl:apply-templates select="aws:ItemLookupResponse/aws:Items/aws:Item" />
</xsl:template>

<xsl:template match="aws:Item">

<xsl:variable name="detail"       select="aws:DetailPageURL"                    />
<xsl:variable name="image"        select="aws:LargeImage/aws:URL"              />
<xsl:variable name="width"        select="aws:LargeImage/aws:Width"            />
<xsl:variable name="height"       select="aws:LargeImage/aws:Height"           />
<xsl:variable name="title"        select="aws:ItemAttributes/aws:Title"         />

<html lang="ja">
<head>
</head>
    <body>
        <a>
            <xsl:attribute name="href"  ><xsl:value-of select="$detail" /></xsl:attribute>
            <xsl:attribute name="target">_blank</xsl:attribute>
            <img>
                <xsl:attribute name="src"   >
                <xsl:value-of
                    select="<font color="blue">concat(substring-before($image, '.jpg'), 'PC_.jpg')</font>" /></xsl:attribute>
                <xsl:attribute
                    name="height"><xsl:value-of select="<font color="blue">$height div 2"</font> /></xsl:attribute>
                <xsl:attribute
                    name="width" ><xsl:value-of select="<font color="blue">$width div 2</font>"  /></xsl:attribute>
                <xsl:attribute name="alt"   ><xsl:value-of select="$title"  /></xsl:attribute>
                <xsl:attribute name="title" ><xsl:value-of select="$title"  /></xsl:attribute>
                <xsl:attribute name="border">0</xsl:attribute>
            </img>
        </a>
    </body>
</html>
</xsl:template>

</xsl:stylesheet>