ホーム
warning: Creating default object from empty value in /var/www/drupal-5.23/modules/taxonomy/taxonomy.module on line 1418.

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>
「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>
Posted on 2006-07-18 by yas |

Amazon アソシエイトで、画像の表示を自由に変更する方法

Amazon アソシエイトでは AWS (Amazon Web Services、要はウェブ経由の API) を使ってアマゾンのデータベースに蓄えられている商品情報やカスタマーレビューなどのさまざまな情報を一般の人でも無料でアクセスできよるようになっている。 もちろんアマゾンにアクセスしたときに表示される CD や DVD などのさまざまな商品の画像も表示させることができる。この画像を表示するときは、今までは大、中、小くらいは API で取れたのだが、実はサイズを任意に変更したり、例えば以下のようにドロップシャドウ（影）を付けたりすることができるのであった。 さて、その方法、つまりアマゾンにアクセスして得られる画像のリンクだが、以下に仕様を示すので、この仕様に沿ってXSLT テンプレートをカスタマイズすれば、希望の大きさの画像が得られたりするだろう。 上の表のそれぞれの記号の意味は以下のとおり。 例えば右上の画像の URL は https://images.amazon.com/images/P/B000C5PNUA.01._SCLZZZZZZZ_PC_.jpg である。
Amazon アソシエイトでは AWS (Amazon Web Services、要はウェブ経由の API) を使ってアマゾンのデータベースに蓄えられている商品情報やカスタマーレビューなどのさまざまな情報を一般の人でも無料でアクセスできよるようになっている。 もちろんアマゾンにアクセスしたときに表示される CD や DVD などのさまざまな商品の画像も表示させることができる。この画像を表示するときは、今までは大、中、小くらいは API で取れたのだが、実はサイズを任意に変更したり、例えば以下のようにドロップシャドウ（影）を付けたりすることができるのであった。 さて、その方法、つまりアマゾンにアクセスして得られる画像のリンクだが、以下に仕様を示すので、この仕様に沿ってXSLT テンプレートをカスタマイズすれば、希望の大きさの画像が得られたりするだろう。 上の表のそれぞれの記号の意味は以下のとおり。 例えば右上の画像の URL は https://images.amazon.com/images/P/B000C5PNUA.01._SCLZZZZZZZ_PC_.jpg である。
Posted on 2006-07-15 by yas |

