第7回 CM(アフィリエイトとか)を表示させる

さて。

またしばらく空いちゃいましたが。

CMというよりは、アフィリエイトを表示させる方法を説明します。

このシリーズを始めた当初は、このアフィリエイト部分もXML化しようかと
思ってたんですが、当HP改装を何度かやってるうちに、
「XML化する必要ないな・・・」
というところに落ち着きました。

なのでここでは、XSLにアフィリエイトのリンクを埋め込む方法を説明しようと思います。
「そんなの普通にアフィリエイトが提供しているリンクをそのまま貼ればｲｲｼﾞｬﾝ」
と思われるかもしれませんが。

実はそうもいかないのです。
というのは、提供されているリンクをそのままXSLに貼り付けても、HTMLに変換する際に
エラーが出る事が多いのです。

では試しにAmazonが提供しているリンクを見てみましょう。

<iframe src="http://rcm-jp.amazon.co.jp/e/cm?t=xxxx00-00&o=9&p=9
&l=st1&mode=music-jp&search=JAZZ&fc1=&=1&lc1=&lt1=&f=ifr&
bg1=" marginwidth="0" marginheight="0" width="180" height="150" border="0" frameborder="0"
 style="border:none;" scrolling="no"></iframe>

このリンク、HTMLとして書けば問題なく通ります。

が、XSLは通りません。

なぜかというと。

XSL内で「&」は普通には使えません。
そのまま使うと、エラーとなってしまいます。
ではどうするかというと、「&」の部分を「&amp;」に置き換えればOKです。

<iframe src="http://rcm-jp.amazon.co.jp/e/cm?t=xxxx00-00&amp;o=9&amp;p=9
&amp;l=st1&amp;mode=music-jp&amp;search=JAZZ&amp;fc1=&amp;=1&amp;lc1=&amp;lt1=&amp;f=ifr&amp;
bg1=" marginwidth="0" marginheight="0" width="180" height="150" border="0" frameborder="0"
 style="border:none;" scrolling="no"></iframe>


これで問題なくXSL内に埋め込むことが出来ます。

今度は楽天が提供しているリンクの場合。

<a href="http://pt.afl.rakuten.co.jp/c/00000000.00000000/?
url=http%3a%2f%2fevent.rakuten.co.jp%2fliving%2finterior%2f" target="_blank">
<img src="http://image.rakuten.co.jp/com/inc/directory-afl/share/img/icn/
mkt_interia.gif" border=0 alt="【楽天市場】インテリア市場"></a>

これもIE等では問題なく表示されます。
が、やはりXSLだとエラーとなります。

こちらは&も無いし、一見問題無いように見えますが、実はHTML文の規格としては
正しくない部分が２箇所あるんです。
IE等のブラウザは、若干のHTML文の間違いなら表示してくれますが、XSLはそんなに甘くなく
見事にエラーとしてつき返されてしまうのです。

では、どこが正しくないのかというと。
まず１つは、「border=0」の部分。
正しくは「border="0"」の様に、0をダブルクォートで括る必要があります。
もひとつは、imgタグ。
このimgタグ、このままだとちゃんと終わってないんです。
普通なら「<img src=・・・>イメージ1</img>」となるのですが
このimgタグには「</img>」がありません。
なので「</img>」を付けてあげればいいんですが、イメージに対して
テキストを割り付ける必要が無い場合は、「<img src=・・・ />」の様に
最後に「/」を付ける事で、そのタグは終了ですよ、ということに出来ます。
この二つを修正することで、XSL内に埋め込むことができます。

<a href="http://pt.afl.rakuten.co.jp/c/00000000.00000000/?
url=http%3a%2f%2fevent.rakuten.co.jp%2fliving%2finterior%2f" target="_blank">
<img src="http://image.rakuten.co.jp/com/inc/directory-afl/share/img/icn/
mkt_interia.gif" border="0" alt="【楽天市場】インテリア市場" /></a>


というわけで、今回は実際のHTML文を元に説明しましたが、まとめると
・特殊文字は使えないので、対応した記述方法に替える。
　ちなみに特殊文字は
　&:&amp;
　<:&lt;
　>:&gt;
　":&quot;
　':&apos;
　があります。
・HTML文はきっちり書く。
この二つのことを気を付けてれば、XSLに貼り付けても、問題なくHTMLに
変換されます。
うーん、今回はXMLとは無縁だったな・・・
でも実際にHP作ってアフィリエイト使う場合には、きっと役立つと・・・思う・・・
その他、XSL内でHTML書いても、なぜかエラーが出る・・・といった場合でも
この辺りを調べてみると、解決できるかもしれません。

次回は、Diaryの作成したいと思います。
Diaryについては、ここで使ってるものを説明する予定です。お楽しみに。

・・・っと、書き忘れてましたが、ここで紹介したAmazonと楽天のリンクは
あくまでサンプルですので、そのままでは使えません。お気をつけを。