楽天ウェブサービス sample002の解説について。

楽天ウェブサービス から取得したデータを、好みの HTML にカスタマイズするには、ちょっとコツが必要です。前回作成した sample002 のプログラムについて解説します。

JavaScript のプログラム内では、文字列は「"」ダブルクォーテーションでくくることになっています。

"あいう"

「'」シングルクォーテーションでくくることもできますが、シングルクォーテーションはダブルクォーテーションの中で、単に文字として扱いたい場合もあるので、ダブルクォーテーションを使ったほうがわかりやすいです。

"<a href='" + affiliateUrlValue + "'>"

また HTML タグも文字列として扱いますので注意してください。変数は文字列ではないので、ダブルクォーテーションの外に出します。

このダブルクォーテーションの中に入れたり、出したりという感覚が掴めれば、簡単にプログラミングができるようになります。


■item.js側

(1)pタグ開始の部分です。

tmpHtml += "<p>";


(2)商品名をアフィリエイトリンクにする部分です。

tmpHtml += "<a href='" + affiliateUrlValue + "'>" + itemNameValue + "</a><br />";


(3)商品価格を太字にして、「円」の文字を付ける部分です。

tmpHtml += "<b>" + itemPriceValue + "円</b><br />";


(4)商品画像をアフィリエイトリンクにする部分です。

tmpHtml += "<a href='" + affiliateUrlValue + "'><img src='"+ mediumImageUrlValue + "'></a><br />";


(5)商品説明文を200文字以内にする部分です。

if(itemCaptionValue.length >= 200){
  tmpHtml += itemCaptionValue.substring(0, 200) + "<br />";
}else{
  tmpHtml += itemCaptionValue + "<br />";
}

「itemCaptionValue.length」で商品説明文の文字数を調べ、200文字以上なら1文字目から200文字目までを取り出し、200文字未満ならそのまま表示しています。

ポイントは最初の文字を 0番目 と数えることと、最後の文字 -1 までになることです。


"abcdefghij".substring(3, 6); "def" になる

"あいうえおかきくけこ".substring(3, 6); "えおか" になる

"aあbいcうdえeお".substring(3, 6); "いcう" になる

"aあb い/c うd".substring(3, 6); "い/" になる

0番目から数えるので 3 は実際には4文字目、6は実際には7文字目なのですが -1 するので、そのまま6文字目までということになります。ちょっとややこしいですね。

したがって1文字目から200文字目までを取り出すには、以下のようになります。
itemCaptionValue.substring(0, 200)

全角、半角、全角空白、半角空白も1文字として数えます。実際にはいろんな記号も入ってくるので、思ったような文字数にならないことがあるかもしれません。


(6)pタグ終了の部分です。

tmpHtml += "</p>";


(7)水平タグの部分です。

tmpHtml += "<hr />";


当講座のWebサイト上では、幅が狭いのでわかり難いと思いますが、プログラムは「;」セミコロンまでが1行(文)です。コピーしてテキストエディタに貼り付けるとよくわかります。


【ワンポイント】

今回はわかりやすいように、わざと1行にしましたが、プログラムは長いと見難いので、文字列を連結するコツを掴んだら、適当な長さで改行するようにしてください。


tmpHtml += "<a href='" + affiliateUrlValue + "'>";
tmpHtml += itemNameValue + "</a><br />";

もっと細かく分けてもかまいません。


ここまで来ると、楽天ウェブサービスの商品データを使って、いろんなWebページが作れるようになります。いろいろ試してみてください。


スポンサードリンク

スポンサードリンク






楽天ウェブサービス初心者入門講座TOPへ