Amazon アソシエイトで、ASIN コードの入力をラクにする方法

  1. まず、/mt-static/images に amazon.gif ←の画像をアップロード /mt-static/mt_ja.js に以下のコードを追加
    function AmazonLink(e) {
      if (!canFormat) return;

      var associate_id = '<font color="blue">twinklexxx</font>'; // 自分のアソシエイト ID に変更
      var xslt = '<font color="blue">https://aws.twinkle.cc/amazon.xsl</font>'; // 自分の XSLT のアドレスに変更
      var access_key = '<font color="blue">152ZP71KPB47XM09CS02</font>'; // 自分の Web サービス Access Key ID に変更

      var str = getSelected(e);
      var asin = prompt('Enter Amazon ASIN','');
      var country = prompt('Enter Country (us or jp)', 'us');
      if (asin != null && country != null) {
        if (str == '') {
          if(country == 'jp') {
            code = '-22';
          } else if(country == 'us') {
            code = '-20';
          }
          setSelection(e, '<iframe src="https://xml-' + country + '.amznxslt.com/onca/xml?Service=AWSECommerceService&ItemId=' + asin + '&AssociateTag=' + associate_id + code + '&AWSAccessKeyId=' + access_key + '&Operation=ItemLookup&IdType=ASIN&ContentType=text%2Fhtml&Version=2006-03-08&Page=1&ResponseGroup=ItemAttributes,Images,Offers&Style=' + xslt + '" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" height="175"></iframe>\n');
        } else {
          setSelection(e, '<iframe src="https://xml-' + country + '.amznxslt.com/onca/xml?Service=AWSECommerceService&ItemId=' + asin + '&AssociateTag=' + associate_id + code + '&AWSAccessKeyId=' + access_key + '&Operation=ItemLookup&IdType=ASIN&ContentType=text%2Fhtml&Version=2006-03-08&Page=1&ResponseGroup=ItemAttributes,Images,Offers&Style=' + xslt + '" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" height="175"></iframe>\n');
        }
      }
      return false;
    }
  2. 次に、/tmpl/cms/edit_entry.tmpl 583 と 642 行目あたりに以下のコードをそれぞれ追加（通常のエントリー書き込み部分と「続きを読む」用に、2ヶ所修正が必要）
            write('<img title="<MT_TRANS phrase="Quote">" onclick="return formatStr(document.entry_form.text, \'blockquote\')" src="<TMPL_VAR NAME=STATIC_URI>images/formatting-icons/quote.gif" alt="<MT_TRANS phrase="Quote">" width="26" height="19" />');
            <strong>write('<a title="<MT_TRANS phrase="AmazonLink">" href="#" onclick="return AmazonLink(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/amazon.gif" alt="<MT_TRANS phrase="AmazonLink">" width="26" height="19" /></a>');</strong>
            write('<img title="<MT_TRANS phrase="Quote">" onclick="return formatStr(document.entry_form.text_more, \'blockquote\')" src="<TMPL_VAR NAME=STATIC_URI>images/formatting-icons/quote.gif" alt="<MT_TRANS phrase="Quote">" width="26" height="19" />');
            write('<a title="<MT_TRANS phrase="AmazonLink">" href="#" onclick="return AmazonLink(document.entry_form.text_more)"><img src="<TMPL_VAR NAME=STATIC_URI>images/amazon.gif" alt="<MT_TRANS phrase="AmazonLink">" width="26" height="19" /></a>');
  3. 最後に、/tmpl/cms/bm_entry.tmpl 334 と 373 行目あたりに以下のコードをそれぞれ追加（同様に通常のエントリー書き込み部分と「続きを読む」用に、2ヶ所修正が必要）
            write('<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.entry_form.text, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>');
    <strong>        write('<a title="<MT_TRANS phrase="AmazonLink">" href="#" onclick="return AmazonLink(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/amazon.gif" alt="<MT_TRANS phrase="AmazonLink">" width="26" height="19" /></a>');</strong>
            write('<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.entry_form.text_more, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>');
            <strong>write('<a title="<MT_TRANS phrase="AmazonLink">" href="#" onclick="return AmazonLink(document.entry_form.text_more)"><img src="<TMPL_VAR NAME=STATIC_URI>images/amazon.gif" alt="<MT_TRANS phrase="AmazonLink">" width="26" height="19" /></a>');</strong>
