「
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>
「
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>