楽天ウェブサービス から取得したデータを、好みの 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ページが作れるようになります。いろいろ試してみてください。
スポンサードリンク
スポンサードリンク