Updated: 2007/04/21 Created: 2007/07/01
  1. まず、/mt-static/images に amazon.gif ←の画像をアップロード /mt-static/mt_ja.js に以下のコードを追加
    function AmazonLink(e) {
      if (!canFormat) return;

      var associate_id = '<font color="blue">twinklexxx</font>'; // 自分のアソシエイト ID に変更
      var xslt = '<font color="blue">https://aws.twinkle.cc/amazon.xsl</font>'; // 自分の XSLT のアドレスに変更
      var access_key = '<font color="blue">152ZP71KPB47XM09CS02</font>'; // 自分の Web サービス Access Key ID に変更

      var str = getSelected(e);
      var asin = prompt('Enter Amazon ASIN','');
      var country = prompt('Enter Country (us or jp)', 'us');
      if (asin != null && country != null) {
        if (str == '') {
          if(country == 'jp') {
            code = '-22';
          } else if(country == 'us') {
            code = '-20';
          }
          setSelection(e, '<iframe src="https://xml-' + country + '.amznxslt.com/onca/xml?Service=AWSECommerceService&ItemId=' + asin + '&AssociateTag=' + associate_id + code + '&AWSAccessKeyId=' + access_key + '&Operation=ItemLookup&IdType=ASIN&ContentType=text%2Fhtml&Version=2006-03-08&Page=1&ResponseGroup=ItemAttributes,Images,Offers&Style=' + xslt + '" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" height="175"></iframe>\n');
        } else {
          setSelection(e, '<iframe src="https://xml-' + country + '.amznxslt.com/onca/xml?Service=AWSECommerceService&ItemId=' + asin + '&AssociateTag=' + associate_id + code + '&AWSAccessKeyId=' + access_key + '&Operation=ItemLookup&IdType=ASIN&ContentType=text%2Fhtml&Version=2006-03-08&Page=1&ResponseGroup=ItemAttributes,Images,Offers&Style=' + xslt + '" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" height="175"></iframe>\n');
        }
      }
      return false;
    }
  2. 次に、/tmpl/cms/edit_entry.tmpl 583 と 642 行目あたりに以下のコードをそれぞれ追加（通常のエントリー書き込み部分と「続きを読む」用に、2ヶ所修正が必要）
            write('<img title="<MT_TRANS phrase="Quote">" onclick="return formatStr(document.entry_form.text, \'blockquote\')" src="<TMPL_VAR NAME=STATIC_URI>images/formatting-icons/quote.gif" alt="<MT_TRANS phrase="Quote">" width="26" height="19" />');
            <strong>write('<a title="<MT_TRANS phrase="AmazonLink">" href="#" onclick="return AmazonLink(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/amazon.gif" alt="<MT_TRANS phrase="AmazonLink">" width="26" height="19" /></a>');</strong>
            write('<img title="<MT_TRANS phrase="Quote">" onclick="return formatStr(document.entry_form.text_more, \'blockquote\')" src="<TMPL_VAR NAME=STATIC_URI>images/formatting-icons/quote.gif" alt="<MT_TRANS phrase="Quote">" width="26" height="19" />');
            write('<a title="<MT_TRANS phrase="AmazonLink">" href="#" onclick="return AmazonLink(document.entry_form.text_more)"><img src="<TMPL_VAR NAME=STATIC_URI>images/amazon.gif" alt="<MT_TRANS phrase="AmazonLink">" width="26" height="19" /></a>');
  3. 最後に、/tmpl/cms/bm_entry.tmpl 334 と 373 行目あたりに以下のコードをそれぞれ追加（同様に通常のエントリー書き込み部分と「続きを読む」用に、2ヶ所修正が必要）
            write('<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.entry_form.text, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>');
    <strong>        write('<a title="<MT_TRANS phrase="AmazonLink">" href="#" onclick="return AmazonLink(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/amazon.gif" alt="<MT_TRANS phrase="AmazonLink">" width="26" height="19" /></a>');</strong>
            write('<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.entry_form.text_more, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>');
            <strong>write('<a title="<MT_TRANS phrase="AmazonLink">" href="#" onclick="return AmazonLink(document.entry_form.text_more)"><img src="<TMPL_VAR NAME=STATIC_URI>images/amazon.gif" alt="<MT_TRANS phrase="AmazonLink">" width="26" height="19" /></a>');</strong>
Updated: 2007/04/21 Created: 2007/07/01
Posted on 2006-07-03 by yas |

Amazon アソシエイトで、テンプレート (XSLT) を使って商品情報や画像を表示するカラクリ

「Amazon アソシエイトで、テンプレート (XSLT) を使って商品情報や画像を表示する」 ためのカラクリはどうなっているのだろうか？ シーケンス図を描いてみたので、参考にしてみて欲しい。 sequence_amazon_xslt.jpg
「Amazon アソシエイトで、テンプレート (XSLT) を使って商品情報や画像を表示する」 ためのカラクリはどうなっているのだろうか？ シーケンス図を描いてみたので、参考にしてみて欲しい。 sequence_amazon_xslt.jpg
Posted on 2006-06-03 by yas |
« 先頭‹ 前12345次 ›最終 »