楽天RMSでは、原則Javascriptやサーバサイドのプログラムが利用できません。しかし、GOLDの領域を利用すれば、Javascriptは可能になります。
楽天RMSからiframeでGOLD下のコンテンツを呼び出すことで、比較的自由にJavascriptを利用できます。
特にトップページは、GOLDのコンテンツが呼ばれるので、楽天RMSの制約なしに表現力の高いサイトが構築できます（※技術的に可能でも、楽天の制限規約がありますので、ご注意ください）。
しかし、これらのコンテンツ更新作業は、楽天RMS外での作業となり、あまりインターネットの知識のない作業者には、非常にストレスが大きいです。
たとえば、トップページに自店の商品売上ランキングなどを掲載されているところは多いと思います。
楽天RMSには自動的に自店のランキングコンテンツを生成してくれる機能がありません。
このようなコンテンツは、GOLDの領域にHTMLコンテンツを保存することが多いです。GOLDのHTMLを修正するには、ftpやHTMLの知識が必要で、ちょっと敷居が高いことでしょう。また、間違ってはいけないという心理的ストレスも大きいです。
こんなときは、
JSON(JavaScript Object Notation)で更新データを作成しておき、それをJavascriptでHTML生成するという風にしておけば、比較的わかりやすくなります。
以下のようなファイルを準備します。
- data.json – ランキングデータ(EUC-JP)
- write_ranking.js – ランキングHTML出力Javascript(EUC-JP)
- test.html – テスト用HTML(EUC-JP)
data.json
3位までのデータを定義してみます。urlは商品ページへのURLを、nameは商品名、imageは商品画像です。
HTMLより、ずっとわかりやすく、小さなデータで表現できます。もちろん、テキストデータです。
//
// ここではJSONP(JSON with Padding)形式で定義しています。
//
callback([
{ // 1位
"url" : "www.notice.co.jp",
"name" : "notice,inc.",
"image" : "www.notice.co.jp/wp-content/images/notice.png"
},
{ // 2位.
"url" : "www.notice.co.jp",
"name" : "notice,inc.",
"image" : "www.notice.co.jp/wp-content/images/notice.png"
},
{ // 3位.
"url" : "www.notice.co.jp",
"name" : "notice,inc.",
"image" : "www.notice.co.jp/wp-content/images/notice.png"
}
]);
write_ranking.js
こちらはdata.jsonで定義されたデータを読み込んで、HTMLに変換するJavascriptです。
ちょっとこちらはわかりにくいでしょうが、一度作成してしまえば、あまり見ることはありません。
//
// 出力するHTMLタグは自由に変更してください。
//
var callback = function(d) {
var snippet = '<ol>';
for (var i in d) {
snippet += '<li>';
snippet += '<a href="http://' + d[i].url + '" />';
snippet += '<img src="http://' + d[i].image + '" /></a>';
snippet += '<p>' + d[i].name + '</p>';
snippet += '</li>';
}
snippet += '</ol>';
document.write(snippet);
}
test.html
HTMLでは、write_ranking.jsをHEAD句で読み込んでおき、ランキングを表示したいところでdata.jsonを読み込みます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <script type="text/javascript" src="write_ranking.js"></script> <head> <body> <div id="box_ranking"> <h2>ランキング</h2> <script type="text/javascript" src="data.json"></script> </div> </body> </html>
※楽天RMSのコンテンツはEUC-JPを利用しなければなりません。
楽天サイトのようなUTF-8以外のコードを利用するコンテンツで、jQueryなどのライブラリで利用するときは、ちょっと工夫が必要ですが、通常のJavascriptなら問題ありません。
これを元に、色々工夫して、少しでも更新作業を楽に安心にしていただけると幸いです。
