2004年05月21日

Amazon アソシエイト解説 3：XSLTでHTMLタグを書く方法

G-Toolsで利用しているAmazonのWEBサービスについて、前回の「Amazon アソシエイト解説 2：WEBサービスからXSLTで簡単なHTMLを作成」では、基本的なXSLTの構造を理解しました。

アマゾンのWEBサービスから取得した商品情報XMLに、簡単なXSLTファイルsimple.xslを適応することで、画像やリンクを含むHTMLページが表示されるのが確認できたと思います。

XSLTによってHTMLを作成する際に、まず第一に必要なのは、アマゾンの商品情報XMLから必要な情報を切り出す作業です。HTMLを作成するためには、商品のタイトル、商品画像のURL、アマゾンのリンク先を指定するためのASIN番号（商品を特定するID）などが必要です。XSLT内で記述されている、

<xsl:apply-templates select="ProductInfo/Details" />

によって、商品情報XMLの中の<ProductInfo><Details>の部分を見つけて、変換ルールである

<xsl:template match="Details">

を適応するわけですが、この部分の先頭に以下のタグが並んでいます。

<xsl:variable name="asin" select="Asin" />
<xsl:variable name="name" select="ProductName" />
<xsl:variable name="img" select="ImageUrlSmall" />

<xsl:variable />というのは、この変換ルールの中で使用する変数の宣言のようなものです。簡単に言うと、毎回毎回、必要な情報を商品情報XMLから探してくるのは大変なので、一度探した情報は名前をつけて一時的に保存しておいて、何回でも使えるようにしましょう、ということですね。
タグの中身は、select=""で指定されたタグをXMLの中から探してきて、それをname=""という名前をつけて保存しておきましょう、という意味になります。商品情報XMLの<Details>の中には

<Asin>4873111811</Asin>
<ProductName>Amazon Hacks 世界最大のショッピングサイト完全活用テクニック100選</ProductName>
<ImageUrlSmall>http://images-jp.amazon.com/images/P/4873111811.09.THUMBZZZ.jpg</ImageUrlSmall>

というタグがあるので、この中身がそれぞれ asin, name, imgという名前をつけて保存されることになります。保存された情報を利用する際には、名前の前に$をつけて

<xsl:value-of select="$img" />

という形で呼び出すことができます。ところで、もう一つ

<xsl:variable name="baseurl">http://www.amazon.co.jp/exec/obidos/ASIN/</xsl:variable>

というタグもあります。この場合は、商品情報XMLから取得する情報ではなくて、自分がXSLTの中で繰り返し使いたい情報を、あらかじめ指定することができます。例えば何かの都合で、URLを変更しなくてはいけなくなったときに、XSLT内に何十箇所も記述してあったら、修正が面倒ですよね？繰り返しの手間を省くために、自分でも情報を指定できるようになっています。

このように、繰り返し使う情報ではなく、一回だけしか使わないのであれば、以下のように記述することで、商品情報XMLの中から一致するタグを探して、情報を表示することができます。

<xsl:value-of select="ImageUrlSmall" />

必要な商品情報を取得できたところで、HTMLタグに変換してみましょう。ところで、simple.xslの中で、画像やリンクを作成しているタグが、普通のHTMLタグとはちょっと違うことに気付かれたと思います。例えば、おなじみの画像を表示するタグである

というHTMLタグが、なんだか複雑に書かれています。

これはXSLTファイルがXML形式として、ちゃんと成立していなくてはいけないのが理由です。例えば、おなじみのHTML形式で書こうとすると、

<img src="<xsl:value-of select="$img" />" border="0">

となってしまって、タグの中にタグが入る、というような変な構造になってしまいます。そうすると、XMLをHTMLに変換してくれるXSLTプロセッサーが、どのようなルールで変換をすればいいのか、分からなくなってしまうわけです。そのために、タグ構造をきちんとした階層構造に保つために、少し複雑な書き方になっています。
ただし、内容的には同じ事を指定してるわけで、この場合<img>タグの中に、"src"という属性（attribute）として$imgの値を持ち、同時に"border"という属性には"0"が指定されているタグである、という意味になります。要するに今まで何気なく書いていた、<img src="" border="">というタグには、そういう意味があったということですね。

これは<a href="" target="_blank">という記述に関しても同様になります。ただしhref=""の部分で見慣れない単語があります。

<xsl:value-of select="concat($baseurl, $asin, '/ref=nosim/goodpic-22/')" />

<xsl:value-of select="" />は、指定した情報を取得するという意味だとわかりますが、concat()とはなんでしょう？
これはXPath関数といって、XSLTで変換ルールを記述するときに使える、便利なツールのようなものです。concat(文字列1,文字列2,…)は、複数の文字列を連結することができる関数で、この場合は、’http://www.amazon.co.jp/exec/obidos/ASIN/’+ ’4873111811’+ ”’/ref=nosim/goodpic-22/’が連結されて、’http://www.amazon.co.jp/exec/obidos/ASIN/4873111811/ref=nosim/goodpic-22/’というアフィリエイトIDが付いたアマゾンへのURLが作成されることになります。
このようなXPath関数は他にも幾つかあるのですが、AmazonのXML WEBサービスを使うぐらいなら、必要なのはconcat()ぐらいかな？と思います。他にどのようなXPath関数があるかは以下のサイトを参照してください。

＠IT:XMLテクニック集　XPath関数で部分テキストを出力する

以上が、<img src="" />や<a href="">などのHTMLタグへの変換ルールを、XSLTで記述するための基本になります。

1.　<xsl:value-of select="" /> でXMLから情報を取得
2.　繰り返し使うものは<xsl:variable name="img" select=""/>で一時保持
3.　表示する際は　<xsl:value-of select="$img" />
4.　HTMLのタグを、XMLのルールに則って記述する

というXSLT変換ルールの記述方法は、基本的にはどんな商品情報、HTMLタグでも共通なので、これだけの知識でも、それなりのページを出力することができると思います。XMLの書式にさえなれてしまえば、動的なページが簡単に作れるわけで、この点がAmazonのREST/XSLT機能の素晴らしいところですね！

次回は、商品が複数あった場合のXSLTタグの使い方をまとめてみたいと思います。

Posted by jkanekomt at 2004年05月21日 00:30 | trackBack

Comments