アマゾンウェブサービスをXSLTスタイルシートで！

11 6 月 2008 In: ウェブサービス

アマゾンのAPI（Amazon Web Service）を利用して、
このブログの更新を楽にするツールを作ってみました。
⇒XSLTスタイルシートを利用したAmazon Web Service

ツールの内容は、
ブログの記事でアマゾンの本などを紹介する時に、
本のシンプルな画像をフロートを使って右側に掲載するものです。

※ツール使用の例としては、この記事の下の方にある、
「10日でおぼえるXML入門教室第2版」の画像が、
このツールを使ったものです。

このツールを作るまでは、
自分で画像をダウンロードして、、、
というような面倒な作業をしていたので、
少しだけブログの更新が楽になりました。

【ツールのメリット】

記事の外観を損ねない（シンプル！）
画像の処理からの開放
ソースが軽い（tableではなくfloatを使用）

他のサービスは、なぜかテーブルレイアウトばかりで、
ソースも外観もシンプルじゃない。

フロートを使って、リンクも貼らない。
こんなシンプル感じが好きなのは、ぼくだけかな。

XMLの処理

アマゾンAPIの使い方は、
調べてみたら、いろいろな用い方があるようです。

今回、とりあえずは、仕様を理解するためにも、
アマゾンから受け取るXMLの扱いには、XSLTスタイルシートを選択しました。
なぜなら、簡単そうだったからです。

実際、XSLTスタイルシートの理解は、
それほど難しくありません。

しかし、最初はPHPの勉強のために、
アマゾンAPIを利用して。。。と思っていたのですが、
XMLの処理に「XSLTスタイルシート」を選択したために、
まったくPHPを使わない。
というようなことになりました。笑

XSLTスタイルシートのコード



<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:aws="http://webservices.amazon.com/AWSECommerceService/2008-04-07">

<xsl:output method="html" encoding="utf-8"/>

<xsl:template match="/">
<html lang="ja">
<head>
<title>XSLTスタイルシート</title>
</head>
<body>

<xsl:apply-templates select="aws:ItemSearchResponse/aws:Items/aws:Item"/>

</body>
</html>
</xsl:template>

<xsl:template match="aws:ItemSearchResponse/aws:Items/aws:Item">
<xsl:apply-templates select="aws:MediumImage"/>
<p>タイトル：
<xsl:element name="a">
<xsl:attribute name="href">
<xsl:value-of select="aws:DetailPageURL" />
</xsl:attribute>
<xsl:attribute name="target">_blank</xsl:attribute>
<xsl:value-of select="aws:ItemAttributes/aws:Title" />
</xsl:element>
<br />
著者：<xsl:value-of select="aws:ItemAttributes/aws:Author" />
</p>

<p>（１）画像をfloatで右側に移動（リンクなし）※そのまま貼り付けOK</p>
<textarea cols="100" rows="3">
<xsl:element name="img">
<xsl:attribute name="src">
<xsl:value-of select="aws:MediumImage/aws:URL" />
</xsl:attribute>
<xsl:attribute name="width">
<xsl:value-of select="aws:MediumImage/aws:Width" />
</xsl:attribute>
<xsl:attribute name="height">
<xsl:value-of select="aws:MediumImage/aws:Height" />
</xsl:attribute>
<xsl:attribute name="alt">
<xsl:value-of select="aws:ItemAttributes/aws:Title" />
</xsl:attribute>
<xsl:attribute name="style">float:right;</xsl:attribute>
<xsl:attribute name="border">0</xsl:attribute>
</xsl:element>
</textarea>

<p>（２）画像をfloatで右側に移動（リンクなし）※別途CSS表記</p>
<textarea cols="100" rows="3">
<xsl:element name="img">
<xsl:attribute name="src">
<xsl:value-of select="aws:MediumImage/aws:URL" />
</xsl:attribute>
<xsl:attribute name="width">
<xsl:value-of select="aws:MediumImage/aws:Width" />
</xsl:attribute>
<xsl:attribute name="height">
<xsl:value-of select="aws:MediumImage/aws:Height" />
</xsl:attribute>
<xsl:attribute name="alt">
<xsl:value-of select="aws:ItemAttributes/aws:Title" />
</xsl:attribute>
<xsl:attribute name="class">floright</xsl:attribute>
<xsl:attribute name="border">0</xsl:attribute>
</xsl:element>
</textarea>
<p>florightのスタイルシート※CSSファイルに記入してください</p>
<textarea cols="50" rows="2">.floright { float: right; }</textarea>
</xsl:template>

<xsl:template match="aws:MediumImage">
<p>
<xsl:element name="img">
<xsl:attribute name="src">
<xsl:value-of select="aws:URL" />
</xsl:attribute>
<xsl:attribute name="width">
<xsl:value-of select="aws:Width" />
</xsl:attribute>
<xsl:attribute name="height">
<xsl:value-of select="aws:Height" />
</xsl:attribute>
<xsl:attribute name="alt">
<xsl:value-of select="../aws:ItemAttributes/aws:Title" />
</xsl:attribute>
</xsl:element>
</p>
</xsl:template>

</xsl:stylesheet>